● 기술면접준비
- UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
UI란 유저인터페이스로, 사용자가 어떠한 기기나, 서비스를 사용할 수 있도록 하는 접점을 이야기합니다. 컴퓨터같은 경우는 키보드 마우스를 예시로 들 수 있습니다. UX는 user-experience로 사용자의 경험을 뜻합니다. 좋은 UI는 더 좋은 유저 경험을 제공할 수 있습니다. 예를 들어, 키보드에 있는 숫자가 오름차순이 아니라, 숫자들이 뒤죽박죽 순서대로 놓여있었다면 사용자들은 키보드를 사용할 때 좋지 않은 경험을 할 수 있습니다. 따라서 사용자가 불편함을 겪고있는 UX가 어느 부분인지 찾아, UI를 개선해야합니다.
- Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
Styled-Components 이전에는, 매번 각 컴포넌트에 맞게 CSS파일까지 관리해야해서 파일의 양이 늘어나고 복잡해진다는 점이 있었습니다. sass와 같은 다양한 css 언어들이 등장하면서, css의 파일 크기또한 커지게 되었습니다. 하지만 이러한 부분들이 styled Components로 해결된다는 것이었는데요, react, vue처럼 styled Component를 사용하게 되면, css도 컴포넌트 단위로 개발할 수 있게 되고, 네이밍 최적화도 신경쓰지 않아도 되는 점이 장점이라고 느꼈습니다.
- useRef가 필요한 상황을 예시를 들어 설명해 주세요.
직접적으로 DOM에 접근해야하는 경우에는 useRef를 사용해야합니다. 예를 들어, 어떤 버튼을 눌렀을 때, input 태그에 focus되는 작동을 하고 싶다고 가정을 해보겠습니다. document.querySelector와 같은 방식으로 DOM에 접근하게 된다면, 리액트 내의 virtualDOM이 제대로 작동하지 않을 수 있기 때문에 useRef hook을 사용해서 input 태그를 참조하고, focus 이벤트를 주는 방식으로 DOM에 접근해야합니다.
- 상태관리 라이브러리의 필요성에 대해서 설명해 주세요.
작은 프로젝트 같은 경우에는 state만으로도 상태관리를 해도 괜찮지만, 프로젝트가 커질 경우 상태관리가 힘들어지게 됩니다. 자식컴포넌트가 state를 변경하고 싶은 함수를 사용한다고 했을 경우, 부모 컴포넌트는 자식컴포넌트에게 props로 넘겨주면서 props chaining이 발생하게 됩니다. state변경함수를 받으려는 컴포넌트 사이에 많은 컴포넌트들이 있다고 가정한다면, 사이에 있는 컴포넌트들은 전달해주는 역할만 하게되기때문입니다. 따라서 이를 해결하기 위해서 상태라이브러리인 redux, recoil 등을 사용할 수 있습니다.
- Redux의 주요 개념들과 연결 관계를 설명해 주세요.
redux는 dispatch, action, reducer, store 라는 4가지 개념으로 나눌 수 있습니다. 먼저 dispatch는 컴포넌트에서 store에 있는 값을 변경하고 싶을 때, 값을 변경시킬 수 있는 항목중 한가지의 action을 리듀서에 dispatch라는 함수를 사용하여 액션객체를 보내줍니다. 그러면 리듀서함수는 액션객체를 받고, 어떻게 값을 변경해야할지 파악 후 store에 있는 값을 변경하게 됩니다. 따라서 store에 있는 값을 직접적으로 변경하는 것은 위험한 일이기 때문에 작업의 흐름을 단방향적으로 설정하여 절차에 따라 값을 변경하게끔해 상태안정성을 유지할 수 있습니다.
- Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
시맨틱 HTML을 사용하지 않고 <br>이나, 무분별한 <div> 태그만 사용하게 된다면 개발자들 사이에서도 어떤 기능으로 활용되고 있는 태그인지 파악하기 어렵게 됩니다. 또한 일반 비장애인뿐만아니라 장애인분들도 컴퓨터를 사용하면서 스크린리더를 통해 컴퓨터에 있는 내용을 파악하게 되는데, 시맨틱태그를 활용하지 않게 된다면 장애인분들이 스크린리더를 통해서 화면의 내용을 파악하기가 쉽지 않아집니다. 또한, SEO 최적화또한 좋지 않게 됩니다. 따라서 시맨틱태그를 준수하지 않고 무분별하게 태그를 사용하게 된다면 좋지 않은 점이 많기 때문에 이러한 점을 해결하기 위해서는 시맨틱태그를 활용하는 것이 좋습니다.
- IP 프로토콜의 한계에 대해서 설명해 주세요.
IP프로토콜 같은 경우에는, TCP프로토콜에 비해 효율적이고 빠르다는 장점이 있지만, 비연결성, 비신뢰성이라는 한계점이 있습니다. 만약 데이터를 전달받을 컴퓨터가 인터넷 연결이 끊어진 상태라면 IP프로토콜은 상대 환경을 파악하지 않고 데이터를 전송하게 됩니다. 이를 비연결성이라고합니다. 또한 IP프로토콜은 상대가 데이터를 제대로 잘 전송을 받았는지 확인할 방법이 없습니다. 이를 비신뢰성이라고 합니다. 따라서 데이터를 확실하게 잘 전달해야한다면 TCP 프로토콜을 활용하는 것이 좋습니다.
- Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
서버에서 쿠키를 전송하게 된다면, 쿠키는 자동적으로 브라우저에 저장됩니다. 따라서 서버와 클라이언트는 저장된 쿠키를 주고받으면서 로그인과 같은 기능을 유지할 수 있게 됩니다. 하지만 MaxAge, Expires 속성을 설정하지 않으면 쿠키는 브라우저에 영속적으로 저장됩니다. 따라서 어떤 악성유저가 쿠키를 탈취해 서버에 로그인 요청을 하게 된다면, 서버는 클라이언트 브라우저에 저장된 쿠키를 삭제할 수 없기 때문에 서버에 계속 응답을 할 수 밖에 없게됩니다. 따라서 만료기간을 설정하지 않으면 보안적인 문제가 생길 수 있기 때문에 만료시간을 설정해주는 것이 좋습니다.
