creamymood의 개발 공부 발자취 💭

mini project - 영화 페이지 만들기 (2단계)

2단계 내용 대충 휘익~ 훑고api 받아와서 그거 데이터 바꾸는거구만 쉽네 ~ 했는데오산 중에 오산. 왕 어렵잖하 ? ... 그냥 뚝딱 되는게 아니었음.. 하지만 재밌다. ㅋ 프론트엔드 체질 .. ? useEffect며, fetch며, filter, map .. params, 등등등....리액트에서 중요한 개념은 다 꼭 알아야할 아주 어렵고 중요한 파트 였다.. ⭐︎ 역시나, 부캠에서 제시해준 단계별 구현 단계가 있어서 크---게 어렵지는 않았다.프로젝트 시작 전에, 이렇게 구현 단계를 정리해보는 습관을 가져야겠다. 일단 큰 구성은 아래 처럼 했다. 1. api 받아오기 (api 받아올 비동기 함수는 컴포넌트 분리 따로 하지 않았음)2. 받아온 api를 상태로 값 저장하고3. 그 값을 map을 통해 ..

오~ 리액트 왜 머리 빠진다는지 진심 이해했고 ~ ... 하지만 프로젝트 만큼 날 채찍질 하는건 없어. . 괴롭지만 도움은 킹왕짱 됩니다.. 💗 아직... 디자인이 전혀 없는.. 조금 웃긴.. (ㅋㅋ..,...ㅋㅋㅋ)기능 구현에 우선. 초점을 뒀습니다 :>얼른 프로젝트 마무리 하고,, 수정 하기.... 1단계는리액트, 상태관리는 useState, css는 tailwilnd를 사용하여 구현 했습니다. 👏🏻 알게된 점.1. 더미데이터를 받았는데, 이 json파일은 export할 때 따로 export를 쓰지 않아도 되었다. 2. 리액트 라우터를 사용하려고 보니까, main.jsx 부분에서, strictMode.. 누구세요 ? ,//이렇게 감싸져있는데, 이 스트릭모드가 뭐야 ?→🔒 는 개발 ..

째깍째깍 ~ 1. 큰 흐름 생각해보기2. 상세 설명이 달린 전체 코드3. 코드 상세 분석4. useEffect로 시간 관리하는 이유큰 흐름 생각해보기리액트로 실시간 시계를 만들려면, 먼저 시간 데이터를 상태로 관리하고 그 상태를 주기적으로 업데이트하는 방식으로 접근하면 좋다.코드를 짜기 전에 필요한 구성 요소들을 생각해보자면:상태 관리 (state management): 시간을 저장하는 상태를 만들어야 함.setInterval로 실시간 시간 업데이트: 매초마다 시간을 업데이트하는 코드가 필요.시간 형식 맞추기: 시간은 "00.00.00" 형식으로 표시되어야 하므로, 이를 포맷팅해야 함.렌더링: UI에 시간을 표시하는 부분.우선 순위 제안:상태 관리 - 시간을 추적할 수 있는 상태가 필요하니까 이게 첫 ..

미니프로젝트 요구사항이1. 투두리스트의 기본 조건2. 시계3. 타이머 다음과 같았는데, 3가지를 한번에 공부하기 보다,하나씩 분리해서 공부해보려고 한다. 우선 1번부터, 챗지피티와 차근 차근 한 줄씩 따라 연습해봤음공부 방향은 전체 적인 흐름을 보고 훑었고, 챗지피티랑 따라 치면서 기억하고 생각해보고, 그 뒤 다시 한번 스스로 쳐보기 도전 방향임생각보다 시간이 많이 걸릴 것이기때문에 하지만 뭐든 익숙해지기까지 반복이 중요하단 것. 🥺너무 처음부터 완벽히 해내려면, 시작이 어려우니까.. 일단 어떻게든 코드를 쳐보며 익혀보자.화면에 출력될 투두리스트 내용은 다음과 같다.[할 일 입력하세요] [추가]---------------------------• 공부하기 [삭제]• 운동하기 [삭..

💭부캠 커리큘럼 중 js가 끝나는 기념(?)으로 미니 프로젝트가 있는데 바로 계산기 만들기 ! ..  아직 자스가 익숙하지 않은 상태라.. 많은 난관이 있었지만 하나하나 해결하는 과정과 공부한 과정 기록해보기 :-) 부캠에서 큰 틀은 짜줬고, 거기서도 가이드라인이 있는 단계별로 진행 되는거라, 어디서부터 코드를 짜야하지.. 그러한 막연함은 없었고,  헷갈렸던 forEach나 기타 함수들을 빠삭하게 배울 수 있는 시간 재밌고 의미 있는 시간이었다. 또한 개발 공부를 하며 처음으로 해본 프로젝트라, 신선한 긴장감을 느낄 수 있었고, 출중한 팀원들에게 피해를 주지 않으려고 열심히 노력한 내 모습에서 작은 성장을 발견해서 뿌듯하다. 계산기 완성 했지만, 작동에 우선 초점을 두어 css나 기능적인 부분에서 아직..