유령이 나오는 젤리하우스

TIL

(21.07.30) redux-persist 사용하기

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄redux-persist는 redux의 state를 로컬/세션 스토리지에 저장하도록 하는 라이브러리🦄 🦄persist를 사용하기 위해서는 store를 persistedReducer로 만든 리듀서로 만들고, persistStore라는 함수로 store를 감싼 후, store를 **export** 해줘야한다.🦄 persist를 이용하기 위한 store 셋팅 // store를 모아서 통합하는 index.ts import { combineReducers, createStore } from "redux"; import { composeWithDevTools } from "redux-devtools-extension"; import { persistReducer, p..

TIL

(21.07.27) material-ui 스타일 && react-router-dom with TS

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄TypeScript에서 react-router를 사용할때, match / history / location 객체를 사용하기 위해서는 RouteComponentProps를 import 해야한다.🦄 🦄만약, match의 params에 넣어서 전달해줄 props가 있다면, 그 props의 interface도 설정해줘야한다 🦄 🦄material-ui 적용환경에서 css를 먹이는 방법은 1.inline style 적용 2. makeStyles hook 사용, 3.styled component 라이브러리 사용🦄 RouteComponentProps React를 TS로 짜면서 제일 거지 같은 점은 역시 타입 지정을 안해주면 에러를 가차없이 뱉는다는 점이다. 타입체크를 통..

TIL

(21.07.21) JS 구조분해 할당 && terminal과 shell의 차이

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄구조 분해 할당은 어떤 객체와 배열을 "변수"로 분해할 수 있는 특별한 문법🦄 🦄terminal은 shell을 돌릴 수 있는 wrapper program. 서버에 로컬 또는 원격으로 접속이 가능하다.🦄 🦄shell은 실제로 명령어를 전달하고 결과를 전달받는 프로그램🦄 객체 구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. ES6부터 표준화 된 문법으로, 복잡한 객체나 배열 구조에서 특정한 값만을 추릴 때 매우 유용하고, 깔끔하게 쓸 수 있는 식이다. 사용법 let obj = {name:"SpookyJelly", age="sercet"} const {name , a..

TIL

(21.07.21) React && firebase로 클론 코딩 완료

작은 지식이라도, 하루에 하나씩. 한 줄 요약 https://spookyjelly.github.io/Nwitter/?#/ 하루 왼종일 이거만 했네 진짜

TIL

(21.07.19) CRA로 만든 react의 webpack 수정하기 (with CRACO)

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄create-react-app으로 만든 프로젝트는 쉽고 간편하지만, webpack 설정을 건드리지 못한다.🦄 🦄webpack 설정을 건드리고 싶으면 CRACO 라이브러리를 이용해서 바꿀 수 있다!🦄 CRACO가 뭐에요? CRACO는 Create React App Config Override의 준말로, eject 없이 cra의 설정을 바꿀수 있게 해준다. 나는 항상 프로젝트에서 뭔갈 import 할 때 상대경로를 사용해왔다. 이유인즉, 내가 처음 웹을 배운 "head first HTML&CSS" 교재에서 절대경로로 파일을 불러오면 다른 사람의 PC에서 제대로 불러오지 못한다는 경우가 있다는 말을 보고 맹목적으로 상대경로만을 사용하게 되었다. 그렇게 철썩 같이..

TIL

(21.07.18) React-native bulid, Image 컴포넌트

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄리버스 도메인이란 영문 주소로 DNS에 질의하여 IP주소를 찾는것과 반대로, IP 주소를 통하여 도메인 네임을 찾는 것을 의미한다. Expo를 사용하여 앱을 빌드할 때 리버스 도메인이 필요한데, 이는 com.AAAA.BBBB 같은 형식으로 이루어진다.🦄 🦄React Native의 Image 태그의 속성으로 source를 사용한다면, Styled Component로 만드는 것은 지양해라.🦄 🦄Source 태그를 사용할 때는 RN만의 규칙이 있다.🦄 네트워크 정적 파일을 Image 컴포넌트에 활용하는 경우 이거 때문에 오늘 진짜 머리 너무 아팠다. RN을 공부하면서 styled component에 익숙해지려고 모든 컴포넌트를 styled component로 만..

TIL

(21.07.16) cmd tree / RN styled-component의 타입 패키지

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🔑디렉토리 구조를 터미널에서 보고 싶을 때는 tree 명령어를 사용해라🔑 🔑아름다운 타입 세계에서 js 파일을 읽으려면 타입 선언 파일이 필요하다🔑 tree 명령어 E:\project\FINAL-PJT-BACK ├─accounts │ ├─migrations │ │ └─__pycache__ │ └─__pycache__ ├─community │ ├─fixtures │ │ └─community │ ├─migrations │ │ └─__pycache__ │ └─__pycache__ ├─final_pjt │ └─__pycache__ └─media └─profileimg 깃허브 README 파일을 보면 종종 이렇게 디렉토리 구조를 나타낸 내용들을 볼 수 있습니다. 별거..

TIL

(21.07.15) d.ts 파일이란??

작은 지식이라도, 하루에 하나씩. 내용을 보강한 포스트가 발행되었습니다. https://spookyjelly.tistory.com/83 [예전 글 다시쓰기] .d.ts 파일이란? 과거에 썼던 글 https://spookyjelly.tistory.com/39 을 다시 쓴 글입니다. 0. 들어가는 말 약 1년 전에 d.ts 파일에 관해 글을 적었는데, 지금 와서 다시 읽어보니 글의 깊이가 없고 거의 위키 글을 복붙한 수 spookyjelly.tistory.com 한 줄 요약 🔑.d.ts 파일은 기존 JS 모듈을 타입스크립트에서 사용하기 용이하도록 기존 JS 모듈의 타입정보를 별도의 파일로 선언한것🔑 🧨d.ts 파일은 타입선언만 이루어짐을 유의🧨 사용자가 직접 만들 수 도 있지만, 이미 존재하는 .d.ts를 ..