전체 글351 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) updated 01/12/24 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.c.. 2022. 6. 6. Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해.. 2022. 6. 5. Vim - 간단한 단축키 정리 내가 보려고 정리한 Vim 단축키 포스팅이다. 가끔 터미널에서 config 파일 등의 코드들을 간단히 수정해줘야 할일이 있다. 보통의 코드들은 vscode 를 통해 수정하지만, 설정관련 코드들은 포트 넘버 등의 간단한 세팅만 수정하고 저장하기 때문에 간단한 조작방법을 기억하기 위해 이 포스팅을 작성해보았다. Updated 12/08/23 Vim - 간단한 단축키 정리 Move the cursor h move one character left j move one row down k move one row up l move one character right Basic word movements (w / b / e) w move to beginning of next word (다음 단어의 첫 글자) b mo.. 2022. 6. 3. React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값이 들어갈 인터페이스 준비 interface InputItem { id: number; title: string; } 2. 준비물 변수들 선언 일단 id 를 동적으로 추가해줄 변수(nextID) 와 input 배열을 담을 변수(inputItems) 를 선언한다. const nextID = useRef(1); const [inputItems, setInputItems] = useState([{ id: 0, title: '' }]); 3. 추가 삭제 기능 구현 두말하면 잔소리다. 추가 삭.. 2022. 5. 26. React(71) 마우스 이벤트로 호버시 애니메이션 넣기 메뉴 영역에 마우스 호버시 메시지 박스가 나타나는 기능을 만들어 보려고 한다. 단, css 호버기능을 사용하지 않고, MouseEnter / MouseLeave 이벤트를 사용하여 호버 기능을 구현하였고, Transition / Animation 속성을 이용하여 애니메이션 기능을 구현하였다. 자 그럼 만들러 가보자. 결과화면 미리보기 메뉴 영역에 마우스 오버시 애니메이션과 함께 호버메시지가 등장한다. React(71) 마우스 이벤트로 호버시 이동 애니메이션 넣기 처음에 useState 로 호버의 상태를 알려줄 변수를 선언해준다. const [hover, setHover] = useState(''); 위에서 선언한 변수(hover) 을 가지고 마우스 이벤트를 걸어주자 이때 호버메시지는 변수(hover)의 값.. 2022. 5. 22. React(70) react-date-range 캘린더 라이브러리 사용하기 유저가 캘린더에서 원하는 날짜를 선택하면 input 창에 자동으로 입력받는 기능을 구현해보려고 한다. 그래서 react-date-range 라는 캘린더 라이브러리를 사용하여 특정 날짜 값을 받는 기능을 구현하여 보았다. ** 설치 및 기본적인 셋업도 간단하다. (공식문서를 참고하세요) react-date-range hypeserver.github.io React(70) react-date-range 캘린더 라이브러리 사용하기 구현에 필요한 3가지 라이브러리를 사용하였다. 얘네들 임포트해주자 캘린더 ui 를 위해 react-date-rang 한국어 기능을 위해 date-fns 날짜 포맷 변환을 위해 moment import { Calendar } from 'react-date-range'; // 얘가 캘린.. 2022. 5. 18. 이전 1 ··· 21 22 23 24 25 26 27 ··· 59 다음 반응형
