[React] Recoil 사용 해보기
2022. 6. 6. 18:44
공부/JavaScript
Recoil을 사용하면 state를 다른 컴포넌트에 prop을 통해 계속 내려줄 필요 없이, atom을 사용해서 여러 컴포넌트에서 쉽게 접근할 수 있다! 사용하기 위해선 설치를 먼저 해주어야 한다. npm i recoil 그리고 atoms.ts 파일을 하나 만들어 준 뒤 내부에 아래와 같이 작성했다. import { atom } from "recoil"; //import recoil export const isDarkAtom = atom({ key: "isDark", default: false, }); 그리고 index.tsx에서 App 컴포넌트를 감싸준다. import { RecoilRoot } from "recoil"; //import RecoilRoot root.render( //recoil ); ..
[TypeScript] interface
2022. 6. 1. 01:17
공부/JavaScript
타입스크립트에서 type을 지정해주는 방식 중 하나인 interface를 배웠다. object의 shape을 알려줄 수 있다고 한다! interface PersonProp { name:string; age:number; } function Person({name,age}:PersonProp){ return( {name}, {age} ) } 이렇게 interface 안에 각 prop의 type을 지정해주고 지정한 interface 이름인 PersonProp을 콜론으로 붙여주면 된다!
[TypeScript] DefinitelyTyped
2022. 6. 1. 01:09
공부/JavaScript
TS를 사용하게 되면 기존에 사용하던 라이브러리들이 정상작동 하지 않을 가능성이 높다. 간단하게 계속 사용할 수 있는데 이 때 접근하게 되는 것이 DefinitelyTyped이다. 내가 사용하려는 styled-components의 경우에도 자바스크립트로 만들어졌기 때문에 타입스크립트를 사용하게 되면 오류가 발생한다. 이를 해결하기 위해서 아래 커맨드를 순서대로 입력하여 해결했다. npm i --save-dev @types/styled-components npm i styled-components @types/라이브러리이름 을 입력하면 되는데, 아래 레포지토리에 등록된 라이브러리가 현재 포스팅 시점에 7000개가 넘는다! GitHub - DefinitelyTyped/DefinitelyTyped: The r..
[React] req.body undefined 해결
2022. 3. 23. 20:19
공부/JavaScript
rest-api를 공부하는 중에 req.body에서 undefined가 뜨는 걸 확인했다. 이는 body-parser로 해결할 수 있다. 우선 body-parser를 설치해주어야 한다. npm i body-parser 나는 npm으로 설치하였고 yarn은 yarn add body-parser로 가능하다. 그리고 상단에 require을 통해 외부 메서드 모듈을 가져온다. const bodyParser=require('body-parser') app.use(bodyParser.json()) 이렇게 하면 undefined가 해결된다.
[React] Arrow 함수
2022. 3. 21. 20:20
공부/JavaScript
Arrow 함수를 사용하면 함수 바인딩을 하지 않아도 된다. 기본적으로 아래와 같이 작성한다. function=()=>{ console.log("Hello world") } 함수명 = () => {}처럼 작성하면 된다. 이렇게 되면 함수 바인딩을 따로 하지 않아도 된다.
[React] 함수 바인딩
2022. 3. 21. 19:50
공부/JavaScript
아래는 +버튼을 누르면 값이 1 증가하고, -버튼을 누르면 값이 1 감소하는 코드이다. class Counter extends Component{ constructor(props){ super(props) this.state={ num:0 } } increase(){ this.setState({ num:this.state.num+1 }) } decrease(){ this.setState({ num:this.state.num-1 }) } render(){ return( {this.state.num} + - ) } } export default Counter; 그런데 위와 같이 작성하게 되면 오류가 발생한다. 이유는 함수에 사용한 setState를 찾을 수가 없기 때문인데, 이 때 함수 바인딩을 통해서 함수..
[React] 클래스형 컴포넌트, 함수형 컴포넌트
2022. 3. 18. 21:42
공부/JavaScript
클래스형 컴포넌트 클래스형 컴포넌트 이후에 더 편한 함수형 컴포넌트가 나왔지만, 클래스형은 라이프사이클 사용이 용이하다고 한다. import React, {Component} from 'react'; class App extends Component { //class가 필요하고 component로 상속 받는다. render() { //render 메소드가 필요하다. return ( hello world! ) } } 함수형 컴포넌트 클래스형 이후에 나왔고, 초기 세팅도 함수형으로 되어있다. 클래스형보다 사용하기 편리하고, 초기엔 라이프사이클 사용에 제한이 있었지만 리액트 훅으로 보완이 가능하다고 한다. import React from 'react'; import './App.css'; function Ap..
[React] 리액트 프로젝트 생성
2022. 3. 16. 20:46
공부/JavaScript
프로젝트 생성 npx create-react-app project-name 해당 디렉토리로 이동 cd project-name 실행 npm start //npm 사용시 yarn start //yarn 사용시 기본 포트는 3000이므로 localhost:3000으로 접속한다.
[NodeJS] Node.js 설치와 yarn 설치
2022. 3. 16. 20:39
공부/JavaScript
1. Node.js를 사용하기 위해선 설치를 해주어야 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 홈에서 직접 다운로드 받을 수도 있고, homebrew가 설치되어 있다면 아래 명령어로 더 쉽게 설치가 가능하다. brew install node 2. yarn 설치 yarn은 자바스크립트 패키지 매니저 중 하나이다. npm을 사용해도 되지만 npm의 핵심 이슈를 해결하기 위해 만들어졌고 더 가벼운 것이 yarn이라고 한다. npm, brew로 설치가 가능한데, 나는 npm으로 설치가 잘 되지 않아서 brew로 설치했다. npm으로 설치 npm install --global ..