Virtual DOM은 무엇인가!

문득 궁금해져서 찾아본 웹 브라우저 렌더링 과정

어제부터 계속 회원가입 API 호출이 제대로 작동이 안 되어서 진짜 여러가지 시도를 많이 해봤고 답을 찾았다.(proxy 설정, URL 수정 등..)현재 위 코드에서 문제점은 JSON.stringify가 오브젝트를 JSON 형식으로 바꾸어 주는 것이라고 생각한 내가 바

🤔 FE 여러분 로그인, 입력 페이지 만들 때 너무 귀찮죠? 재미도 없고 입력이 많아질 수록 코드도 길어지고 검증(validation)이 많다면 더더욱 ...ㅎㅎ🤭 기술은 항상 문제를 해결하기 위해 만들어집니다. 오늘의 문제 해결사는 React-hook-form 입

Recoil은 리액트의 state management(전역 상태 관리) 도구이다.Redux, Zustand, Recoil... 등 리액트의 여러 전역 상태 관리 도구 중 Recoil을 사용하는 이유는 다른 도구들 보다 심플하고 리액트 스러워서라고 생각함! 특정 컴포넌트

난 궁금했었다. 😗 리액트에서 난 분명 코드에 console.log를 한번 출력하게 했는데 왜 console.log가 두번씩, 세번씩 출력 되는걸까? 여러번 찍히는 이유는 index.tsx 또는 index.js 에 있는 <React.StrictMode> 태그가

FE에서 CSS를 할 때 HTML 태그 고유의 margin 값이나 padding 값 등내가 원하는 스타일로 만드려면 고유 값을 죽이고 처음부터 스타일링 하는 게 더 편함 그래서 오늘은 이 각 태그의 고유 값을 모두 없애는 간단한 방법을 소개함!도큐먼트 전체에 영향을 주

개인적으로 React에서 라우팅을 할 때 요긴하게 쓸 수 있는 Hooks 2가지를 소개 해보겠습니다. useLocationuseMatch우리는 보통 리액트에서 브라우저의 URL에 따라 Route 해주고또 클라이언트의 URL 경로를 UI로 지정해 주기 위해 Link를 사

리액트에서 API를 호출하여 화면에 뿌리는 것을 만드려면 간단하게 해도 state는 최소 2개가 사용되고 (data 저장용, loading 체크용 state) + fetch 함수 작성까지 > 코드가 꽤 길어지고 가독성이 떨어지게 된다. 그리고 만약 페이지 첫 방문시에

가끔 git add 명령어를 실행할 때 > warning: LF will be replaced by CRLF in bora.txt. The file will have its original line endings in your working directory > 위와

오늘은 Typescript를 배웠다. (약칭 TS) TS는 JS의 확장판이라고 생각하면 되는데 JS와 다른 점은 JS는 타입이 런타임 에 결정되는 동적 타입 언어이고, TS는 타입이 컴파일 단계 에서 결정되는 정적 타입 언어이다.나는 JS를 시작한지 얼마 안 됐는데 나

오늘은 리액트에서 CSS를 적용할 때 가장 많이 사용되는 Styled Components의 간단한 사용법을 정리 해보겠습니다. > ### 스타일드 컴포넌트 만들기 원하는 HTML 태그 중 div 를 선택하고 CSS를 적용하여 Box 변수에 저장한다. 이렇게 컴포넌트

리액트에서 URL에 따라 원하는 컴포넌트를 불러야할 땐 Router를 사용하면 상당히 쉽게 가능함.먼저 npm 다운 받기라우팅 해줄 컴포넌트에서 import아래와 같은 형식으로 필요한 경로 마다 Route 태그로 경로, 컴포넌트를 설정해줌새로고침 없이 페이지를 이동 시

오늘은 리액트에서 폰트 어썸을 어떻게 사용 하는지 간단하게 정리하겠습니다.solid 항목이니 "@fortawesome/free-solid-svg-icons"아이콘 이름이 fa-circle-check 이므로 faCircleCheck 으로 변환중괄호로 { 아이콘 이름 }

리액트 오늘 배운 거 정리컴포넌트는 JSX 코드를 리턴하는 함수이고 태그처럼 사용하여 커스텀할 수 있음 HTML 태그와 구분하기 위해 컴포넌트 이름은 항상 대문자로 시작useEffect(실행할 함수, 값)는 값이 변할 때 실행하고 싶은 함수 지정 가능 즉, 특정 코드를

JS에서는 변수를 선언할 때 var let const > >셋중 하나의 키워드를 붙여서 선언할 수 있습니다. > >간단하게 정리하면 var, let은 변수 (수정이 가능) const는 상수 (수정이 불가능) 오늘은 조금 더 깊게 JS의 변수와 상수에 대하여 알아볼 거

바닐라 JS로 개발을 하는 경우, HTML 파일의 head 태그 안에 script로 JS 파일을 포함하게 되는데 그냥 JS 포함async + JS 포함defer + JS 포함빠르게 말하자면 defer를 포함하는 3번째 방법이 가장 효율적이다.그 이유가 궁금하다면 아래에

과거 본인의 git message는 정리가 1도 얀 되어있어서 알아보기 참 힘들었음. 다른 사람은 더 하겠죠. 그래서 Udacity의 git message convention을 참고하여 git message convention을 정리해보겠습니다. .git 폴더의 위치

10진수를 N진수로 바꾸는 마법 코드.본인은 빡대갈이라 굳이 원리 같은 거 생각하기 싫다. 짧은데 그냥 핵심만 외워라.원리 핵심 : 10진수(num)를 N진수(n)으로 나눈 나머지를 문자열 형태로더해주고, num 값을 n으로 나누어 갱신 해주는 것을 num이 0이 될

골드5 강의실 배정 문제를 풀다 로직은 맞는데 시간초과가 계속 떠서 문제의 카테고리를 보니 우선순위 큐가 있었음. 큐는 아는데 우선순위 큐는 뭐지;; 그래서 정리해봄.