Home

2020
backendnode

Node 절대경로 설정하기

시작하기node와 typescript사용환경에서 절대경로 설정을 해보도록 하겠습니다.절대경로로 설정하는 방법은 두가지가 있습니다. 설정하기설정방법은 nodemon 으로 설정하는 방법과 ts-node-dev로 설정하는 방법이 있습니다. 공통적으로 tsconfig.json을 수정해줍니다. tsconfig.json12345{ //... "baseUr

etcetc

.gitignore 적용안되는 이슈 해결방법

시작하기gitignore을 사용하지 않고 파일을 업로드 했는데 모르고, node_modules 폴더도 같이 업로드 했을때.황급하게 .gitignore파일에 node_modules을 입력하고 올려도 적용이 안되는 이슈가 있습니다.git의 캐시 문제이기 때문에 캐시를 지워주고 다시 파일을 업로드 해주면 됩니다. 123git rm -r --cached .git

frontendreact

Gatsby에 typescript 적용하기

시작하기Gatsby는 React에 기반한 무료 오픈 소스 프레임 워크로 개발자가 정적 웹 사이트를 구축 할 수 있습니다. 설치하기Gatsby CLI 설치 1npm install -g gatsby-cli 프로젝트 생성 1gatsby new gatsby-project 프로젝트로 이동 1cd gatsby-project 개발 서버 시작 1gatsby dev

frontendreact

React 상태 관리 라이브러리 Recoil-js 사용해보기

시작하기리액트 유럽에서 리액트의 새로운 상태관리 라이브러리 recoil을 발표했습니다.기존에 사용하던 redux 라이브러리와 어떤차이가 있는지 사용해보도록 하겠습니다.Recoil js홈페이지에서 자세한 내용을 확인 할 수 있습니다.Recoil 소개 유투브 설치하기1npx create-react-app my-app 프로젝트를 생성합니다. 1npm insta

etcetc

Git 명령어 단축해보기

시작하기터미널과 쉘을 이용해서 간단한 단축어를 만들어 보겠습니다. 쉘 스크립트git add . && git commit -m “텍스트 입력” 하는 과정이 입력하기 너무 길기에 단축을 해보았습니다.프로젝트 내부에 git.sh파일을 생성합니다. git.sh123456#!/bin/bashecho Easy Github push generatorech

frontendreact

React Next js에서 카카오맵 사용하기

시작하기지도를 표시해주는 어플리케이션을 만들기 위해서는 맵이 필요한데 많은 api중에 카카오 맵 오픈소스api를 사용해보도록 하겠습니다. 개발자계정 로그인카카오맵 개발자 사이트에 접속해서 로그인을 해줍니다. 로그인후 내 어플리케이션을 선택합니다. 어플리케이션을 추가해주도록합니다. 추가한 어플리케이션을 선택하면 대시보드가 나옵니다. 좌측의 플랫폼을 선택합니다

frontendreact

React Ref사용하기

시작하기React에서 엘리먼트로 접근해서 사용하기 위해서는 Ref를 사용하는 것을 권장하고 있습니다.input focus, element 사이즈 측정 등에서 이용합니다. 사용법Ref를 사용하는 여러가지 방법이 있습니다. 다양한 방법을 알아보겠습니다. class에서 사용하기class에서 Ref를 사용하는 방법은 12345678910111213141516171

frontendhtml5

Canvas 기본 설정 및 사용해보기

시작하기HTML5에서 부터 등장한 새로운 기능인 canvas기능을 살펴보겠습니다.HTML canvas요소는 웹 페이지에 그래픽을 그리는 용도로 사용됩니다.canvas에 그래픽을 그리기 위해서는 Javascript를 사용해야합니다.canvas에는 Path, Rect, Circle, Text, Image 등을 추가하는 여러 가지 방법이 있습니다. 캔버스 그리기

frontendTesting

Nextjs jest와 enzyme로 테스트하기

시작하기Nextjs에 jest로 테스트를 추가해보도록 하겠습니다.이전 포스트에서 i18n과 redux등을 추가 했었는데요.테스트를 할때 useTranslation, useSelector, useDispatch가 에러가 나는 것도 해결해 보도록 하겠습니다. 설치하기1yarn add -D jest ts-jest enzyme enzyme-adapter-react