개발 일지

CRA로 타입스크립트와 emotion을 사용하고 있는데, public 디렉토리에서 이미지들을 import 하지 않고, src/assets 디렉토리에서 이미지를 import 하려고 했다. 🤔 public vs assets - public : 정적 디렉토리, 컴파일 시 경량화 되지 않음. 웹팩이 아니라 build 폴더에 복사 되므로 경로 오입력 등의 이유로 에러가 났을 경우, 위치를 찾기 힘들다. 경로에 '%PUBLIC_URL%' 사용 - assets : 웹팩으로 처리됨. 컴파일 에러시 경로 추적가능. 대부분의 이미지들은 여기에서 관리한다. 기존에 public/images 폴더에서 이미지 경로를 호출할 때는 아무 문제 없이 잘 되었다. (너무나도 당연함) 그런데... src/assets 으로 이미지 경로를 ..

1. 함수의 타입 설정 파라미터도 일종의 변수, 타입 설정이 가능하다 return 되는 값 의 타입 지정도 가능하다, function multipleTwice(x:number) :number { return x*2; } 2. 함수의 특징 - void 타입 return이 없을 경우 void 타입 선언 가능 return 문이 없어야 하는데 return될 때, 이를 방지해준다. function multipleTwice(x:number) :void { } 3. 파라미터 옵션 파라미터를 지정해두고 함수 호출시 파라미터를 사용하지 않을 경우에는, 타입스크립트의 경우 에러를 뱉는다. (자바스크립트에서는 상관없다.) function multipleTwice(x?:number) :void { } multipleTwice..

1. 파일 찾기, 특정 문자열 찾기 find 찾을 경로 -name '파일명' find 찾을 경로 -name '특정문자열*' find 찾을 경로 -name '*특정문자열' find 찾을 경로 -name '*정문자열*' 예) find /usr/ -name '*-bin*' 2. gz 파일 풀기 (이건 자주 사용하지는 않음) gunzip '파일명'.gz 3. chmod : 권한 변경시 유용 //1. 모든 사용자가 읽기(r)/쓰기(w)/실행하기(x) 불가 $ chmod 000 '파일명' //2. 모든 사용자가 읽기(r)/쓰기(w)/실행하기(x) 가능 $ chmod 777 '파일명' //3. 소유자(u)는 모든 권한 부여, 그룹 및 그 외 사용자는 읽기(r)/실행하기(x)만 가능 $ chmod 755 '파일명' /..

1. Window(윈도우) (1) 환경변수 등록 윈도우 + R - sysdm.cpl 입력 후 확인 탭 메뉴 - [고급] - [환경변수] 사용자 변수 - [편집] 환경변수 지정 - 로컬에 인텔리제이 설치 경로 확인 경로 참고) C:\Program Files\JetBrains\Intellij IDEA 버전\bin (2) 터미널에서 idea 또는 idea64(64bit인 경우) 명령어 입력하여 실행 idea . 또는 idea64 . 2. MacOS(맥) [Tools] - [Create Command-line Launcher]

https://velog.io/@corner3499/Node-sass-%EC%84%A4%EC%B9%98-%EC%97%90%EB%9F%AC 1. node-sass 버전 지정 설치 npm i node-sass@4.14.1 or npm i node-sass@4.9.0 2. window build tools 사용해서 패키징 설치 npm install --global --production windows-build-tools 3. yarn upgrade로 패키지 업데이트 & yarn add node-sass yarn upgrade yarn add node-sass yarn add node-sass@4.0.0 으로 버전지정 재설치 package.json에 설정된 node-sass 버전이 로컬에 설치된 node 버전..

https://blog.whitekiwi.link/github-%EC%B5%9C%EC%B4%88-1%ED%9A%8C%EB%A7%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-12b67966bd10 [Github] 최초 1회만 로그인 설정하기 How to set Git Credentials blog.whitekiwi.link

emotion 설정이 제대로 되지 않았을 때 발생하는 오류 👉해결 방법 : babel 설정이 따로 필요하다고 한다. (왜? 🤔) 1. 일단 필요한 패키지들을 설치 해준다. npm i @emotion/core @emotion/react @emotion/styled @emotion/babel-preset-css-prop 2. 약간의 설정이 필요하다. webpack.config.ts(x) 파일 루트 경로에 생성 3.

🤔 미들웨어는 무엇인가? action에서 선언된 state를 변경하는 부분이 dispatch를 통해 실행되기 전에 동작한다. 즉, action 과 dispatch 사이에서 일어나는 동작을 제어하는 도구라고 이해하면 되겠다. 비동기를 구현할 때 용이하며, 리덕스에 비동기 관리 tool로는 redux-thunk, redux-saga 정도가 있다. [기본 템플릿] const middleware = store => next => action => { (1) next(action) //기본 기능 : action이 dispatch를 통해 실행된다. (2) } 함수가 중첩된 형태이다. 파라미터가 3개 이고 return 문이 2개인 고차함수 형태이다. 이를 function 으로 다시 작성해본다면, function mi..

👉 관심사의 분리 (Seperation of Concerns) : 특정한 관심사에 따라 기능을 구분하여, 각 기능들마다 개개의 관심사를 해결하기 위한 코드를 작성하는 패턴이다. 함수를 최대한 간결한 형태로 구현하여, 프로세스의 복잡도를 낮추고, 재사용성을 높이며, 유지보수를 원할하게 합니다. 리덕스도 이 "관심사의 분리"를 통해 폴더 구조를 나누어 볼 수 있는데, 크게 나뉠 수 있는 파트가 "리듀서(reducer)"와 "액션(action)" 이다. 예를 들어, 데이터를 기준으로 유저와 관련된 기능들은 user.js 에 다 넣어두고 사용, 마찬가지로 게시글과 관련된 기능들은 boards.js에서 관리한다. 리듀서 같은 경우는, 순수함수로 정의가 되어 있기 때문에 분리하기 굉장히 편리하다. const ini..

🤔 리덕스란 몰까..? 그리고 왜 사용하는 걸까? https://ko.redux.js.org/ Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. ko.redux.js.org 프로젝트의 depth 가 깊어지면서 컴포넌트간에 state를 주고 받고, 넘나드는 것이 점점 복잡해진다.. 이를 해결 하기 위해 최상위 컴포넌트에서 전역변수로 한꺼번에 선언해서 여러 곳에서 사용하기 위해 사용한다. 리덕스를 사용하게 되면, state로 일일히 선언하지 않아도 된다! 👉 리덕스의 장점 - action을 실행할 때 dispatch 의 히스토리를 확인할 수 있다.(에러 핸들링에 용이) - git reset 처럼 이전 action으로 되돌릴 ..