토스 Frontend Accelerator 1기 문제 모음

블로그 포스팅 링크를 공유하면, 공유된 게시물에 포스팅의 제목과 썸네일 이미지가 포함된 미리보기를 보여주려고 해요. 다음보기 중 어떤 작업을 해야하는지 모두 고르세요.
- [ ] title 태그에 블로그 포스팅의 제목을 추가한다.
- [x] meta 태그를 사용하여 Open graph 정보를 추가한다.
- [x] 블로그가 client-side rendering을 사용중이라면 server-side rendering으로 변경한다.
- [x] 블로그 HTML, CSS, JS를 서빙하는 서버에 robots.txt를 추가한다.
다음 보기 중 div에 적용되었을 때 Reflow가 발생하는 CSS 속성을 모두 고르세요.
```
<div
	style={{
		width: '140px',
		height: '140px',
		color: 'red',
		fontSize: '14px',
		backgroundColor: 'green',
	}}
/>
```
- [x] width: 120px;
- [ ] color: blue;
- [x] font-size: 12px;
- [ ] background-color: red;
- [ ] transform: scale(1.2);
이미지의 모서리를 둥글게 만드는 css 속성
- [x] border-radius
- [ ] overflow
- [ ] width
- [ ] height
- [ ] display
p 엘리먼트 내부의 텍스트를 두 줄로 보여주기 위한 css 속성
- [x] word-break
- [x] white-space
- [ ] text-overflow
- [ ] line-break
소수점이 있는 수와 다른 수를 연산할 때 정확한 결과가 나올지 않을 수 있는 연산
- [x] 덧셈
- [x] 뺄셈
- [x] 곱셈
- [x] 나눗셈
try-catch문에서 http 요청 실패해도 catch문으로 가지 않음
```
function getUser(){
	try{  
		http.get('/users/1');
		alert("success');
	}catch{
		alert("error');
	}
}
```
여기서 실패했는데도 success alert만 나타나고 error alert가 나타나지 않는 원인?
- [x] http.get함수가 리턴하지 않아서
- [ ] http.get함수가 암것도 throw하지 않아서
- [ ] http.get함수가 throw했으나 비동기함수라 catch로 넘어가지 않음
- [x] getUser함수가 Promise를 반환하지 않아서
- 해설
타입이 맞는상황? (or 에러가 나는 상황)
```
interface A{
	ok?: boolean;
}
```
- [x] const a: A = {ok: true};
- [x] const a: A = {ok: false};
- [x] const a: A = {ok: undefined};
- [ ] const a: A = {ok: null};
- [x] const a: A = {};
아래 코드 확인
```
function identify<T>(v:T): T{
  return v;
}
```
- [ ] identify(1) == 1 ⇒ true
- [x] identify(1) != 2 ⇒ false
- [x] identify(Math.random()) != 2 ⇒ false
- [ ] identify(Math.random()) != 2 ⇒ Type 에러 발생
TickTock 컴포넌트는 1초마다 실행되어져야 한다. 근데 1초 미만으로 실행되고 있다. 이유는?

https://chatgpt.com/share/10ea0296-eacc-4d82-81d3-979e15121f4e
```
const App= ()=>{
	const [time, setTime] = useState(0);
	
	useEffect(()=>
	
	return (
		<TickTock
			interval={1000}
			onTick={()=>{setTime(prev=>prev+1)}}
		/>
	)
}

const TickTock = (intertal, onTick) => {
	useEffect(() => {
		onTick();
		
		const handle = setInterval(() => onTick(), interval);
		return () => clearInterval(handle);
		
	}, [onTick]);
	
	return null;
}
```
- [x] TickTock이 null을 리턴하기 때문이다. → 나 픽
- [x] TickTock의 onTick prop으로 메모이제이션되지 않은 함수를 전달했기 때문이다. → 오빠 픽
- [ ] TickTock의 useEffect에서 setInterval콜백이 실행되기 전 onTick을 호출하기 때문이다.
- [x] TickTock setTimeout 대신 SetInterval 을 사용했기 때문이다. → 둘 픽
- [ ] setInterval의 콜백이 이벤트 루프의 Macrotask Queue에 들어갔기 때문이다.
아래 코드 확인
```
interface A{
  a: 'stedsf',
  b: 3
}

interface B{
  a: 'xcccv',
  b: 2
}

type Result = (A | B);

const result: Result = {
  a: 'stedsf',
  b: //???
}
```
- [ ] a에 들어갈 타입은 string이다.
- [ ] b에 들어가는 타입은 2 | 3 이다.
- [ ] b에 들어가는 타입은 number이다.
string이 빈값임을 알수있는 수 있는 조건식은? ( null, undefined, ‘’ 을 빈값이라고 가정한다. )
```
interface A {
	text?: string;
}
```
- [x] !!text
- [x] text?.length > 0
- [x] text != undefined && text?.length > 0
- [ ] text != null && text?.length > 0
아래처럼 브라우저와 node.js 환경에 따라 적합한 라우터를 반환하는 isomorphicRouter 함수를 만들었습니다. 그런데 node.js 안에서 이 함수를 실행했더니 에러가 발생합니다.

다음 보기 중 에러가 발생하는 원인으로 볼 수 있는 것을 모두 고르세요.
```
import { nodeRouter } from '@tosslib/routers';

function isomorphicRouter () {
	const router =
		env ==='browser'
		? { push: window.history.push } : nodeRouter();
		
	return router;
	
	const env =
		window === undefined ? 'node' : 'browser';
```
- [ ] isomophicRouter 함수 아래에 env를 선언했기 때문
- [ ] window 를 null과 비교하지 않았기 때문
- [x] window의 존재 유무를 router 함수 밖에서 판단했기 때문
- [ ] global 객체로 등록되지 않은 window를 참조했기 때문
- [x] node.js 에는 window가 없는데 env가 browser 일 때 window.history에 접근했기 때문

모두 고르시오

const A = () => {}; // State 사용 => Controlled Input
const B = () => {}; // Ref 사용 => Uncontrolled Input

[ ] A는 Controlled Input, B는 Uncontrolled Input