Home

D3 기본 알아보기

시작하기웹에서 차트를 그리기 위해서는 다양한 방법이있습니다. chartjs, vxchart 등 라이브러리가 많습니다. 그중에 기본이 되는 d3을 얕게 한번 알아보겠습니다. 선택기1document.querySelectorAll("pre, code"); 일반적으로 자바스크립트에서 엘리먼트다수를 선택할때 사용하는 방법입니다. 1d3.selectAll("pre,

Docker를 이용해서 mysql 설치하기

시작하기docker hub에서 간편하게 mysql을 설치할 수 있습니다.Mysql docker hub 홈페이지기본적으로 docker가 설치 되어있어야합니다. 설치하기터미널에서 다음 명령어를 입력하여 이미지를 내려받습니다. 1docker pull mysql 빠르게 mysql 설치가 완료됩니다. 1docker run --name mysql -p 3306:33

Deepcopy Shallowcopy 차이 알아보기

시작하기객체를 두번이상 사용할때 원하지 않았는데 원본의 객체가 수정되는 경우가 있습니다.자바스크립트 객체를 안전하게 복사하는 방법을 알아보겠습니다. 기본데이터 저장12345let a = "Javascript";let b = a; // b에 a를 할당b = "Typescript";console.log(b); // "Typescript"console.log(a

Node 절대경로 설정하기

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

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

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

Gatsby에 typescript 적용하기

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

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

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

Git 명령어 단축해보기

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

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

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

React Ref사용하기

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