헤더의 로그인 유무를 나타내기 위해, 로그인 유저의 정보를 관리하는 전역 상태의 필요성을 느끼고 redux를 도입했었는데, 새로고침에도 해당 정보를 유지할 필요성을 느꼈다. 평소의 전역 상태는 일반 상태와 똑같이 새로고침 시에도 사라지는 특성이 있기 때문에 redux-persist를 이용하면 전역 상태를 보존할 수 있기 때문에 이를 사용하기로 했다. 하지만 끊임없는 난관에 봉착해버렸다. 처음에는 빌드에러... 빌드를 고치면 다른에러... 그 에러를 고치면 또 빌드에러... 무려 2일동안 에러의 늪에 빠져버렸다.다음부터는 이런 에러가 있지 않기를..!! 나를 계속 괴롭혔던 에러는 2가지가 있었다.1. 에러 사항redux-persist failed to create sync storage. falling b..

다크 / 라이트 모드예전부터 적용해보고 싶었던 모드였는데, 생각보다 적용하기 수월해서 오랜 시간이 걸리진 않았었다.Redux와 tailwind, custom Hook을 이용해 만들었다.우선 dark 모드를 사용하기 위해 tailwind.config.js에 darkMode를 추가해 주었다. tailwind간단하게 module.exports에 darkMode: "class"만 넣어주면 된다.사용법은 다크모드의 경우 'dark:'뒤에 원하는 style을 넣어주기만 하면 된다. 'dark:'가 없을 경우, light모드일 때 적용 된다. Redux리덕스의 경우에도 toolkit 덕분에 쉽게 해결할 수 있었다.가장 상위 컴포넌트인 index.tsx에 Provider로 감 싸준 뒤, store를 넣어준다.  - i..

개인 사정으로 인해 1년이라는 시간이 훌쩍 지나가 버렸다.다시 개발자의 길을 걷기로 다짐하고 나서 바로 프로젝트를 만들기로 다짐했었는데 막상 다시 돌아오고 나니 뭔가 붕뜬 느낌이었다.앞길이 막막한 느낌? 어떻게 코드를 짰더라.. npm으로 어떻게 켰더라.. 이 생각에 2일간 절망에 빠졌었는데 다행히도 차근차근 하다보니금방 기억이 나고 몸이 기억해서 3일째부터는 조금씩 나아지기 시작했고, 일주일이 지났을 때부터는 예전처럼 코드를 짤 수 있게 되었다.그동안 정말 만들고 싶었던게 있었는데 바로 메이플 관련 사이트였다.메이플은 한동안 푹 빠져서 했을 정도로 애정이 많은 게임이었기도 하고, OPEN API가 공유 되면서 유저들의 정보와 스킬, 스탯 뿐만이 아니라 큐브와 스타포스 히스토리등 이용할 수 있는게 굉장히..

벌써 코드스테이츠를 졸업한 지가 4개월이 지났다. 코드 스테이츠를 졸업하고 바로 원티드 프리온보딩을 거치고, 이력서를 계속 수정하면서 이력서를 제출하고, 과제 테스트를 보고, 면접을 보면서 지냈더니 4개월이라는 시간이 훌쩍 지나갔다. 4개월이라는 시간이 지나다보니 이력서에 제출한 프로젝트가 하나라는 게 공부를 열심히 하지 않은 것처럼 보일 수 있겠단 생각이 들었다. 그래서 새로운 프로젝트를 하나 만들어 보기로 했는데, 완벽하게 끝내지 못한 메인 프로젝트가 걸렸다. 따라서 메인 프로젝트를 제대로 마치고 새로운 프로젝트를 만들어 보자는 생각에 1차 리팩토링을 끝낸 코드를 다시 헤집어 봤는데... 좀 많이 건드려야 할 거 같다는 생각이 들었다. 이번에야 말로 저번에 적용하지 못한 전역 상태 관리와 react ..

1. TypeScript로 마이그레이션 리팩토링을 진행했을 때 시간을 제일 많이 잡아먹었다. jsx에서 tsx로 파일명을 바꾸는 순간 수많은 에러가... 잘한다고는 말 못하지만 꽤나 친해진 느낌이다. 2. src 속(상단) 폴더 구조 더미 데이터, 상수 값들을 다루는 폴더를 만들어 따로 관리하도록 수정했다. styles에 전역적으로 관리하는 스타일 값들을 넣어 관리하도록 수정했다(Global style, Theme). TypeScript로 마이그레이션 하면서 자주 사용하거나 공통으로 사용하는 타입들을 저장하는 폴더인 types를 추가해줬다. utils 폴더를 만들어 재사용하는 함수, 로직이 긴 함수들을 빼주었다. 3. Components components에 구분 없이 종류별로 넣었다가 기능별로 나누는 ..

1. 처음부터 코드를 잘 짜야한다. 리팩토링을 하면서 뼈저리게 느낀 것은 처음 짠 코드가 굉장히 중요하다는 것이었다. 처음에 제대로 짜인 코드가 유지 보수 측면에서 굉장히 이점이 있다는 걸 깨달았다. 처음 메인 프로젝트를 진행할 때, 전역으로 관리하는 상태에 대한 필요성에 대해 정확히 알지 못했다. 지금도 정확히 안다고는 표현할 수 없지만, 이번에 리팩토링을 하면서 전역 상태가 왜 필요한지 몸으로 느낀 것 같다. 메인 프로젝트 때에는 그냥 한 컴포넌트에 여러 기능들을 넣어 props로 내리면 되겠지라고 생각을 했다. 따라서 자식 컴포넌트에 props를 전달하고, 또 그 자식 컴포넌트에 props로 연결하여 완성했다. 3개의 컴포넌트로 하나의 페이지를 이루어 사용했지만 그 안에 너무 많은 코드량과 너무 많..

메인 프로젝트를 진행하면서 리팩토링은 꼭 해야겠다고 다짐했었다. 원티드 프리온보딩을 진행하느라 한 달 정도 미뤄졌지만 이제부터라도 진행해야지... 내가 리팩토링을 하려고 한 이유는 1. 컴포넌트의 분리 최대한 기능 별로 컴포넌트와 폴더 구조를 나누고 싶었다. 기능 별로 나누면 어디에 뭐가 있는지 확실히 알게 되고 바로바로 찾아서 작업할 수 있기 때문이다. 한 달만에 다시 코드를 봤는데 내가 짠 코드였는데도 컴포넌트 명이 이상해서 바로바로 찾아가기 어려웠다. 따라서 폴더 명과 컴포넌트 명이 명확하면 유지 보수의 속도가 빨라질 거라 생각했다. 2. React-query의 도입 react-query를 유튜브에서 처음 봤었는데 듣기만 했을 때는 뭐 이런 사기가 다 있어;;라고 생각했었다. 캐싱으로 인해 사용자의..

메인 프로젝트 드디어 끝..!!!! 드디어 드디어 끝났다..!! 정말 짧은 1 달이었다. 다소 아쉬운 것도 있지만 그래도 기능 동작은 잘 되니 다행인 것 같다. 흐어엉 데모데이날에 다른 분들이 고쳐야할 부분들을 지적해주셨는데 빨리 해치우고 프로젝트는 그만 만지고 싶다... 잠을 제대로 잔 날이 손에 꼽을 정도로 시간이 너무 부족했고 힘든 나날이었다. 특히 마지막 주는 배포를 하면서 에러와의 전쟁을 치렀다. 마치 밑 빠진 독처럼 뭐 하나 해결하면 다른 게 에러가 나고 후우... 하지만 정말 실력이 눈에띄게 상승했고 나름 만족스러웠던 것 같다. 내가 만든 프로젝트 프로젝트 과정 프리 프로젝트 프리 프로젝트 멤버 그대로 프런트 2명, 백엔드 3명으로 구성된 팀이었다. 프리 프로젝트는 2.5주 였는데 스택 오..