본문 바로가기

분류 전체보기346

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.
CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 오늘은 한줄짜리 아주 간단한 css 이지만 잊어버릴까봐 기록으로 남겨놓는다. 1, 3, 5번째 줄만 옅은 회색을 만들고 싶다면 ? 자 만들러가보자. 결과화면 미리보기 아래처럼 홀수 번째 태그에만 색상이 적용되어있다. CSS - 테이블 row 홀수 짝수 번째 태그에만 스타일 적용하기 HTML 홀수 짝수 홀수 짝수 홀수 짝수 CSS div { background-color: white; } div:nth-child(2n+1) { background-color: gray; // 홀수만 적용 } div:nth-child(2n) { background-color: gray; // 짝수만 적용 } 요즘엔 죽어라 하지만 정체되는 느낌을 받고 있다ㅠ 스스로에게 조금이라도 나아가고 있는 거라고 다독이며 포스팅을 써본다 2022. 5. 13.
React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 react-cookie 의 활용에 대한 세번째 포스팅이다. 이를 통해 쿠키에 대한 지식과 여러 기능을 구현해보는 좋은 기회가 되었던 것 같다 :) 로그인 / 로그아웃 기능은 모든 웹에서 기초적인 필수기능이라고 생각한다. 그래서 로그아웃 기능은 어려울 줄 알았는데, 프론트에서의 처리는 예상보다 간단....(?) 했다. 그럼 로그아웃을 기능을 구현하러 가보자 결과화면 미리보기 딱히 미리보기라고 할 것도 없지만 어쨋든 이 버튼을 클릭하면 로그아웃이 될 것이다. React(68) react-cookie 쿠키삭제하고 로그아웃 기능구현하기 쿠키 값을 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보았다. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트.. 2022. 5. 8.
React - package.json 과 package-lock.json 이란 Updated 08/02/2022 오늘은 내부 라이브러리를 업데이트할 일이 있어, package.json 에서 버전을 올려주고 commit 하였다. build 하는데 자꾸 에러가 나는 것이었다. 알고보니 package-lock.json 도 같이 commit 해줘야 한다는 것을 알았다. package.json 은 프로젝트를 위해 사용되는 npm 프로그램(모듈)들의 버전 관리을 위한 세팅파일 정도로 알고 있었다. (팀원들과 동일한 환경에서 다같이 작업하려면 버전이 모두 똑같아야 하기 때문이다. a.k.a 의존성 ) 또한 요 파일은 한번 세팅 하면 딱히 건드릴 일이 없었기 때문에, 큰 관심을 두지 않았던 것 같다. 이런 일을 겪고 나니 package.json 이랑 package-lock.json 의 정체가 무.. 2022. 5. 3.
반응형

티스토리툴바