유령이 나오는 젤리하우스

TIL

(21.08.01) SweetAlert2

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄깜찍한 alert창인 SweetAlert2를 사용하는 방법입니다.🦄 Installation npm install sweetalert2 sweetalert1도 있는데, 1은 업데이트가 끊긴지 3년 정도가 되었고, 2가 1에 비해서 더 다양한 기능을 제공하기에 sweetalert2만 쓰면 됩니다. How to use import Swal from 'sweetalert2' Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 }) 위와 같이 Swal을 불러온 다음, fire 메소드를 이용해서 각종 ..

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로 짜면서 제일 거지 같은 점은 역시 타입 지정을 안해주면 에러를 가차없이 뱉는다는 점이다. 타입체크를 통..

토이 프로젝트/With React

[토이 프로젝트] 셜록 : 보드게임 탐정 -完-

앱 이름을 솔로몬에서 셜록으로 바꿨습니다. 솔로몬이라는 이름은 찾아준다는 느낌보다는 판결하고 결론 내리는 느낌이 강해 앱 목적을 잘 전달하지 못했습니다. 최적의 보드게임을 "찾아"준다는 느낌을 더 살리고 싶었기에, 탐정 "셜록 홈즈"의 이름을 따와, 현 상황에 딱 맞는 보드게임을 "찾아준다" 라는 느낌이 사용자에게 전달되도록 하였습니다. 시험해보기 : https://seongnam-citizen-developers.github.io/scaling-journey/ 셜록 : 보드게임 탐정 seongnam-citizen-developers.github.io 깃허브: https://github.com/Seongnam-Citizen-Developers/scaling-journey 후기 계속 미루고 미루고 미루고 ..

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로 만..