Coding Story

node modules을 직접 삭제하려면 시간이 엄청 오래 걸린다. 명령어로 삭제하면 금방 삭제된다. npm install rimraf -g // 패키지 설치 rimraf node_modules // 삭제

useEffect란? 렌더링되거나 변수의 값 또는 오브젝트가 달라지게 되면, 그것을 인지하고 업데이트를 해주는 함수. 페이지가 처음 렌더링되고 난 후 무조건 한번 실행된다. useEffect에 배열로 지정한 useState값(Dependency)이 변경되면 실행된다. useEffect(effect, [, deps]); -effect 함수 렌더링 이후 실행할 함수 -deps 특정한 값이 변경될 때 effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어준다. 빈 배열일 경우 렌더링된 후 단 한번만 실행된다. useEffect(() => {}); // 1 useEffect(() => {}, []); // 2 useEFfect(() => {}, [특정 변수 또는 오브젝트]); // 3 1. Dependen..

vscode-styled-components 자동완성 되는지 모르고 일일히 다 치고 에러고쳤던 지난날의 나 ..^^ 이 플러그인을 설치하면 기존 css처럼 자동완성이 가능하다. 좋타

vscode extension에서 react snippet을 다운받는다. 함수형 컴포넌트를 만들 때 rafc를 치면 아래와 같이 자동으로 완성된다. rafce를 치면 아래와 같이 완성된다.

import styled from "styled-components"; import { motion, AnimatePresence } from "framer-motion"; import { useEffect, useRef, useState } from "react"; const box = { entry: (isBack: boolean) => ({ x: isBack ? -500 : 500, opacity: 0, scale: 0, }), center: { x: 0, opacity: 1, scale: 1, transition: { duration: 0.3, }, }, exit: (isBack: boolean) => ({ x: isBack ? 500 : -500, opacity: 0, scale: 0, tran..

css 초기화를 위해 styled-reset 설치 npm install styled-reset styled-components styled-components는 local로 동작한다. 개별 컴포넌트가 아닌 모든 컴포넌트에 동일한 스타일을 적용하는 편이 유리한 경우가 있다. 그러므로 GlobalStyles.js 파일을 생성해 Global Style을 관리한다. createGlobalStyle() 함수로 전역 스타일 컴포넌트를 생성한다. GlobalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` ${reset}; body { display: flex; justify-cont..

TypeScript 자바스크립트를 기반으로한 프로그래밍 언어. strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 브라우저는 TypeScript를 이해하지 못한다. 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다. Typescript 테스트 할 수 있는 곳 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www...

노마드코더 리액트 마스터 클래스 #2 STYLED COMPONENT index.js import React from "react"; import ReactDOM from "react-dom"; import { ThemeProvider } from "styled-components"; import App from "./App"; const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", }; const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke", }; ReactDOM.render( , document.getElementById("root") ); App.js import..

import styled from "styled-components"; const Father = styled.div` display: flex; `; const Input = styled.input.attrs({ required: true })` background-color: tomato; `; function App() { return ( ); } export default App; As as 라는 props를 사용하면 명시한 태그로 컴포넌트를 사용할 수 있다. Father 컴포넌트는 header가 된다. Attrs attrs 뒤에 대괄호 안에는 input으로 전달된 모든 속성을 가진 오브젝트를 담을 수 있다. 모든 input 에 required: true가 적용된다.

노마드코더 React JS 마스터 클래스 #2 .2 컴포넌트 확장이란, 기존 컴포넌트의 모든 속성을 가지고 오면서 새로운 속성까지 더해주는 것이다. props를 통해 컴포넌트 style을 설정한다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100px; `; const Circle = styled.div` background-color: ${(props) => props.bgColor}; width: 100px; height: 100..