본문 바로가기

All

 (73)
[IT] 일렉트론(Electron)이란? (feat. 자바스크립트로 데스크탑 앱 개발하기 ) 1. 일렌트론 (Electron) 일렉트론(Electron)은 자바스크립트(Javascript), HTML, CSS 만으로도 데스크톱 애플리케이션을 만들 수 있도록 해주는 프레임워크(framework)이다. 노드(Node.js)를 기반으로 하며, 자바스크립트뿐만 아니라 자바스크립트를 기반으로 하는 react, nextjs로도 애플리케이션을 만들 수 있다. 윈도우(window), 맥 OS(Mac OS), 리눅스(Linux) 모두 지원한다. 우리가 많이 사용하는 디스코드(Discord), 노션(Notion), 깃헙데스크톱(GitHubDesktop) 모두 일렉트론으로 만들어진 애플리케이션이다. 2. 일렉트론의 장점 1) 낮은 진입 장벽 일렉트론의 가장 중요한 장점은 진입 장벽이 낮다는 것이다. 자바스크립트 웹..
[Web] HTTP란? (Https, http 메서드) 1. HTTP 란? 1) HTTP * 프로토콜 : 데이터 교환 방식을 정의하는 규칙 http는 Hypertext Transfer Protocol의 줄임말로 request(요청)과 reponse(응답)으로 이루어진 프로토콜을 말한다. 쉽게 이야기하면 웹 상에서 정보를 주고받을때 사용하는 데이터 교환 규칙이라고 생각하면 된다. http는 클라이언트 - 서버 프로토콜이라고도 하는데, 사용자가 브라우저를 통해 요청(request)을 하면, 서버가 해당 요청에 맞는 응답(reponse)을 하는 형태로 이루어져 있다. http 통신은 오로지 클라이언트로부터 시작되며, 서버는 클라이언트의 요청 없이는 데이터를 제공하지 못한다. 2) HTTPS https는 http 보다 암호화되어 있는 데이터 전송 규칙이라고 보면 된..
[Node] Express, Router & Routing (라우터, 라우팅)이란? 1. Routing (라우팅) 라우팅은 URI 및 특정 HTTP 요청 방법에 대한 클라이언트 요청에 응답하는 방식을 나타낸다. 예를 들어, GET 요청을 처리하려면 app.get()을 Post 요청을 처리하고 싶다면 app.post()를 사용하면 된다. 혹시 app.all()을 사용해 모든 HTTP 메서드를 처리하고, app.use()를 통해 미들웨어를 콜백 함수로 지정할 수 있다. 2. Router (라우터) 라우팅 할 수 있도록 도와주는 메서드를 라우터라고 하며, 라우터는 지정된 경로에 대한 요청을 수신할 때 호출되는 콜백함수와 HTTP 메서드를 지정한다. 즉, 지정된 경로 및 메서드와 일치하는 요청을 수신하고, 일치하는 것을 감지하면 지정된 콜백 함수를 호출한다. app.get('/', (req, ..
[Type] 타입스크립트(TypeScript) 란 ? 1. 타입스크립트 (TypeScript) 타입스크립트(TypeScript)는 타입(Type)과 자바스크립트(Javascript)가 합쳐진 언어라고 할 수 있다. 즉, 자바스크립트에 타입을 부여한 것이 타입스크립트이다. 브라우저는 타입스크립트를 이해하지 못하기 때문에, 타입스크립트에서 작성된 코드를 자바스크립트 코드로 컴파일(변환, compolile) 한 후 실행한다. 타입스크립트는 이 컴파일 과정 전에 코드를 미리 확인한 후 이상한 점이 있으면 에러를 표시해 준다. 2. Typescript 장점 1) 에러 사전 방지 타입스크립트의 가장 큰 장점은 타입 부여를 통해 에러를 미리 방지할 수 있다는 것이다. [1, 2, 3, 4] + false // 1,2,3,4false 자바스크립트는 매우 유연한 언어이기 ..
[Node] Express 미들웨어(Middleware) 란? 1. Middleware (미들웨어) 1) 미들웨어(Middleware)란 미들웨어는 익스프레스(Express)의 핵심 기능으로, 요청(req)과 응답(res) 사이에서 해당 정보를 이용해 필요한 처리를 수행하는 함수를 말한다. 미들웨어는 요청 객체인 req와 응답 객체인 res 파라미터를 전달받아 사용할 수 있으며, 다음 미들웨어로 넘길 수 있는 next 객체도 전달받는다. 미들웨어는 순차적으로 실행되며, 여러 개의 미들웨어를 사용하기 위해선 각각의 미들웨어 안에서 next() 메서드를 호출해야 한다. next() 메서드가 호출되면, 해당 미들웨어 안의 콜백함수의 코드가 모두 실행되고 그다음 미들웨어로 연결된다. const myLogger = (req, res, next) => { console.log..
[Next] Next.js 란? SSR, CSR 1. Next.js Next.js 는 리액트(react)로 만드는 서버 사이드 렌더링(SSR, Server Side Rendering) 프레임워크이다. 서버 사이드 렌더링(SSR)은 말 그대로 서버에서 자바스크립트를 렌더링 하는 것을 의미한다. 리액트의 경우 클라이언트 사이드 렌더링(CSR, Client Side Rendering)이기 때문에 자바스크립트를 클라이언트에서 로드한다. 즉, 사용자가 웹사이트를 요청하면 우선 빈 html을 가져오고 스크립트를 로딩한다. 따라서 자바스크립트가 모두 로드될 때까지 기다려야만 웹을 볼 수 있기 때문에 첫 로딩 시간이 오래 걸리고, 검색 엔진 최적화(SEO, Search Engine Optimization)에 취약하다. 반면, 서버 사이드 렌더링(SSR)의 경우 서버..
[Node] Node 서버 구축 방법, Express.js 서버 구축 방법, nodemon 1. 노드 서버 구축 방법 노드로 서버를 구축하는 방법은 간단하다. 자바에선 아파치 같은 서버를 따로 설치해서 서버를 구현해야 하지만, 노드 같은 경우엔 간단한 코드로도 서버를 구동하는 것이 가능하다. //server.js const http = require('http'); const server = http.createServer((req, res) => { console.log('server 구현') }) server.listen(8080) 이런 식으로 모듈을 사용하면, 서버를 생성할 수 있다. 서버를 생성한 후, server.listen에 원하는 포트번호를 적어주면 해당 포트에서 서버를 바로 실행할 수 있다. const server = http.createServer((req, res) => { ..
[Node] npm 이란? npm 설치 방법과 사용방법, yarn 1. npm 이란? npm(Node Package Manager)은 라이브러리를 관리하는 역할을 한다. npm을 통해 다양한 노드 모듈(node module)을 다운로드할 수 있고, 버전을 관리할 수도 있다. 1) npm 설치 방법 npm -v npm은 node를 다운로드하면 자동으로 설치된다. 위 명령어를 통해 현재 설치된 npm 버전을 확인할 수 있다. 2) npm 명령어 ① npm init npm init npm init은 package.json을 생성할 때 사용한다. //package.json { "name": "test", //프로젝트 이름 "version": "1.0.0", //프로젝트 정보 "description": "test-project", //프로젝트 설명 "main": "app.js"..

티스토리툴바