전체 글

개발 공부한것을 기록하는 블로그입니다.
TIL/202201

20220110

Facts (한것) - Node JS 서버 챕터 6까지 듣기. - 자바스크립트 Deep Dive 4, 5, 6장 다시 읽기 - 개발자의 글쓰기 책 구매 Finding (새로 알게 된 것) - 파수리 라는 단어 - 세션, 쿠키, 멀터, 라우터 Feeling (느낀 점) - 글을 쓰는데 너무 정리정돈이 안되있는 느낌을 받아서 개발자의 글쓰기라는 책을 읽어보기로 했다. Affirmation(자기 선언) - 개발자의 글쓰기 책 한달안에 완전히 읽기

TIL/202201

20220109

Facts (한것) - Express 로 REST API 구현 - 자바스크립트 Deep Dive 3장 다시 읽기 Finding (새로 알게 된 것) - Express 활용법 Feeling (느낀 점) - 역시 책은 여러번 읽어야된다.. 다시 읽어보니 다시 새롭게 읽는 느낌이다.. 자바스크립트 Deep Dive는 최소 5번은 완독해야겠다. Affirmation(자기 선언)

FrontEnd/개념정리

실행컨텍스트

실행컨텍스트란? 실행컨텍스트란 자바스크립트의 실행하는 환경정보들을 모아놓은 객체이다. 이 실행컨텍스트에 대해서 알게된다면 호이스팅에 대해서도 바로 이해할 수 있다. 콜스택은 Stack구조로 되어있는 FILO 이다. 코드가 실행된다면 실행 할 코드를 콜스택에 넣는다. const context = () => { inner(); // inner함수 실행 2 console.log('inner'); // inner출력 8 const inner = () => { inner2(); // inner2함수 실행 3 console.log('inner1'); // inner1 출력 7 } const inner2 = () => { inner3(); // inner3함수 실행 4 console.log('inner2'); // ..

FrontEnd/개념정리

자바스크립트 변수 타입과 선언

변수의 타입 변수의 동작 방식을 알려면 우선 변수의 타입을 먼저 알아야한다. 자바스크립트의 변수에는 크게 원시형, 참조형 두 가지가 있다. 타입이 필요한 이유 값을 저장할 때 확보해야 하는 메모리공간의 크기를 결정하기 위해 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해 출처:모던 자바스크립트 Deep Dive 원시형이란? 식별자가 데이터가 들어있는 주소값을 갖고 있다. Number String Boolean nulll undefined Symbol 참조형이란? 식별자가 데이터들이 들어있는 주소값들을 갖고있는 주소를 갖고 있다. 즉, 참조형이란 데이터들의 집합을 갖고있는 주소의 주소를 갖고있는것이다. 아래의 타입은 ..

FrontEnd/개념정리

NodeJS

NodeJS란? 2009년 라이언 달이 발표한 Node JS는 구글 V8엔진으로 빌드된 자바스크립트 런타임 환경입니다. NodeJS는 단순 런타임 환경! 입니다. 간혹 NodeJS를 JS로 백엔드 언어를 사용 할 수 있게 만들어주는 라이브러리나 프레임워크 정도로 생각하는 사람이 많습니다. - 저도 그랬고.. NodeJS는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 외에 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경입니다. 독립적인 모듈, 파일 시스템, HTTP등 많은 빌트인 API를 제공합니다. Node.js 는 이벤트 기반의 논블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰..

FrontEnd/개념정리

V8엔진

자바스크립트 엔진 자바스크립트 코드를 해석하고 실행시켜주는 것이 자바스크립트 엔진이고, 가능한 짧은 시간내에 최적화된 코드를 생성해내는것 이 목표입니다. 즉, 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터를 말합니다. 여러 목적으로 사용 될 수 있지만 보통 웹 브라우저를 위해 사용됩니다. V8엔진은 오픈소스로 구글에서 개발했습니다. C++로 작성되었고, 구글 크롬과 Node.JS에서 사용됩니다. 과거 느린 엔진에 비해 V8엔진으로 인해 클라이언트에서도 빠른 속도로 로직을 수행 할 수 있게되어 많은 로직들을 클라이언트단에서 작성할 수 있게 되었고 이는 프론트엔드 영역이 주목받는 계기가 되었습니다. 출처: https://hceaan.tistory.com/79

FrontEnd/개념정리

AJAX란?

AJAX란 이전의 웹 페이지는 오직 HTML코드를 서버로부터 전달받아 웹페이지 전체를 렌더하는 방식이였다. 화면의 값이 바뀌면 서버로부터 새로운 HTML을 전송받아 화면 전체를 다시 re-render하는 방식으로 동작했지만 이는 매우 비효율적인 방식이다. 값이 바뀐 부분만 부분적으로 서버에서 받아오는것이 데이터 통신면에서도 클라이언트쪽에서도 불필요한 비용이 발생하는것이다. 이로 인해 값이 바뀌면 서버에서 다시 HTML전체를 받아 리렌더하기 때문에 화면이 깜빡이는 이슈도 있고 당연히 성능면에서도 불리하다. 그러나 AJAX의 등장으로 이러한 문제를 해결 할 수 있다. 웹페이지에서 변경할 필요가 없는 부분은 다시 리렌더하지 않고, 서버로부터 필요한 데이터만 전송받아 변경해야 하는 부분만 렌더링 하는 방식이 가..

TIL/202201

20220105

Facts (한것) - Node js 쿠키 사용해보기 Finding (새로 알게 된 것) - 쿠키 사용법 Feeling (느낀 점) - 사실 공부나 개념 공부할때 쿠키를 많이 들어보기는 했는데 실제로 사용해보는건 처음이였다. 드디어 공부한걸 써먹는것같아서 이상한 희열을 느꼈다. Affirmation(자기 선언) - 2달에 한 권 책읽기

BackEnd/NodeJs

NodeJS REST API 구현

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..

TIL/202201

20220103

Facts (한것) - Node js REST API 구현해보기. - Node js fs 객체 이용하여 서버 만들기 - 리팩터링 발표 Finding (새로 알게 된 것) - REST API 구현방법. - fs객체 사용법 Feeling (느낀 점) - 공부를 사실 React를 목표로 준비했기 때문에 바닐라 자바스크립트가 약한것이 느껴졌다. 앞으로 node js를 하려면 바닐라 js 도 공부해야할것같다. Affirmation(자기 선언) - 바닐라JS 공부

BackEnd/NodeJs

fs객체를 이용하여 파일 읽기.

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파일을 만들어..

TIL/202201

20220102

Facts (한것) - Node js 실제 HTTP 서버 구축해보기 Finding (새로 알게 된 것) - HTTP 서버 구축해보기. - Node JS 내장모듈 Feeling (느낀 점) - 생각보다.. 서버 구현하는게.. 간단할지도..? 당연히 아니겠지만.. Affirmation(자기 선언)

연간 회고록

2021 회고

Facts (한것) - 개발자로써의 첫 취업. - 개발자로써의 첫 퇴사. - 개발자로써의 첫 이직. - 개인 프로젝트 3개 - 회사 프로젝트 5개 읽은책 - 코어자바스크립트, - 자바스크립트 Deep Dive, - 코딩을 다루는 기술, - 리액트를 다루는 기술 - 리팩터링 2판 - 자바스크립트 패턴과 테스트 Finding (새로 알게 된 것) - Javascript, - React, - NextJS, - HTML, - CSS, - Redux, - Justand, - Tdd, - Typescript, - React Native Feeling (느낀 점) - 사실 개발자는 재능이 많은 사람이 정말 많다는 소리를 듣고 혹시.. 어쩌면 내가!? 라는 생각을 해봤다. 당연히 아니였다.. - 개발자가 정말 끊임없이..

BackEnd/NodeJs

NodeJs HTTP서버 띄우기

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에서 서버 대기 중입니다.') }) 우..

TIL/202112

20211231

Facts (한것) - Node js 챕터 3까지 인강 듣기 Finding (새로 알게 된 것) - Node의 내장 모듈 (기능) Feeling (느낀 점) Affirmation(자기 선언) - 오늘은... 커밋을 못했다.. 사실 생각나는 기능 구현은 이미 다 해버렸다.. 아이디어가 떠오르지가 않는다 그렇다고 의미없는 커밋을 하기에도 애매하고 앞으로 어떤 프로젝트를 해야 좋을지 대책을 강구해봐야겠다.

3일마다 작심3일
3일마다 작심3일