React

라우터 객체와 라우팅 라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체이다. 이 객체를 사용해서 A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다"고 말한다. > 페이지를 이동하자!! => Routing 게시물을 가져오자!!

React

사실 폴더구조는 어떻게 잡아도 괜찮다.하지만 서비스의 규모가 커졌을 경우를 한번 생각해보도록 하겠다.서비스가 커지면 커질수록 기능이 많아지기 때문에 폴더가 굉장히 많아지게 된다.따라서 큰 그룹으로 묶어주면 관련 기능이 모두 해당 폴더 안에 들어있기 때문에 유지보수시 굉

state란!데이터를 담기 위한 상자와 같은 것인데, setState는 state를 변경할 수 있게 해주는 함수이다.여기서 카운트올리기 버튼을 클릭하면 setCount함수를 5번 실행했으니까 5씩 올라갈 것이라는 예상과는 달리카운트가 1씩만 증가하게 된다. 그 이유는

React의 데이터 흐름은 상위 컴포넌트에서 하위 컴포넌트로 전달하는 하향식, 단방향 데이터 흐름을 따르고 있다. 이러한 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지 알 수 있다. 단방향 데이터 흐름의 장점기능 변경 상

클래스란 쉽게 말하면 물건을 만드는 설명서라고 할 수 있다.class 안에는 함수와 변수를 넣을 수 있는데, 예를 들어 붕어빵과 몬스터를 만들었다면 붕어빵과 몬스터는 객체 또는 인스턴스라고 부른다.요즘엔 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 쓰고 있는 추세지만

State란 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 가진 객체를 말한다. 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고 업데이트 되고, 사라지게 될 때 호출되는 메서드 이다. 쉽게 말해, 특정 시점에 코드가 실행되도록 설정할

로그인 기능이 요즘 어떤게 트렌드인지, 어떻게 하면 보안을 강화할 수 있는지 생각해야함!인증(Authentication) - 한번만!인가(Authorization) - 내가 로그인됐다는 걸 필요로 하는 API 요청할 때마다 한다. (결제목록 보기, 등등)접속자가 많다

새로고침 후에도 로그인이 되어있게 하려면 refresh token을 사용해야 하지만 아직 배우기 전이기 때문에 임시로 localStorage에 저장하는 방법이 있다.localStorage에는 객체형태 데이터를 넣을 수 없기 때문에 JSON.stringify를 이용해 객

폼들을 어떻게 하면 효율적으로 관리할 수 있을까?Formik이 원래 인기가 많았으나, 클래스형 컴포넌트에서 함수형 컴포넌트로 넘어가면서 '굳이 Formik을 써야하나?' 라는 인식이 생겨 굉장히 편리한 React-hook-form이 나왔다. 사용법도 쉬워서 요즘 많이

React에서 쓸 수 있는 에디터 라이브러리로는 React-quill, React Draft Wysiwyg 등이 있고 국내에서 만든 것은 TOAST UI Editor이 있다.📍나중에 팀플할 때 적용해 볼 것!설치하는 법yarn add react-quill또는 npm

카드사의 결제를 해주는 PG사 들이 있다.nicepay, KG이니시스, NHN 등등,,PG사는 payment gateway라고 해서 결제를 대신 해주는 회사이다.하지만 pg사를 이용하려면 필요한 api들을 직접 만들어서 이용해야 하기 때문에 굉장히 복잡하고 시간 소요가

* custom hooks => useState, useEffect를 우리가 직접 만드는 것! container, presenter로 나눌 필요가 없다!! 구조분해할당(=비구조화할당) ![](https://velog.velcdn.com/images/badassong

a태그와 라우터 a태그는 기존 HTML 페이지 이동방식 => 페이지를 다운로드 받아서 보여준다. 일반적인 속도. router.push는 react/next에서의 페이지 이동방식 => 이미 있는 화면에서 추가 다운로드를 받아서 화면에 보여줌 => 속도가 매우 빠름!

RefreshToken 작동 원리 login에서 인증(Authentication) 과정을 거친다 똑같은 JWT토큰인데 하나 더 만드는거! accessToken(JWT 1h) refreshToken(JWT 2주간 지속) 두가지 만들어서 브라우저로 전달함 => paylo

Memoization 모든 컴포넌트에 메모를 거는 것은 좋지 않은 방법이다! useMemo나 useCallback에 의존성배열이 너무 길어지면 오히려 유지보수를 깨뜨릴 수 있다! 브라우저에 어떻게 그림이 그려질까? -Critical-Rendering-Path-

useEffect에서 setState를 사용하면 추가렌더링이 발생해서 비효율적인 경우가 있으므로 useMemo로 바꿔보자! > * 기존 이미지 업로드가 비효율적인 부분 2가지* 이미지 찌꺼기가 남는다. 이미지 미리보기가 느리다. 바뀐 이미지 업로드 방식 => 업

Optimistic-UI - 낙관적 UI optimistic UI는 실패 시 좋지 못한 UX가 된다. 99% 성공을 확신 할 수 있을 때 사용하는 것이 좋다. Opengraph Scraping? Crawling? 다른 사이트 정보를 가져오는 것을 스크래핑, 크롤링

테스트란? 테스트란 마우스로 클릭하는거(api 요청 등) 대신해주기! 기능을 검사해주는 코드를 만들어야 한다고? 기능 만들기도 바쁜데? 업데이트 배포를 한다고 생각해보자! 업데이트 배포와 테스트코드 이해 테스트코드를 만들어야 하는 이유 개발자들이 어떤 프로젝트

배포를 하면서 전반적인 시스템을 이해할 수 있게 된다.배포를 공부하면서 cs지식을 함께 기를 수 있다.구글클라우드플랫폼 => 비교적 가격이 저렴아마존웹서비스(AWS) => 제일 인기많음!마이크로소프트애저AWS4GB - 5~6만원8GB - 10만원구글클라우드플랫폼 4GB

와이어샤크란 실시간 네트워크 분석을 위해 패킷 교환 과정을 포착하는 도구 중 하나이다.80번 포트와 443번 포트💡 표시되어 있는 80은 http를 의미하며, 443포트는 https를 의미한다.이 포트 번호들은 생략이 가능하다!!와이어샤크를 사용하면 api의 문제인지

ec2에서 yarn start했을 때이미 사용중인 포트라고 뜰때! (프로그램이 비정상적으로 종료된 경우)ps -ef | grep node 라고 입력kill -9 9933ps -ef | grep nodeyarn start\--가상머신 - VM(Virtual Machine

리액트란 UI를 만드는 자바스크립트 라이브러리! SPA(Single Page Application) - 한 어플리케이션 내에서 자유자재로 내비게이션 할 수 있음 CSR(Client Side Rendering) - 사용자가 어플리케이션에 접속했을 때 즉각적으로 HTML

바벨(Babel)은 자바스크립트 transcompiler임!유저가 최신 자스 문법을 지원하지 않는 브라우저를 사용할 때, 리액트로 개발할 때 최신 문법을 사용해도 이 바벨을 이용해서 플젝을 빌드할 때 사용자에게 배포하기 전에 최신 문법을 예전 버전으로 변환해주는 컴파일

command + shift + p (커맨드 팔렛 열기) => snippets 검색 => configure user snippets => javascriptreact.jsx => 아래 코드 붙여넣기이걸 쓰면 export default ~ 형식을 일일이 타이핑 하지 않

counter.jsx라는 컴포넌트를 만들고 useState를 이용해 버튼을 클릭할 때마다 숫자가 1씩 증가하게 만들어보았다.그런데 여기서 든 의문점 하나!왜 setCount(count++)로 쓰면 에러가 날까?그 이유는 위에서 count를 const로 선언해주었기 때문

오늘은 useEffect를 사용해 상품목록과 클릭한 횟수를 표시한 버튼이 떴다가 사라졌다 하는 토글버튼 기능 코드를 짰다. showProducts라는 state를 하나 만들어서 버튼을 클릭할 때마다 토글이 되게 하였다.그리고 Products 컴포넌트를 만든 뒤 fetc

앞서 상품목록 토글을 만든 것에 이어서, 체크박스를 하나 만들어서 체크할 땐 세일하는 상품목록만 뜨게 하는 코드를 짜보았다!AppProducts.jsxProducts.jsx이렇게 하면 체크박스를 눌렀을 때 세일품목만 뜬다!그런데 여기서!체크한 상태에서 토글을 눌렀을 때

연관있는 데이터는 하나의 객체로 하나의 상태를 만들어서 관리해주자! clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시한다. 따라서, 스크롤바가 움직이더라도, 특정 지점의 clientX, clientY의 값은 동일하

원칙적으로 리액트에서 가지고 있는 상태(state)는 불변성을 유지해야 한다!만약 변경해야 한다면, 새로운 값, 새로운 배열, 새로운 객체로 만들어줘야 한다!리액트에서는 object 내부의 값을 변경해도 UI상에 업데이트 되지 않는다!객체를 만들면 이 객체마다 고유한

useState만 있는 줄 알았는데...

아무리 useReducer를 쓴다 해도 중첩된 객체가 많으면 많을수록 코드는 복잡해진다. 좀 더 직관적으로 간단하게 코드를 짜고 싶다면 Immer 라이브러리를 사용하면 된다!

오늘은 form을 만드는 두 가지 방법에 대해 알아보았다.Controlled Component: 제어 컴포넌트Uncontrolled Component: 비제어 컴포넌트사용자가 무언가를 클릭하거나 했을 때 UI가 업데이트 되어야 한다면, React Component 자체

여러 곳에서 사용할 Navbar라는 컴포넌트를 만든다고 예를 들어보자.이런 경우 각각의 Navbar안의 요소들을 다르게 하고 싶을 때, 우리는 wrap component라는 개념을 활용할 수 있다!그리고 wrap component의 핵심은 바로 children인데!!컴

Hook도 재사용 해보자고!!

이거 아주 명쾌한 해답일세...

인간은 자꾸 같은 실수를 반복한다.

투두리스트 리뷰

에러도 꼼꼼히..!

React Router가 뭘까?

네트워크 통신을 할 땐 React Query를 사용해보자!

스크롤 위치를 top으로..!

조건에 따른 토글 기능을 구현해보자..!!

api key는 숨겨야햇

보안취약성 알림이 와버렸어..!

fetch보다 axios인 이유!!!

class는 처음 사용해봐요!

class를 이용해 진짜 api를 호출하자!

Query data cannot be undefined 에러를 해결하자!

context는 정말 어렵지만 엄청나!

의존성 주입???????

복잡한 api 호출을 해야 할 땐?!

useEffect 내에서 비동기 처리를 해주려고 async/await을 사용하려고 했는데 오류가 발생했다.Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

https://stackoverflow.com/questions/64409464/how-to-use-usequery-hook-from-reactquery-to-update-state

React에서 checkbox를 사용해보자!

여러개의 input 상태를 관리해보자!