목록회고 (43)
코딩쌀롱
✱dataset 상황 : 체크박스 모달에서 라벨이 선택되면 모달창이 닫혔을 때 선택된 라벨이 렌더링돼야 한다. 의도 : 모달 내 메뉴 아이템 요소에 dataset속성으로 라벨에 대한 정보를 객체로 넣고, 클릭 && checked 됐을 때 dataset 정보를 state로 저장해서 렌더링하려고 했음 문제 : dataset의 반환값이 DOMStringMap 이라서 객체를 넘겨줄 수 없음..그냥 문자열로만 받을 수 있음. 이걸 왜 이제 알았지...? 해결 : 코드가 좀 늘어나긴 하지만 각각 키로 주려고 했던 정보들을 dataset을 여러개로 해서 보냄 그리고 클릭핸들러에서 그 정보들을 객체로 만들어줌. ... Object.assign({}, element.dataset) 그리고 추가로, data- 뒤에 가능한..
✱커스텀 훅 - 커스텀 훅의 state는 독립적, 호출될 때마다 state는 아예 독립적이다. 그렇다면 커스텀 훅이 호출돼서 종료되면 그 내부의 state값은 더 이상 수정하거나 사용할 수 없고 끝?(커스텀 훅이 종료되면 내부로 들어갈 수 없으니까 - 커스텀 훅의 state는 async 함수 반환값이 promise객체라 리턴값 활용을 못 할 때 유용. setState로 값을 저장하고 return state하면 되니까. ✱history API - pushState: 주소가 바뀐다. 뒤로가기 버튼이 활성화된다. 페이지는 새로 갱신되지 않고 주소만 바뀐다!! - replcaceState: 주소가 바뀌지만, 뒤로가기 버튼은 활성화되지 않는다. 마찬가지로 페이지 갱신은 안 된다. 이전 주소를 지우기 때문에 더는 ..
✱Hook의 규칙 - 최상위(at the Top Level)에서만 Hook 호출! - 오직 React 함수 내에서 Hook 호출! ( 컴포넌트 함수, 커스텀훅) ✱useEffect에서 async 함수 사용하기 - async 함수는 promise 객체를 반환. - 첫 번째 인자인 부수 효과 함수는 함수만 반환할 수 있다. - 반환된 함수는 부수 효과 함수 호출 직전, 컴포넌트가 사라지기 직전에 호출된다. - useEffect에서 async 함수를 사용하려면 useEffect 내에서 async 함수를 만들어서 호출해야 한다. ✱mount와 render의 차이 - 맨 처음 컴포넌트가 렌더될 때 mount, - props, state가 변경되어 리렌더링될 때는 mount가 아니라 render 참고📚 리액트 공식..
console.dir(location)해봤을 때. - location.pathname: 요청한 url의 path값 - match.path: 정의한 라우트의 path값 - match.isExact: 요청한 path와 정의한 라우트의 path가 같은지 - location.search: 쿼리 스트링 window.location.search를 queryString.parse에 전달해주면 객체로 만들어준다. location.search하니까 리액트+타입스크립트에서 에러가 나서 window.을 붙여줬더니 해결됐다. import queryString from "query-string"; const MyPageModal = ({ onClick }: Props) => { const query = queryString.p..
📌 event.target 타입 지정 event.target을 typescript로 어떻게 해줘야할지 모르겠었는데 카일이 도움을 줘서 해결했다. 위 코드에 주석을 붙여 설명해보았다. 아직 타입단언이 뭔지 감이 안 온다...😥 📌 달력 기능 구현 완료.. 오늘 드디어 달력을 마무리했다. 크게 단계를 나누자면 1. 달력을 띄우는 것: new Date()와 여러 메서드들 사용 2. 캐로셀: 화살표 버튼 클릭에 따라 duration, position, 내용이 바뀐다. 3. 날짜 선택: 사용자의 클릭에 따라, 호버에 따라.. 1단계인 달력을 띄우는 건 바닐라로 해봤어서 확실히 수월했다. 바닐라 자바스크립트로 할 때 참고했던 블로그가 즐겨찾기에 있어서 다행히..ㅎㅎㅎ 2단계는 큐랑 세미페어할 때 캐로셀 코드를 봤어..
네 번째 프로젝트(숙박예약사이트) 첫째 주 월요일(첫 날✨) 📚 프로젝트 진행 회고 - 2주 플젝만 하다가 첫 3주 플젝을 한다. 백엔드와만 했는데 iOS분과도 한다! 프론트엔드는 항상 협업만 했었는데 처음으로 혼.자.다! - 오늘 오전 수업은 Typescript, recoil의 내용이었다. 이번엔 처음으로 타입스크립트를 적용시켜야 한다. 아직 리액트도 못하는데 타입스크립트까지...그래서 오늘은 프로젝트 때 학습하기로 했다. - 타입스크립트에 대한 글, 영상만 조금 봤다..오늘 정말 집중이 안 된다😭 새벽에서야 집중이 되기 시작하는데 졸린다.. 금요일에 프로젝트 끝나고 쉬기 시작했는데 월요일까지 이러고 있다니... 📚 개인 공부 회고 - 저번 플젝이 끝나고 금요일부터 쉬었는데 회복이 쉽지 않다. 몸이 자..
이번 야구게임 미션은 지난 프로젝트를 하면서 하고 싶었던 것들을 많이 했다. 풀 페어프로그래밍, wiki에 회의록 작성, 팀원 각자 하루 느낀 점 작성, (미션 내용에 따라 달라지지만)백엔드와 찐한 소통! 그래서 첫 날 협업 방식에 대해서 이야기를 나눌 때부터 좋았다. 📌 풀 페어 프로그래밍하면서 느끼고 배운 것 일단 처음부터 끝까지 페어 프로그래밍을 했다. 모든 코드를 대화를 나누면서 작성하기 때문에 느릴 수 밖에 없었다. 하지만 이 프로젝트의 모든 FE 코드는 서로 다 알고 있다!(네 코드 === 내 코드) 느리지만 학습단계에서 정말 좋은 프로그래밍 방식인 것 같다. 이렇게 느낄 수 있었던 것은 아델라와 합이 매우 잘 맞았기 때문. 그 중 하나로 UI보다 로직을 우선시한 것인데, '못 생기게 만들더라..
주간 회고를 월요일밤에서야 쓰고 있다ㅠㅠ 지금이라도 적어야지! ✱잘한 것 - 미션에 정말 집중해서 열심히 했다. ✱아쉬운 것 - 하루 회고를 못 했다. - 일일체크리스트(알고리즘, 아티클, 회고)를 거의 못 했다. - '이 공부를 밤에 해야지'라고 한 것들은 다 못 함.. 장난하냐🤨 - 밀린 체크리스트들을 결국 하나도 못 하고 2주가 지났다.(이건 후순위) ✱다짐 ✔️ 일일체크리스트!! 이 정도는 매일 해야지😑 ✔️ 계획한 건 손이라도 대고 해봐라😑 ✔️ 할 게 많아서 밀린 체크리스트를 하기는 어렵지만 노력해보자 시간의 효율성을 높여야 할 것 같다~~~~~!!!
세 번째 프로젝트 둘째 주 첫 날. 📚 프로젝트 진행 회고 - 본격적인 야구 게임 동작을 state로 구현했다. pitch버튼을 클릭했을 때 s,b,h 랜덤으로 발생하게 했고, 화면에 렌더링, 로컬 스토리지에 저장하는 것을 작성했다. S, B, H에 따라 이후 진행 상황이 바뀌기 때문에 시나리오가 꽤 복잡했지만 잘 구현했다!🥳 - 오늘 뭔가 착착착 진행되는 것 같아 페어 프로그래밍이 재미있었다. 아델라가 하드캐리해줘서 진행이 빠르다! 📚 개인 공부 회고 - 알고리즘문제가 DP였는데 DP를 아예 몰라서 기본 문제인데 감도 못 잡았다. 그래서 DP를 공부했다. 유튜브 강의가 좋은 게 많아서 이해가 잘 됐다. - 알고리즘만 공부하고..기술아티클 읽기, react 공부, 수업 복습은 못 했다..😞 ✘✘✘ Kee..
지금 너무 피곤하지만 매 주 회고 작성하는 습관을 위해 작성한다! ✱잘한 것 - 하루 회고를 꽤 작성했다. - 플래너 작성을 꾸준히 했다. - 일일체크리스트를 100%는 아니지만 노력..했다! - 미션 진행이 더디긴 하지만 집중하면서 열심히 하고 있다. ✱아쉬운 것 - 컨디션 조절은 역시나 아직... - 밀린 체크리스트는 여전히 밀려있다. (Graph 공부, Graph 알고리즘 다시 풀기, 리액트 공식문서 읽기, 지난 미션에서 못 한 것들..) ✱다짐 ✔️ 플래너 작성 꾸준히 ✔️ 일일 체크리스트 꾸준히 ✔️ 밀린 체크리스트 하나씩 해결해나가기