목록2023/12 (26)
우주먼지 개발 log
[TIL] 23/12/07 React 심화: git git git
오늘도 화이팅! 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] 23/12/06 React 심화: 아웃소싱 프로젝트 (React Query 마스터하기)
강의듣고, 튜터님 질문하고, 동기 질문하고 마스터 해버림 정리는 못함. 그래서 코드를 첨부하고 주석을 달았다. 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] 23/12/05 React 심화: 아웃소싱 프로젝트 (데이트 코스 페이지) 개요
오늘도 화이팅! 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] 23/12/04 React 심화: 개인과제 이슈 모음(인증서비스가 들어간 팬레터함, 새로고침 이슈 등)
강의를 다시 들으면서 하나하나 구현하니 오래 걸리긴하지만.. 하나도 기억이 안났는 걸..? 그래도 조금 많이 이해 완료 큰 이슈는 새로고침 이슈 빼고 모두 구현 완료! 👏 (TIL 쓸 때도 css 연습..ㅋ) TIL 💡 Big Issue 1) 새로고침 이슈 requirement : 1) 로그인 상태인 경우 홈, 상세, 프로필 화면에만 접근, 로그아웃 상태에서는 로그인 화면에만 접근 할 수 있게 하기. 2) 새로고침시에도 로그인 상태가 유지되도록 로컬스토리지를 이용. solution for 1) : 로그인을 알 수 있는 state 값에 따라 (예를 들어 isLogin, 혹은 accessToken이 있는지 없는지, 처음에는 전자로 구현했다가 후자로 바꿈) 라우터들을 분기 처리하고 다른 주소가 들어올 때는 로..
[TIL] 23/12/01 React 심화: 개인과제 (인증서비스가 들어간 팬레터함)
메모장에 찾아본 거 잔뜩 있었는데 날려버렸다ㅠㅠ 문제와 해결이 더 많았던 것 같은데 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] 23/12/01 React 심화: 조건부스타일링 연습 (feat. styled-components)
오늘도 화이팅! TIL styled-components 활용 조건부 스타일링 숙련주차 때 해두어야 할것을 지금 다시한다. 왜냐 연습이 안되어있어서 자꾸자꾸 다시 강의자료를 찾아보니까. 강의자료 보기 귀찮으면 그냥 무식한 코드를 생성해 버리니까.. 아이디, 비번 들어오면 로그인 버튼을 활성화 하는 코드를 작성하려고 한다. 1) 무식한 코드 : 지금 과제 코드^.^ 로그인 버튼에 호버하면 로그인에 색깔을 주려고 한다. - 미리 분기해서 css 가 다른 버튼 컴포넌트 호출 (컴포넌트가 두개여야 함) { (id && password) ? 로그인 : 로그인 } 2) 여전히 복잡해서 기분나쁜 코드 - props로 받아서 스타일 컴포넌트 안에서 분기처리 -( color : 뒤에서 분기를 해주려고하니, 배경색에서도 또..