본문 바로가기

분류 전체보기358

JavaScript - 배열에서 원하는 인덱스만 삭제하기 (Splice / Filter) 예전에 내장함수들 공부할때 기초는 기초일뿐 이라고 생각하였던 적이 있다. 하지만 실무에서 배열을 동적으로 삭제하는 경우에는 보통 인덱스를 많이 사용한다. 그래서 다시한번 가장 기초적인 배열 함수 splice 와 filter 을 한번 더 정리해보았다. 실제로 응용했던 코드가 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(72) map()으로 input 추가 삭제하기 CRUD 를 그리다 보면 의 자유로운 추가 삭제 기능이 필요할 때가 있다. 비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다. React(72) map()으로 input 추가 삭제하기 1. Input 입력값 devbirdfeet.tistory.com splice vs slice 기억이 가물가물하시다면...? (아래 기초.. 2022. 6. 8.
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.
React(69) TypeScript - 객체 속 객체의 반복문 사용하기 본 포스팅에서는 객체 반복문 사용법을 알아보고, 반복문에서 객체의 키를 매핑할 때 뜨는 아래의 타입스크립트 에러를 살펴볼 것이다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type React(69) TypeScript - 객체 안 객체 반복문 사용하기 array 는 반복문을 많이 써봤는데, 객체를 돌려보는 건 처음이다. 특히 객체 안의 객체는 처음이다. 막상 한번 훓고 지나갔던 문법들이 동창회한 느낌이었다. object.keys() 로 준비하기 객체를 배열렌더링을 위해 막연히 구글링하던 도중, 아주 유용한 녀석을 찾았다. 이녀석은 key 값만 쏙 빼서 배열화 시키는 objec.. 2022. 5. 15.
Mac - Karabiner 설치하고 맥 한영키 변경하기 주말을 맞아 개발팀 팀원님의 추천으로 Karabiner 라는 앱을 사용해보려고 한다. 이 아이는 키매핑을 위한 앱이다. 한마디로 내가 사용하고 싶은 기능을 원하는 키로 설정할 수 있다. (맥북의 장점인 사용자 최적화와도 맞물려있다👍) 원래는 키보드를 마우스처럼 사용하기 위해 이앱을 선택했지만, 일단 한국 유저들사이에서 가장 유명한 기능인 한영키를 변경해보려고 한다. Mac - Karabiner 설치하고 맥 한영키 변경하기 설치하기 설치 1. 공식 웹사이트에서 일단 다운받자 https://karabiner-elements.pqrs.org/ 설치 2. 다운받은 파일을 실행해준다. 그럼 application 에서 아이콘 확인가능 하다. Karabiner-Element 를 클릭 해보자 설치 3. 그리고 Syst.. 2022. 5. 14.
반응형

티스토리툴바