기록하는 개발자 기록하는 개발자

https://my-engineering-blog.tistory.com/71 React Native로 TodoList 만들기 React Native로 TodoList 만들기 뼈대+CSS(styled component 사용) - styled component는 install 설치해줘야 한다. https://emotion.sh/docs/@emotion/native 참고 yarn add @emotion/react @emotion/native npm install @emotion/react @emotion/native my-engineering-blog.tistory.com 오늘 이거 정리하느라 하루를 다 썼다. 그냥 React로 Web을 만들 때랑은 코드 작성 방법이 달라서 많이 헤맸던 것 같다. 나는 뭔가 ..

https://my-engineering-blog.tistory.com/69 React Native 설치 및 로컬환경 작업부터 배포까지 설치 전 사전작업 - https://expo.dev/ 가입하기 - 휴대폰에 Expo Go 어플 설치하기 설치하기 1. https://expo.dev/ 접속 2. 처음 프로젝트를 만든다면 왼쪽 메뉴에서 Create Project 버튼을 클릭, 프로젝트를 생성 my-engineering-blog.tistory.com npm 설치하는데, 에러가 생긴다. 권한 설정 문제라는데.. 귀찮으니 sudo로 설치해준다. sudo npm install --global eas-cli 설치가 완료되었다.. 왜 자꾸 권한 설정 문제가 생기는건지.. React Native는 style 주는게 일..

프로젝트 종료 아.. 드디어 프로젝트가 종료됐다. 이번 프로젝트는 너무 힘들었다..아 저번에도 힘들었나? ㅠㅠㅠㅠ 개념을 수박겉햝기로 배우고 들어가니 이게 왜 쓰이는건지.. 이걸로 뭘 하는건지..정말 감이 안잡혔다. 남이 만든 코드(리듀서 뼈대)를 복붙해서 거기에서 작성하니까 문제가 됐던게 get에는 thunk코드에서 json주소 적고 뒤에 payload를 못받는데 그걸 계속 받으려고 하니 되지도 않고;; update는 payload가 필요한데 그게 없으니 업데이트가 안되고 이 코드가 뭔지도 모르고 계속 맘대로 코딩하다보니 의도치않은 에러들이 너무 많이 났다. 이 에러들을 잡으면서 정말 많이 배운 것 같다. 콘솔을 계속 찍으면서 잡아보니, Hook에대한 이해도가 대폭 상승하였고, thunk를 쓰는 이유와..

오늘 배운 점 - Slice 안에 액션상수? 의 이름은 다 달라야 한다. - 항상 데이터 잘 보내는지, 가져오는지 콘솔 찍어 볼 것 Thunk를 쓰는 이유 비동기적인 액션을 쓸 수 있음. / 서버통신 얼마나 걸릴줄 모르는데 기다릴 수 없음 / promis로 보내려면 thunk를 써야함. 일지 Slice를 어떻게 작성해야하는지 잘 몰랐고, useSelector, useEffect, useParams, Location, dispatch를 어떻게, 왜 사용해야하는지 몰랐는데 이제야 좀 감이 잡힌다. 효율적으로 작성하기 위해 Slice에 어떻게 코드를 짜면 좋을지 고민해보는 시간을 가졌다.

프로젝트 기간 평점 기능 추가 평점 기능을 추가하기로 해서 튜터님께 조언을 받아 이 라이브러리를 설치했다. https://www.npmjs.com/package/react-rating-stars-component react-rating-stars-component Simple star rating component for your React projects.. Latest version: 2.2.0, last published: 2 years ago. Start using react-rating-stars-component in your project by running `npm i react-rating-stars-component`. There are 18 other projects in the np..

프로젝트 기간 이번에 만들 프로젝트 : 붕어빵 가게 찾아주기 웹사이트 참고 웹사이트 : https://holaworld.io/ 들어가는 기술 : redux thunk, styled-component, router, json-server 내가 만들어야 할 것 : 글쓰기 페이지, 글 수정 페이지 ...............아..이걸 오또케 만들지..? UI를 꾸미기 전, Web Editer를 사용해보고 싶었다. 그래서 찾아본 결과 Toast Editer를 많이 사용하고, 리액트에서는 React Quill 을 많이 사용한다고 한다. 일단 시작을 위해 https://github.com/zenoamaro/react-quill#quick-start 사이트로 들어가 적용하는 방법을 찾았다. 적용 방법은 너무 쉬웠다...

❌✅ 오늘 할 일 ✅리액트 심화강의 완강 ❌드림코딩 강의 수강 일지 드디어 심화강의 완강했다. 어떻게보면 쉬운것같기도.. 어떻게보면 어려운것같기도.. 예전처럼 익숙하지 않아서 그런건가, 뭔가를 쉽게 사용하려고 이용하는 부가적인 것 들인데 새롭게 배우려니 더 어려운 기분.. 오늘도 열심히 작성하면서 공부했다. 내일부터는 또 팀프로젝트인데 이번에도 잔뜩 배워서 다음챕터로 넘어가야겠다 :) https://my-engineering-blog.tistory.com/62 성능 최적화를 위한 React-hook memo - 정확히 말하면 hook은 아님 - 밑에서 정리할 useCallback이나 useMemo를 사용하기 위해 반드시 알아야하는 개념 - 컴포넌트에 불필요한 렌더링을 하지 않도록 해주는 함수 (화면에서 ..

오늘 할 것 ❌내배캠 심화과정 완강하기 ✅실업급여 신청하기 ✅3시30분 산책 다녀오기 ❌드림코딩 리액트 강의 보기 일지 원장튜터님이 redux todo app 만들기 영상을 올려주셔서 심화과정과 드림코딩 강의는 못봤다. 이 todo app 만들고 하루종일 영상 돌려서 반복하고 치고 다시치고 정리하고 하다보니 하루를 꼬박 투자했지만 아깝지 않은 시간이였다. redux에 대해 이해가 많이 됐다. https://my-engineering-blog.tistory.com/59 Redux 이용해서 TodoApp 만들기 나중에 보고 또 참고할 수 있도록 단계별로 정리를 하려고 한다. 1. Router 만들기 - yarn add react-router-dom 설치 - src폴더 안에 pages, shared 폴더 생성..

오늘 할 것 리덕스 특강 다시보기 심화 영상 보기 4시에 산책다녀오기 https://my-engineering-blog.tistory.com/51 Redux Toolkit 리덕스툴킷 설치 yarn add react-redux @reduxjs/toolkit 일반 리덕스 → 리덕스툴킷으로 코드 수정 수정 전 수정 후 리덕스툴킷으로 변경 하고있었는데 오류남. 객체 리턴 시 ()소괄호로 감싸줘야하는데 my-engineering-blog.tistory.com https://my-engineering-blog.tistory.com/52 Json-server json-server DB와 API 서버를 생성해주는 패키지 json-server가 필요한 이유 백엔드에서 서버 구축을 해주면, 그것과 연결 했을 때 살아있는 ..

오늘 할 일 오전 후발대 마지막 영상 다시보기 혼자서 투두리스트 삭제+스위치 만들어보기 오후 코딩애플 2레벨 영상 보기 혼자서 투두리스트 삭제+스위치 만들어보기 30분 산책하고오기 내배캠 숙련강의 영상 복습 후발대 강의에서 배운 것 const handleDeleteButtonClick = () => { setTodos((prev) => // todos를 prev에 담음 prev.filter((t) => { // prev(배열)안에있는 요소 하나하나를 t에 담음 return t.id !== item.id;// t의 id와 item의 id가 같지 않은것들만 리턴해서 빈 배열에 담음 }) ); }; prev : 지금 현재 상태, 즉 todos 그 자체 t : todos 배열안에 있는 객체(요소) 하나하나 fi..