스터디 관련 질문
- 저희가 CS 스터디를 시작하는데 주제를 정해서 문제를 1depth 깊이로 모두가 조사를 해와서 문제에 대한 답을 무조건 하나씩은 발표하도록 하려합니다. 이후에 준비된 문제를 전부 해결한 뒤 같은 문제를 2~3depth 깊이로 다시 조사해 먼저 했던 방식을 반복하려 하는데 괜찮은 방법인지 알고싶습니다. 다른 좋은 방법이 있다면 추천해주실 수 있나요??
답변
스터디의 목적이 무언가를 학습하는 것이 목적인지, 혹은 면접 대비용인지가 중요할 것 같습니다. 사실 공부라는 것이 깊이와 넓이에 따라서 끝이 없기 때문에 어느 정도 선에서 컷하고 다음으로 빨리 넘어가는 것도 중요합니다. 먼저 희망하는 회사를 생각해 놓고, 그 회사의 성향을 알아보고 무엇을 질문하게 될 지 예측해서 그 부분에 대한 집중 학습을 하는 방법도 좋습니다.
기술 관련 질문
- 리액트 라이브러리를 사용하는 환경에서 디버깅을 해야한다고 할 때 현업에서 보통 어떤 방법을 많이 사용하시는지 궁금합니다. 크롬 개발자 도구로 특정 상황에 브레이크 포인트를 걸고, 그 순간에 state에 들어가있는 값을 조회하는 방법도 가능한가요?
답변
가능합니다. break point를 걸 수도 있고 아니면 debugger statement를 사용할 수도 있습니다. 또한 React Devtools 라는 것이 있는데 state, hook에 대한 정보가 나와 있기도 하고 다양한 기능을 제공하는데 특히 Profiler 기능을 많이 사용하는 편입니다.
- 리액트에서 태그 요소에 직접적으로 style 속성을 부여하는 인라인 스타일은 지양하는게 좋다고 본 적이 있습니다. 현업에서는 어떤가요?
답변
인라인 스타일은 애니메이션을 위해서 값을 계속 바꿔줘야 하는 경우에 사용되는 것이지, 정적인 스타일링을 위해서 인라인 스타일을 사용한다고 하면 문제가 있을 수 있습니다. 그래서 거의 사용되지 않습니다. (inline style reflow 라는 주제에 대해서 알아보면 좋습니다. 브라우저는 inline style을 만나면 reflow 과정이 발생하기 때문에 성능에 좋지 않은 영향을 줍니다.)
- 로그인 기능을 JWT 토큰 방식으로 구현한다고 했을 때, 보통 accessToken과 refreshToken은 클라이언트의 어디에 보관하는지 궁금합니다. 쿠키? 스토리지? 아니면 IndexedDB 인가요? 또한 토큰을 실제로 state에 저장하는 경우도 있나요?
답변
IndexedDB는 잘 사용하지 않습니다. 보통 현업에서는 로컬 스토리지나 세션 스토리지에 많이 저장을 하는데 보안성 문제가 있긴 하지만 실제로 문제가 자주 발생하는 일은 아니기 때문에 타협해서 스토리지를 쓰는 경우도 많음. 가장 안전한 건 쿠키를 사용하는 게 안전한데요, 쿠키 같은 경우에는 httpOnly 속성을 주면 자바스크립트로 쿠키를 못 읽게 할 수 있습니다. 그러나 구현하기 번거롭고 귀찮아지기는 합니다. state에 저장하는건 사실 메모리에 저장하는 것이기 때문에 스토리지에 저장하는 것과 유사합니다.
- 예전에 로그인 기능을 구현할 때 토큰은 쿠키에, 닉네임이나 프로필 정보는 전역 상태에 저장한 적이 있었습니다. F5를 누르면 state가 초기화되기 때문에 로그인한 사용자의 닉네임이나 프로필과 같은 정보가 사라져서 마치 로그인이 안된 것처럼 나오던데 이런 이슈는 보통 어떻게 해결하는지 궁금합니다. 닉네임과 프로필 정보도 토큰과 함께 스토리지에 보관하나요? 혹은 토큰의 검증을 서버에 다시 요청해서 닉네임과 프로필 정보를 받아오나요?
답변
자바스크립트로 웹앱을 만들면 생기는 문제인데요. 이걸 해결 하려면 로그인 된 상태를 조회를 해서 분기를 태우거나 (로그인 안됐을 때는 로딩중.. 표시 하거나 아니면 SSR을 해서 로그인을 서버쪽에서 한 번 시키고 닉네임이나 프로필 정보를 조회해서 가져오는 방법)으로 구현할 수도 있습니다. 보통은 SSR을 구현을 해놨다면 그렇게 하겠지만, 사실 SSR이 구현이 까다롭기 때문에 보통은 로그인 여부를 파악한 다음에 로딩중.. 식으로 구현하는 경우도 많을 것입니다. 다만, 스토리지에 보관은 하면 안됩니다!!! 만약 로그인을 여러 계정으로 하다 보면 접속한 프로필 정보가 꼬이는 상황이 발생할 수 있습니다.
- 네이버처럼, 로그인 상태에서 새로운 탭을 열어서 접속하면 여전히 로그인 상태가 유지되지만, 브라우저를 닫고 다시 접속하면 로그아웃 되어 있는 기능은 어떻게 구현되는지 궁금합니다..
답변
브라우저를 닫으면 로그아웃 된다는 것은 HTTP Session 이라는 주제를 찾아보면 좋습니다.
- 프로그래밍에서의 도메인(관심사), 비즈니스 로직, 서비스 로직 등등이 뜻하는 의미가 헷갈립니다.. 혹시 멘토님께 설명을 부탁드려도 괜찮을까요? (추가적으로 Service 로직 같은 경우 보통 데이터베이스를 핸들링 하는 로직을 의미하는게 맞는걸까요..?)
답변
사실 이러한 주제는 FE 개발자보다는 서버 개발을 하시는 분들이 더 관심 있어하는 분야여서 FE 개발자는 추상적으로만 알고 있는 경우가 많습니다. 그래도 요즘에는 트렌드가 조금 바뀌어서 FE 개발자도 이런 것에 관심을 가져야 한다는 얘기도 있긴 한데, 구현되는 방식은 엄밀히 말해서 거의 서버 쪽인 경우가 많기 때문에 FE 개발자가 직접적으로 알기에는 어려운 부분이 있습니다. 그래도 말씀드려보자면 위 단어들은 말은 다르지만 사실 유사한 의미입니다. 그리고 엄밀하게 정의된 용어라고 보기에는 애매한 부분이 있어서 설명하기가 힘든 부분이 있습니다. 예를 들어 도메인이라는 단어는 무언가의 추상적인 관심사를 뜻하는데 커머스 사이트의 도메인은 커머스이다. 라고 하기도 하고 또는 DDD나 Domain Engineering와 같은 심오한 영역에서도 사용되는 단어이기도 합니다.
또한 서비스 로직은 조금 더 상위에 있는 것, 비즈니스 로직은 조금 더 하위에 있는 것이라고 볼 수 있습니다.