목록분류 전체보기 (32)
Develope Me!
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pYIcJ/btsFI67kAN2/ZnVUulmakyNH6m2XuI1dw1/img.png)
리액트는 페이지 단위로 HTML을 작성하는 것이 아닌 각 부분을 컴포넌트 단위로 조립해서 사용한다. 컴포넌트를 쉽게 이해하기 위해서 네이버 화면을 띄워서 보자 네이버 페이지를 보게 되면 검색/광고/로그인 등의 컴포넌트로 나눌 수 있다. 여기서 광고 커포넌트 같은 경우에는 어디든 비슷하게 동작할 것이기 때문에 똑같은 컴포넌트를 필요한 페이지에 스타일만 다르게 추가해서 사용 할 수 있다. 이렇게 컴포넌트 단위로 조립해서 사용하게 되면 코드 재사용이 용이하며 유지보수 또한 쉬워지게 된다. App.js import "./App.css"; function App() { const name = "리액트"; const reactInfo = { name: "react", url: "https://ko.legacy.re..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bUHG52/btsFI51zTkp/XkKnrYcaucwch8mVxRFSG1/img.png)
리액트를 시작하기 위해선 Node.js와 VSCode 설치가 선행되어 있어야 하는데 이미 설치되어 있으므로 바로 React 프로젝트를 생성해보려 한다. 1. React 프로젝트 생성 npx create-react-app voca 터미널에서 npx create-react-app '프로젝트명' 으로 리액트 프로젝트를 생성해준다. ※ npm과 npx의 차이 npm은 Node.js 패키지 관리자이며 npm을 사용해서 JS 패키지를 설치/관리/실행할 수 있다. npm을 사용하여 프로젝트의 의존성 패키지를 설치하고 스크립트를 실행할 수 있다. npx는 npm 5.2.0버전 이상에서 포함된 도구이며 npm 패키지를 실행할 수 있는 도구다. 로컬에 설치된 패키지나 원격 패키지를 간편하게 실행할 수 있다. ※ npm i..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bI6Vt2/btsFz6UBiBs/ksIeWTad53igWRzqUFpdbK/img.png)
CORS 이슈 HTML 파일로 서버에 요청을 했을 때 보안상의 문제로 CORS가 없으면 차단되는 경우가 있는데 이럴 땐 npm을 이용해서 cors 모듈을 설치해준다. 1. cors 설치 $ npm install cors 2. cors 사용 (npm 홈페이지 참고) var express = require("express"); var cors = require("cors"); var app = express(); app.use(cors()); 모든 요청을 허용시켰지만 app.use(cors())에 조건을 넣어서 허용할 수 있는 요청 조건을 설정해줄 수도 있다. 프론트엔드 연결하기 백엔드와 프론트를 연결해보자! var express = require("express"); var cors = require("c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bG9mUA/btsFAuz8gnd/aMSi9oDSHq6InXJdajbFy0/img.png)
Node.js에는 npm(node package manager)라고 하는 JS 패키지 매니저가 있다. 즉, Node를 사용하는 개발자들이 패키지를 설치/관리를 쉽게 해줄 수 있는 매니저의 역할을 한다고 볼 수 있다. https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the c..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lG2mY/btsFAv6GD8M/3QxLkTDHJijUQHoFVuCbO0/img.jpg)
브라우저에서는 모듈 시스템을 구현하기 위해서 윈도우 컨텍스트를 사용하거나, RequireJS같은 의존성 로더를 사용한다. 개발자 도구를 켜서 window context를 사용해서 모듈을 정의해본다면 위처럼 정의할 수 있다. 예시처럼 브라우저에서는 window 객체(전역 객체)에 모듈을 정의하고 작성한 모듈을 호출해서 사용할 수 있다. 혹은 페이지 안에서 require.js 라이브러리를 호출하여 사용할 수도 있다. 하지만 node에서는 CommonJS 스펙을 사용하여 파일 형태로 모듈을 관리할 수 있다. (Node.js 12부터는 ECMAScript Modules 라는 새로운 모듈 시스템이 추가되기도 했다. ) 그러면 VSCode에 index.js 파일을 하나 만들어서 모듈을 테스트 해보자. node에서는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bjdDYO/btsFnXcIPjQ/wBfCnNlP9Rzpk9PINL9Tck/img.jpg)
직장에서 주로 Java 기반의 프로젝트를 하다보니 새로운 환경에서의 프로그래밍을 배워보고 싶었다. 그 중에서도 백엔드 프로그래밍을 서치했을 때 Java 다음으로 많이 언급되는 게 Node.js 였기 때문에 자연스럽게 Node.js에 대해 관심이 생겼다. 그래서 한 번 자바스크립트 기반의 Node.js에 대해 학습해보려 한다. 개인적으로 계획해본 학습 방법은 인프런 '테스트 주도개발(TDD)로 만드는 NodeJS API 서버' 강좌를 들으면서 기본 개념과 동작 과정을 가볍게 익힌 뒤 부족한 내용은 유튜브나 공식 문서를 참고하여 보충하려고 한다. 간단하게 API를 구축도 해본 뒤 마지막으로는 자바로 프로그래밍을 했을 때와 비교해보는 방식으로 진행할 것이다. Node.js의 기초 자바스크립트는 별도의 설치 과..