Library & Framework/React.js

[React.js] create-react-app vulnerabilities / CRA 버전 취약 오류

저번에 개인프로젝트를 새로 시작하려고 했었는데, create-react-app을 했더니 audit에서 vulnerability들이 어마무시하게 떴다. 그래서 node.js를 재설치만 하고 다른 일한다고 까먹고 있었는데, 이번에 대회를 준비하다보니 또 같은 오류가 발생했다. 올해 초에 개인프로젝트를 할 때는 이런게 없었는데, 문제를 찾기 위해 몇 시간을 썼다. node.js는 다섯번 정도 재설치 한 것 같고, 컴퓨터 내 모든 node_modules 검색해서 확인하고 관련 데이터를 거의 전부 지웠다. react-scripts도 여러번 재설치하고, yarn, npm 전부 지웠다가 다시 깔고, 재부팅도 여러번.. 근데 그래도 해결이 안되서 스트레스 풀로 받고 있던 도중에, 생각보다 너무 쉬운 결론을 찾을 수 있..

[React.js] 리액트 useEffect 기본 사용

useEffect는 리액트의 함수형 컴포넌트에서 컴포넌트의 마운트 시(생성시), 마운트 해제 시(삭제시), 업데이트 시에 특정 로직을 실행될 수 있도록 하는데 사용한다. 클래스형 컴포넌트의 componentDidMount, componentWillUnmount, componentDidUpdate를 한번에 사용가능하도록 해주는 것이다. useEffect의 경우 다음과 같은 형태로 구현된다. useEffect(() => { 내부 로직 return () => {cleanup 함수} }, deps) 내부 로직은 말 그대로 조건에 맞는 상황에서 실행될 로직을 의미하며, return의 경우 cleanup 함수이다. deps의 경우 useEffect가 실행되는 기준이 될 값들의 배열을 의미한다. 조건문을 사용하여 좀..

[React.js] 리액트 useRef

useRef 함수는 리액트의 함수형 컴포넌트에서 사용하는 Hook의 한 종류로, 기본적으로 두 가지 기능을 가지고 있다. 1. 특정 DOM을 선택하여 저장 2. state와 관련없는 변수 저장 1. 특정 DOM을 선택하여 저장 특정 DOM 선택 기능은 보통 어떤 DOM element를 선택해 해당 element의 스크롤, 사이즈, 온 포커스 기능 등을 구현하기 위해 사용된다. import React, { useState, useRef } from "react"; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); // input element를 ..

[React.js] 리액트 JSX

JSX란 리액트 컴포넌트에서 XML 형식의 값을 반환해주는 것을 의미한다. JSX의 동작 방식은, 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel이 JSX를 Javascript로 변환해준다. Babel: 자바스크립트의 문법을 확장해주는 도구. 아직 지원되지 않은 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있도록 해준다. 1. 태그는 꼭 닫혀있어야 한다. => 태그가 있으면 반드시 태그가 존재할 것, 혹은 self closing 태그를 사용할 것. 2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다. => 반드시 하나의 태그에서 시작된 트리 구조가 될 수 있도록 할 것. ..

[React.js] 리액트에 파이어베이스 연동하기 / React + Firebase

파이어베이스는 구글에서 만든 모바일 및 웹 애플리케이션 개발 플랫폼으로, 굉장히 간단하게 애플리케이션을 위한 서버를 사용할 수 있다. authentication, database 등 애플리케이션 구현에 필요한 최소한의 필요를 가장 간편하게 만족시켜줄 수 있는 방법 중 하나이다. 파이어베이스는 작은 프로젝트에서 백엔드를 구현하지 않고 아이디어를 시험해본다거나, 프로토타입을 테스트해보는 경우에 적합하다. 다만 큰 프로젝트를 구현할 때는 백엔드를 직접 구현하여 사용하는 것이 올바른 방법이다. 1. //출처: https://firebase.google.com/?hl=ko 2. npm 설치 및 리액트 컴포넌트 추가 npm install --save firebase 명령어를 사용하여 package에 firebase..

[React.js] 리액트 이미지 사용 / react img src

리액트 프로젝트에서 태그를 사용할 때 src를 잡는 법은 두 가지가 있다. 1.public 폴더에 저장 -> 상대경로로 잡기 2.src 폴더에 저장 -> import 를 이용하기 src 폴더에 저장할 경우 상대경로로 바로 접근할 수가 없다. 원인은 아직 모르겠다. 1. public 폴더에 저장 -> 상대경로로 잡기 public 폴더에 저장할 경우 위와 같이 바로 상대경로를 이용해서 가져올 수 있다. 이미지가 static file로써 저장됨으로서 가능하다고 한다. 이렇게 할 경우 import 를 여러번 할 필요도 없고, 어떤 변수에 대해 해당 변수의 이미지들을 편하게 가져올 수 있다. 2. src 폴더에 저장 ->import를 이용하기 위와 같은 방식으로 src 자체에 이미지를 저장하고, import 를 ..

[React.js] Router 사용 / react-router-dom

라우터란 여러가지 페이지를 url을 통해서 구분지어 사용할 수 있게 해주는 것이다. 여러가지 종류가 있다고 하는데, "react-router-dom"을 사용해보았다. 1. 설치 npm i react-router-dom 명령어를 통해 간단히 사용 가능하다. 2. 사용 라우터 중에서도 HashRouter를 사용해 보았고, 다음과 같이 url에 따라 두 가지 컴포넌트를 가져와 사용할 수 있다.

[React.js] github 웹 호스팅 / github.io

리액트로 웹을 개발하고 나면, 해당 웹을 호스팅할 수 있다. 웹을 호스팅한다는 것은, 해당 웹 사이트를 서버를 통해서 운영한다는 뜻인데, 개인 사용자들은 이것이 쉽지않다. 깃허브는 이를 위해 무료 웹 호스팅 기능을 제공한다. 이 게시글에서는 웹 프로젝트가 이미 깃허브에 레포지토리로서 존재한다는 가정하에 설명한다. GitHub를 통한 웹 호스팅 방법 1. package.json -> "homepage": "https://{자신의 이름}.github.io/{레포이름}/ package.json 파일에 해당 줄을 추가해준다. 주솟값은 위와 같이 "https://{자신의 이름}.github.io/{레포이름}/" 이 된다. 주의할 것은, 1. 주소의 맨 뒤에 '/'를 꼭 추가해야 하고, 2. 레포지토리가 publi..

[React.js] async / await 비동기 사용법

비동기란, 순서대로 이루어지도록 하는 것이다. A가 실행되고나서 B가 실행되도록, 일련의 과정에 대해 순차성을 강제해주는 것이다. 위처럼 async-await을 이용하여 구현할 수 있고, 이 경우 getMovies() 함수는 비동기로 진행될 것이며(async), axios.get(...)을 기다릴 것(await)이다. 아래와 같이 사용할 수도 있다.

[React.js] 컴포넌트 생명주기

:::참고::: ko.reactjs.org/docs/react-component.html#constructor 리액트는 수많은 컴포넌트로 구성되어있고, 각 컴포넌트는 생명주기(life cycle)이라는 개념을 갖는다. 생명주기란 쉽게 말해서, 컴포넌트가 프로그램에서 어떻게 생성되고, 업데이트 되고, 삭제 되는지의 3단계를 의미하는 것이다. 이 생명주기 3단계를 용어로서 표현하자면 다음과 같다. 1. 마운트(Mount): 컴포넌트의 생성 2. 업데이트(Update): 컴포넌트 업데이트 3. 언마운트(Unmount): 컴포넌트의 제거 1. 마운트(Mount) 마운트는 컴포넌트의 새로운 인스턴스가 생성되어 DOM 상에 삽입될 때에 실행되는 과정이다. 일련의 함수들이 순차적으로 실행되며, 종류는 다음과 같다. ..