분류 전체보기 검색 결과

해당 글 777건

react-create-app breakdown + Webpack 기초

create-react-app을 하면 자동으로 웹팩 설정 등 react를 구동하기 위한 작업을 이미 다 해주지만 그 내부 원리를 알아둘 필요가 있다. npm init npm i react react-dom npm i -D webpack webpack-cli npm i -D @babel/react //react를 사용하므로 react babel을 설치합니다. npm i -D @babel/preset-env //babel의 preset 중 env를 선택합니다. npm i -D @babel/core //babel의 핵심을 설치합니다 npm i -D babel-loader // 바벨과 웹팩을 연결해주는 도구입니다. 설치 후에는 public하게 보여줄 index.html, src에서 index.html로 Reac..
React, Next, Redux/⚛ React.JS 2020. 3. 21. 05:08

React Hooks : useEffect

페이스북 공식 문서에 따르면 useEffect를 리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다. 라고 한다. 결국 각 라이프 사이클 단계 중 최종적으로 실행되는 것이다. 어쨌거나 render() 이후에 실행되면서 동시에 매번 어떤 동작이 일어날 때마다 작동한다. useEffect는 렌더링 이후에 매번 수행되는 걸까요? 네, 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행됩니다 🚗 Component Lifecycle Mounting : constructor(), render(), componentDidMount() Updati..
React, Next, Redux/🚀 React with Hooks 2020. 3. 21. 05:08

React Hooks : useState, 비동기적 속성과 함수형 updator

🚓 hooks가 뭐야 class componenet에서 state, ref를 사용하는 걸 functional components에도 사용할 수 있게 만든 거다. (매우 간단!) 따라서 class components를 사용하지 않아도 되었고 React 측에서도 Hook의 사용을 권장한다. => 함수형 프로그래밍 스타일로 코딩 가능해짐 다음은 우리가 줄 곧 사용해 온 일반적인 클래스 컴포넌트이다. React.Component에서 extends 해주고 state 만들어주고 state를 수정할 경우에는 this.setState({})를 사용하며 컴포넌트의 라이프 사이클에 맞춰서 render()가 실행된다. 위와 같은 클래스 컴포넌트를 Hook으로 고쳐보았다. useState를 이용하여 state를 수정하기 쉽게..
React, Next, Redux/🚀 React with Hooks 2020. 3. 20. 21:53

[Webpack] express 환경에서의 웹팩 사용법 (scss, es6 js 변환)

webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. webpack.js.org 프론트엔드 개발환경의 이해: 웹팩(기본) 1. 배경 jeonghwan-kim.github.io webpack은 모듈 번들러이다. SCSS나 babel을 적용한 js 등 dependencies가 있는 파일들을 일반 브라우저가 이해할 수 있는 일반 파일로 변환할 것이다. 웹팩이 터미널에 오류에 대한 내용을 상세히 알려주므..
🎁 Module bundler/📖 Webpack 2020. 3. 19. 23:23

Vim 모드 및 간단한 명령어

vim의 의미는 vi improved이다. 즉, vi에 여러 기능을 추가한 개선판이 vim이다. Vim의 모드 같은 키를 눌러도 모드에 따라 다른 동작을 한다는 점이 포인트이다. 일반 모드가 기본이고 각 모드로 이동한다고 이해하면 편하다. 일반 모드에서 명령어를 입력하여 다른 모드로 이동하고 일반 모드로 되돌아오기 위해 ESC 키를 누르자. Vim 입력 모드(i) vim 파일을 저장할 경로로 이동한 후 명령어 vim을 입력하면 vim을 실행합니다. vim 여기서 무언가를 입력하기 위해서는 입력 모드로 이동해야 하므로 i 나 a를 누르자. 입력하면 에디터 하단에 --INSERT--가 뜬다. 이 외의 모드도 하단을 확인하여 무슨 모드인지 확인할 수 있다. 그런데 i, I, a, A, o, O 는 모두 입력 ..
🐧 Linux, shell, web server/✅ Vim 2020. 3. 19. 18:00

React에서 Typescript 사용하기

시작 npx create-react-app [원하는 이름] --template typescript 직접 tsconfig.json 등을 만들어 가며 바닥부터 만들 수도 있지만 빠른 시작을 위해 위와 같은 툴체인을 사용하자. --typescript 옵션을 주고 create-react-app을 하면 js와 jsx가 아니라 ts와 tsx가 생성된다. 뿐만 아니라 package.json에도 새로운 게 추가되었고 tsconfig.json이라는 파일도 생성 되었다. tsconfig.json의 설정을 통해 특정 규칙을 끄고 켤 수도 있고 얼마나 strict할 지 결정할 수도 있기 때문에 TS를 잘 쓰려면 tsconfig.json을 잘 다룰줄 알아야 한다. tsconfig.json에 대한 설명은 아래에 정리해두었습니다...
React, Next, Redux/⚛ React.TS 2020. 3. 18. 02:48

props vs state

props와 state를 별 생각없이 활용해오던 편이었는데 둘의 차이를 생각해보자. props가 컴포넌트를 외부(정확히는 부모 컴포넌트) 수준에서 정의하고 (자식 컴포넌트에서) 사용하는 것이라고 한다다. 즉, 부모에서 자식으로 아래 쪽으로만 움직인다. state는 자식들의 props를 공유하는 것이라고 볼 수 있다. React 공식 자습서에서는 "기억하게" 만드는 것이라고 하고 있다. 많은 코더의 설명에 따르면, 바뀌는 정보는 state, 바뀌지 않는 정보는 props라고 한다. 내 설명으로는, 부모에서 자식 컴포넌트로 데이터를 전달하는 것은 props이다. 또, state를 props로 전달하여 활용할 수도 있다. state는 다음과 같이 활용한다. Subject와 Nav컴포넌트의 props로 stat..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 20:37

React Developer Tools

React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 355970aa4 on 3/3/2020. chrome.google.com 개발자 도구에서 컴포넌트와 props 등을 확인할 수 있는 매우 유용한 Chrome extension app이다. 개발자 도구에서 CSS를 수정하고 실시간으로 확인할 수 있듯 이 툴을 통해서 props를 수정할 수도 있으며 컴포넌트가 무엇에 의해 렌더링 되었고 위치가 어느 곳인지도 확인할 수 있다. 재 렌더링 되는 곳을 확인하고 이를 최소화하는 방향으로 최적화하기 위해서 반드시 Hightlight updates when components render를..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 19:33

children prop의 사용

React에서는 children이라는 reserved prop이 존재한다. "Children are the components that are placed inside the component."란다. import React from "react"; import MyComponent from "./MyComponent"; // MyComponent 라는 컴포넌트 사이에 '리액트'라는 문자열이 있습니다. // 라고 간단히 쓸 수 있지만 이 경우에는 children을 만들어주기 위해... function App() { return 리액트; } // props에는 자동으로 children 요소가 생깁니다. 이를 활용할 수 있습니다. const MyComponent = (props) => { return ( {..
React, Next, Redux/⚛ React.JS 2020. 3. 17. 17:01

JS 객체 지향 프로그래밍 : 객체와 클래스

TS에서 class를 사용하는 방법은 아래 포스트를 참고합시다. (https://darrengwon.tistory.com/527?category=867626) - 간단한 배열과 객체의 반복문 주의할 점은, 반복문에서 member.name을 할 경우 undefined을 출력하므로 member[name]으로 입력해줘야 함 // 배열 const a = [1, 3, 57, 8]; let i = 0; while (i < a.length) { console.log(i); i++; } // 객체 const member = { manager: "deluze", client: "jijek" }; for (let name in member) { console.log(name, member[name]); } - this t..
Programming Language/🟨 Javascript 2020. 3. 17. 00:46