본문 바로가기

전체 글351

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.
React(60) Redux-toolkit 사용하기 리덕스 툴킷은 리덕스를 편하게 사용하기 위한 리덕스공식 개발 도구이다. 여태까지 리덕스를 잘 사용하기 위해서는 4~5개의 라이브러리를 함께 사용해야 했다. 하지만 Redux Toolkit 은 내장된 기능으로 saga를 제외한 나머지 라이브러리를 대체할 수 있다. redux-actions (많아지는 액션을 관리하는 라이브러리) immer (상태값의 불변성 보존을 위한 라이브러리) reselect (store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위한 라이브러리) redux-thunk (액션을 비동기적으로 만들수있는 라이브러리) redux-saga React(60) Redux-toolkit 이란 쉽게 말해서 기존 리덕스는 사용되는 코드가 많았다. (액션타입도 적어주고... 액션도 작성하고 리듀서.. 2022. 2. 17.
반응형

티스토리툴바