우주먼지 개발 log

오늘도 쉽지않군.. TIL TypeScript React 에서 쓰기 함수의 input, output에 type 쓰는 기본부터, 객체 배열 type 까지 원장님 추가 세션에서 받아적은 것 정리했다 !! [TypeScript] React 에서 사용하기 2 지난 포스팅에서 설치만했으니까 이제 사용하는 방법!! 스파르타 내배캠 프론트엔드과정 원장님 추가세션 수업들은 내용 정리 ^.^ 1. typescript 문법을 쓰지 않아도 컴파일러가 추론해서 에러를 잡 developer.happymunzi.com 그 다음은 props랑 children, eventHandler type 주는법 예정... 그 다음은 redux 사용하는 법.. 와.. 어렵다 ^.^ 이러다가 숙제 1level props-drilling 인채로 제..

오늘도 화이팅! TIL Animation css 공부하기 따로 작성하였다~ [css] 애니메이션 @keyframes React App 처음 생성했을 때 이미지가 돌아가는 것에 대해 생각해 본적이 없었는데, 이제야 갑자기 궁금해져서 얘 gif 인가? 했는데 아니었다. css를 통한 애니메이션 효과였던 것이다. ㅇ0ㅇ 팀플 후 developer.happymunzi.com TypeScript React에서 사용하기 이것도 따로 작성하였다~ [TIL] 23/12/12 TypeScript 문법 종합반 : Start 오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라..

오늘도 화이팅! TIL TypeScript 요약 = > javascript는 웹페이지에 동적인 효과를 주기 위해 만들어진 스크립트 언어인데 -> 발전하여 성능을 높이고자 구글에서 v8 엔진을 크롬 브라우저에 내장했고 -> 이를 기반으로 Node.js 라는 플랫폼이 나왔고 javascript로 백엔드를 개발할 수 있게 되었다. 그런데 프론트엔드에서 뷰에서 보이는 사소한 에러였던 녀석들이 백엔드에서는 서버를 다운시키는 어마무시한 에러를 볼 수도 있다. javascript는 동적언어이기 때문에 런타임에 (프로그램 실행) 개발자의 실수를 알게 되기 때문이다. javascript의 단점 1) 실행시간에 결정 되는 변수 타입 2) 약한 타입체크 - let, const 무슨 타입인데? 뭘 담는 변수? - let a ..

오늘도 화이팅! 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..