NextJS auth hoc 구현
2023. 1. 21. 22:36
TIL/트러블슈팅
hoc를 사용한 이유 프로젝트 구조는 매우 간단해서 하나의 페이지로만 구성되어 있었다. 이때 로그인 여부에 따라 컴포넌트 렌더링 여부를 나누려고 했다. 구조를 생각해봤을 때 전체적인 로그인 상태를 관리하는 context api가 있고 여기서 로그인 상태를 가져와 나누었는데, 이때 로그인 여부 확인 - 로그인 컴포넌트 조건문 로직이 많이 중복되었다. 따라서 이 부분을 관리하기 위해 hoc를 통해 더 단순화 시킬 수 있을거 같아 여러 문서들을 참고했다. 구현 react-router 공식 example을 참고해서 구현했다. provider를 정의해서 로그인 로직을 구현했는데 NextJS라서 cookie를 가져오는 부분이 렌더링 문제가 발생했다. 아래와 같은 오류가 발생했는데 일단 구현을 목표로 정리해야할 부분..
1월 20일 회고
2023. 1. 20. 21:26
TIL/ETC
회고 오늘은 크게 공부한 부분은 없다. 문서 작성에만 조금 시간을 들였는데 내가 지금 어떤 것을 해야할지 고민을 했다. 기존에 있던 것들 문서로 잘 정리하기 지금 하고 있는 프로젝트 필요한 부분들 정리하기 이력서 정리 순위로 나눠봤을 때 이것들이 지금 중요한 부분들이라고 생각하고 먼저 정리 해야하는 것들이다. 이 외에도 정보처리기사, 알고리즘도 있긴한데 우선 해놓은 것들부터 먼저 잘 정리하자라는 목표를 잡았다. 아쉬운 점 ( 신경써야할 부분들 ) 꾸준히 알고리즘 문제 푸는 것과 cs 준비하던 것들을 최근에는 아예 놔버려서 한문제, 10분씩이라도 하기 위해 풀었던 문제들과 정리했던 부분들을 다시보기 시작했다. 영어 등 필요한 것들을 많이 챙기려고하니 놓치는 부분이 많이 생긴다. 하루에 뭘 해야할지 todo..
개인 프로젝트 진행 중 발생했던 문제
2023. 1. 19. 23:03
TIL/ETC
개인 프로젝트 진행 중 발생했던 문제들 정리 백엔드와 프론트 api body가 일치하지 않았던 문제 백엔드에서는 siteURL로 받고 있었는데 프론트에서는 url이라는 키값으로 요청해서 빈 값이 계속해서 넘어갔다.. api문서화를 작은 변경사항이라도 잘 작성해놔야겠다고 생각해서 따로 notion에 페이지를 만들어 두었다. 디자인 갈아엎기 괜찮은거 같아서 만들어도 뭔가 실제 구현을하면 어색한 부분이 크게 눈에 띄었다. 단순히 디자인으로만 만들어서 테스트 해봤다면 괜찮았을 부분이었는데 이 부분을 계속해서 코드로 작성하고 수정하다보니 많은 시간이 들어간거같다. 그래서 조금씩이라도 디자인 툴을 사용해서 작업해보려고 한다. DB 갈아엎기 설계를 잘 못해서 그런가 테이블 속성을 계속해서 정리했다. 사실 최소 기능만..
Already included file name differs from file name only in casing... 이슈
2023. 1. 18. 22:25
TIL/트러블슈팅
요약 나의 경우에서는 깃 파일 대소문자 변경사항이 잘 반영되지 않아 발생한 오류였다. 이 외에도 단순한 tsconfig 설정으로 해결 할 수 있다고 하니 잘 찾아보는게 중요할거같다 git config core.ignorecase false git rm -r --cached . 대소문자 설정 뿐만 아니라 캐쉬도 정리해야 git에 잘 반영된다. 'File name differs from already included file name only in casing' on relative path with same casing Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '...
UX 향상을 위한 confirm modal 만들기
2023. 1. 17. 23:40
TIL/트러블슈팅
파괴적인 동작을 할 때 사용할 confirm modal 만들기 import React, { useEffect } from "react"; import ReactDOM from "react-dom"; interface ConfirmModalProps { isModalOpen: boolean; content: string; handleSubmit: VoidFunction; handleClose: VoidFunction; } const ConfirmModal = ({ isModalOpen, content, handleSubmit, handleClose, }: ConfirmModalProps) => { if (!isModalOpen) return null; const ref = React.useRef(null)..
redux 오픈소스 코드를 뜯어서 createStore 직접 구현해보기
2023. 1. 16. 23:02
TIL/트러블슈팅
프리온보딩 과제 - createStore 최소 구현체 만들기 공식문서를 참고해서 createStore를 직접 구현하는 과제를 주셨다. GitHub - reduxjs/redux: Predictable state container for JavaScript apps Predictable state container for JavaScript apps. Contribute to reduxjs/redux development by creating an account on GitHub. github.com Redux를 썼을 때도 RTK로 사용해서 createStore에 무엇이 전달되어야하는지 공식문서를 참고했다. createStore | Redux API > createStore: creating a core R..
공식문서를 통한 비로그인 접근 제어하기
2023. 1. 14. 22:12
TIL/트러블슈팅
요약 example/auth에 있는 내용을 참고하여 구현했습니다. https://github.dev/remix-run/react-router Setting up your web editor eyJ3b3JrYmVuY2hUeXBlIjoiZWRpdG9yIiwid29ya2JlbmNoQ29uZmlnIjp7InZzY29kZVZlcnNpb25JbmZvIjp7InN0YWJsZSI6eyJjb21taXQiOiI5N2RlYzE3MmQzMjU2ZjhjYTRiZmIyMTQzZjNmNzZiNTAzY2EwNTM0IiwicHJvZHVjdFZlcnNpb24iOiIxLjc0LjMifSwiaW5zaWRlciI6eyJjb21ta github.dev 기존의 코드 useEffect를 활용하여 로컬스토리지 토큰을 검사했다, 이때 발생한 문제점이..
정말 유익했던 원티드 프리온보딩 1주차 세션2 회고
2023. 1. 13. 23:41
TIL/ETC
프리온보딩 프론트엔드 챌린지 1월 | 원티드 프리온보딩 챌린지는 2주의 단기간 몰입학습과 4주의 취업 챌린지로 구성되어있습니다. 참여 신청하고, 챌린지의 주인공이 되어보세요! www.wanted.co.kr Typescript에 관해 타입스크립트는 쭉 사용해오고 있던터라 주제에 대해 완전히 느끼는 점은 없었지만 왜 타입스크립트를 써야하는지에 대해 기술적인 생각을 해보는 부분에 대해서는 완전히 공감했다. 물론 이것이 타입스크립트를 사용하는 당연한 이유겠지만 이러한 이유를 스스로 생각하고 공학적으로 혹은 비즈니스적으로 생각해 볼 수 있다면. 다시말해 단순히 개발을 넘어서 가치를 생각해볼 수 있다면 훨씬 더 일 잘하는 엔지니어로써 발전할 수 있지 않을까 생각된다. 내 코드에 대해 오늘 피드백해주신 내용들을 보면..
typescript interface property 변환하기, react-query mutate 파라미터 오류 해결, common 컴포넌트로 분리하기
2023. 1. 12. 22:51
TIL/트러블슈팅
typescript interface property를 optional로 변경하기 기존에 있던 form에서 에러 객체의 타입입니다. 어떤 input인지 예상할 수 있었기 때문에 따로 타입을 만들어 선언하면서 사용했습니다. 하지만 이렇게 사용을 해보니 form의 값을 저장하고 있는 value와 error에 새로운 키가 추가되었을 때 직접 type 선언한 부분을 찾아가 추가해줘야한다는 단점이 있었고 form을 사용하는 객체가 많아질수록 코드의 양이 늘어나게 되었습니다. export type ErrorProps = { email?: string; password?: string; error?: string; }; 따라서 초기값에 따라 optional한 객체 타입을 만들어주는 유틸리티 타입이 필요했고 아래와 같..
typescript interface property를 optional property로 바꾸기
2023. 1. 12. 18:12
TIL/트러블슈팅
요약 export type ChangeTypeOfKeys = { [key in keyof T]?: T[key]; }; ChangeTypeOfKeys interface의 property 값들을 optionl로 바꾸기 form의 value로 들어가는 객체의 값으로 error 객체를 만들고 싶었다. 따로 타입을 선언하는 것보단 유틸적으로 기존의 타입을 변환시키면 좋을거같아 찾아보니 스택오버플로우에서 찾을 수 있었다. 유틸리티를 고민해보면 정말 많은 방식이 있는거같다.. 찾기가 조금 어려울 뿐?