공대생 개발일지 공대생 개발일지

* 문제점 : 딱히 없음 그냥 렌더링되는 거 보려고 설치함 * 설치방법 : - 크롬확장 프로그램으로 아래의 링크에 들어가서 설치(아님 그냥 검색해도 됨) https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 035a41c4e on 7/10/2023. chrome.google.com * 사용목적 - 렌더링되는 부분을 시각적으로 보고 싶었음 - 아래처럼 렌더링 되는 곳에 색 들어오는 거 *사용방법: ..

* 문제상황 : 각 페이지의 로직부분을 모두 hook으로 만들다 보니, 각 hook에 대한 type 설정이 필요하게 됐다. 기본타입은 기본타입에 맞게 넣고(string, number 등) 함수는 함수에 맞게 넣었는데( (e:ChangeEvent)=>void) , setState는 어떻게할지 몰랐었다 * 해결방안 : setState는 따로 타입이 있었다 Dispatch 요거를 넣어주면 된다

* 문제 상황 : 몇몇 페이지에 "프로텍티드 라우터"를 적용하여 로그인을 안 한 유저는 url로 접근이 불가능하도록 막았다. : 즉, 순서가 Ex. 커뮤니티 글 작성 페이지 -> 로그인이 안되어 있으므로 로그인 페이지로 이동 이 되는 건데, 맞딱뜨린 로그인 페이지에서 "뒤로 가기"를 눌러도 "커뮤니티 글 작성 페이지"로 돌아가기 때문에 생각한 뒤로 가지 않아지는 상황이 발생한다 * 해결방법 : useNavigate 의 replace return sub ? : : 프로텍티드 라우터에 replace를 넣었다 : 즉, sub(로그인유무판단변수)가 true이면, 사용자가 입장하려고 하는 으로 보내주면 되고, 아닐시 {"/login"} 으로 보내주면 된다. : 이 때, login 페이지에 replace={true..

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?) 3. Finding - CSS : Grid - Flex와 비교해봤을 때, Grid로 화면을 구성하는 게 장점이 크다 판단, Gird를 통해 화면을 구성해보기로 했다 - Grid의 장점 1) 2차원임 : Flex는 1차원적으로 구성되지만, Grid를 사용하면 2차원적으로 사용할 수 있음 2) gap 주기가 좋음, 즉 간격설정하기가 좋음 : 직접 사용해보며 느낀 건데, flex와 달리 행열사이에 모두 ga..

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?) - 씁.. 회고가 TIL이었음을 지금 깨달음 - 알려준 4F이 회고 기술 중 하나였음 - 괜히 회고가 뭔지 몰라서 찾아봄 1. Fact : 예,, 저는 멍청이 입니다.. Type Scirpt를 공부 하나도 안했는데, Type Script로 개발을 진행하는 사람이 있다? 그 사람이 바로 나예요.. 똑똑이 두 분과 함께 하다보니 감사하게도 Type Script와 RTK-Query, mockupserver로..

https://velog.io/@kmlee95/React-Typescript-eslint-prettier%EC%84%A4%EC%A0%95 React + Typescript eslint, prettier설정 ESLint : 코드의 문법을 검사하는 린팅과 코드의 스타일을 잡아주는 포맷팅 기능을 한다. 쉽게 말해 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구이다.Prettier : 코드의 스타일을 velog.io 관련 자료