개발자들이 남긴 기록..

1. 자유로운 일상과 휴식 토크

인체공학 마우스란?
손목의 자연스러운 각도를 유지하는 디자인으로, 장시간 사용 시 손목터널증후군 같은 부상 예방에 도움을 줌.

localhost 접속 시 'It works!' 페이지가 계속 보이는 문제 발생.
이 문제는 Apache 웹서버의 기본 index.html이 캐시되거나, 설정된 경로가 맞지 않아서 생김.
해결책:
- Apache 재시작(httpd -k restart) 및 컴퓨터 재부팅 권장.
- 캐시 문제일 수 있으니 프라이빗 모드에서 테스트 권고.
React 정적 빌드 후 express 서버에서 특정 경로(예: /challenge/2024/dokdo) 접속 시 페이지 변경 안 됨.
express 설정이나 React 라우트 등록 확인 필요.

액세스 토큰 저장 위치로 로컬스토리지 vs 클로저(메모리 저장) 논의.
클로저란?
- 자바스크립트 함수가 자신이 생성될 때의 환경(변수 등)을 기억하는 기능.
- 이를 이용하면 변수들을 외부로 노출하지 않고 메모리상에 숨길 수 있으나 새로고침 시 초기화됨.
백엔드 개발자의 말로는 "private 변수"에 저장하는 게 보안상 더 좋다는 오해가 있었음.
전문가 의견:
- 프론트엔드에서 완벽한 비공개 저장은 불가능.
- 로컬스토리지, 세션스토리지, 쿠키 등은 모두 어느 정도 노출 위험이 있음.
- 가장 안전한 방법은 액세스 토큰은 메모리에 저장하고, 리프레시 토큰은 httponly 쿠키에 저장해 CSRF 공격을 방어하는 방법.
CSRF(Cross-Site Request Forgery)란?
- 사용자의 인증된 세션을 악용해 공격자가 의도하지 않은 요청을 보내는 공격 기법.
- httponly 쿠키는 자바스크립트에서 접근 불가하여 CSRF 공격의 위험을 줄임.
적극적 소통과 개념 정리가 필수!

React에서 <Link to="/challenge/2024/dokdo"> 클릭해도 페이지가 변경되지 않는 문제 지적.
Express 서버에서 React 정적 빌드 결과물을 서빙할 때 특정 경로 처리 문제 발생.
해결 방법:
- React Router를 사용할 때, 서버에서 모든 경로를 index.html로 리다이렉트 하도록 설정(nginx, express 등).
- Development 모드에서도 라우터가 제대로 감싸져 있고 라우트가 등록되었는지 확인해야 함.
실제 배포 시 HTTPS 인증서 설치 및 CORS 설정도 필요할 수 있음.

같은 타입의 서로 다른 함수들을 제네릭 하나로 통합하는 방식 소개:
- 예) function GenericReturnFunc<T>(arg: T): T { return arg; }
함수 명칭은 흔히 identity function (항등 함수) 라고 부름.
면접에서는 제네릭이 무엇인지, 왜 사용하는지 설명할 수 있도록 준비할 것.
"항등 함수라는 이름은 함수가 입력값을 그대로 반환한다"는 점을 강조.

모바일 브라우저에서 특정 API 지원 여부 확인하는데 도움되는 사이트 추천:
- Can I Use : 다양한 웹 API와 CSS 기능의 호환성을 검색 가능.
- Android 기기, Chrome 버전 확인: Android Authority의 Chrome 버전확인
버전 확인 후 호환성 사이트에서 API 지원 여부 체크 권장.