react
-
[React] 리덕스 간단하게 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 4. 17. 23:22
드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다. 📌 들어가며 리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다. 이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다. State를 사용하는 범위에 따..
-
[React] 컨텍스트 Context 알아보기WEB Dev/Javascript | REACT | Node.js 2023. 3. 22. 00:27
해당 내용은 SOAPLE 님의 처음 만난 리액트(React) 강좌에서 발췌하였습니다. 📌 들어가며 리액트에서 상태관리를 할 수 있는 방법은 다양하게 존재한다. 상태관리 라이브러리를 쓰기 전에 리액트 내장 훅으로 사용할 수 있는 Context API에 대해서 공부해보고자 한다. 📌 context란 리액트 개별 컴포넌트들은 props를 통해 데이터를 전달한다. (부모 ➡️ 자식) props를 통해 데이터를 전달하게 되면 다수의 컴포넌트에서 필요한 데이터는 Props Chain(Drilling) 현상이 일어난다. 이를 해결하기 위해 Context가 발전했다. 📌 context의 원리 리액트를 props 방식으로 운영할 때는 아래 그림과 같이 props를 props가 위치한 컴포넌트에서 필요한 컴포넌트까지 컴포..
-
[React] npm 대신 yarn으로 create-react-app 시작하기WEB Dev/Javascript | REACT | Node.js 2023. 2. 26. 20:51
yarn 으로 create-react-app이 익숙하지 않아서 터미널 명령어 복습 겸 기록! ♪(´▽｀) yarn으로 create-react-app 설치하기 1. yarn 이 설치되지 않은 경우 yarn 을 npm을 통해 설치한다. (-g는 글로벌 global이란 뜻으로 붙이면 로컬 전역에 설치한다) npm install -g yarn * 만약 npm도 설치되어 있지 않다면 별도로 설치해야함! node 설치 바로가기 2. 터미널을 열어 아래 명령어를 입력하여 create-react-app을 yarn으로 설치한다. yarn create react-app 새폴더명 * npm은 npx install create-react-app을 입력하면 되지만 yarn은 create를 명령어로 사용해서 설치한다는 점을 기억..
-
[React] Udemy 강의 노트 10-2WEB Dev/StudyNote 2023. 2. 9. 22:56
useReducer & useEffect - 입력은 전체 폼의 일부이다. - 코드가 너무 일찍 실행된 경우에는 useEffect는 state 업데이트 후에만 실행됐었다. - 의존성은 state 전체이지 유효성이 아니다. - 객체의 특정 속성을 추출하는 객체 디스트럭처링을 이용할 수 있다. - const { isValid: emailIsValid } = emailState; 로 emailState의 isValid state를 emailIsVaild라는 상수로 별칭할당을 할 수 있다. 중첩 속성을 useEffect에 종속성으로 추가하기 - useEffect()에 객체 속성을 종속성으로 추가하기 위해 distructuring을 사용 const { someProperty } = someObject; useEff..
-
[React] Udemy 강의 노트 10-1WEB Dev/StudyNote 2023. 1. 26. 23:38
모듈 소개 - 세 가지 매우 중요한 개념이자 고급 기능 - 이펙트, 리듀서, 컨텍스트 "Side Effects"이란 무엇이며 useEffect를 소개합니다 - 이펙트 == 사이드이펙트 - 리액트 앱의 컴포넌트는 주요한 임무가 하나 있다 -> UI를 렌더링 - 화면에 무언가를 가져오고 사용자가 상호작용하게 하는 것 -> 버튼이 클릭되거나 텍스트가 입력되는 것 - 사용자 이벤트에 리액트를 사용하여 컴포넌트를 재평가하고 실제 DOM을 조작한다. - 이펙트는 앱에서 일어나는 모든 것을 말한다. - http 리퀘스트를 보내거나 브라우저 로컬 스토리지에 무언가를 저장하거나 하는 작업들은 화면에 무언가를 그리는 것과는 관계가 없다. 이것은 리액트가 화면에 무언가 그릴 필요가 없기 때문에 리액트와 관련이 없다. - 일..
-
[TypeScript] GraphQL과 타입스크립트로 개발하는 웹 서비스 스터디 Pre02WEB Dev/StudyNote 2023. 1. 2. 00:35
⌈GraphQL과 타입스크립트로 개발하는 웹 서비스 : 설계부터 개발배포까지 따라 하며 완성하는 웹 풀스택 개발⌋ 따라하기 2023-01-01 21:00 2일차 대비 프로젝트 준비 과정 3장 프로젝트 준비 3.1 프로젝트 소개 무료로 배포된 지브리의 명장면 사진, 포스터를 감상하고 장면에 대한 "좋아요" 및 감상평을 남길 수 있는 간단한 서비스 제작 기능 요구사항 - 회원가입과 로그인이 가능해야 합니다. - 유저는 영화 목록을 확인할 수 있어야 합니다. - 유저는 특정 영화의 명장면 목록을 확인할 수 있어야 합니다. - 유저는 명장면에 "좋아요"를 누를 수 있고, 감상평을 남길 수 있어야 합니다. "좋아요" 누르기와 감상평 남기기는 로그인 상태에서만 가능해야 합니다. - 유저는 프로필 사진을 업로드할 수..
-
[React] Recoil 내 Selector 간략 정리WEB Dev/Javascript | REACT | Node.js 2022. 7. 31. 16:56
REACT Recoil Selector 공식문서 정의 셀렉터Selector는 아톰atom이나 다른 셀렉터Selector를 입력으로 받아들이는 순수함수다. "A Selector represents a piece of derived state." 셀렉터는 파생된 스테이트derived state의 일부를 저장한다. *순수함수 부수적인 효과가 없는 함수. 즉, 똑같은 입력 값에 대해 항상 똑같은 출력값을 돌려 주는 함수이다. 비동기 통신과 같은 처리는 아톰atom만을 이용해서 하기 어렵다. (별도의 함수에서 비동기 통신으로 data를 받아 atom에 저장해 주어야 한다.) 이런 번거로운 처리를 셀렉터Selector로 한 번에 처리할 수 있다. 셀렉터Selector의 특징 - selector는 read-only ..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 38WEB Dev/ToyProject 2022. 3. 21. 23:25
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 와우 엄청 오랜만에 토이프로젝트 문서를 작성해본다. 그동안 작업을 안한 건 아니고 글을 적는 시간에 빨리 개발을 해야겠다는 생각에 글을 좀 자제했다. 그동안 한 일은 1. 투두를 클릭했을 때 띄워지는 모달의 모든 기능을 구현 - 수정, 내일하기, 날짜바꾸기, 순서변경, 삭제 수정, 내일하기, 날짜 바꾸기, 삭제 기능을 구현했다. 그리고 순서 변경을 별도 페이지로 리디렉션해서 순서를 변경하도록 해야하는데 이 로직이 조금 복잡해서 백엔드 팀원분과 나중에 같이 작업하기로 했다. 드래그 라이브러리를 사용해서 대충 만..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 36WEB Dev/ToyProject 2022. 2. 8. 15:45
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. 할 일 클릭 시 등장 모달 이제 뿌려진 할 일을 클릭하면 5개의 버튼이 있는 모달창을 띄워야 한다. 이 모달은 해당 할 일의 정보를 변경해주는 기능을 한다. 목표 설정할 때 썼던 MUI Dialog UI를 쓸까도 생각했는데 단순한 버튼만 있으면 되어서 이번에는 Modal을 적용해보았다. 원본과 비슷한 사이즈로 모달의 컨테이너와 버튼을 구현했다. {/* 모달 생성 */} export function TodoModal (props..
-
[React] 클릭한 부분의 e.target 값 알아내기 (e.currentTarget)WEB Dev/Javascript | REACT | Node.js 2022. 2. 3. 21:28
투두리스트를 만들면서 목표 > 할일 구조를 만들어야 한다. 클론하고 있는 투두메이트에서는 목표를 '클릭'했을 때 하단에 input이 나오도록 되어 있다. 해당 목표 구조를 만들기 위해서 MUI UI 라이브러리를 이용해 아래와 같이 HTML DOM 구조를 생성했다. 내가 원하는 것은 에 onClick을 넣고 e.target.id 값을 얻어서 input hidden에 전달하는 것이었는데 실제로 클릭 이벤트를 넣어보니 누르는 위치값에 따라서 Button의 e.target 값, ListItem의 e.target 값, span의 e.target 값 이 나타났다. //목표 클릭 시 이벤트 핸들러 function clickTodoHandler(e){ console.log(e.target) } 내가 원하는 것은 But..