[원티드 프리온보딩] TIL - (21)

5월 31일

모아데이터 과제 진행 현황

팀원들과 현재까지 진행한 구현물들을 어느 정도 합치는 작업을 하였다. 합치는 과정에서 발생한 컨플릭트들을 해결하며 코드를 통일하였고, 서로의 코드에 대해 이해할 수 있었으며 이를 기반으로 추가적인 구현을 해 나갈 예정이다. 또한 구현 과정에서 어려움이 있는 팀원들의 코드를 파악하고 보완할 수 있도록 알려줌으로써 팀원들은 물론 나도 공부를 하는 시간을 가질 수 있었다.

Session

디자인 트렌드의 변화

스큐어모피즘(Skeuomorphism) -> 메트로(Metro) -> 머티리얼 디자인(Material Design)

모의 면접

갑작스럽게 모의 면접자로 지목이 되어 수영님과의 모의 면접을 진행하였다. 인성 질문은 그래도 내가 가지고 있던 가치관을 설명함으로써 잘 넘길 수 있었던 것 같은데, 기술 질문은 그러지 못했다. 분명 모두 공부하고 정리도 했던 내용들인데 시간이 어느 정도 지나고 나니 까먹은 부분들도 많고 부분적으로만 기억나는 것들이 많았다. 이러한 부분들에 대해선 관련 문서들을 다시 읽어보고 과거에 정리했던 내용들을 보완하는 시간을 꼭 가져야 할 것이며, 아무리 구글링과 편법 등을 통해 당장에 구현을 잘하더라도 정석적인 지식과 방법을 모르면 분명 벽에 막힐 수 밖에 없다고 생각하는 만큼 이론적인 공부를 소홀히 하지 말아야겠다.

callback과 promise의 차이

callback과 promise는 둘 다 비동기 로직을 처리하기 위해서 사용할 수 있는 공통점이 있지만, callback은 비동기 로직을 callback 함수 내에서만 처리해야 한다. 반면에 promise는 로직이 끝나면 결과값을 담은 promise 객체가 반환 되기 떄문에 함수 외부에서도 접근하여 처리할 수 있다. 이 덕분에 callback이 계속 연결되며 함수가 깊어지는 소위 ‘콜백 지옥’에서 벗어날 수 있다.

컴포넌트가 렌더되는 횟수

useEffect의 dependency, setState의 횟수와 위치 등을 잘 고려해야 하며 object와 배열은 참조값이 존재하기에 렌더 될 때마다 새로 생성이 된다는 점을 잊으면 안된다.

🔗이벤트 루프란?

🔗클로저

외부 함수 안에 내부 함수가 존재하는 상황에서 내부 함수는 외부 함수의 콘텍스트에 존재하는 변수에 접근할 수 있는데, 이를 렉시컬 스코핑이라고 한다.
이 때, 외부 함수를 변수에 할당하고 그 변수를 호출하면 외부 함수가 할당 과정에서 호출이 완료되어 소멸했음에도 불구하고 내부 함수는 외부 함수 콘텍스트 상에 존재하던 변수에 접근할 수 있는데, 이러한 렉시컬 스코핑을 클로저라고 한다.

🔗이벤트 버블링, 캡쳐링

state를 직접 수정할 시 발생하는 오류가 무엇이 있는가?

리액트는 setState가 이루어짐에 따라 컴포넌트를 재렌더한다. 하지만 직접 수정할 시 재렌더가 이루어지지 않기 때문에 화면에 원하는 내용이 표시되지 않을 수 있다. 뿐만 아니라 setState에 함수를 전달하여 state를 변경하는 경우 함수의 인자에는 state가 변하기 바로 직전의 값이 들어가는데, state가 직접 수정되었을 경우 이 값이 setState의 이전 값과 다를 수 있어 버그가 발생할 우려가 있다.

useMemo, useCallback

useMemo는 값에 대한 메모이제이션이며 useCallback은 함수에 대한 메모이제이션이다. 그리고 두 함수 모두 의존성 배열을 전달하여 그 배열 안에 설정된 값에 따라 재생성이 되도록 할 수 있다. 그렇다면 값과 함수의 불필요한 재생성을 위해 모든 곳에 이 함수들을 사용하면 되지 않겠냐는 의문이 생기기 마련인데, 메모이제이션이 이루어진 값과 함수들은 모두 메모리의 일정 부분을 차지하기 때문에 그 양이 많아지면 성능 저하가 일어날 수 있어 이는 지양해야 한다. 그렇기에 메모이제이션은 코드의 규모가 크고 변화할 일이 적으며 해당 값과 함수를 담고 있는 컴포넌트의 렌더가 자주 일어날 상황에서 사용을 하는 것이 옳다.

🔗리덕스의 동작 방식

CORS (Cross Origin Resource Sharing)

서버와 브라우저 간에 서로 통신을 할 때, 서버는 브라우저가 자원에 접근하는 것에 대해 권한을 부여하고 이를 알려줘야 한다. 그러지 않을 시 브라우저 측에선 해당 자원에 접근하는 것이 안전하지 않다고 판단하여 통신을 차단해버리는데, 이 때 발생하는 것이 CORS 오류이다. 서버 측에서 브라우저에게 접근에 대한 권한이 있음을 알리는 대표적인 방법은 응답 헤더의 Access-Control-Allow-Origin에 접근을 허용할 출처를 반환하는 방법이다.
참고로, CORS는 브라우저단에서 판단하는 요소이기 때문에 서버와 서버 간의 통신에선 CORS와 관련된 작동이 발생하지 않는다.

추후 정리해야 할 점

쿠키, 세션, 웹스토리지

크롬 브라우저에 주소를 치면 벌어지는 일

자바스크립트에서의 this

CSR, SSR

HTTP와 HTTPS의 동작 방식

리액트의 장점

vitrual dom, component, props and state

이벤트 루프

setState에 await을 붙이면

클래스형과 함수형의 차이

각각 어떻게 렌더가 되는지에 대해 설명할 수 있어야 하며 상태가 어떻게 유지 되는지에 대해 이해할 수 있어야 한다.