취준 이후로는 처음 작성해보는 사이드 프로젝트 회고록 입니다. 사내에서 던져준 주제로 작업한 스터디용 프로젝트로 깃헙에 모든 코드를 오픈하기에는 조심스럽고 제가 작업한 코드의 일부만 공개하여 트레이드 오프(Trade-Off)와 기술 공유의 목적으로 포스팅 해볼까 합

이번에 스터디 하면서 Recoil이라는 상태관리를 도입하여 작업해봤다.처음 사용해본 상태관리인데 '이게 맞나?' 갸우뚱 하면서 작업하다보니 어느새 프로젝트도 완성도 있게 마무리 지을 수 있었다.TypescriptReactRecoilSCSS리코일은 그냥 yarn add

📍 TS 기반으로 진행중인 프로젝트에서 내가 맡게 된 회원가입 부분 유효성 검사에 대한 기록 ✏️ 👉 결과물부터 바로보기 👉 전체코드 벨로그 접는기능 없나.. 이 전체코드들을 세분화시켜 구조에 대해 설명해보겠습니다. 👉 1. View 단 코드 화면에

./Foo, ../foo, ../../../foo-bar 같이 상대 경로로 작성할 경우, 이 파일을 다른 경로로 옮길 경우 상대경로이기 때문에 path가 달라져서 import 오류가 필연적으로 납니다.👉 절대경로는,이런 구조로 사용합니다.이렇게 해주면 된다.출처 :

먼저 react-router-dom 을 설치합니다. > 1. yarn add react-router-dom npm install react-router-dom useHistory라는 Hook을 사용하여 정말 간단하게 이전 페이지로 이동 할 수 있다. 그리고 버튼

안녕하세요 오늘은 리액트에서 폼태그 유효성 검증을 쉽게 도와주는 Formik에 대해 깊이 다뤄보는 방법을 공유해 보겠습니다.사용시 useState hook을 사용하여 formValues, formErrors, isSubmitting에 대한 상태 변수를 설정합니다.for

위 코드처럼 export default class MyDocument extends Document { 로 작성하게 되면 아래와같은 오류가 나타난다.next에서 다른 파일들은 몰라도 \_document 파일만은 hook 함수를 사용하지 못한다고한다.터미널창에 이런 거슬

state값을 바꿀 때는 setState 또는 useState를 통해 전달받은 세터함수를 사용해야한다. 배열이나 객체를 업데이트 할 때는 이렇게 처리해줘야 한다. => 배열, 객체 사본을 만들고 그 사본에 값을 업데이트 한 후, 그 사본의 상태를 setState 혹은

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할

결론부터 얘기하자면 리액트에서는 if문 대신 조건부 연산자를 사용한다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나 중괄호 { } 안에 조건부 연산자를 사용하면 된다. 조건부 연산자의 다른 이름은 삼항연산자

인프런 제로초님의 NodeBrid 강의 듣고 공부한 내용입니다.props에 post라는 데이터가 들어있다. 이 데이터를 사용하려면 상단에는 import PropTypes from "prop-types"; 를 불러오고 맨 하단에는useSelector는 import {

chrome.google.com/webstore/category/extensions?hl=koredux devtools (리덕스용)mobx developer tools (몹액스용) 브라우저를 껏다 키면 설치한 프로그램들이 보인다. 컴포넌트 탭에 들어가면 우리가 만들어

전에 사용한 브라우저 히스토리 api를 이용해서 페이지 라우팅 처리를 직접 구현할 수도 있지만 신경 쓸 부분이 너무 많기에, react-router-dom을 이용하여 단일 페이지 애플리케이션을 만들어보자. 이 패키지를 사용하면 쉽게 구현할 수 있다.react-route

싱글 페이지 애플리케이션의 약어이다. 뜻 그대로 한 개의 페이지로 이루어진 애플리케이션 !애플리케이션을 브라우저에 불러와서 실행시킨 후에 사용자와의 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 해줄 수 있다. 그리고 다른 주소에 다른 화면을 보여주

👩🏻 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로 리액트다. 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 그리고 오직 V(view)만 신경 쓰는 라이브러리다. 사실 처음에는 리액트가 프레임워크인지,

Unhandled Runtime ErrorError: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, us

create-react-app 시 에러 발생해결방법npm uninstall -g create-react-app 실행npm add create-react-app 실행npx create-react-app myapp 실행