학습 내용
질문과 답변
재귀
- 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.
재귀는 자기 자신을 참조하는 것을 뜻합니다.
프로그래밍에서 재귀 함수는 자기 자신을 호출하는 함수입니다.
이러한 재귀를 활용하기 좋은 상황은 같은 로직이 반복되어 값을 도출해야 할 때 사용할 수 있습니다.
대표적인 예로는 피보나치 수열이 있습니다.
피보나치 수열의 일반항은 이전 두 개의 항을 반복해서 더하여 일반항을 구합니다.
함수 내부에 두 개의 항을 더하는 코드를 작성하고,
리턴 값으로 함수 즉, 자기 자신을 호출하는 함수를 코드로 작성해서
반복되는 재귀 로직을 이용해 일반항을 구할 수 있습니다.
UI/UX
- UI, UX의 개념
- 두 개념의 관계
UI. 사용자 인터페이스는,
이 단어를 해석하면 사용자와 컴퓨터 사이에 매개하는 툴 혹은 모든 것입니다.
예를 들면, 컴퓨터의 마우스와 키보드, 모바일의 멀티터치 입니다.
이러한 UI는 사용자와 컴퓨터가 상호작용이 가능하게 합니다.
UI design이라는 개념도 있습니다.
우리가 흔히 말하는 UI가 예쁘다. 할 때 사용하는 개념이죠.
모니터에서 시각적으로 보이는 웹 페이지, 앱 컴포넌트 같은 것들입니다.
UI 디자인은 사용자가 쉽게 이해하고 사용할 수 있게, UI 구조, 색상, 아이콘등을 사용하는 것입니다.
이는 더 나은 사용자 경험을 제공해서 앱의 재방문율을 높이는데 도움이 됩니다.
UX는 User experience
총체적인 사용자 경험입니다.
모바일 기기에서 메모장 앱을 사용할 때,
예를 들면, 앱을 클릭하고, 메모를 작성하고, 기록한 메모를 보는등
이러한 모든 기능을 사용할 때 사용자가 느끼는 감정의 총점입니다.
마지막으로
방금 말씀드린 메모장 예시로 UI, UX의 관계를 설명해보겠습니다.
만약 메모 작성 아이콘이 작아서,
아이콘을 찾는데 오래 걸리거나 클릭이 어렵다면,
사용자 속마음에서 점수가 깎여서 이 앱을 사용 안할 수도 있겠죠.
사용하기 어려운 UI 디자인으로 인해 사용자 경험은 나쁘다고 볼 수 있습니다.
이처럼 UI는 UX에 영향을 미칩니다.
따라서, UI는 UX라는 전체적 개념에 포함되어 있는 기능이라고 볼 수 있습니다.
Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.
스타일드 컴포넌트를 사용하면
리액트를 사용해서 웹 페이지를 만들 때, 컴포넌트 로직과 함께 CSS를 작성할 수 있었습니다.
컴포넌트 중심 개발 특성상 만들어 놓은 컴포넌트를 재사용할 수 있었기 때문에,
반복적인 css를 하지 않아도 되는 점이 가장 큰 장점이었습니다.
하지만, 컴포넌트를 재사용하지 않는다면, 단점이 될 수도 있다고 생각합니다.
그리고 무언가 만들 때 그 때 떠오르는 직관적 느낌이 중요하다고 생각하는데,
컴포넌트를 만들면서 직관적으로 어울리는 디자인을 즉각 반영할 수 있는 점도 장점이라고 생각합니다.
단점으로는 초기 학습 곡선이 높다는 점입니다.
기본적으로 클라이언트에서 동작하기 때문에,
서버사이드 렌더링할 때 복잡한 설정이 필요하다는 점입니다.
- useRef가 필요한 상황을 예시를 들어 설명해 주세요. 5분
(X)
Redux
상태관리 라이브러리의 필요성에 대해서 설명해 주세요.
React로 상태를 변경하는 데이터 흐름을 만들 때,
Props를 전달해서 데이터 흐름을 만드는 과정이 필요합니다.
만약 앱의 규모가 커져서 컴포넌트가 많아지고, 부모 자식 관계가 많아진다면,
Props를 반복 전달해서 데이터 흐름이 만들어집니다.
이 때 문제는 컴포넌트에 같은 코드가 계속 반복된다는 점입니다.
따라서, 개발자들은 여러 번 컴포넌트를 거쳐서 Props를 전달하는게 아닌,
한꺼번에 전역에서 상태를 관리하는 라이브러리의 필요했습니다.
- Redux의 주요 개념들과 연결 관계를 설명해 주세요. 5분
Redux는 자바스크립트로 만든 애플리케이션의 상태 관리를 위한 라이브러리입니다.
핵심 키워드는 action, dispatch, reducer, store 인데, 이 순서로 상태를 관리합니다.
- 상태 변경 이벤트가 발생하면, 상태 정보가 담긴 Action 객체를 생성합니다.
- 이 Action 객체는 Dispatch 함수의 인자로 전달되고,
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달해주고,
- Reducer 함수는 Action 객체의 값을 확인하고,
그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
상태가 변경되면, React는 화면을 다시 렌더링 합니다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
시맨틱 HTML이 필요한 이유는 3가지 입니다.
첫째, 개발자간 소통 div의 id, class보다 시맨틱 태그가 직관적이다.
둘째, 검색 효율성 검색 엔진이 HTML 코드를 보고 문서 구조를 파악하는데, 이 때 시맨틱 요소를 해석합니다.
셋째, 웹 접근성
시각장애인 -> 스크린 리더 -> 시맨틱 요소로 화면의 콘텐츠의 의미를 전달합니다.
네트워크 심화
- IP 프로토콜의 한계에 대해서 설명해 주세요. 5분
- HTTP 프로토콜의 특징에 대해 설명해 주세요. 5분
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요
쿠키가 영원히 지속되면 계속 웹에 노출되기 때문에 탈취당할 위험이 있습니다.
따라서, 쿠키의 유효기간을 정하는 옵션이 있는데, 그것이 MaxAge와 Expires 옵션입니다.
이 두가지는 유효기간을 정하는 방식으로 구분되는데,
MaxAge는 유효기간을 초 단위로 설정하는 옵션이고,
Expires는 유효기간을 날짜로 지정할 수 있습니다.
유효기간의 설정에 따라 세션쿠키, 영속성 쿠키로 나뉩니다.
세션쿠키는 유효기간이 설정이 없는 일시적인 쿠키로, 브라우저가 종료되면 쿠키는 삭제됩니다.
영속성 쿠키는: maxage, expires로 지정한 유효기간만큼 사용이 가능한 쿠키입니다.
진행 순서
모더레이터 -> 1번 질문
1번이 답변
2~5번이 피드백
1번 -> 2번 질문
2번이 답변
나머지가 피드백
반복
