본문 바로가기

분류 전체보기346

JavaScript - Webpack 이란 웹팩을 일하면서 정말 많이 들어보았다. 대충 개념만 알고 있는 거와 정리해보는 건 다르다. 도대체 웹팩의 정체는 뭘까? 블로그들을 참고하여 개념적인 부분만 먼저 정리해보았다. JavaScript - Webpack 이란 직관적으로 그림을 먼저 살펴보자. 많은 네모들이 보이다 → 네모의 수가 줄어들었다. 복잡한 것들 깔끔하게 정리가 된 느낌이다. 웹팩이 뭘까? 웹팩은 모듈 번들러 라이브러리이다. 그럼 모듈 번들러는 뭘까? 여러개의 나누어진 있는 파일들을 하나의 파일로 만들어주는 라이브러리이다. 왜 사용할까? 하나의 웹페이지가 로드될 때 여러개의 자바스크립트 파일들을 가져와 퍼즐조각처럼 맞추며 우리앞에 짜잔하고 나타난다.(렌더링) 그래서 전역적으로 한꺼번에 많은 파일을 불러오면 뻑(?)이 날 가능성이 농후하다.. 2022. 3. 16.
React(64) React-color 컬러피커 라이브러리 사용하기 원하는 색상을 고를 수 있는 컬러피커 라이브러리를 사용해보자 React-color 라는 라이브러리를 발견하였다. 커스텀이 가능하여 추후에도 사용성이 높을 것 같아서 선택을 하였다. 설치 및 셋업 방법은 아래의 공식문서를 참고해보자 React Color casesandberg.github.io 결과화면 미리보기 나의 경우 컬러 피커에서 컬러를 선택하면 input 창에서 선택한 Hex 값을 받아오는 기능을 구현하는 중이었다. 그 기능의 셋업을 위해 우선 컬러 파레트를 선택했을 때, 컬러피커 하단의 내장된 인풋으로 Hex 값이 텍스트로 들어오는 기초적인 셋업을 구현한 내용을 담고 있다. React(64) React-color 컬러피커 라이브러리 사용하기 구조는 간단하다. React-color 컬러피커는 여러 .. 2022. 3. 13.
React - Input 실행오류 A component is changing an uncontrolled input to be controlled. 수정 페이지 에서 input 창에 입력된 값을 동적으로 받아오다가 아래와 같은 워닝을 받게 되었다. 이 에러는 uncontrolled input 이었다가 → controlled input 으로 바뀌면서 생긴 에러이다. 한마디로 초기값이 undefined 이었다가 → 렌더링 후에 값이 들어와 바뀌었기 때문이다. 리액트 공식문서와 블로그를 참고하여 해결하여 보자 React는 두 가지 방식으로 form 입력을 처리합니다. React에 의해 입력값이 제어되는 엘리먼트를 제어 컴포넌트(controlled component) 라고 합니다. 사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정합니다. 다시 렌더링하지 않으면 .. 2022. 3. 6.
React(63) TypeScript - Pick 으로 객체에서 특정타입만 골라 사용하기 지난 시간에는 Omit 으로 타입에서 사용하지 않는 프로퍼티들을 제외시키고 자유롭게 사용해보았다. 이번 시간에는 Pick 으로 타입에서 사용할 프로퍼티들만 골라서 자유롭게 사용해보자. Hoxy, 오밋(Omit) 이랑 비교해보고 싶으시다면 ... ? 지난 포스팅보기 ↓↓↓ React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기 보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않 devbirdfeet.tistory.com React(63) Pick 으로 객체에서 특정타입만 골라 사용하기 아래의 댓글 타입에서 나는 id , comment 만 .. 2022. 3. 1.
JavaScript - 페이지이동 location.href / location.replace() / location.assign() 주말의 끝을 맞아 오늘은, 페이지 이동할 때 숨쉬듯 사용하였던 내장 메소드들의 속성을 심층 비교하며 공부해보았다. 어느 날 열심히 일하다가 페이지 이동 관련하여 히스토리 이슈가 생겼었는데 replace() 를 사용하니 히스토리가 남지않아 [뒤로가기] 기능이 의미를 잃어버리는 일이 생기게 된 일이었던 것이다. 그 땐 옆에서 🙄어🙄리🙄둥🙄절🙄 줏어듣기만 했었는데 우연한 기회로 정리해보게 되었다. 그럼 공식문서를 참고하며 차이를 알아보도록 하즈아 JavaScript - 페이지이동 location.href / location.replace()/ location.assign() location.href href는 태그를 사용하면서 가장 익숙하게 보았던 속성이다. 현재 접속 중인 페이지 정보를 가지고 있다. 또한 .. 2022. 2. 27.
VScode - 탭간격 설정하기 코드를 작성할 때 개인적으로 2줄 들여쓰기를 선호하는 편이다. 하지만 기본값이 4칸 들여쓰기가 되있는 바람에 항상 새 파일을 만들 때마다 귀찮음을 극복하고 설정해줘야만 했다. 이제 귀찮음이 극에 달했다. 아예 기본값을 바꿔보도록 하자. So, now it's time to set tap-size up ! 설정하러 가즈아 VScode - 탭간격 설정하기 1. [File] - [Preference] - [Settings] 로 들어가자 2. 스크롤 굴려 내려가면 Tab Size 가 보인다. 숫자를 변경해주자 ! 그럼 끝 (바로 적용 안되면 vscode 껏다 켜보자) ** Hoxy 탭 키로 들여쓰기 하고 싶다면? 스크롤 좀만 더 내려서 요것도 같이 체크해주기 2022. 2. 26.
React(62) TypeScript - Omit 으로 객체에서 특정 타입 빼고 사용하기 보통 타입스크립트에서 객체의 타입을 정의할 때, 있어도 되고 없어도 되는 타입(optional property) 옆에는 ? (물음표) 를 붙여서 정의하였다. 타입 스크립트는 꽤나 엄격한 언어라 값을 할당하지 않으면 에러가 발생하기 때문이다. interface User { id: number; name: string; age: string; school?: string; // 학교는 선택항목이라 ?를 붙이게 됨 } 하지만 Omit 이라는 기능을 사용하면 객체에서 선택적으로 사용하는 속성은 ? 로 정의하지 않아도 알아서 제외된다는 것을 알게 되었다. 이 좋은 기능을 나만 알 순 없지. 자, Omit 사용하러 가보자 React(62) Omit 으로 객체에서 특정 타입 빼고 사용하기 은 특정 속성만 제거한 타입.. 2022. 2. 25.
Git(36) BitBucket - Merge branch 'master' of bitbucket.org (squash방식일 때) 우리 개발팀은 아름다운 커밋을 지향하며 squash 해서 머지하는 방식으로 git graph 를 관리하고 있다. 하지만 어느 날인가 부터 브랜치 push 를 할 때마다 Merge branch 'master' of bitbucket.org: 라는 메시지가 뜨면서 어느순간 아래와 비슷한 아름답지 못한 커밋이 나오고 있다. 정확한 원인은 잘 모르겠지만 아마도 잘못된 커밋을 돌리기 위해 git reset 을 하면서 HEAD 가 현재 작업하는 로컬 브랜치와 다른데 위치하게 되어 그렇게 된 것 같다고 추측하였다. Git(36) BitBucket - Merge branch 'master' of bitbucket.org: 여러 방법을 찾아보다 결국 로컬 저장소가 꼬여버렸으니, 다시 원격 마스터를 → 로컬 마스터로 덮어.. 2022. 2. 21.
React(61) React Toolkit - createSelector 사용하기 리액트 툴킷에는 createSeletor 라는 기능이 있다. 직접 사용해보면서 느끼기엔 useSelector 안에서 구구절절 이게 뭔지 어쩌고 저쩌고 정의하던 시절에서 벗어나 깔끔하게 "열려랏 참깨!" 라고 간단하게 명령해주면 되는 느낌을 받았다. (추가 장점 updated) useSelector 가 실행될 때마다 그 안에 정의된 함수는 매번 새로운 배열을 반환하게 되면서 이전에 참조하고 있던 객체 주소가 현재 주소와의 차이를 발생시키게 된다. 그리고는 re-rendering 을 발생시키는데 이때 재계산이 필요한 상태 트리의 사이즈나 계산 비용이 크다면 성능 문제로 이어질 수 있습니다. ref: http://blog.hwahae.co.kr/all/tech/tech-tech/6946/ 자, 이제 이게 뭔지.. 2022. 2. 19.
반응형

티스토리툴바