우주먼지 개발 log

오늘도 화이팅! TIL 1) 리액트 쿼리를 썼는데 같은 페이지에 있는 A 컴포넌트에서 저장하고 B 컴포터넌트에서 읽어올 때 , 읽어오는 정보들이 바로 화면 업데이트가 안된다! alert창도 안뜬다 ! 도무지 모르겠다! 이거 그거잖아 ~ invalidate 안해준거 아니야? 할 수 있는데, 해줬다 룰루~ ^.^ 이건 내가 넣은 isSuccess 구문 때문이었던 것 같은데, 타이밍 문제인 것 같다. ^.^ onSuccess와 isSuccess를 둘 다 넣은 탓에 둘의 싸움이 아닐까.. 왜냐 onSuccess에서 console.log("xx") 한 줄만 넣어줘도 alert 이 뜨기도 했으니까. 넘넘 황당.. 나 이거 어디서 본것 같은데 ㅋㅋㅋ 결국엔 망한 코드에서는 console.log 한줄 못빼는 것이다. ..

오늘도 화이팅! TIL (팀 KPT 회고) Keep - 현재 만족하고 있는 부분 주희 지향님 따라다니면서 튜터님께 질문 자주하고 명쾌한 해결법을 받을 수 있어서 너무 좋았다. 리액트 쿼리 사용법을 알게된 점 지향 의견을 적극적으로 내고 소통이 원할해서 좋았다. (내가) 부족하지만 맡은 부분을 의견을 통합한대로 맞춰주면서 구현해내서 만족스러웠다. 민규2)전반적인 css 외우진 못해도 한번씩 구현해서 꽤 많이 성공한 부분 1)툴킷, 회원가입/로그인 유효성 검사 연습 희찬 프로젝트에서 진행 과정에서 반복되는 부분에 익숙해 질 수 있어서 좋았다. git을 강의에서 단순히 배운 것을 실제 프로젝트에서 사용해보니 좋았다. 홍상 Problem - 불편하게 느끼는 부분 주희 출제의도에 맞춰 api 사용에 중점을 두면 ..

오늘도 화이팅! TIL git git git (PR 올렸는데 컨플릭트 나는 중) git switch dev // dev로 이동 git pull //dev를 땡겨옴 git switch feature/MapSearch // 내 브랜치로 이동 git rebase dev // 최신 데브로 리베이스 (베이스를 다시잡겠다) git status // 충돌 수정중 // 수정 완료 git add . git commit -m "fix: 패키지 충돌문제 해결" git push //밑에 명령어 보기 위함 git push --set-upstream origin feature/MapSearch // 원격에 올림, --set-upstream 이해못했음 git switch dev // dev로 git pull git branch -..

강의듣고, 튜터님 질문하고, 동기 질문하고 마스터 해버림 정리는 못함. 그래서 코드를 첨부하고 주석을 달았다. TIL Naver 지역 검색 api 와 함께하는 React Query 내 component : MapSearch.jsx function MapSearch() { const [inputTitle, setInputTitle] = useState(''); const [localList, setLocalList] = useState([]); // enabled 사용 : false로 두었다가 검색버튼 클릭 시 refatch해서 data 불러옴 // select 사용 : data에 원래 받아온 데이터에서 items 객체만 선택해서 가져옴 // isLoading, isError 상태를 유저에게 보여주기 위해..

오늘도 화이팅! TIL (데이트 코스 페이지 만들기) 1) 와이어 프레임 figma 페이지로 구현을 하였는데, 우리가 figma 를 그렇게 잘 다루지 못해서 -0- 적당히 넣어 두었다만 네이버 맵스 API 등등응 조금더 알아보고 개인별로 페이지가 변경될 수는 있을 것 같다. 2) API 사용 네이버 맵스 API 는 지도를 띄워주고 마커를 체크하는 데 사용 1) Naver cloud platform 가입 - https://docs.ncloud.com/ko/naveropenapi_v3/application.html 2) Maps API 사용 설명서 - https://navermaps.github.io/maps.js.ncp/ 네이버 지역 검색 API는 검색한 장소들을 보여주는 데 사용 1) Naver Deve..

강의를 다시 들으면서 하나하나 구현하니 오래 걸리긴하지만.. 하나도 기억이 안났는 걸..? 그래도 조금 많이 이해 완료 큰 이슈는 새로고침 이슈 빼고 모두 구현 완료! 👏 (TIL 쓸 때도 css 연습..ㅋ) TIL 💡 Big Issue 1) 새로고침 이슈 requirement : 1) 로그인 상태인 경우 홈, 상세, 프로필 화면에만 접근, 로그아웃 상태에서는 로그인 화면에만 접근 할 수 있게 하기. 2) 새로고침시에도 로그인 상태가 유지되도록 로컬스토리지를 이용. solution for 1) : 로그인을 알 수 있는 state 값에 따라 (예를 들어 isLogin, 혹은 accessToken이 있는지 없는지, 처음에는 전자로 구현했다가 후자로 바꿈) 라우터들을 분기 처리하고 다른 주소가 들어올 때는 로..

메모장에 찾아본 거 잔뜩 있었는데 날려버렸다ㅠㅠ 문제와 해결이 더 많았던 것 같은데 TIL 과제 진행 중 문제와 해결 json 서버 접근 시 access Token 확인 먼저 하기 위한 인터셉트 구현 https://velog.io/@dishate/axios-interceptor%EB%A1%9C-401-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0 https://leeseong010.tistory.com/133 이미지업로드 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file https://velog.io/@yeogenius/React-%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EC%8A%A4..

오늘도 화이팅! TIL styled-components 활용 조건부 스타일링 숙련주차 때 해두어야 할것을 지금 다시한다. 왜냐 연습이 안되어있어서 자꾸자꾸 다시 강의자료를 찾아보니까. 강의자료 보기 귀찮으면 그냥 무식한 코드를 생성해 버리니까.. 아이디, 비번 들어오면 로그인 버튼을 활성화 하는 코드를 작성하려고 한다. 1) 무식한 코드 : 지금 과제 코드^.^ 로그인 버튼에 호버하면 로그인에 색깔을 주려고 한다. - 미리 분기해서 css 가 다른 버튼 컴포넌트 호출 (컴포넌트가 두개여야 함) { (id && password) ? 로그인 : 로그인 } 2) 여전히 복잡해서 기분나쁜 코드 - props로 받아서 스타일 컴포넌트 안에서 분기처리 -( color : 뒤에서 분기를 해주려고하니, 배경색에서도 또..

오늘도 화이팅! TIL 일반 redux 를 redux-toolkit 으로 리팩토링 보통 현업에서 일반 리덕스는 쓸일은 없다고 한다~ 어제 설치만 적어놓은 글에 리팩토링 방법을 왕창 추가하였다. 이제 과제에 적용만 하면 된다. [react] Redux Toolkit 사용하기 redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설치하기 developer.happymunzi.com TODO 튜터님 베이스 코드로 과제 다하기 강의 다듣기 숙련주차 개인과제 코드 리팩토링 / 내 코드로 과제 다시하기

TIL에서 두가지 이상을 쓸때 찾아보기가 어려워서, 내가 찾아보기 편하기 위해, 따로 페이지로 정리하기로 했다~! TIL redux tool-kit 아직 패키지 다운로드 밖에 안썼지만 강의 한번 더 듣고 정리하기.. [react] redux Toolkit redux Toolkit redux를 개량하여 코드를 더 적게, 편하게 사용할 수 있게 해주는 툴킷이다. ducks 패턴의 자동화! (ducks 패턴, 나중 정리) redux Toolkit설치 프로젝트 생성 후 yarn 을 이용해 패키지 설치하기 developer.happymunzi.com 객체 state 관리에서 중요한 불변성 확인 사이트 불변성이 중요한 이유 : state가 불변성을 유지해야 (원본배열을 수정하지말라) 리액트에서 변경점을 확인해서 리..