목차
- OpenAI 프론트엔드 지원 및 잡헌팅 이야기
- 모바일 웹에서 fetch 사용과 axios 비교
- React에서 Date를 이용한 스톱워치 구현 문제
- React PIN Input 구현과 모바일 웹 키보드 관리 팁
- Next.js 에서 NavLink와 Link 비교 및 클라이언트 컴포넌트 분리
- TailwindCSS, Vanilla Extract(VE), Styled-components 스타일링 논쟁
- Next.js 13 앱 라우터와 SSR, 스타일 적용 문제
- React에서 페이지 간 데이터 전달 방법 (Next.js 14 앱 라우터 기준)
- JWT 로그인 시 액세스 토큰 갱신 문제 해결 팁
- 최신 라우팅 라이브러리 'tanstack/router' 소개 및 활용
1. OpenAI 프론트엔드 지원 및 잡헌팅 이야기
- 한 개발자가 OpenAI 프론트엔드 직군 지원을 완료했으나 결과는 탈락 예상이라 밝힘.
- FAANG 회사에 가기 전까지는 잡헌팅을 계속할 것이라고 함.
- 하루 일과 언급하며 월요일 출근 후 퇴근까지 유튜브 보는 소소한 일상 나눔.
2. 모바일 웹에서 fetch 사용과 axios 비교
핵심
- 모바일 웹 개발 시 axios 대신 fetch API를 쓰는 사람들이 있음.
- fetch는 기본 브라우저 API로 대다수 최신 브라우저와 모바일 웹뷰에서 지원됨.
- axios는 HTTP 요청을 편하게 만들고, 인터셉터(interceptor, 요청/응답 가로채기 기능) 같은 고급 기능이 내장되어 있음.
설명
- fetch API는 네트워크 요청을 처리하는 표준 웹 API로, 브라우저 내장 함수임. 상대적으로 사용법은 간단하지만, axios만큼 기능이 풍부하지는 않음. 예로 인터셉터 자동 지원이 없기 때문에 별도 구현이 필요함.
- axios는 fetch를 감싸고 개선하여 요청/응답 변환, 에러 핸들링, 토큰 관리와 같은 편의 기능 제공.
- 모바일 웹뷰 환경에서는 fetch의 호환성 문제가 적어 fetch만 사용해도 무난하다는 의견.
의견
- axios가 명시적이고 기능이 많다는 장점은 분명하나 fetch 사용자들도 많음.
- 인터셉터는 직접 구현하려면 비효율적일 수 있어 상황에 따라 선택.
3. React에서 Date를 이용한 스톱워치 구현 문제
핵심
- Date 객체를 사용해 시간이 흐르면서 날짜를 -1씩 줄이는 스톱워치 기능 구현 중 날짜가 음수가 되는 오류 발생.
- 버튼 클릭 시 날짜 감소 및 월 변경을 처리하려 하지만 구현의 비효율성 고민.
설명
- 자바스크립트 Date 객체는 날짜와 시간 정보를 표현하는 내장 객체임. setDate(), getDate() 메서드를 사용해서 날짜 조작 가능.
- 날짜가 0 이하면 이전 달로 넘어가야 하므로 월(month)와 일(day) 조정이 필요함.
- 직접 숫자 단위로 더하고 빼는 방식은 상태 관리 및 렌더링에 부적합할 수 있음.
해결 팁
- Date 객체의 API를 제대로 활용하여 setDate()에 음수를 줘도 자동으로 월 단위 조정 됨을 활용.
- React 상태 관리 시 함수형 업데이트를 사용하거나 useEffect 의존성 배열을 적절히 관리하면 불필요한 렌더링 줄일 수 있음.
4. React PIN Input 구현과 모바일 웹 키보드 관리 팁
핵심
- 입력 필드 하나 대신 한 글자씩 분리한 6개의 input 요소로 PIN 번호 입력 UI 구현.
- 키보드 포커스 이동, 특히 모바일 웹에서 키보드 뜨고 사라지는 현상 고민.
설명
- PIN 입력은 보안/미관상 각 자리마다 개별 input을 넣는 UI 기법이 많음.
- 각 input이 입력되면 다음 input으로 자동 포커스 이동하는 방식 사용.
- 모바일 환경에서 포커스 이동에 따라 키보드가 깜빡인다거나 사라졌다 나타나는 이슈가 흔히 발생함.
팁
- 숨겨진 input 한개를 두고 가상으로 각 자리 UI를 구성하는 방식도 있음 → 보통 포커스 이슈 완화에 도움됨.
- focus() 메서드와 React ref 사용법 중요.
- 참고할 만한 라이브러리 및 코드 예시는 'React PIN Input' 키워드 검색, codesandbox 예제 추천.
5. Next.js 에서 NavLink와 Link 비교 및 클라이언트 컴포넌트 분리
- Next.js에서 공식 <Link> 컴포넌트 대신 React Router 스타일 NavLink 방식 사용 고민.
- NavLink는 경로에 따라 활성화 상태 관리가 편리한 네비게이션 링크 구현을 돕는 컴포넌트임.
- 클라이언트 컴포넌트에 usePathname 훅 등 경로 관련 로직 분리하여 깔끔한 구조를 만드는 방법 참고.
- 단, Next.js는 라우터 자체가 다르기 때문에 정확한 방식 공부 필요.
6. TailwindCSS, Vanilla Extract(VE), Styled-components 스타일링 논쟁
핵심
- TailwindCSS는 유틸리티 클래스 기반 CSS 프레임워크로 빠른 개발과 성능 개선에 강점 있음.
- Vanilla Extract(VE)는 타입 안정성과 클린 코드를 강조하는 최신 CSS-in-TypeScript 라이브러리임.
- Styled-components는 CSS-in-JS 방식으로 컴포넌트별 스타일 작성에 특화됐으나 컴포넌트 트리 크기 증가 이슈가 있음.
상세 설명
- TailwindCSS v4는 속도가 약 3배 빨라지는 등 성능 향상 공표됨. 반응형, 다크모드 등 설정이 쉽고 재사용 가능한 CSS 클래스를 제공해 생산성 극대화.
- Vanilla Extract는 런타임이 아닌 컴파일 타임에 CSS를 생성해 타입 검증과 코드 자동완성 제공, 팀 단위 작업 시 유지보수에 유리함.
- Styled-components는 태그 단위로 스타일을 컴포넌트로 쪼개 관리하므로 컴포넌트 트리가 커질 수 있고, VSCode 확장 기능 등 툴 지원이 Tailwind나 VE 대비 떨어진다는 지적도 있음.
- 국내외 사용 패턴 차이 존재하며, 팀 규모, 프로젝트 특성 따라 적합한 스타일링 방법 선택 필요.
의견
- "스타일드 컴포넌트가 컴포넌트 트리를 부수고 VSCode와 같은 도구에서 감당이 힘들다"는 의견이 있음.
- Tailwind는 빠르고 실용적이나 클래스명으로 인한 가독성 저하 불호 호불호 갈림.
- VE는 클린 코드 구현에 도움 많아 향후 점진적 대체 가능성 언급됨.
7. Next.js 13 앱 라우터와 SSR, 스타일 적용 문제
핵심
- SSR(Server Side Rendering)과 앱 라우터 사용 시 새로고침할 때 스타일 깜빡임 문제 경험 공유.
- Next.js 12 버전 SSR에서는 HTML과 스타일이 완전 일치하지 않고, document.tsx를 통해 스타일 입힘으로써 깜빡임 완화 가능.
설명
- SSR은 서버에서 초기 HTML을 렌더링해 보내는 방식으로, 첫 화면 로딩 속도 및 SEO 향상에 도움됨.
- Next.js 13부터 앱 라우터가 도입되어 React Server Components를 기반으로 작동함.
- CSS-in-JS는 런타임 스타일링이라 RSC에서 제한적이며, RSC는 스타일링 없이 HTML만 내려줌.
- document.tsx 파일은 Next.js의 커스텀 HTML 문서 템플릿으로, <head> 태그 안에 CSS 링크나 인라인 스타일을 삽입 가능해 초기 렌더링 스타일 적용에 중요함.
정리
- 완벽한 SSR 스타일링을 위해서는 스타일을 서버에서 같이 렌더링하거나, 이후 클라이언트 내 재적용 전략 필요.
- 앱 라우터 초기 도입기라 아직 안정화 과정 중임.
8. React에서 페이지 간 데이터 전달 방법 (Next.js 14 앱 라우터 기준)
문제
- Next.js 14의 앱 라우터를 사용 중이고, 한 페이지에서 input에 입력한 값을 다른 페이지로 전달하기 어려움.
- 기존 방식인 useRouter나 query 사용이 잘 맞지 않는 듯해 개선 방법 문의.
해결법
- Next.js 앱 라우터에서는 useSearchParams 훅 사용 권장. 이를 통해 URL 쿼리 파라미터를 쉽게 읽고 쓸 수 있음.
- Link 컴포넌트로 넘어갈 때 query 객체를 전달하는 대신 URLSearchParams나 useSearchParams를 사용해 데이터 전달 가능.
- 예: /resultpage?name=홍길동 형태 URL 전달 후 다른 페이지에서 useSearchParams로 읽음.
- 심플하거나 민감하지 않은 데이터 전송에는 쿼리스트링 권장.
- 복잡한 상태 공유는 글로벌 상태관리 라이브러리나 Context API도 검토해야 함.
9. JWT 로그인 시 액세스 토큰 갱신 문제 해결 팁
문제
- 로그인 후 액세스 토큰(access token)이 리프레시 토큰(refresh token)으로 갱신되지 않고 아예 새로운 값으로 갱신됨.
- 이로 인해 로그인 유지가 안 되는 현상 발생.
배경
- JWT 기반 인증은 액세스 토큰과 리프레시 토큰 두 가지 토큰을 사용함.
- 액세스 토큰은 짧은 유효기간으로 API 호출 시 사용, 리프레시 토큰은 만료 시 새로운 액세스 토큰 발급에 사용됨.
- 제대로 동작하려면 클라이언트가 리프레시 토큰을 백엔드에 보내고, 백엔드는 새로운 액세스 토큰을 반환해야 함.
문제점 원인
- 리프레시 토큰이 잘못 사용되거나 저장 방식 오류 가능성 있음.
- axios 요청 시 FormData 사용법, 쿠키 관리 등의 잘못된 구현 체크 필요.
- 토큰 갱신을 주기적(setInterval)으로 하는 로직에서 기존 리프레시 토큰이 계속 재사용 되는지 확인.
팁
- 리프레시 토큰은 보통 HttpOnly 쿠키로 저장해 보안 강화함.
- 토큰 갱신 로직은 백엔드 API 명세에 맞게 구현할 것.
- axios 인터셉터를 사용해 토큰 만료 시 자동 갱신 구현 추천.
- React useEffect 의존성 배열 주의, interval 종료 시점 관리 필수.
- JWT 관련 공식 문서 및 axios 토큰 갱신 예제 참고하길 권장함.
10. 최신 라우팅 라이브러리 'tanstack/router' 소개 및 활용
핵심
- Tanstack에서 만든 새로운 React 라우팅 라이브러리 'tanstack/router'가 등장.
- 파일 라우팅(file-based routing)을 지원해 Next.js 스타일 라우팅 대세에 발맞춤.
설명
- 기존 React 라우터계열인 react-router-dom보다 타입스크립트 지원과 라우트 유효성 검사를 강화함.
- React Query 개발사인 tanstack팀에서 만들면서 React Query와의 연동도 기대됨.
- 공식 예제가 잘 갖춰져 있어 새 프로젝트 시 참고하기 좋음.
참고사항
- 파일 라우팅: 폴더와 파일 구조에 따라 URL 경로가 자동 매핑되는 라우팅 방식.
- 많은 개발자들이 넥스트JS의 간결한 라우팅 방식을 선호해 비슷한 패턴 라이브러리가 증가하는 추세임.
면접팁⚡
- Axios vs Fetch 차이와 장단점 명확히 설명할 수 있어야 함.
- React 상태관리와 useEffect 최적화: Date 객체 상태 변경 시 setState 사용 시 주의점.
- Next.js 앱 라우터에서 데이터 전달 방법 (useSearchParams, 쿼리스트링 활용) 숙지.
- JWT 인증 토큰 갱신 메커니즘 이해하고, axios 인터셉터 통한 토큰 자동 갱신 구현법 설명 가능하도록 준비.
- CSS 인 JS vs Utility-first CSS 장단점 토론, 팀 상황에 맞는 선택 근거 제시 가능하면 좋음.
링크🔗
- React PIN Input 예제: https://codesandbox.io/p/sandbox/github/Satyamall/React-PIN-Components-and
#React#Nextjs#TailwindCSS#VanillaExtract#StyledComponents#JWT#WebDevelopment#MobileWeb#JavaScript#TypeScript