let's get IT with DAVINA 💻

프로젝트를 하며 css로 기본 틀은 다 잡히고 기능 구현해볼때, 백앤드 api가 완성이 덜되었거나 미리 로컬스토리지에서 통신 test를 해보고 싶을 때가 있었다.. terminal npm install json-server //사용하지 않는 포트번호로 원하는 로컬 스토리지 생성 json-server --watch db.json --port 3002 db.json { "login" :[], "signup" : [] }

Redux - React와 무관한 상태관리자 React Redux - React & Redux 통합 Redux Toolkit - Redux를 보다 수월하게 이용하게 해주는 도구 Redux Toolkit 너는 왜 태어났니? 설정할게 너무 많습니다. 미들웨어 설치가 복잡합니다. 반복되는 코드가 너무 많습니다. 순수 자바스크립트로 불변성 유지가 너무 어렵습니다. Redux Toolkit 사용법 npm install @reduxjs/toolkit npm install react-redux 작은 store이 모이면? → slice slice들이 모이면? → 큰 store configureStore() createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공합니다. 내가 만든 리듀서 조각들을 자동으로 ..

모달창을 띄우면, 다른 부분이 아닌 닫기 버튼 ❎ 을 눌렀을 때만 창을 닫거나 하기 이미지처럼 하트 버튼을 누르면 하트의 상태만 변하게 (이미지 전체가 눌리지 않게) 하고 싶을 때가 있다. 모달 컴포넌트에서 최상위 부모 element에 onClick 이벤트로 stopPropagation()함수를 넣어주고, 버튼 element에 onClick 이벤트로 닫힐 수 있게 설정해주면 끝! return ( {e.stopPropagation()}}> X . . . ); const handleLike = async (id, e) => { e.stopPropagation(); // 로그인 안될 시, 먼저 잡고 로그인 if (!isLogin) { dispatch(modalOpen()); return; } return ( ..

왜 가? 프로젝트에 적었던 스크롤링 방지에 대해 여러 검색과 지인에게 물어본 결과.. 좀 더 효율적이고 지저분하지 않은 코드를 알아냈다. 모달창을 띄웠을 때, 스크롤 방지를 하고 -> 모달창을 닫으면 다시 스크롤 활성화를 시키려면 overflow:hidden 속성을 이용하면 된다! modal창의 상태를 useState로 상태값을 지켜보고 모달창이 뜨면, scroll 상태를 hidden으로 비활성화시키고 모달창을 닫으면, hidden을 다시 풀어주는 unset속성을 줘서 스크롤을 다시 활성화시킨다. const [modal, setModal] = useState(false); const handleModal = () => { if (modal === false) { setModal(true); documen..

프로젝트를 하며 모달창을 띄울 때, spacebar을 누를때마다 자꾸 스크롤이 발생하여 불편해서 모달창이 뜨면 스크롤 자체가 안되게 방지하도록 구현했다. utils/useScrollPrevent.jsx 여러 페이지에 쓰일 수 있는 기능이므로 util에 따로 빼주자 import { useEffect } from "react"; const useScrollPrevent = () => { useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;`; return () => { const scrollY = document.body.style.to..

import crypto from "crypto" 🚫 Module “crypto” has no default export. (가져오기 불가능) SOL 1. import * as crypto from "crypto"​ SOL 2. tsconfig.json파일로 가서 esModuleInterop을 true로 설정 { "include": ["src"], //ts파일들이 어디에 있어? 지켜봐 "compilerOptions": { "outDir": "build", //ts->js로 컴파일된건 어디에다 저장할꺼야? "target": "ES6", //js로 컴파일될 때 어떤 버전을 사용할지 선택 가능 (ES6 젤 추천) "lib": ["ES6"], //브라우저 환경이 아닌 NodeJS에서 개발할꼬임 dom ㄴㄴ "s..

1. package.json 초기화 //terminal mkdir typechain code typechain //vsc열린다 //typechain/통합terminal npm init-y - package.json package.json파일이 생성되면, "main": "index.js" 없애고, scripts 안에 test부분 없애고 수정 ㄱㄱ { "name": "typechain", "version": "1.0.0", "description": "", "scripts": { "build": "tsc", "dev": "nodemon --exec ts-node src/index.ts", //src폴더 안의 index.ts파일의 코맨드들을 자동 실행시켜줌 "start": "node build/index.js..

들어가기 전 하나 알고 가자 +1 Static JS method입니다. method를 호출할 때, 원래는 new Hi와 같은 instance를 새로 생성해서 hello()를 호출해야하는데 static 정적 메소드를 쓰면, 바로 class에서 method 호출 가능! class Hi { constructor() { static hello() { return "hello"; } } } Hi.hello(); //ok to go Type VS Interface 두 개의 공통 목표? object의 모양과 타입을 설명해줍니다. Type의 기능 Type (Object) Shape of object (객체가 어떻게 생겼는가?)를 알 수 있습니다. Property Name을 알 수 있습니다. -> nickname, ag..