감귤밭 호지차 농장

Redux 와 Redux-toolkit " Redux " 는 상태 관리 라이브러리 중 하나로 가장 인기가 많은 녀석입니다. props 를 여기저기 내려주다가 props드롤링 이 일어나는 것을 방지하기 위해 서버와 주고 받는 데이터를 관리해주는 역할을 학도 있습니다. > 댕쩌는 설명 블로그가 있어서 첨부합니다. : 최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기 > 내가 정리한 Redux : [230424 ~ 5] 리덕스::REDUX Redux-toolkit 은 redux의 상위 업그레이드 버전으로 이해했습니다요... 어차피 {toy-project-DailyMusic}작업을 redux 로 상태 관리 하기로 했으니까 이왕 하는거 redux-toolkit으로 적용해서 사용해보겠습니다. ..

Tawilwind 엄청나게 많은 유틸리티 클래스로 이루어진 CSS 프레임워크입니다. 제공되는 유틸리티 클래스들을 다양하게 조합하여 CSS 코드 작성 없이 class 속성에서 스타일링을 할 수 있습니다. ^현재 버전 : V3.3.2 ^공부 환경 : React + TS + Vite Install 방법 1. vite 로 리액트 프로젝트 생성 npm create vite@latest {생성 예정 폴더 이름} 이렇게 하면 Vite 설정할 수 있는 선택지들이 나오는데 원하는대로 엔터> 엔터 > 엔터 > 하믄 됩니다! 2. Tailwind CSS 설치 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - tailwind.config.js파..

하나 해결하면 하나 안되고 하나 해결하면 여러 개 안되고 돌아버리겠습니다요... 리액트에서 타입스크립트 넘어가는거 쉽지 않네요... 휴 에러1_Uncaught Error: useRoutes() may be used only in the context of a component :: 응 그냥 로 안 감싸서 그랬다 이거야.... //index.tsx import React from 'react'; import {createRoot} from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; import './index.css'; import App from './App'; const rootElement = document.getElem..

React 프로젝트에 Typescript 사용할 때 App.tsx와 index.tsx을 설정하는 방법에 대해서 정리합니다. *App.tsx import './App.css'; const App: React.FC = () => { //{: React.FC는 없어도 잘 동작합니다. } return ( MAIN ); } export default App; 그렇다면 React.FC 는 무슨 역할을 하는 친구일까요?? > **FC** 라는 제네릭 타입을 이용하여 함수형 컴포넌트들이 타입스크립트로 작성 할 수 있게 해주는 역할을 합니다. 잠깐.. 근데 이젠 더이상 " React.FC " 를 사용하지 않는다구요..? :: 참고 - React.FC를 사용하지 않는 이유 > 굳이 React.FC를 쓰는 것보다 props..

팀원들과 깃 PR을 올리다가 역시나 충돌 대환장 파티 내꺼는 컴포넌트 단위로 올려서 충돌 나는 부분이 없었는데 갓 댐... 전체 파일로 PR제출 하신 두 분이 충돌이 나 버렸다. 어제 그니까 30일 화요일 스터디 당시에는 도저히 제 시간 안에 해결 할 수 없을 거 ㅅ같아 잠시 보류 하고 다른 작업을 했다. 30일 진행 한 작업 1. figma전체 디자인 수정 작업 완료 2. 각자 PR한 부분 코드 리뷰 및 답변하기 + 기능 구상 31일오늘 시간을 내어 충돌 난 부분을 해결 하기 위해 검색을 해봄... 우선.. 휴.. 음 간단하게 git fetch 쓰면 되지 않을까 했는데 git remote된게 아니고 이 터미널로 연결 된 작엄이 내 레포지토리와 연결 된거라서 공용 레포지토리의 작업물을 받아 오는게 불가했..

기간 : 1.5월 18일 목요일 시작 : 4명의 팀원 주제 및 만들고 싶은 사이트 정하기 테마 어림 잡아 정하기 *5/21 : 팀원 한명 의견 불일치로 탈퇴 2.5월 23일 화요일 디자인 수정 회의 + 피그마 작업 : 메인 / 로그인 페이지 작업 시작하기 : 기능 분배 * 목표 각자 맡은 업무 80% 정도 완료해오기 * hj : 로그인 페이지 + sso * jy : 푸터 + 플레이 리스트 ui 컴포넌트 * me : header + article ui 컴포넌트 # 05.30 [1]깃을 통해 pr 작업을 시도하려던 중 , header 브랜치를 먼저 만들기 이후에 structure 브랜치를 만들고 거기서 작업을 하다가 pages를 폴더를 만들고 여기서 pr 을 한뒤 다시 header브랜치로 돌아가니 만들어 두..

북마크 저장 1. 서버에 저장 2. localStorage : 클라이언트 영구 저장소 브라우저 내에 있는 자체 Storage 예전에는 cookie 브라우저를 껐다 켜도 그대로 저장되어 있다. 하지만 다른 컴퓨터로 가면 동기화가 되지 않는다. Ex. 장바구니 3. 메모리 SPA라서 브라우저 끄기 전가지는 날라가지 않는다. # 무한 스크롤 Intersection observer API 로직 잘못 짜면 로직 상 에러 발생 비동기가 호출되는 시점 잘 지정 해야 합니다. 해야 되는 거 1. SSO : Single Sign OIn 카카오 / 구글 / 네이버 구현 2. 무한 스크롤 3. 반응형 웹 4. HM 클론 마무리 5. navbar 중단 후 다른 youtube api로 적용 6. 깃 정리 7. 코플릿 - 알고리..

보통은 React 프로젝트 생성할 때 속칭 ' CRA ' 라는 Create-React-App 명령어를 실행합니다. 하지만 CRA는 빌드하는데 시간이 너무 오래 걸리고 양이 커서 불편할 때가 있습니다.Vite 간결한 모던 웹 프로젝트 개발에 초점을 맞춘 빌드 도구입니다. 계속 CRA만 썼기 때문에 Vite로 조그마한 프로젝트를 만들어 보려고 합니다. Vite로 프로젝트 생성 과정 npm create vite@latest 이후 이런 식으로 선택지를 통해 프로젝트 기초를 설정할 수 있습니다. Javascript 뿐만이 아니라 Typescript도 선택할 수 있었습니다. SWC가 뭔지 모르겠지만 한번 선택해 보았습니다. SWC에 대해서는 위의 카카오 블로그에서 잘 설명 되어있으니 내일 읽어보려고 합니다. * p..

구현 기능_01 : weather api에서 날씨 온도에 따라 제공되는 아이콘 불러오기 [ 오류 발생 & 실수 구덩이 ] ㅇㄹㅇㄹㅇㄹ 구현 기능_02 : 도시를 option 선택으로 변경할 수 있게 구현하기 [ 오류 발생 & 실수 구덩이 ] 옵션을 선택했을 때의 값을 props로 넘기면 바로바로 값이 바뀔 것으로 생각했으나 바뀌지 않아 한참을 고민하다가 작업을 종료 했었습니다. 그러다가 자려고 누워서 생각해보는데 아차차!!! useRef 로 api를 처음 페이지가 랜더링 될 때 딱 한번만 불러오도록 설정했다는 것이 기억 났습니다. 그렇다면 선택 값이 바뀔 때마다 재 랜더링을 할 수 있게 설정한다면 되지 않을까? 해서 다시 코드를 수정해보았습니다. 깃 충돌 : 깃 PR 후 merge 충돌 에러 [ 오류 발..

Title : 리액트로 페이지네이션 구현하기 드디어 염원하던 리액트로 페이지네이션을 구현해보았습니다. 추후 CRUD 기능, 검색 기능을 구현해보고 싶습니다. 페이지네이션 라이브러리 페이지네이션을 구현하는 라이브러리 중 인기 상위인 페이지네이션 라이브러리 입니다. 라이브러리를 이용해서 구현해보지는 않았지만 라이브러리를 적용하는 방법을 익히기 위해 따로 공부해보아야 할 것 같습니다. react-js-pagination 리액트로 페이지네이션 구현하기 Component 나누기 App.js ┗ main : 메인 글 목록들과 페이지네이션 구현 ┗ header : Nav 파트 담당 ┗ datas : 임시 dummy datas Main Component 이 Main 부분에는 ' 현재 페이지에 나타낼 글 목록 ' 과 '..