# React
리액트(React)는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
React - Lifecycle, useEffect
#프론트엔드 #frontend #프론트엔드스쿨 #프론트엔드공부 #개발공부 #프론트엔드개발자 #취준일기 #취준기록 #취뽀 #빡공 #제로베이스
[React] 훅 Hook & 라우터 Router
Hook : useState(), useEffect(), useMemo(), useContext() / React Router 등장 / 설정 / Routing 기능 1. Link 이동 2. useNavigate() 이동 3. URL 제어
React - state
#프론트엔드 #frontend #프론트엔드스쿨 #프론트엔드공부 #개발공부 #프론트엔드개발자 #취준일기 #취준기록 #취뽀 #빡공 #제로베이스
React - useRef
React hook 알아보기 세 번째 hook은 useRef이다.많이 사용해보진 않았지만 내가 알고 있던 이 hook의 특징은 DOM요소에 접근해야할 때 사용하는 것으로만 알고 있지만 이번에 한 번 제대로 알아보고 가보자!먼저 DOM 노드에 접근하려면 구성 요소 내부에
TIL. React의 시작
나는 백엔드 개발자를 준비중인 학생이다...하지만 프론트엔드와 개발을 하면서 소통을 하거나작업을 하기 위해 알면 좋을 것 같긴해서 기록을 남겨본다.React 시작을 하기로 마음을 먹은이유?첫째로 일단 교육과정에 프론트 부분에서 react를 시작했다.이전에 백엔드 프로젝
[React] EventListener 추가하고 반드시 제거하기
리액트의 함수형 컴포넌트를 사용할 때 LifeCycle을 아는 것과 모르는 것의 차이는 매우 크다.리액트 프레임워크를 사용해서 프로젝트까지 해봤는데도 불구하고 오늘도 엄청난 실수를 하나 했는데,다신 실수하지 않도록 기록을 남겨놓는다.함수형 컴포넌트가 렌더링 되면 scr
Testing Out TDD (Test-Driven Development)
Intro into TDD, and basic use of popular testing frameworks
React-hook-form 왜 쓸까? 세개의 프로젝트 적용기
React-hook-form React-hook-form 은 기본적으로 비제어 컴포넌트 로 동작한다. 왜 적용시켰는지, 제어 컴포넌트와 비제어 컴포넌트 방식에는 어떤 차이점이 있는지 정리해보려고 한다. 제어 컴포넌트 > 우리는 React state를 “신뢰 가능한
[React] 렌더링
화면에 특정한 요소를 그려내는 것브라우저에서 렌더링이란 결국 DOM 요소를 계산하고 그려내는 것을 의미HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다.우리는 브라우저에서 제공하는 DOM API
[알게된 것] React forwardRef
React 작업을 진행하며, 자식 컴포넌트에서 사용될 ref를 부모 컴포넌트에서 선언해야 하는 구조였다.위와 같은 구조로 ref를 전달하니 에러가 발생했고...찾아보니 자식 컴포넌트에 ref를 전달하려면 컴포넌트를 선언할 때 React.forwardRef를 사용해야한다
React,Typescript 에서 fullcalendar 라이브러리 사용해보기 -(2) 드롭다운 메뉴 보여주기
지난 포스팅을 통해 fullcalendar를 사용해서 달력을 보여주고 데이터를 표시하기까지 했습니다. 이번 포스팅에서는 달력에 표시된 이벤트에 마우스를 올렸을 때 드롭다운 메뉴가 열리면서 해당 이벤트에 보여주고싶은 데이터를 보여주도록 하겠습니다. 생각보다 쉽지 않네요.
React v18 무엇이 달라졌을까?
일괄처리(batching) 는 setState 함수를 호출하여 일어나는 state(상태)의 변화에 따른 리렌더링 횟수를 줄이는데 도음울 준다. 이전에는 이벤트 핸들러(event handlers) 내에서만 batching을 수행했다. 즉, 이벤트 핸들러 밖에서
Next.js Vercel 배포 에러 Next.js 500 error,TypeScript 에러
타입스크립트 오류 나의 경우에는 Chakra UI를 Next.js 13에서 사용하고 있었다. 13버전에서는 타입스크립트의 버전이 5.0.2여야 한다. Next.js 500 error
Next.js SEO 설정
SEO, 한국말로 검색 엔진 최적화라고 불리는 이 단어는 Search Engine Optimization의 줄임말이다. 이는 쉽게 말해 검색 결과에서의 상위 노출을 의미한다. 내가 온라인으로 사업을 한다거나 많은 사람들에게 구글 검색으로 노출시키려면 매우 중요한것이다.
[React 복습] 11. 컴포넌트 성능 최적화
데이터가 많아지면 애플리케이션이 느려지는 것을 체감을 할 수도 있다고 합니다.여러가지 방법으로 컴포넌트를 최적화해보겠습니다.useState의 기본값으로 함수를 넣어주는 경우함수를 userState(crateTodos()) 이런식으로 작성하면, 리렌더링할 때마다 호출되지
[React, HTTP] application/json vs multipart/form-data vs application/x-www-form-urlencoded
[React, HTTP] application/json vs multipart/form-data vs application/x-www-form-urlencoded
React) redux toolkit 사용하여 프로그레스바 만들기
나와 닮은 동물의 숲 주민을 찾기 위해 여러 질문에 대한 답을 골라야 하는데, 현재 질문이 몇번째 단계인지 프로그레스바를 표시하고 싶었다. 생일이 같은, 취향이 같은 주민을 찾는 데에도 사용해야하기 때문에 재사용할 수 있는 컴포넌트로 따로 제작하고자 했다. 또한 찾기
Next.js 13 app/Directory 사용해보기!
🛠️ 블로그 개발해보기 - END 🛠️에서 CSR,CRA 블로그를 만들었으나, 블로그의 seo를 위해서라면 Next.js를 사용해야했다. CSR 홈페이지의 장단점을 몸소 익혀봤으니 이제 SSR의 장단점을 몸소 익혀볼때다.나는 Next.js를 처음 공부해본다.이왕이면
[React] Vite & webpack
Vite를 쓰면 React가 10배 빨라진다는 유튜브 추천 영상을 보고 찾아보게 되었다이번 게시물에서는 vite와 webpack의 차이점에 대해 알아보고 실습해볼 예정이다.
한글/영문 폰트크기 차이로 발생하는 요소 크기, 위치 변경 문제 해결
한글 / 영문 폰트의 크기속성 차이로 인해 발생하는 HTML 요소 스타일의 일관성 문제 해결