NodeJS란? 2009년 라이언 달이 발표한 Node JS는 구글 V8엔진으로 빌드된 자바스크립트 런타임 환경입니다. NodeJS는 단순 런타임 환경! 입니다. 간혹 NodeJS를 JS로 백엔드 언어를 사용 할 수 있게 만들어주는 라이브러리나 프레임워크 정도로 생각하는 사람이 많습니다. - 저도 그랬고.. NodeJS는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 외에 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경입니다. 독립적인 모듈, 파일 시스템, HTTP등 많은 빌트인 API를 제공합니다. Node.js 는 이벤트 기반의 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰..
자바스크립트 엔진 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진이고, 가능한 짧은 시간내에 최적화된 코드를 생성해내는것 이 목표입니다. 즉, 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말합니다. 여러 목적으로 사용 될 수 있지만 보통 웹 브라우저를 위해 사용됩니다. V8엔진은 오픈소스로 구글에서 개발했습니다. C++로 작성되었고, 구글 크롬과 Node.JS에서 사용됩니다. 과거 느린 엔진에 비해 V8엔진으로 인해 클라이언트에서도 빠른 속도로 로직을 수행 할 수 있게되어 많은 로직들을 클라이언트단에서 작성할 수 있게 되었고 이는 프론트엔드 영역이 주목받는 계기가 되었습니다. 출처: https://hceaan.tistory.com/79
AJAX란 이전의 웹 페이지는 오직 HTML코드를 서버로부터 전달받아 웹페이지 전체를 렌더하는 방식이였다. 화면의 값이 바뀌면 서버로부터 새로운 HTML을 전송받아 화면 전체를 다시 re-render하는 방식으로 동작했지만 이는 매우 비효율적인 방식이다. 값이 바뀐 부분만 부분적으로 서버에서 받아오는것이 데이터 통신면에서도 클라이언트쪽에서도 불필요한 비용이 발생하는것이다. 이로 인해 값이 바뀌면 서버에서 다시 HTML전체를 받아 리렌더하기 때문에 화면이 깜빡이는 이슈도 있고 당연히 성능면에서도 불리하다. 그러나 AJAX의 등장으로 이러한 문제를 해결 할 수 있다. 웹페이지에서 변경할 필요가 없는 부분은 다시 리렌더하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 하는 방식이 가..
Facts (한것) - Node js 쿠키 사용해보기 Finding (새로 알게 된 것) - 쿠키 사용법 Feeling (느낀 점) - 사실 공부나 개념 공부할때 쿠키를 많이 들어보기는 했는데 실제로 사용해보는건 처음이였다. 드디어 공부한걸 써먹는것같아서 이상한 희열을 느꼈다. Affirmation(자기 선언) - 2달에 한 권 책읽기
REST API란? REST 와 API의 합성어입니다. REST는 통신 체계의 스타일을 규정한 아키텍처입니다. Restful API란? REST 통신 체계 스타일을 준수한 API입니다. myRestBack.js const http = require("http"); const fs = require("fs").promises; const users = {}; // 데이터 저장용 http .createServer(async (req, res) => { try { if (req.method === "GET") { if (req.url === "/") { const data = await fs.readFile("./myRest.html"); // 메인주소일때는 myRest.html 즉 기본이 되는 메인 html..
Facts (한것) - Node js REST API 구현해보기. - Node js fs 객체 이용하여 서버 만들기 - 리팩터링 발표 Finding (새로 알게 된 것) - REST API 구현방법. - fs객체 사용법 Feeling (느낀 점) - 공부를 사실 React를 목표로 준비했기 때문에 바닐라 자바스크립트가 약한것이 느껴졌다. 앞으로 node js를 하려면 바닐라 js 도 공부해야할것같다. Affirmation(자기 선언) - 바닐라JS 공부
Server.js const http = require('http'); // http 모듈 생성 http.createServer((req, res) => { // http 서버 생성 res.write('Hello server!') // html태그 전송 res.end('Hello hanamDeveloper!') // 서버 종료와 동시에 html태그 전송 }).listen(8080, () => { // 8080 port로 생성 console.log('포트 8080에서 서버 대기 중입니다.') }) 이런식으로 코드를 구성해도 서버는 잘 구동되지만 html태그를 직접 하면 코드의 줄도 길어질뿐만아니라 행동에도 제약이 생긴다. 그래서 fs객체를 이용해서 파일을 읽어서 코드를 구성한다. 우선 html파일을 만들어..
Facts (한것) - Node js 실제 HTTP 서버 구축해보기 Finding (새로 알게 된 것) - HTTP 서버 구축해보기. - Node JS 내장모듈 Feeling (느낀 점) - 생각보다.. 서버 구현하는게.. 간단할지도..? 당연히 아니겠지만.. Affirmation(자기 선언)
Facts (한것) - 개발자로써의 첫 취업. - 개발자로써의 첫 퇴사. - 개발자로써의 첫 이직. - 개인 프로젝트 3개 - 회사 프로젝트 5개 읽은책 - 코어자바스크립트, - 자바스크립트 Deep Dive, - 코딩을 다루는 기술, - 리액트를 다루는 기술 - 리팩터링 2판 - 자바스크립트 패턴과 테스트 Finding (새로 알게 된 것) - Javascript, - React, - NextJS, - HTML, - CSS, - Redux, - Justand, - Tdd, - Typescript, - React Native Feeling (느낀 점) - 사실 개발자는 재능이 많은 사람이 정말 많다는 소리를 듣고 혹시.. 어쩌면 내가!? 라는 생각을 해봤다. 당연히 아니였다.. - 개발자가 정말 끊임없이..
HTTP란? HTTP란 (HyperText Transfer Protocol)의 약자이다. 클라이언트와 서버가 서로 대화 (응답과 요청) 을 하기 위해서는 하나의 규약을 통해서 소통을 해야한다. 그렇게 나온것이 HTTP서버이다. const http = require('http'); // http 모듈 생성 http.createServer((req, res) => { // http 서버 생성 res.write('Hello server!') // html태그 전송 res.end('Hello hanamDeveloper!') // 서버 종료와 동시에 html태그 전송 }).listen(8080, () => { // 8080 port로 생성 console.log('포트 8080에서 서버 대기 중입니다.') }) 우..
Facts (한것) - Node js 챕터 3까지 인강 듣기 Finding (새로 알게 된 것) - Node의 내장 모듈 (기능) Feeling (느낀 점) Affirmation(자기 선언) - 오늘은... 커밋을 못했다.. 사실 생각나는 기능 구현은 이미 다 해버렸다.. 아이디어가 떠오르지가 않는다 그렇다고 의미없는 커밋을 하기에도 애매하고 앞으로 어떤 프로젝트를 해야 좋을지 대책을 강구해봐야겠다.
Facts (한것) - 공공 데이터 open API 적용 - 코로나19 프로젝트 진행 - Node js 인강 듣기 Finding (새로 알게 된 것) - 공공데이터라는 사이트에는 꽤 많은 open API가 있다. Feeling (느낀 점) - 처음으로 공공데이터에 있는 open API를 사용해보았고 인증키 이슈때문에 애를 좀 먹었다. 스스로 해결하고싶어하는 고집이 있어서 끝까지 구글링 미루었다가 시간만 날려먹었다.. - 인터넷에는 꽤 많은 open API들이 있다. Affirmation(자기 선언) - 하루에 많지는 않아도 오늘처럼 가볍게 자주 매일 쭉 하기..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
Facts (한것) - SNS 로그인 연동 (카카오, 네이버) - 리팩터링 챕터2 복습 Finding (새로 알게 된 것) - SNS로그인 및 open API의 종류? Feeling (느낀 점) - 소셜 로그인에 관한 open api를 찾는데 문득 다른 open API도 눈에 들어와서 이정도로 open api가 많이 있으면 생각보다 프론트엔드 기술로 충분히 많은 프로젝트를 만들 수 있다고 생각했다. 앞으로는 기능구현 보다는 open API를 이용해서 토이 프로젝트도 진행해보는것도 괜찮다고 생각했다. - 리팩터링 챕터 2를 읽으면서 코딩은 수학보다는 문학에 더 가깝다고 느꼇다. Affirmation(자기 선언) - 한달에 최소 하나의 토이 프로젝트 하기. - NodeJs강의 최소 하루에 하나 씩 보기 (첫..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 firebase를 이용해서 로그인을 구현해봤지만 이번에는 firebase를 제외하고 네이버, 카카오톡에서 지원해주는 open API를 이용해서 구현해보았다. Login import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { UserContext } from "../data..
