Don’t worry about failures

사이드 프로젝트 리펙토링 과정에서 마이그레이션 작업이 하나가 추가 됐다. styled-component에서 vanilla-extract처음에는 styled-component가 개발경험에 있어 개인적으로 좋다고 생각했다. 컴포넌트로 표현되는 것과 javascript과 함께 컨트롤를 할 수 있다는게 좋다고 생각했기 때문에 사용했었다. 하지만 다른 측면으로도 생각을 해보았다. styled-component의 경우 동작하는 방식이 runtime 때 동적으로 스타일이 적용이 된다. 이는 csr과 어울리는 방식이다. 하지만 지금 사용하고자 하는 Next.js라는 프레임워크는 ssr, rsc와 같이 서버 사이드에서 렌더링을 진행하고자한다. 이를 보았을 때 동작하는 방식이 차이가 있다고 생각했다. styled-comp..

개발자 초기 사이드프로젝트로 진행했던 URURL 프로젝트가 있다. 이 프로젝트는 완전 주니어 시절 react를 배우고자 접했던 프로젝트이다. 1년이 조금 넘는 기간동안 이어지다가 결국 종료가 되어버린 프로젝트이다. 시작 날짜 2024.03.22(금) 갑자기 프로젝트를 꺼낸 이유? 리팩토링, 버전 업데이트, 테스트와 같은 작업을 하기에 매우 좋은 상태라고 생각한다. 처음에는 새로운 사이드프로젝트를 진행할까 고민하다. 그것보다는 과거에 내가 했었던 코드를 보면 되돌아보고, 개선해나아가는게 큰 도움이 될 것이라고 생각했다. 단순이 만드는 것에 초점을 맞추는 것이 아니라, 개선하고, 업그레이드에 초점에 맞춰 진행하고자 했다. 기간은 얼마나 잡나? 완전 뜯어 고치며, 내가 해보지 못했던 것들을 공부하고 적용해 나..

1차 배포 후 성능에 초점을 맞춰 개선을 하려한다. 성능 테스트 Lighthouse를 통해 웹 성능 테스트 및 개선 방향을 잡고 개선해 나아가려한다. 1. 로딩 시점에서의 개선 1-1 Reduce unused CSS 사용하지 않는 CSS로 인해 성능 저하가 보여진다고 진단을 받고 이를 개선. coverage 체크 (command + shift + p 에서 coverage 검색 ) 위와 같이 사용하지 않은 css의 용량이 굉장히 크다. 이를 어떻게 줄인 것인가? => 라이브러리 이용 찾다 좋은 라이브러리를 발견했다. purgeCSS라는 라이브러리가 불편요한 css를 제거 해주는 역할한다하여 이를 반영하기로 했다. 결과 위와 같이 Total Bytes : 624 576 => Total Bytes : 60 4..

다사다난 했던 1차배포를 마무리를 했다. 적용했던 stack, 부족했던 점 순으로 회고를 해보고자 한다. 1. 적용했던 stack 1-1 React 1-2 Next.js 1-3 Typescript 1-4 MobX 1-5 React Query 1-6 Amplify 크게는 이렇게 기술 스택을 가지고 개발을 진행했다. 일단, 기술 스택을 결정하는 데에 있어 가장 큰 요인은 내가 기존에 해보고 싶었던 스택과 함께 핫한 스택 사용이 가장 컷다. 그렇게 신기술은 아니지만, 첨부터 끝까지 혼자서 해본 것은 처음이라 시도해보기로 했다. 특히 react Query 같은 경우 가장 크게 시간이 많이 들었다. 이해를 하는 데에 좀 오래 걸렸다. 또한, axios에서 interceptor를 통해 토큰 만료 관련 처리를 해보면..

문제 레파지토리 브랜치를 추가 하기 위해 해당 repository branch와 연결을 해줘야한다. 하지만 select box value 중 연동하고자 하는 repository가 존재하지 않는다. 해결 1. 계정 셋팅 2. amplify 권한 설정 3. 권한 주기

amplify 환경변수 추가하기 amplify console -> 앱 설정 -> 환경 변수 해당변수 넣어준 후 amplify console -> 앱 설정 -> 빌드 설정 build: commands: 여기에 추가 위와 같이 환경 변수를 추가하여 환경 변수를 관리할 수 있다.

카카오톡 로그인 에러 경험(1) "~ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ~" 로컬에서 로그인 테스트 했을 때는 정상 작동 되었지만, 서버에 배포 상태로 했을 때 문제가 발생했다. 문제는 client에서는 https를 사용하고 server에서는 아직 http를 사용하고 있었기 때문에 발생한 error였다. 이는 서버측에 https로 변경 요청을 하여 마무리 지었다. 추가로 proxy 서버 하나 띄우는 방법도 있다고는 하는데 서버에서 변경만 하면 될 상황이기 때문에 다른 처리를 하지 않았다.