분류 전체보기

    REACT

    [React] React-cookie 패키지 사용하기

    React-cookie React에서 cookie를 편리하게 다룰수 있게 해주는 패키지이다. npm i react-cookie 적용하기 cookie를 사용할 컴포넌트들의 Root 컴포넌트를 CookiesProvider를 통해 감싸준다. import { CookiesProvider } from 'react-cookie' import Root from './Root'; ReactDOM.render( , document.getElementById('root') ) 쿠키값을 get, set하는 로직을 수행하는 component 쿠키에 관한 작업을 진행할 컴포넌트에서 React Hooks 처럼 사용하여 쿠키를 조작할 수 있다. import { useCookies } from 'r..

    Git

    [Git] add, commit, pull, push

    팀원들과 같은 원격저장소를 사용하는 경우 순서 local 저장소에 변경사항이 있을 경우 ( push 하기 전 ) add commit pull push local 저장소에 변경사항이 없을 경우 ( push 후 밥먹고왔을때, 담배피고왔을때) pull (먼저 하자) add commit push pull 했을 시 발생할 수 있는 경우 pull 했을 경우 fetch + merge 이기 때문에 auto commit 이 되어 merge 기록이 남게 된다. 이를 남기기 싫을 경우? -rebase, --no-commit 을 사용한다. (rebase는 사용해 본 적이 없다.😯) git pull --no-commit

    [React] React에서 SVG 파일 사용하기
    REACT

    [React] React에서 SVG 파일 사용하기

    프로젝트를 진행하면서 front를 React를 사용하기로 하였다. 또한 create-react-app을 사용하여 초기설정을 건너뛰도록 하였다. html 파일에서 태그를 사용하여 sgv 파일을 렌더링하였던 경험이 있어서 React에서도 JSX 문법을 이용하여 태그를 이용하였다. 그러나 이러한 방법은 React의 Component라는 개념과는 거리가 멀었다. 재사용할 수 없었기 때문이다. 재사용하려면 어떻게 해야할까? 1. SVG 파일을 만들어 img태그의 src로 경로를 넣어주기 import React from 'react'; import logo from './logo.png'; console.log(logo); // /logo.84287d09.png export function Header() { re..

    [Git] GUI를 통해 제거한 브랜치를 로컬에서도 삭제해보자.(prune)
    Git

    [Git] GUI를 통해 제거한 브랜치를 로컬에서도 삭제해보자.(prune)

    로컬에서 작업후 다른 브랜치와 merge를 하고 기존에 작업했던 브랜치를 삭제할 일이 생겼다. 1. 로컬 브랜치 삭제하기 git branch -d 그러나 이것은 로컬 브랜치를 삭제한 것이지 원격 브랜치는 여전히 살아있었다. 2. 원격 브랜치 삭제하기 git push -d 모두 완료!!! But!!😱😱 CLI 가 아닌 GUI (깃랩, 깃헙 페이지)를 통해서 merge후 branch를 삭제한 경우에는 여전히 커맨드라인에서는 삭제한 branch가 살아있다고 알려주었다. 3. GUI를 통해 제거한 브랜치를 로컬에서도 삭제하기 git fetch --all --prune git fetch을 통해 최신화된 로컬저장소의 내용을 가져오게 되는데 이 때 --all 옵션을 통해 모든 remote를 가져오게 한다. 이 때 l..

    [Recoil] React를 위한 상태관리 라이브러리(atom, Hooks)
    카테고리 없음

    [Recoil] React를 위한 상태관리 라이브러리(atom, Hooks)

    Recoil이란? 페이스북에서 내놓은 새로운 상태관리 라이브러리이다. 페이스북 리액트 코리아 그룹의 한 포스트에는 이러한 장점이 있다고 말해주었다. 1. atom/selector라는 단위를 통해서 derived state(파생 상태)를 효과적으로 처리하고 상태의 "코드 분할"이 가능해진다. 2. 기존 상태관리 라이브러리(ex. MobX, Redux) 보다 훨씬 단순한 API를 제공한다. 3. 페이스북 내부적으로 몇몇 프로젝트에서 사용되고 있었고 이를 라이브러리화 한 것이다. 즉 어플리케이션에서 상태관리를 하기 위한 라이브러리중 하나이다. 공식문서를 통해 학습을 진행해 보았고 이를 정리하기 위해 포스팅을 하였다. Recoil 시작하기 | Recoil React 애플리케이션 생성하기 recoiljs.org ..

    [TypeScript] 이펙티브 타입스크립트 (item 03 ~ 05)
    TypeScript

    [TypeScript] 이펙티브 타입스크립트 (item 03 ~ 05)

    item 03. 코드 생성과 타입은 관계가 없다. 최신 타입/자바스크립트를 브라우저에서 동작할 수 있도록 구버전의 자바스크립트로 트랜스파일(transpile)합니다. 코드의 타입 오류를 체크합니다. 그러나 두가지는 서로 완벽히 독립적 입니다. 그렇기 때문에 타입체크는 컴파일에 영향을 미치지 않습니다. 즉 타입체크에서 오류가 발생해도 컴파일이 됩니다. // test.ts let x = "hello"; x = 1234; // ~ number 형식은 string에 할당될 수 업습니다. // tsc test.ts -> // test.js let x = "hello"; x = 1234; interface 등의 타입은 컴파일 과정중에 제거되기 때문에 런타임 시점에서는 아무 역활을 하지 않습니다. interface ..

    [TypeScript] 이펙티브 타입스크립트 (item 01 ~ 02)
    TypeScript

    [TypeScript] 이펙티브 타입스크립트 (item 01 ~ 02)

    item 01. TypeScript와 JavaScript 관계 이해하기 타입스크립트는 자바스크립트의 상위 집합이다. 타입스크립트는 '정적'타입 시스템이다. (?) 이것은 정확히 무슨 의미일까? .js 확장자 대신 .ts를 사용한다. 문법적으로 문제가 없을지라도 자바스크립트에 어떤 이슈가 존재한다면 타입체커에 지적당할 가능성이 있다. 작성된 코드를 파싱하고 자바스크립트 코드로 변환할 수 있다. 자바스크립트는 그 자체로 이미 타입스크립트라고 할 수 있다. 그렇기 때문에 자바스크립트 코드를 타입스크립트로 마이그레이션(migration)하는데 엄청난 이점이 된다. why? 기존 코드는 그대로 유지 일부분에만 타입스크립트 적용이 가능 city가 string 이라는 타입 구문이 없는데도 지적하는 예시 let cit..

    JavaScript

    [JavaScript] 최신문법 정리

    Nullish Coalescing Operator(??) 좌항이 null 또는 undefined일 경우에 우항을 반환해준다. const one = null ?? "One" const two = undefined ?? "Two" const three = false ?? "Three" console.log(one, two, three) // One Two false ...

    CSS/Scss

    [Scss] React에서 Scss 사용하기

    Scss 적용시 에러발생 React에서 CSS module을 사용하다가 .scss로 확장자를 변경하니 webpack에 관련된 error들을 나에게 보내주었다.. 개발환경 React에서 Scss를 사용하려면 두가지 module을 설치해 주어야 했다. node-sass: scss를 다룰 수 있는 node program sass-loader: webpack에 필요한 loader npm i node-sass sass-loader 다른 포스트들을 보니 module을 설치한 후 webpack.config.js에서 직접 수정을 해주어야 했는데 버전이 달라서인지 나는 npm 패키지 매니저로 설치만 해주어도 되었다.("react": ^17.0.2") 배포환경에서 동작하는지 확인하기 개발환경에서는 제대로 동작하였는데 과연..

    [Algorithm] 소수구하기
    Algorithm

    [Algorithm] 소수구하기

    문제 N이 주어졌을 때, N보다 크고 2N보다 작거나 같은 소수의 개수를 구하는 문제 풀이 0 ~ 2N까지의 숫자에 해당하는 배열을 생성하고 에라토스테네스의 체 를 이용하여 소수를 구하려고 한다. 이 방법은 2부터 구하고자 하는 숫자까지를 모두 나열하고 2부터 차례대로 1씩 증가하면서 해당 숫자의 배수를 모두 지우는 방식이다. 그렇기 때문에 코드에서는 배열의 index를 활용해서 true -> false로 변경시켰다. 이 때 해당 수의 제곱근 까지만 범위를 제한하게되면 루프횟수를 O(logN)으로 만들어 줄 수 있다. 제곱근 의 법칙이 성립하는 이유는 어떤 수(n)은 두 수 (a, b)의 곱으로 나타낼 수 있다. 예를 들어 12는 2 * 6, 3 * 4로 나타낼 수 있고 두가지 경우의 작은 수를 보게되면..

티스토리툴바