밤은 짧아, 걸어 아가씨야

원티드 프리온보딩 프론트엔드 챌린지 7월 CSR/SSR 개념 정리&강의 후기 프리온보딩 프론트엔드 챌린지 7월 | 원티드 무료로 양질의 교육을 들어보세요! 챌린저만을 위한 다양한 혜택을 제공해드리고 있습니다. www.wanted.co.kr 이번 7월의 주제는 CSR/SSR과 Next.js였다. 지난 1월에 CRUD w React Query 챌린지를 진행하셨던 오종택 멘토님께서 Next.js 13에 대해 강의하신다고 해서 바로 신청했다. 1월 챌린지는 당시 나의 수준으로는 이해하기 어려워서 머리에 인덱싱만 해둔다는 생각으로 강의를 들었다. 그때 들어놓았던 개념이 이후에 도움이 되었는데, 특히 stale while revalidate 등이 그랬다. ('너... 상했어.') 나는 문사철 비전공자 출신이라 딱딱..

[하루한냥] 로그인/회원가입 : 카카오 소셜 로그인 구현 서비스를 이용하려면 로그인 기능이 필요하다. 하루한냥 서비스의 자체 로그인/회원가입 기능을 완성했다. 이후의 태스크는 카카오 소셜 로그인을 구현하는 것이다. 백엔드 처리가 필요해서 이 부분은 멘토님이 맡아주셨다. 나는 카카오 디벨로퍼스 공식 문서와 백엔드에서 만든 API를 참고해 REST API 형식으로 카카오 소셜 로그인을 구현했다. 1. 애플리케이션 추가 Kakao Developers 에 회원가입/로그인하고 내 애플리케이션에 들어가 새로운 애플리케이션을 추가한다. 앱을 추가하면 앱 키가 발급된다. 왼쪽의 설정 메뉴에서 카카오 로그인을 클릭하면 카카오 로그인을 활성화할 수 있다. 하루한냥 프로젝트에서는 이메일 ID와 비밀번호, 닉네임을 사용하기 ..

[WebStorm] 웹스톰 에디터 배경색 변경하기 나는 시력이 나쁘기도 하고 눈 건강이 좋지 못해서, 안구 건강을 지키기 위해 할 수 있는 일은 다 해보려고 한다. 개발자들이라면 대체로 IDE 색상 설정을 어두운 배경에 흰 글씨로 해두는 것이 디폴트일텐데, 이런 '다크모드'가 눈 건강에 좋지 못하는 얘기를 들었다. 요약하자면 전체적으로 어두운 색상 때문에 빛의 양이 줄어들어 동공이 커지고, 난시와 근시가 심해진다는 내용이다. 그래서 IDE의 설정을 밝은 테마로 바꾸어 보았다. 테마 변경 가이드는 찾으면 나오지만, 배경색만 교체하는 글은 찾기 어려워서 혹시 나같이 눈이 시려 개발에 어려움을 겪는 사람이 있다면 돕고 싶어 글을 작성해 본다. HTML 삽입 미리보기할 수 없는 소스 1. 기존 색상 테마 기존에..

[트러블 슈팅] 모듈 시스템과 Jest 테스트 로그인, 회원가입 기능을 구현하면서 테스트 오류가 발생했다. 처음에는 단순히 post의 응답 타입을 지정하지 않아서, 혹은 타입이 잘못되어서 발생한 오류인 줄 알았으나 사실은 라이브러리를 잘못 가져다 사용한 문제였고, 생각보다 해결에 오래걸렸다. 허스키에서 1차로 테스트를 진행했지만 이슈를 놓쳤고 깃허브 CI에서 뒤늦게 알게 되었다. 초기 환경을 세팅할 때는 번거로웠지만 이중으로 테스트를 하니까 안정감이 느껴졌다. 이번 글에서는 테스트 오류와 이를 해결하는 흐름을 적어본다. 테스트 오류 발생 발단은 이렇다. 허스키 pre-commit에서 npm run test 명령어로 테스트를 하고 있는데, 오류가 잡히지 않았다. 아마 부분 부분을 나눠 커밋하다보니 한 커밋..

[하루한냥] 레이아웃 구현 : 반응형 웹페이지를 위한 준비 프로젝트를 모바일에 최적화된 화면으로 기획했기 때문에 다양한 모바일 기종의 화면 크기에 맞추는 작업이 필요하다. 레이아웃 구현 단계를 진행하며 반응형으로 구현하고자 신경 쓴 부분이 크게 3가지가 있었다. 첫째로는 Layout 컴포넌트의 스타일 속성, 둘째로 스타일 토큰에서의 사이즈 지정, 마지막으로 Body 컴포넌트에서의 flex 속성 적용이 있다. 이번 포스트에서는 반응형 프로젝트를 만들기 위한 코드를 기록하려 한다. 1. Page, Layout 컴포넌트 구현 우선 배경이 될 Page 컴포넌트에서는 width, height를 100vw, 100vh로 잡고 연한 회색으로 칠해주었다. Layout 컴포넌트에서는 모바일 최적화를 위해 440x920으..