분류 전체보기 썸네일형 리스트형 [Javascript] React Hook Guide useState 가장 기본적인 함수형 컴포넌트의 Hook API 데이터를 담거나 setter를 이용하여 업데이트 정의 시, 값을 가져올 변수와 설정할 변수(setter)를 deps에 적재 주의할 점은 값을 가져올 변수와 설정할 변수의 명명규칙 설정할 변수를 set+가져올 변수에 카멜케이스로 명명 useState()내에는 String이면 '', Integer이면 0, Object면 {} 등. 사용할 타입에 따라 default값을 입력 함수 내에서 값을 업데이트 시 setName를 사용 // index.js import React, { useState } from 'react'; const Index = () => { const [name, setName] = useState(&.. 더보기 ESLint? Javascript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구 코딩 스타일 문제와 코드 품질 모두 제어해주고 규칙을 정의할 수 있다. 주로 하드코딩에서 문법적으로 문제가 있는 코드를 Lint 해주기 위해서만 사용하는 분석도구이므로 설치 시, 의존성 라이브러리에 위치한다. Installation $> yarn add --dev eslint eslint-config-airbnb-base eslint-import-resolver-webpack eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint ESLint 그 주체이다. Coding Convention Guide를 사용.. 더보기 [Javascript] Koa.js 기본 사용법 src/app.js import Koa from 'koa'; const app = new Koa(); const port = parseInt(`${process.env.PORT || '3000'}`, 10); app.use((ctx) => { ctx.body = 'Hello world!'; }); app.listen((port, () => { console.log(`PORT: ${port}`); }); export default app; Koa 어플리케이션은 미들웨어의 배열로 구성되어 있다. 6번째 라인은 하나의 미들웨어인 것이다. 미들웨어를 계속 실행시키기 위해서는 next()를 호출해야한다. async/await Koa에선 별도의 작업없이 async/awai.. 더보기 [Javascript] Koa.js 프로젝트 생성 및 ESLint설정 Koa 설치 $ mkdir koa-server $ cd koa-server $ yarn init $ yarn add koa ESLint 설정 ESLint는 자바스크립트 문법을 검토해주는 도구다. 때문에 전역으로 설치해주는 것이 프로젝트 초기설정에도 좋다. $ yarn global add eslint $ esint --init 실행하면 루트 디렉토리에 .eslintrc 파일이 생기는데, 기본적으로 세미콜론을 허용하지 않고, 그 외에도 엄격하게 코드 규칙을 잡는다. 때문에 자기 자신만의 코드 스타일을 선정하고 적용한다. $ yarn add --dev eslint eslint-config-airbnb-base eslint-plugin-import 프론트엔드와 백엔드를 개발 시에, ESLint는 조금 다르게 설.. 더보기 [SQL] MongoDB - CRUD 모든 MongoDB의 CRUD는 JSON 타입이며, 모든 명령어들은 실행 전 무조건 Database를 선택해줘야한다. Database 생성 MongoDB는 MySQL과 다르게 create가 아닌 use를 사용한다. use DATABASE_NAME로 생성하며 곧바로 사용하게 된다. 이미 존재하는 경우 존재하는 Database를 사용한다. > use DATABASE_NAME swiched to db DATABASE_NAME 현재 사용 중인 Database확인 > db DATABASE_NAME 생성된 Database 리스트를 확인 > show dbs admin 0.000GB config 0.000GB local 0.000GB 리스트에서 사용자가 만든 데이터베이스를 보려면 최소 1개의 Document를 추가해야.. 더보기 [SQL] MongoDB - Installation Mac # Homebrew register tap $> brew tap mongodb/brew # Installation MongoDB $> brew install mongodb-community@4.4 # Register MongoDB Service $> brew services start mongodb-community@4.4 # Check process MongoDB Started $> ps aux | grep -v grep | grep mongod # Execute Mongo $> mongo # Setting mongoDB DB path $> mkdir ~/username/data/db $> mongod --dbpath=~/username/data/db Edit MongoDB dbpath $> v.. 더보기 [Javascript] 자바스크립트 타입 감지 때때로 변수들의 타입을 감지할 필요가 있다. 간혹 변수 타입을 이용한 조건문으로 돔의 조작이 필요하다거나 하는 등. 그럴 때는 아래의 연산자를 쓰면 된다. typeof typeof는 변수의 타입을 대체적으로 감지해주는 연산자이다. 이 연산자를 쓰면 변수의 타입을 감지하여 해당 변수의 자료형을 문자열로 반환해주는 역할을 한다. 아래의 예시를 보자. var a = ''; // 문자열 var b = []; // 배열 var c = {}; // 객체 var d = 0; // 숫자 typeof a // result -> 'string' typeof b // result -> 'object' typeof c // result -> 'object' typeof.. 더보기 정규식 Regex Regex 정규식은 알아두면 프로그래밍 하는데 굉장히 유용하게 쓰인다. 각 언어마다 정규식을 지원하는 모듈이 있으며 내장되어있는 언어들도 존재한다. 정규식에서 문자가 의미하는 뜻 [a-z] : a ~ z 사이의 문자를 찾음 [abc] : a, b, c중 하나를 찾음 [^abc] : a, b, c를 제외한 문자를 찾음 .z : 아무 문자 하나를 . 기호로 찾으며 z로 끝남을 의미 a+ : a가 1개 이상을 의미함 a* : a가 0개 또는 그 이상을 의미함 s : 공백 문자를 찾음(스페이스, 탭 등) S : 공백이 아닌 문자를 찾음 d : 숫자를 찾음 D : 숫자가 아닌 문자를 찾음 w : 알파벳 영문과 숫자와 언더바 _ 기호를 찾음 W : 알파벳 영문과 숫자와 언더바 _ 기호가 아닌 것을 찾음 t : 탭 .. 더보기 [Javascript - Nuxt.js] Nuxt.js 상태관리 사이클 요약설명 1. state - 모델 생성 및 모델 값 초기화 - vue components로 rendering 2. vue components - 특정 이벤트를 실행하여 actions로 dispatch 3. actions - dispatch된 actions은 backend의 api를 axios로 응답 - 응답은 post, get, put, delete - axios로 받아온 결과값은 view업데이트를 위한 mutations로 commit 4. mutations - commit된 mutations는 state를 변경하여 view를 업데이트 세부설명 vuex는 이용한 vue.js의 상태관리 라이브러리로 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며, 의도적인 방법으로 상태를 변경 및 관리할 수 있다. .. 더보기 [Ruby] 루비 rbenv 설치 rbenv을 이용하여 루비를 설치할 것을 권고 맥 OS X $ brew update $ brew install rbenv ruby-build 새로운 루비 버전이 릴리스된 후에는 아래와 같이 명령을 실행한 후 $ brew upgrade ruby-build 다음의 명령을 실행하여 설치할 수 있는 루비 비전을 확인 $ rbenv install -l 그 후 rbenv 으로 된 경로가 아니라면 각각의 터미널 환경설정에 들어가 경로를 잡아준다. $ vi ~/.zshrc # .zshrc export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init - zsh)" # :wq 후 저장 source ~/.zshrc rbenv 을 이용해 원하는 루비 버전 설치 $ rbenv instal.. 더보기 이전 1 2 3 다음
