유령이 나오는 젤리하우스

TIL

(21.08.04) Material-ui Default theme의 type

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄import {Theme} from "@material-ui/core/styles🦄 Default Theme material-ui는 Theme Object를 통한 스타일링을 가능하게 한다. 이 Theme라는 것은 일일이 사용자가 withTheme을 이용해서 직접 만들 수 도 있지만, 기본적으로 Default 값을 제공한다. 얘는 사실 makeStyles()를 호출할 때 첫번째 parameter로 들어가고 있다. 얘를 가져다 쓰려면 params에 임시변수를 넣어주고, theme에 맞는 속성 값들을 꺼내쓰면 되는데, 이 속성 값들이라는게 무지무지 길고 복잡하고 어려운 영어로 범벅이 되어있다. 보나마나 오타로 인한 에러가 다량으로 발생하게 될 것이라는 게 예상되..

TIL

(21.08.02) setInterval 함수

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄setInterval 함수는 일정한 시간 간격으로 작업을 수행하는데 사용한다.🦄 setInterval 함수 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval WindowOrWorkerGlobalScope.setInterval() - Web APIs | MDN The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each cal..

TIL

(21.08.02) Typescript에서 React Props를 받기 / React에서 배열 랜더링

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄하위 컴포넌트로 Props를 내려 줄 때, Props를 받는 곳에서 타입을 지정해줘야 한다.🦄 🦄React에서 배열을 랜더링 하려면 map 함수를 사용한다는 것, 잊지 말자.🦄 하위 컴포넌트로 Props를 줘보자. // interface.ts //프로필에 띄울 개별 Article들의 type입니다. export interface ArticleProps { title: string; description: string; imagePaths: any; ingredients: string; createDate: string; } 자주 사용될 타입을 먼저 작성하여 export 하여, 타입을 여러번 타이핑 하는 수고를 덜기 위해 작성했다. 인터페이스를 export ..

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