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...Web
React 내부적으로 사용되는 툴
yarn 혹은 npm 으로 create-react-app 을 한 후, eject 해보면 여러 사용된 라이브러리를 확인할 수 있다. (eject 는 되도록 하지말자.. 다시 패키징할 수 있는 방법이 없음) 그럼 리액트 내부적으론 어떤 라이브러리들이...
Continue reading...React 기초
React 란 ? React란, 유저 인터페이스를 만들 수 있는 라이브러리이다. 즉, web UI를 만들 수 있는 라이브러리로 볼 수 있다. React를 한 단어로 정의하자면, 컴포넌트들로 이뤄진 라이브러리이다! ✏️ 첫번째 중요한 컨셉...
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...SQL vs NoSQL 선택하기
SQL 과 NoSQL 의비교 그럼 SQL과 NoSQL은 언제 어떤 것을 선택하는 것이 좋을까 ? SQL 의 특징 시작 단계에서 익혀야할 것들이 있다. 데이터가 고정적이고, 구조를 가진다. 데이터 찾기가 쉽다. 서로 다른...
Continue reading...ORM / ODM
ORM(Object Relational Mapping) 이란? 코드에 여러가지 오브젝트가 있다면 이것을 데이터베이스에 저장하기위해서 스스로 어떻게 테이블로 변환할건지, 어떻게 스키마를 만들고 분할할건지, 그리고 데이터베이스에서 어떻게 데이터를 읽어와서 오브젝트 형태로 변환할건지 직접 고민하고 처리해줘야한다. 이러한...
Continue reading...