리액트 [React] TDD를 활용한 쇼핑몰 앱 만들기 - 모듈편 이후 그 테스트 코드를 pass 할 수 있는 실제 코드 작성 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축됨 Don Testing Library : Dom node를 테스트 하기 위한 매우 가벼운 solution create react app으로 생성된 프로젝트는 즉시 React Testing Library를 제공함 원래는 npm insta... ReactTDD리액트React [Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM React, 한글 입력시 keydown 이벤트 중복 발생 현상 이 때, 영어가 아닌 한글로 입력한 후 keydown 이벤트를 실행할 때 이벤트가 중복으로 발생하였다. IME composition IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 어플리케이션을 말한다. 그러나 IME 과정에서 keydown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에... 리액트한글 입력 중복keydownReact중복한글입력React [Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 Input이 여러 개 일 때 (React) 리액트에서 Input이 여러 개 일때 상태관리하는 방법 이름, 아이디, 별명을 입력하는 코드가 있다. App.js 위의 사진처럼 3개의 Input과 1개의 초기화 버튼이 있을때 Input마다 state를 만들고 각 state를 업데이트 해줄 함수를 만들면 아래와 같다. App.js 하지만 위와 같은 방식은 매우 비효율적이다. useState를 3번 사용하며, 각 State를 업데이트해줄 함수... Spread자바스크립트inputReact리액트비구조화 할당React [Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA React에서 이벤트 적용하기 위와 같은 App 컴포넌트가 있을 때, button을 클릭했을 경우 alert를 뜨게 하고 싶으면 Vanilla JS의 경우에는 이런식으로 하면 되고 리액트의 경우에는 이런식으로 하면 될 것 같지만 사실은 rendering이 될 때 함수 호출 결과가 onClick에 바인딩 되기 때문에 아무것도 실행이 안된다. 따라서 이렇게 arrow function 등을 이용하여 호출해야 한다.... 리액트리액트 Context API, Redux, Mobx, Swr, Recoil context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 컴포넌트가 한 두 개 정도이면 크게 불편함도 없지만, 만약 컴포넌트가 3~4개 혹은 그 이상일 경우에는 props를 넘겨주는 것만으로도 굉장히 번거로워 질 수 있다. 하지만 context를 이용하면 많은 컴포넌트가 공통으로 state를 공유 할 수 있게 된다. context는... 리액트라이브러리TILTIL [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact [chapter 6]모달 및 이미지 불러오기 row component를 app.js에서 5개만 우선 가져와보자. 이런식으로 Row를 5개 작성해준다. isLargeLow같은 경우 제일 앞에 나오는 큰 카드를 의미하는 것이다. 내려준 Props받아주기 영화 정보 가져오기 이런식으로 가져온다. UI생성하기 UI를 이렇게 생성해준다. 이 자식 하나때문에 가로정렬이 안됐다.. 언더바하나 추가하는거 젠장... 이렇게 고쳤으니 이제 슬라이드 기능... React리액트React [React] webpack으로 구축한 React 프로젝트에서 환경변수 적용하기 dotenv 패키지 설치 > 프로젝트 루트에 .env 파일 생성 > REACT_APP 으로 시작하는 변수 작성 > process.env.<변수명> 으로 환경변수에 접근 위와 같이 하면된다고 한다. 실제로 CRA로 생성한 프로젝트에서는 해당 방법으로 어려움없이 환경변수를 설정했었다. "dotenv"란, .env 파일에 선언한 변수를 process.env에 로드해주는 무의존성 모듈이다. os 와... React리액트envwebpackReact [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from
[React] TDD를 활용한 쇼핑몰 앱 만들기 - 모듈편 이후 그 테스트 코드를 pass 할 수 있는 실제 코드 작성 React 구성 요소 작업을 위한 API를 추가하여 DOM Testing Library 위에 구축됨 Don Testing Library : Dom node를 테스트 하기 위한 매우 가벼운 solution create react app으로 생성된 프로젝트는 즉시 React Testing Library를 제공함 원래는 npm insta... ReactTDD리액트React [Udemy] React 기본 - 일기장 만들기(2) src/App.js src/DiaryEditor.js ☑️ 사용자 입력을 받는 form (input, textarea) 요소에 특정 길이 이상의 입력이 제대로 들어왔는지 확인하는 코드 작성 ☑️ const handleSubmit : 일기 저장하기 버튼을 눌렀을 때 수행되는 함수를 수정 ☑️ 작성자란(input)에 1글자 미만, 일기본문(textarea)가 5글자 미만일 경우 조건 추가 (al... useRefproject유데미udemy한입크기로잘라먹는리액트DOM리액트DOM React, 한글 입력시 keydown 이벤트 중복 발생 현상 이 때, 영어가 아닌 한글로 입력한 후 keydown 이벤트를 실행할 때 이벤트가 중복으로 발생하였다. IME composition IME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 어플리케이션을 말한다. 그러나 IME 과정에서 keydown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에... 리액트한글 입력 중복keydownReact중복한글입력React [Sleact] 슬랙 클론 코딩 - Workspace 만들기 layouts/Workspace.tsx 다른 컴포넌트에서 사용했던 요청을 똑같이 수행할 수 있다. 순서가 약간 꼬였는데 로그인 로직을 다시 확인하도록 한다. pages/LogIn/index.tsx 로그인 페이지는 위와 같은 코드로 작성돼있다. 처음에 data 가 false이기 때문에 바로 아래 jsx 문이 실행되고 이후 로그인을 submit하여 revalidate 하면 다시 data 를 요청... 타입스크립트슬랙리액트리액트 Input이 여러 개 일 때 (React) 리액트에서 Input이 여러 개 일때 상태관리하는 방법 이름, 아이디, 별명을 입력하는 코드가 있다. App.js 위의 사진처럼 3개의 Input과 1개의 초기화 버튼이 있을때 Input마다 state를 만들고 각 state를 업데이트 해줄 함수를 만들면 아래와 같다. App.js 하지만 위와 같은 방식은 매우 비효율적이다. useState를 3번 사용하며, 각 State를 업데이트해줄 함수... Spread자바스크립트inputReact리액트비구조화 할당React [Udemy] React - CRA, JSX, State, Props ☑️ node_modules : 많은 모듈 패키지 설치, node_modules가 없거나 지워져도 package.json이나 package-lock.json 또는 npm i로 다시 설치할 수 있음. ☑️ 컴포넌트 방식 : JSX 문법을 사용해서 웹에 필요한 요소를 함수에 담아서 리턴 후 내보내서 index.js같은 다른 파일에서도 사용할 수 있게 함 ☑️ ESModule System : Co... JSXState유데미udemy한입크기로잘라먹는리액트ReactPropsCRA리액트CRA React에서 이벤트 적용하기 위와 같은 App 컴포넌트가 있을 때, button을 클릭했을 경우 alert를 뜨게 하고 싶으면 Vanilla JS의 경우에는 이런식으로 하면 되고 리액트의 경우에는 이런식으로 하면 될 것 같지만 사실은 rendering이 될 때 함수 호출 결과가 onClick에 바인딩 되기 때문에 아무것도 실행이 안된다. 따라서 이렇게 arrow function 등을 이용하여 호출해야 한다.... 리액트리액트 Context API, Redux, Mobx, Swr, Recoil context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 컴포넌트가 한 두 개 정도이면 크게 불편함도 없지만, 만약 컴포넌트가 3~4개 혹은 그 이상일 경우에는 props를 넘겨주는 것만으로도 굉장히 번거로워 질 수 있다. 하지만 context를 이용하면 많은 컴포넌트가 공통으로 state를 공유 할 수 있게 된다. context는... 리액트라이브러리TILTIL [TIL] d+12 이런 식으로 원본 배열을 망가트리지 않으면서, 원하는 방식으로 배열의 각 요소를 변환할 수 있는 함수. 원본 배열을 훼손하지 않는다. 원본 배열에 다른 배열을 더해주는 함수. 원본 배열을 훼손하지 않는다. 1. NVM 설치 (node.js 버전 관리 툴) - 버전 확인 : nvm --version - node.js 설치 : nvm install [설치할 버전 넘버] - 노드 버전 확인 : n... 항해99리액트hh99TILReactReact [chapter 6]모달 및 이미지 불러오기 row component를 app.js에서 5개만 우선 가져와보자. 이런식으로 Row를 5개 작성해준다. isLargeLow같은 경우 제일 앞에 나오는 큰 카드를 의미하는 것이다. 내려준 Props받아주기 영화 정보 가져오기 이런식으로 가져온다. UI생성하기 UI를 이렇게 생성해준다. 이 자식 하나때문에 가로정렬이 안됐다.. 언더바하나 추가하는거 젠장... 이렇게 고쳤으니 이제 슬라이드 기능... React리액트React [React] webpack으로 구축한 React 프로젝트에서 환경변수 적용하기 dotenv 패키지 설치 > 프로젝트 루트에 .env 파일 생성 > REACT_APP 으로 시작하는 변수 작성 > process.env.<변수명> 으로 환경변수에 접근 위와 같이 하면된다고 한다. 실제로 CRA로 생성한 프로젝트에서는 해당 방법으로 어려움없이 환경변수를 설정했었다. "dotenv"란, .env 파일에 선언한 변수를 process.env에 로드해주는 무의존성 모듈이다. os 와... React리액트envwebpackReact [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from