분류 전체보기

    React Redux (리액트 리덕스)

    React Redux (리액트 리덕스)

    리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller에 해당하는 역할을 해주는 것이 Redux이다. 사실 이 MVC 페턴은 어플리케이션이 매우 복잡해져서 동시에 여러 Model을 업데이트하면 예상치 못한 일이 일어날 수 있는 문제가 있다. 왜냐면 너무 규모가 커지면 Model 이 다른 Model을 업데이트하거나 View가 Model을 업데이트 하거나 하는 식으로 거미줄 처럼 서로가 엮이게 되기 때문이다. 그래서 Flux 패턴이라는 것이 등장하였으며, Redux는 이 Flux 페턴을 구현한 것이다. 이 Flux 패턴은 어플리케이션을 단방향으로 일..

    React - useEffect 훅 사용하기 (훅에서 async await 함수 사용 포함)

    React - useEffect 훅 사용하기 (훅에서 async await 함수 사용 포함)

    가져온 데이터를 첫 화면에 출력하고, 업데이트 될 때마다 다시 렌더링하고자 할 경우? 클래스형 컴포넌트를 쓸 경우 라이프사이클 함수를 통해 처리하면 된다. 그러나 두 함수에 같은 코드를 중복으로 넣어야한다. componentDidMount() { ... } componentDidUpdate() { ... } 함수형 컴포넌트 + React Hook을 쓸 경우 useState() + useEffect() 조합을 사용하면 된다. useEffect() 가 componentDidMount()와 componentDidUpdate() 기능을 모두 담당한다. import React, { useState, useEffect } from "react"; const [count, setCount] = useState(0);..

    React 모듈 - react-route-dom (라우터 기능)

    React 모듈 - react-route-dom (라우터 기능)

    개요 react-router-dom 은 새로고침 없이 URL 주소에 따라 다른 화면을 렌더링해주는 패키지이다. Quick Start : https://reactrouter.com/web/guides/quick-start 설치 npm i react-router-dom 사용법 import {HashRouter, Route} from "react-router-dom"; Router 내부에 여러 Route들을 포함하는 구조이다. (Hash or Browser) Router는 History API를 이용하여 새로고침 없이 주소 변경이 가능하게 해준다. Route는 path 속성에 url를 지정하고, 그 경로에 접근시 렌더링할 구문 또는 컴포넌트를 지정할 수 있다. path="경로" component={경로접근시 ..

    React - 새 프로젝트 생성

    React - 새 프로젝트 생성

    자바스크립트를 사용하려면 node.js 를 먼저 설치해야한다. React 단계까지 왔다면 당연히 이미 했을거라서 pass 하겠다. npx create-react-app 프로젝트명 npx는 신규 버전 다운받고 설치 끝나면 지우는 방식입니다. 사용하지 않는 오래된 버전의 모듈을 컴퓨터에 저장하지 않게 해주는 큰 장점이 있습니다. 기본적으로 현재경로 아래의 "프로젝트명"으로 프로젝트를 생성하게되는데 프로젝트의 폴더는 사전에 만들어도되고 안만들어도 상관은 없는것 같습니다.

    리액트 라이브러리 gh-pages 깃 페이지 배포하기

    리액트 라이브러리 gh-pages 깃 페이지 배포하기

    터미널에서 레포지토리 이동 npm i gh-pages 수행 package.json에 아래 내용추가 ※ deploy를 수행하면 predeploy가 자동으로 수행되는 방식임. "scripts": { "start": "react-scripts start", "build": "react-scripts build", "deploy" : "gh-pages -d build", "predeploy" : "npm run build" }, ... "homepage" : "https://깃아이디.github.io/깃레포지토지명/" npm run deploy 수행 > npm run build > react-scripts build Creating an optimized production build... Compiled su..

    SCSS - CSS를 프로그래밍 언어처럼 작성하자

    SCSS - CSS를 프로그래밍 언어처럼 작성하자

    SCSS scss는 css를 좀 더 프로그래밍 언어처럼 다룰 수있게 해준다. (변수, 함수 등) 편리하게 scss파일을 작성한 것을 컴파일하여 css로 변환하여 사용해야한다. 이 변환하는 방법에 몇 가지 방법이 있는데 VS Code extension sass, live sass compiler 등이 있다. gulp VS Code가 아닌 환경인 경우 gulp를 사용할 수 있다. gulp 모듈 - Node.js기반 프로세스 자동화 도구 gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 11001.tistory.com scss 파일을 여러 파일..

    gulp 모듈 - Node.js기반 프로세스 자동화 도구

    gulp 모듈 - Node.js기반 프로세스 자동화 도구

    gulp 설명 : gulp는 Node.js 기반의 프로세스 자동화 도구이다.A 파일을 변경할 때마다 B파일을 엎어쳐야하는 등의 지루하고 반복적인 작업을 자동화 시킬 수 있다. 우리는 gulp를 이용하여 scss 파일을 변경 시 css가 자동으로 엎어쳐지게 만들 것이다. 설치 방법 : npm 또는 yarn을 통해 패키지를 설치해주면 된다. (게시물 하단 참고) 사용 방법 : gulp에서 수행하는 작업단위(Task)를 gulpfile.js에 작성한다. API : series() : 순차적으로 Task를 수행 parallel() : 동시에 최대한 많은 Task를 수행 src() : 주어진 경로의 파일을 Readable Node.js Stream 생성 dest() : 주어진 경로의 파일에 Writeable No..

    Javascript - padStart, padEnd

    Javascript - padStart, padEnd

    padStart 문자열의 길이가 최대길이가 되도록 "채울값"을 채운다. "문자열".padStart(최대길이, "채울값"); 시:분:초를 00:00:00 과 같은 포맷으로 숫자를 출력하고 싶을때 1초를 01초로 포맷으로 바꾸려는 상황에 사용될 수 있다. "1".padStart(2, "0"); "1"은 길이가 1이므로 2가 될때까지 "0"을 채운다. 그래서 01이 된다. padEnd는 뒤에 채우는 것이다. 똑같다.

    깃허브 페이지 - Publishing on Github Pages

    깃허브 페이지 - Publishing on Github Pages

    깃허브 사이트에서 Static Website (백앤드 빼고 프론트앤드 부분 HTML/CSS/JS로만 이루어진 페이지) 무료 호스팅을 해준다 !! 즉, 내 페이지를 퍼블리싱할 수 있다. wow github page 생성 방법 (github Desktop 기준) public 레포지토리 를 생성한다. 레포지토리/index.html 파일을 생성한다. 이 파일이 기본적으로 보여지는 페이지이다. 만약 index.html 파일이 없으면 README.md를 기본으로 보여진다. 레포지토리에서 gh-pages 라는 이름의 브랜치를 만든다. Publish branch를 누른다. (누르면 아래와 같이 바뀜) 해당 Github Repository 사이트에 접속한다. (View on Github 를 누르면 바로 접속 가능) Gi..

    CSS : box-sizing: border-box;

    CSS : box-sizing: border-box;

    box-sizing: border-box; 200px 박스에 50px Padding 값을 준다고 하였을때 최종적으로 50+200 = 250px 의 박스가 생성된다. 200px의 박스를 50px만큼 밀어버린 것이다. 그런데 우리가 원한 것은 250px 박스가 아니라 200px의 박스다. 이럴때 사용하는것이 box-sizing이다. box-sizing: border-box;