UI/UX
UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.
ui는 User Interface로 사람들이 컴퓨터와 상호작용하는 시스템을 의미하며 키보드, 마우스 등의 물리적 요소도 ui로 볼 수 있습니다. 프론트엔드 개발자로서 ui는 보통 화면상의 그래픽 요소인 GUI를 의미합니다.
ux는 User experience로 사용자가 어떤 시스템이나 제품 서비스를 직.간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 의미합니다.
사용자 경험을 바탕으로 유저들의 니지를 파악할 수 있고 파악된 니즈를 바탕으로 ui를 업그레이드 한다면 ux의 만족도 또한 올라가게 되는 상관관계를 가지고 있습니다.
꼭 좋은 ux가 좋은 ui를 의미하거나 좋은 ui가 항상 좋은 ux를 보장하지는 않지만 나쁜 ui는 보통 나쁜 ux를 유발합니다. 따라서 프론트엔드 개발자는 ui를 개선함으로 ux를 개선할 수 있으며 좋지 않은 ux에서 ui의 개선점을 찾아낼 수도 있습니다.
인증 / 보안
Cookie의 MaxAge, Expires 옵션이 무엇인지, 설정하지 않으면 어떻게 되는지 설명해 주세요.
쿠키(cookie)란 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 정보를 의미합니다.
웹 사이트는 이렇게 저장된 사용자의 정보를 클라이언트(client) 측의 컴퓨터에 남겨서 필요할 때마다 재사용합니다.
사용자의 컴퓨터에 마치 과자 부스러기가 남아 있는 것과 같다고 해서 '쿠키(cookie)'라는 명칭이 붙었습니다.
이러한 쿠키는 로그인 정보나 장바구니 정보를 저장하는 용도로 많이 활용되고 있지만
사용자의 정보가 컴퓨터에 고스란히 남기 때문에 사생활 침해의 우려가 있으며, 보안과 관련된 이슈를 가지고 있습니다.
따라서 MaxAge, Expires 옵션을 설정해주므로서 쿠키의 유지기간을 설정해줄 수 있습니다.
MaxAge는 쿠키가 삭제될 시간을 초 단위로 설정하는것으로 옵션을 설정해주면 브라우저와는 별개로 쿠키를 외부파일로 저장하는 것이 가능합니다. 따로 설정하지 않으면 브라우저의 생존주기와 동일하기 때문에 사라지게 됩니다.
Expires는 쿠키가 삭제되는 만료 날짜를 설정할 수 있으며 UTC 시간을 기준으로 지정할 수 있습니다.
Redux
Redux의 주요 개념들과 연결 관계를 설명해 주세요.
상태관리 라이브러리인 Redux에 대해 말씀드리겠습니다
Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다
기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해주는데
이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도 오로지 상태를 전달해주기 위해서 props를 받아야 했고,
이를 props drilling이라고 합니다.
하지만 상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써
props를 내려줄 필요없이 바로 이 저장소에 접근해서 필요한 상태를 가져다 사용하면 되기 때문에 props drilling 문제를 해결해줄 수 있습니다.
웹 표준 & 웹 접근성
Semantic HTML의 필요성을 예시를 들어 설명해 주세요.
"Semantic HTML은 header, main, nav, footer tag 등이 있으며, 구조를 만드는 것을 넘어 의미를 갖게 만들 수 있습니다.
HTML에는 많은 종류의 요소가 있지만, div와 span tag 두 가지 요소만 알아도 충분히 화면의 구조를 만들 수 있습니다.
하지만, 이 두 요소의 이름에는 의미가 없기 때문에 요소의 이름으로는 각 요소가 어떤 역할을 하는지 알 수 없습니다.
반면 시맨틱 요소를 사용하면 요소의 이름만 보고도 해당 요소가 어떤 역할을 하는지 요소가 가진 의미를 통해 파악할 수 있게 됩니다.
따라서 시맨틱한 HTML을 작성하여 얻을 수 있는 효과로는 개발자간 소통, 검색 효율성, 웹 접근성이 있습니다.
개발자간 소통으로는 요소의 이름만 봐도 의미를 파악할 수 있기 때문에 그만큼 의미를 전달하기 위한 시간과 id, class 작성에 필요한 시간 소모도 줄어들고 개발자간 소통이 원활해지는 효과를 얻을 수 있으며,
검색 효율성으로는 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 시맨틱 요소를 사용함으로써 HTML에 의미를 부여하는 것만으로도 검색 효율성을 높일 수 있는 효과를 얻을 수 있으며,
마지막 웹 접근성으로는 화면의 구조를 짜는 것을 넘어 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹 접근성을 향상시킬 수 있는 효과를 얻을 수 있습니다.
