리액트 [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 기본 - 일기장 만들기(1) ☑️ DiaryEditor : 일기장 컴포넌트 ☑️ useState : 요소를 리액트가 직접 핸들링할 수 있도록 만들어야 함 ☑️ 상태변화 함수 : input과 textarea가 받는 value prop으로 전달 값이 실시간으로 바뀌도록 이벤트 설정(콜백함수 등록하여 event 객체인 e를 매개변수로 전달받게 됨) 사용자가 입력을 하면 어떤 사건이 발생했다고 인식하는데 onChange는 값이... onchangeStateprojectuseState유데미udemy한입크기로잘라먹는리액트리액트State [Sleact] 슬랙 클론 코딩 - 로그인 로그인을 하면 다음과 같이 쿠키를 확인할 수 있다. 로그아웃을 한다는 것을 이 쿠키를 지운다는 뜻과 같다. 그렇다면 프론트엔드 입장에서 내가 로그인에 성공했다는 것을 어떻게 알 수 있을까? 로그인 요청에 성공한다면 서버에서 프론트로 내 정보를 보내주는데 이걸 저장하고 있다가 로그아웃할 때 그 정보를 버리면 될 것이다. 로그인 정보를 저장하고 있으려면 전역 데이터로 저장하고 있어야한다. 이 프... 타입스크립트슬랙리액트리액트 리액트에서 Ajax사용해보기 서버에 새로고침없이 요청을 가능하게 하는 일종의 자바스크립트 코드. 요청을 페이지를 요청하면 그 페이지 데이터를 가져다주는것. 예를들어 내가 주소창에 netflex.쳐서 접속하면(요청) 넷플릭스 메인페이지가 나오는것(결과)을 말한다. url을 쳐서 요청한다. 자료를 읽을때 사용한다. url에 치는게 아니라 블로그에 댓글을 남기거나 사이트 로그인 할때 아이디랑 비밀번호를 치고 특정한 버튼을 눌... Reactajax리액트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 React | Infinite Scroll 구현하기 (react-query, react-intersection-observer) 컨텐츠를 가져오는 data fetch 는 캐싱과 최적화가 가능한 react-query 를, 페이지 하단 요소 관찰을 위해서 react-intersection-observer 를 활용하여 구현해보도록 하겠습니다. 2. 두 번째 인수 - fetch 함수 두 번째 인수는 데이터를 요청하는 API 함수가 포함된 함수입니다. 무한스크롤을 구현해야 하는 상황에서는 다음 요청을 위한 데이터도 포함해서 반... react-queryinfinite scroll무한 스크롤리액트Reactreact intersection observeruseInViewuseInfiniteQueryReact [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 [chapter 6] 모달 및 이미지 불러오기 - 2 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 합니다. Single Page Application(SPA) 리액트는 SPA!! React Router Dom 설치하기 React Router 설정하기 설치가 완료된 후 가장 ... React리액트React [React] 19. 스크롤로 전환하는 페이지 만들기 오늘은 싱글 페이지에서 스크롤을 이용해 전환하는 방법을 정리해보려고 합니다. 저는 styled-component를 사용하여 스타일을 적용하였습니다. 저는 아래와 같이 크게 3가지 컴포넌트를 만들어 페이지를 구성하였습니다. Header - 네비게이션 구성 Contents - 페이지에 들어갈 내용 구성 Main - Header와 Contents를 담을 페이지 🔥 Header 만들기 ul과 li ... React리액트React [Jest][유닛 테스트] (2) 테스트 코드로 디버깅해보자! 예약 날짜 비활성화 오류, 테스트 코드로 해결하기 상황에 따라 예상치 못한 오류가 있을 수 있는 부분이라고 생각했고, 이 참에 아예 테스트를 작성한 뒤 명확하게 로직 자체를 검사해가면서 확실하게 의도한 대로 동작하도록 만들어보기로 결심했다. 예약 기간 선택 시 예약 불가 날짜를 포함할 수 없음 하지만 아래와 같이 해당 날짜를 포함해 예약 기간을 선택할 수는 있기 때문에, 이 부분을 별도로 로직을 추가해주어야 했다. 그래서 체크인 날짜를 선택... 유닛테스트프로젝트unit testunit리액트스테이메모리테스트숙박플랫폼testtest [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from [앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo 리덕스는 무엇일까 리덕스는 한마디로 말해 데이터 저장소이다. 조금 더 풀어말하면 상태관리 라이브러리다. 조금 더더 풀어말하면 전역 상태관리를 편히 할수있게 해주는 녀석이다. 를 터미널에 때려넣어준다 리덕스에서 컴포넌트가 데이터를 읽어오게 하게끔 하려면 리액트-리덕트도 필요하다 1. 데이터를 전부 볼려고 하는 녀석들이 있다 2. 수정하려는 녀석들도 있다 3. 수정하려는 녀석이 수정을 하면 수정 후 데이터를 다른... React리덕스리액트reduxReact Framer Motion 시작하기 ) Framer Motion은 직관적인 코드를 통해 손쉽게 애니메이션을 제작하게 해준다. 우리는 이 props를 통해서 animation을 만들 수 있다. 🙄 Framer Motion은 Framer Component에 props를 전달하는 형식으로 애니메이션을 추가한다. motion.div , motion.span와 같은 형태로 Framer Component를 만들 수 있다. transiti... 리액트애니메이션framer-motion리액트 애니메이션framer-motion [동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자) 이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다. 한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다. 필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice... 링크라우터필터링querystringuseNavigationQuery String리액트쿼리파라미터필터Queryparameter쿼리스트링query parameter다중필터Query String React 스터디 2일차 <오늘의 키워드> 1. Component Tag (컴포넌트 태그 생성 및 정의) 2. props 오늘의 예제코드 이렇게 선언한 컴포넌트는 두가지 형태로 사용할 수 있게 된다. 컴포넌트로 작성한 엘리먼트(태그)의 JSX attribute(속성)값은 해당 컴포넌트 선언 함수에 단일 객체로 전달된다. 위에 선언한 Title 컴포넌트로 설명하자면 함수로 컴포넌트를 선언하면 하나의 컴포넌트 태그로 사... web리액트프론트엔드Reactfrontendreact.jsReact React 스터디 3일차 1. React.useState() 지난 시간에는 이벤트가 일어날 해당 컴포넌트에 이벤트 함수를 정의하여 사용했으나, 이번 시간에는 부모 컴포넌트에 이벤트를 정의하고 해당 이벤트로 인해 변화 된 상태 값(count)을 다른 자식에게도 props 데이터를 넘겨 줄 것이다. 상태 값, 또는 이벤트를 부모 컴포넌트로 끌어 올려 사용하는 것을 "상태 끌어올리기" 라고 칭한다. 지난 시간까지는 정의한... web리액트웹개발프론트엔드ReactfrontendReact 📷 리액트로 이미지 삽입하기 리액트 같은 라이브러리는 외부에서 간단한 것 하나라도 받아오기 위해서는 공정 과정이 필요한데, 개린이인 나는 아직 이런걸로 삽질을 한다 (주륵..) 유튜브 클론코딩을 혼자 야심차게 해보겠다고 팔 걷어부쳤는데 간단한 로고 이미지 하나 삽입하는데 2일 걸렸다니 (나같은 흑우 또있나.. 손?) 응 아니야.. 저 조각난 문서를 보기싫어서 얼마나 애를 썼는지 구글링 해보고, 코딩 카페도 찾아보고, 슬... 리액트이미지import이미지삽입리액트 Component-Lifecycle 컴포넌트들은 모두 각자의 라이프 사이클을 가지고 있으며, 이 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있다. ClassComponent-Lifecycle(클래스형 컴포넌트 생명 주기) 클래스형 컴포넌트일때 라이프 사이클을 조작할 수 있는 내장함수를 리액트에서 제공해준다. componentDidMount( ) : 화면이 그려지고 뒤에 실행이 된다. componentDidUpdat... 리액트리액트 [리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element 미리 내용을 요약하자면 타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다. 클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다. 이 둘은 거의 유사한 대상으로 보면 된다. 함수형 컴포넌트의 리턴값에 해당된다. ReactElement|null Reac... 타입스크립트리액트리액트
[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 기본 - 일기장 만들기(1) ☑️ DiaryEditor : 일기장 컴포넌트 ☑️ useState : 요소를 리액트가 직접 핸들링할 수 있도록 만들어야 함 ☑️ 상태변화 함수 : input과 textarea가 받는 value prop으로 전달 값이 실시간으로 바뀌도록 이벤트 설정(콜백함수 등록하여 event 객체인 e를 매개변수로 전달받게 됨) 사용자가 입력을 하면 어떤 사건이 발생했다고 인식하는데 onChange는 값이... onchangeStateprojectuseState유데미udemy한입크기로잘라먹는리액트리액트State [Sleact] 슬랙 클론 코딩 - 로그인 로그인을 하면 다음과 같이 쿠키를 확인할 수 있다. 로그아웃을 한다는 것을 이 쿠키를 지운다는 뜻과 같다. 그렇다면 프론트엔드 입장에서 내가 로그인에 성공했다는 것을 어떻게 알 수 있을까? 로그인 요청에 성공한다면 서버에서 프론트로 내 정보를 보내주는데 이걸 저장하고 있다가 로그아웃할 때 그 정보를 버리면 될 것이다. 로그인 정보를 저장하고 있으려면 전역 데이터로 저장하고 있어야한다. 이 프... 타입스크립트슬랙리액트리액트 리액트에서 Ajax사용해보기 서버에 새로고침없이 요청을 가능하게 하는 일종의 자바스크립트 코드. 요청을 페이지를 요청하면 그 페이지 데이터를 가져다주는것. 예를들어 내가 주소창에 netflex.쳐서 접속하면(요청) 넷플릭스 메인페이지가 나오는것(결과)을 말한다. url을 쳐서 요청한다. 자료를 읽을때 사용한다. url에 치는게 아니라 블로그에 댓글을 남기거나 사이트 로그인 할때 아이디랑 비밀번호를 치고 특정한 버튼을 눌... Reactajax리액트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 React | Infinite Scroll 구현하기 (react-query, react-intersection-observer) 컨텐츠를 가져오는 data fetch 는 캐싱과 최적화가 가능한 react-query 를, 페이지 하단 요소 관찰을 위해서 react-intersection-observer 를 활용하여 구현해보도록 하겠습니다. 2. 두 번째 인수 - fetch 함수 두 번째 인수는 데이터를 요청하는 API 함수가 포함된 함수입니다. 무한스크롤을 구현해야 하는 상황에서는 다음 요청을 위한 데이터도 포함해서 반... react-queryinfinite scroll무한 스크롤리액트Reactreact intersection observeruseInViewuseInfiniteQueryReact [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 [chapter 6] 모달 및 이미지 불러오기 - 2 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 앱 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 합니다. Single Page Application(SPA) 리액트는 SPA!! React Router Dom 설치하기 React Router 설정하기 설치가 완료된 후 가장 ... React리액트React [React] 19. 스크롤로 전환하는 페이지 만들기 오늘은 싱글 페이지에서 스크롤을 이용해 전환하는 방법을 정리해보려고 합니다. 저는 styled-component를 사용하여 스타일을 적용하였습니다. 저는 아래와 같이 크게 3가지 컴포넌트를 만들어 페이지를 구성하였습니다. Header - 네비게이션 구성 Contents - 페이지에 들어갈 내용 구성 Main - Header와 Contents를 담을 페이지 🔥 Header 만들기 ul과 li ... React리액트React [Jest][유닛 테스트] (2) 테스트 코드로 디버깅해보자! 예약 날짜 비활성화 오류, 테스트 코드로 해결하기 상황에 따라 예상치 못한 오류가 있을 수 있는 부분이라고 생각했고, 이 참에 아예 테스트를 작성한 뒤 명확하게 로직 자체를 검사해가면서 확실하게 의도한 대로 동작하도록 만들어보기로 결심했다. 예약 기간 선택 시 예약 불가 날짜를 포함할 수 없음 하지만 아래와 같이 해당 날짜를 포함해 예약 기간을 선택할 수는 있기 때문에, 이 부분을 별도로 로직을 추가해주어야 했다. 그래서 체크인 날짜를 선택... 유닛테스트프로젝트unit testunit리액트스테이메모리테스트숙박플랫폼testtest [TIL] d+16 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사) 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...) 대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다. 엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보... 항해99리액트hh99ReactTILArray.fromArray.mapArray.from [앱개발]-리액트개념 React-navigation StatusBar 컴포넌트(Component): 정해진 엘리먼트들(요소)을 사용하여 만든 화면의 일부분 상태(State,useState): 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법 속성(Props): 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식 == 그냥 데이터 전달 🔍 컴포넌트(Component) 버튼 하나가 컴포넌트가 될 수 있고, 버튼을 모아둔 영역이 컴포넌트가 될 수 있다.... componentreact navigation컴포넌트리액트스택 네비게이션useEffectReactstatusBarExpoExpo 리덕스는 무엇일까 리덕스는 한마디로 말해 데이터 저장소이다. 조금 더 풀어말하면 상태관리 라이브러리다. 조금 더더 풀어말하면 전역 상태관리를 편히 할수있게 해주는 녀석이다. 를 터미널에 때려넣어준다 리덕스에서 컴포넌트가 데이터를 읽어오게 하게끔 하려면 리액트-리덕트도 필요하다 1. 데이터를 전부 볼려고 하는 녀석들이 있다 2. 수정하려는 녀석들도 있다 3. 수정하려는 녀석이 수정을 하면 수정 후 데이터를 다른... React리덕스리액트reduxReact Framer Motion 시작하기 ) Framer Motion은 직관적인 코드를 통해 손쉽게 애니메이션을 제작하게 해준다. 우리는 이 props를 통해서 animation을 만들 수 있다. 🙄 Framer Motion은 Framer Component에 props를 전달하는 형식으로 애니메이션을 추가한다. motion.div , motion.span와 같은 형태로 Framer Component를 만들 수 있다. transiti... 리액트애니메이션framer-motion리액트 애니메이션framer-motion [동적라우팅]다중필터 처리하기 (2편:Query Parameter를 사용해보자) 이번에는 좌측에 위치한 필터들을 클릭했을 때, 해당 필터에 해당하는 제품들을 보여주는 기능을 구현해보고자 한다. 한 번 클릭하면 필터가 활성화되고, 두 번 클릭하면 해제되는 형태이다. 토글등등 다양한 방법을 고민해보았는데, 결국 아래 3단계로 완료할 수 있었다. 필터를 클릭할때마다 state로 선언한 filters에 핕터목록을 배열로 넣어준다. 단 이미 해당 필터가 들어있을때에는 splice... 링크라우터필터링querystringuseNavigationQuery String리액트쿼리파라미터필터Queryparameter쿼리스트링query parameter다중필터Query String React 스터디 2일차 <오늘의 키워드> 1. Component Tag (컴포넌트 태그 생성 및 정의) 2. props 오늘의 예제코드 이렇게 선언한 컴포넌트는 두가지 형태로 사용할 수 있게 된다. 컴포넌트로 작성한 엘리먼트(태그)의 JSX attribute(속성)값은 해당 컴포넌트 선언 함수에 단일 객체로 전달된다. 위에 선언한 Title 컴포넌트로 설명하자면 함수로 컴포넌트를 선언하면 하나의 컴포넌트 태그로 사... web리액트프론트엔드Reactfrontendreact.jsReact React 스터디 3일차 1. React.useState() 지난 시간에는 이벤트가 일어날 해당 컴포넌트에 이벤트 함수를 정의하여 사용했으나, 이번 시간에는 부모 컴포넌트에 이벤트를 정의하고 해당 이벤트로 인해 변화 된 상태 값(count)을 다른 자식에게도 props 데이터를 넘겨 줄 것이다. 상태 값, 또는 이벤트를 부모 컴포넌트로 끌어 올려 사용하는 것을 "상태 끌어올리기" 라고 칭한다. 지난 시간까지는 정의한... web리액트웹개발프론트엔드ReactfrontendReact 📷 리액트로 이미지 삽입하기 리액트 같은 라이브러리는 외부에서 간단한 것 하나라도 받아오기 위해서는 공정 과정이 필요한데, 개린이인 나는 아직 이런걸로 삽질을 한다 (주륵..) 유튜브 클론코딩을 혼자 야심차게 해보겠다고 팔 걷어부쳤는데 간단한 로고 이미지 하나 삽입하는데 2일 걸렸다니 (나같은 흑우 또있나.. 손?) 응 아니야.. 저 조각난 문서를 보기싫어서 얼마나 애를 썼는지 구글링 해보고, 코딩 카페도 찾아보고, 슬... 리액트이미지import이미지삽입리액트 Component-Lifecycle 컴포넌트들은 모두 각자의 라이프 사이클을 가지고 있으며, 이 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있다. ClassComponent-Lifecycle(클래스형 컴포넌트 생명 주기) 클래스형 컴포넌트일때 라이프 사이클을 조작할 수 있는 내장함수를 리액트에서 제공해준다. componentDidMount( ) : 화면이 그려지고 뒤에 실행이 된다. componentDidUpdat... 리액트리액트 [리액트 컴포넌트 타입 비교] ReactNode, ReactElement, JSX.Element 미리 내용을 요약하자면 타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다. 클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다. 이 둘은 거의 유사한 대상으로 보면 된다. 함수형 컴포넌트의 리턴값에 해당된다. ReactElement|null Reac... 타입스크립트리액트리액트