재귀
재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.
재귀함수란 자기 자신을 호출하는 함수를 말합니다.
주어진 문제를 비슷한 구조로 더 작게 나눌 수 있는 경우입니다.
피보나치 수열이 바로 이 예가 될 수 있습니다. 피보나치 수열의 원리는 n번째 수는 n-1번째 수와 n-2번쨰 수를 더한 값으로 동일한 원리를 가집니다. 함수의 인자만 바꾸고 다시 이 원리를 통해 n번째 수를 구한다면 재귀를 이용하여 더 간편하게 문제를 해결할 수 있습니다.
UI/UX
UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
UI 는 User Interface 로 사용자와 컴퓨터 간 상호작용하는 것을 말합니다.텍스트로만 컴퓨터와 상호작업하는 방법을 CLI command Line Interface와 Graphic User Interface GUI 로 사용자가 그래픽을 통해서 컴퓨터와 정보를 교환하는 것
UX는 User Experience 로 사용자가 어떤 서비스를 직 간접적으로 사용하면서 누적시킨 총 경험을 말합니다.
유용성, 사용성, 매력성, 신뢰성, 접근성, 검색 가능성, 가치성 등의 7가지 요소로 UX를 나타낼 수 있고 각각이 뛰어나기 보다는 여러방면으로 둥근 7각형을 만드는 것이 좋습니다.
UX는 UI를 포함하는 개념입니다. 좋은 UI가 좋은 UX를 보장하지 않고 또한 좋은 UX는 좋은 UI를 보장하지 않습니다. 그치만 나쁜 UI는 나쁜 UX를 유발하는 것은 맞습니다.
UI와 UX는 서로 보완하는 관계로써 좋지 않은 UI 를 개선해서 UX도 개선할 수 있고, UX를 수정하면서 UI를 개선할 수 있습니다.
Custom Component
Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
개발을 할 때 웹의 틀을 잡는 HTML 과 기능 작업을 하는 JS파일 그리고 스타일을 설정하는 CSS 파일로 총 세가지로 개발을 하였는데, React 는 컴포넌트 단위로 작업을 하고 styled-components 라이브러리를 사용하여 작업하면서 HTML, CSS 파일을 JS 파일 한 군데에서 작업할 수 있도록 한 것입니다.
굳이 css 파일을 만들지 않고 한 파일에서 작업할 수 있어 메모리 부분에서 효율적입니다.
id나 class명을 작성하고 찾아가면서 그에 맞는 스타일 속성을 지정했는데, 그럴 필요가 없어서 시간을 단축시킬 수 있습니다.
useRef가 필요한 상황을 예시를 들어 설명해 주세요.
자바스크립트를 사용할 때는 getElementById나 querySelector 와 같은 DOM Selector 함수를 사용해서 요소의 DOM을 직접 접근하여 조작할 수 있었습니다.
하지만 REACT 는 DOM을 직접 조작할 수 없기 떄문에 useRef 를 사용합니다.
Redux
상태관리 라이브러리의 필요성에 대해서 설명해 주세요.
상태를 나타내고 필요한 상태를 사용하기 위해 매번 상위 컴포넌트에서 하위 컴포넌트로 전달하는 방식인 props drilling 을 사용했습니다. 하지만, 그 상태가 필요하지 않는 컴포넌트들은 상태가 변경될 때마다 렌더링 때마다 쓸데없이 전달하느라 시간이나 메모리를 많이 소요하게 되었고 어느 포인트에서 오류가 나면 관여하는 컴포넌트가 많다보니 오류 지점을 찾는 데에도 어려움을 겪습니다.
상태관리 라이브러리는 저장공간을 한 군데에서 관리하여 유지 보수가 용이하고, 상태를 사용하고 싶을 때 저장공간에 접근하여 쉽게 사용할 수 있어 시간과 메모리를 아껴 props drilling 을 방지할 수 있습니다.
Redux의 주요 개념들과 연결 관계를 설명해 주세요.
React 에서는 데이터가 Action Dispatch Reducer Store 순으로 단방향으로 흐르게 됩니다.
① 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
② Action 객체는 Dispatch 함수의 인자로 전달된다.
③ Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다. ➡️ Dispatch 함수는 Reducer 함수에게 상대 변경 신청을 하는 역할
④ Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
⑤ 상태가 변경되면, React는 화면을 다시 렌더링 한다.
즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
semantic 요소에는 header, main, nav, article, section, footer 등이 있습니다.
div 와 span 과 달리 id나 class명 따로 없이 의미를 갖는 태그를 이용하여 해당 요소가 어떤 역할을 하는지 쉽게 파악할 수 있습니다.
semantic html 을 사용하면 개발자간의 소통이 원활해지고 검색효율성과 웹 접근성면에서 효율성을 가집니다,
웹 접근성을 갖추면 웹에 접근했을 때 사용자가 고령자이든 장애인이든 항상 동등한 수준의 정보를 제공받도록 보장받을 수 있습니다.
예를 들어 스크린 리더가 있습니다. 고령자든 장애인이든 스크린 리더를 통해 비장애인과 같은 입장에서 서비스를 이용하도록 보장받습니다.
네트워크 심화
IP 프로토콜의 한계에 대해서 설명해 주세요.
IP란 인터넷 프로토콜로 인터넷에서 정보를 수신하고 통신에 대한 규약을 말합니다.
인터넷 세상에서는 운영체제도 다르고 구사하는 언어가 다르기 때문에 IP를 통해서 통일된 규약을 만들어 이 규약을 지키면서 통신을 하는 것입니다.
송수신을 할 때 출발지에서는 출발지와 목적지의 IP주소를 패킷이라는 통신다위로 데이터를 목적지까지 전달합니다.
다만, IP 프로토콜의 한계로는 비연결성과 비신뢰성이 있습니다.
패킷을 받을 목적지가 없거나 서비스가 불능이어도 그냥 패킷을 보내버리는 비연결성과
데이터를 전달하는 중간에 장애가 생겨 소실된 가능성이 있고 보낸 순서대로 받지 않기에 순서를 보장할 수 없는 비신뢰성이라는 한계를 가지고 있습니다.
HTTP 프로토콜의 특징에 대해 설명해 주세요.
HTTP 는 클라이언트가 서버에 요청을 보내면 서버는 그 요청에 대한 응답을 클라이언트로 보내는 클라이언트-서버 구조로 이루어져있고, 무상태성과 비연결성의 특징을 갖습니다.
무상태성이란 서버가 클라이언트의 상태를 기억하지 않아 보존하지 않는다는 것입니다.
클라이언트만이 상태를 기억, 관리하다는 것이기 때문에 중간에 서버가 바뀌어도 클라이언트가 바뀐 서버에게 상태를 담아 전달하면 별 문제 없이 응답을 받을 수 있습니다. 이 무상태성이라는 특징으로 서버는 무한대로 증설을 할 수 있습니다.
비연결성이란 클라이언트와 서버가 데이터를 요청하고 응답한 후에 연결을 끊는 것을 말합니다.
필요할 때만 연결을 지속하고 그렇지 않다면 끊음으로써 최소한의 자원만 사용하게 됩니다.
그치만 많은 자원을 요청할 때마다 연결과 종료를 반복하면 비효율적입니다. 이를 해결하기 위해 연결이 이루어지면 각각의 자원을 요청하고 모든 자원에 대한 응답이 돌아오면 연결을 종료하는 HTTP 지속 연결을 1.1버전에서 사용합니다.
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
쿠키는 HTTP 프로토콜에서 무상태성을 보완하는 수단으로 브라우저에 데이터를 저장할 때 사용합니다.
쿠키는 유효한 기간에 따라 두 가지로 나뉠 수 있습니다.
브라우저를 종료하면 삭제되는 임시 쿠키를 세션 쿠키라고 하고,
브라우저의 종료 여부와 상관없이 임의로 설정한 옵션만큼 사용 가능한 쿠키를 지속 쿠키라고 합니다.
우리는 쿠키를 생성할 때 maxAge, Expires 옵션을 설정하면 지속 쿠키를 생성할 수 있습니다.
먼저 maxAge 옵션은 얼마나 유지할 것인지 시간을 기준으로 지정하는데 이 때 시간은 밀리세컨드로 환산하여 계산해야합니다. 그리고 Expires옵션은 언제 폐기할 것인지 날짜를 지정하는 것입니다. 그렇게 되면 지정한 날짜가 되면 자동적으로 브라우저는 쿠키를 삭제합니다.
두 가지 옵션을 모두 설정하면 maxAge 가 더 높은 우선순위를 가집니다. 만약 두 옵션을 설정하지 않는다면 브라우저가 닫힐 때 삭제됩니다.
