VScode extensions Reactjs code snippets Auto import Chrome extensions React Developer Tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) jsx 또는 js 파일, postCSS에서 emmet을 사용하려면 VScode settings.json에 아래를 추가하자. 익스텐션이 설치되었다면, vsode에서 rcc를 입력해보자! 리액트 Component...
Continue reading...IT
React 내부적으로 사용되는 툴
yarn 혹은 npm 으로 create-react-app 을 한 후, eject 해보면 여러 사용된 라이브러리를 확인할 수 있다. (eject 는 되도록 하지말자.. 다시 패키징할 수 있는 방법이 없음) 그럼 리액트 내부적으론 어떤 라이브러리들이...
Continue reading...React 기초
React 란 ? React란, 유저 인터페이스를 만들 수 있는 라이브러리이다. 즉, web UI를 만들 수 있는 라이브러리로 볼 수 있다. React를 한 단어로 정의하자면, 컴포넌트들로 이뤄진 라이브러리이다! ✏️ 첫번째 중요한 컨셉...
Continue reading...배포하기 :>
무료 호스팅에 배포 (Netlify) 일반적으로는 호스팅 (유료)에 배포하지만, 무료로 제공되는 netlify에도 한번 해봤다. react 의 경우 빌드를 먼저 한 후, 바로 배포하면 된다. 그런 다음, netlify 를 설치한 후, netlify deploy...
Continue reading...배포 전 체크리스트 ✅
아래는 호스팅한 서버에 배포하기전에 최소한으로 체크해야하는 리스트 🙂 코드 안에 중요한 내용이 포함되어있지 않은지 환경 변수는 분리되어 있는지 너무 많은 불필요한 데이터 혹은 민감한 정보를 로깅하고 있지는 않은지 서버의 response에 사용자의...
Continue reading...Data migration – CSV directly import to DB
Here is the way how to simply csv importing to mysql DB (When importing csv in mysql workbench, it takes about to 5 hours, Direct importing via csv takes 0.15 seconds) Before importing, make...
Continue reading...Sequelize ORM 사용하기
1. Sequelize ORM DB 연결 테스트 2. 테이블 생성 / 정의 Sequelize 를 연결하면, 자동으로 로그가 기록된다. 테이블이 없다면 자동으로 생성시킨다는 로그를 볼 수 있다 🙂 로그를 남길 필요가 없다면 Sequelize...
Continue reading...노드서버 DB 연결하기 / Dwitter DB 연동
1. Mysql 다운로드 운영체제에 맞는 mysql 서버, workbench 를 다운로드 받고, db 스키마를 작성 / 테이블을 생성한다. 2. mysql2 다운로드 3. 노드서버 <> DB 연결 (dotenv 를 이용하여 config 를 따로...
Continue reading...React 란?
페이스북에서 만든 자바스크립트 라이브러리 중 하나로 페이스북 내부에서 이용되고 있을 뿐 아니라 에어비앤비, 우버, 넷플릭스, 인스타그램 등 많은 웹 어플리케이션이 리액트로 개발되어졌다. 리액트는 유저 인터페이스를 만들 수 있게 도와주는 라이브러리로써, 사용자에게...
Continue reading...