김성원의 코딩 일기

Router v5의 예시 npm 다운은 버전을 명시하지 않으면 최신 버전으로 다운 받아지기 때문에 언급하지 않겠습니다. import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import ToDoList from '../pages/ToDoList'; import LogIn from '../pages/LogIn'; function AppRouter(}) { return ; } export default AppRouter; Router v6의 예시 - Router v6은 v5와 코드 작성하는 방식이 다르다. 다양한 함수에 pros를 넣는 것이 아닌 createBrowserRouter()를 활용하며 path는 v5과 동일하고 JSX..

1. JSX란 - JSX란 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다. 2. JSX의 장점 보기 쉽고 익숙하다. 활용도가 더욱 높디. 3. JSX 문법 1. 감싸인 요소 - Virtual DOM에서 컨포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다. 그런데 div요소를 사용하고 싶지 않으면 리액트 v16 이상부터는 로 표현하고 사용할 수 있다. 2. 자바스크립트 표현 - 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 된다. 자바스크립트 값을 J..

1. DOM - DOM은 Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다. 1-1 DOM의 단점 - DOM 자체는 빠르다. 단 웹 브라우저 안에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트합니다. 이 과정에서 시간이 허비 되는 것이다. 1-2 Virtual DOM 사용하는 이유 - 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다. 2 Virtual DOM - Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 마치 실..

1. Styled-components - Styled-components TS로 받기 https://styled-components.com/docs/api#typescript 링크에 잘 나와있다. npm install @types/styled-components 2. Themes - TS 환경에서 themes 사용하는 방법이며 1. 처음 파일 styled.d.ts를 생선 한다. 2. 그 후 안에 npm에서 예시로 지원하는 코드를 넣는다. // import original module declarations import 'styled-components'; // and extend them! declare module 'styled-components' { export interface DefaultThe..

1. State - TS의 State 사용은 크게 다르지 않다. 우리가 hook인 state를 사용할 때, 초기 값은 타입에 최소한의 값을 넣는데 그때 TS에서는 기본 타입 값으로 설정을 한다. 그래서 사용할 때 크게 차이는 없으나 만약 초가 값이 number인데 추후에 다른 타입으로 변경되거나 혹은 여러 가지의 타입을 허용해야 하는 상황 시에는 타입을 선언하는 것이 좋다. 예) const [value, setValue] = useState(0); 2. Forms - form 태그에 JS로 값은 가지고 올 때 input 값 value를 submit을 가진 버튼을 누를 가지고 올 수 있게 할 수 있다. 그렇다면 여기에 TS적용이 되면 어떻게 될까? 기본적으로 작성하는 것은 동일하나 .porp에 들어가야 할..

1. type - type은 TS정리한 곳 1번에 있기 때문에 여기서는 언급하지 않겠습니다~~~ TS 01 TS(Typescript) 사용 이유, 타입 선언, 타입을 미리 선언(type) 2. porp - 컴퍼넌트로 선언할 때도 타입이 맞지 않으면 안 된다. 상세한 내용은 interface에서 함께 사용하면서 알아보자!! 3.interface - 객체 형태로 타임을 선언한 후 porp를 이용해 원하는 곳에 타입을 선언하는데 큰 도움을 준다, 선언을 하면 다른 곳에서 사용할 수 있다. 예) /* App.tsx */ import Circle from './Circle'; function App() { return ( ); } export default App; /* Circle.tsx */ import st..

1. 플레이그라운드 - TS를 확인할 수 있는 웹에서 어떻게 적용되는지 어떻게 사용하는지, 사용 예시를 직접 해봏 수 있는 사이트 입니다. typescriptlang.org/ 2. React에 TS 적용하기 - 리액트로 TS를 적용하기 위해서는 다운을 받아야 된다~~ 그런데 2가지의 상황이 있다. 1. 처음부터 React를 만들 때 함께 설치하기 npx create-react-app 내 앱 이름 --template typescript 2. 만든 프로젝트에 적용하기 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 3. styled-components 사용하기 - styled-components를 설치하고 ..

theme - theme는 최상단 파일에 스타일 값을 미리 설정한 후 자식 파일 또는 컨퍼넌트에 함수로 호출하여 값을 적용 시키기 위한 기능이다. 사용한 예로는 다크모드가 있다. import로 import { ThemeProvider } from 'styled-components'; 선언할 후 자신이 원하는 변수면으로 스타일 값을 설정한다. 이때는 기존에 사용하던 css의 프로퍼티가 아니기 때문에 잘 알아보고 사용하자!! 예) const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111", } 그 후 자신이 적용하고 싶은 컨퍼넌트에 부모 컨퍼넌트로 ThemeProvider를 선언한 후 theme 프롭스로 변수명을 선언한다. 예) 자식 컨퍼넌트 ..

1. anumation - keyframes를 import로 선언한 뒤 변수로 선언하고 변수 명을 선언한 뒤 animation에 선언하면 된다. 예) import styled, { keyframes } from 'styled-components'; function App() { return( ) } const rotation = keyframes` form { transform: rotate(0deg); border-radius: 0px; } to { transform: rotate(360deg); border-radius: 100px; } ` const Box = styled.div` height: 200px; width: 200px; background-color: skyblue; animation:..

1. 선언하기 아래의 패키지를 설치 후 사용할 수 있다. npm i styled-components 함사 밖에 선언해 컴퍼넌트 선언처럼 사용을한다. 기본적은 형태는 import styled from 'styled-components'; const 변수명 = styled.태그` css 작성 `; function App() { return ( ); } export default App; 2. css컴퍼넌트에 몇 개 요소만 변경하고 싶을 때 1. prop스로 선언하여 css에 적용하기 - JSX에 선언한 컴퍼넌트에 prop를 선언하고 원하는 css에 넣는다. 예) import styled from 'styled-components'; const Box = styled.div` width: 100px; heig..