well-balanced

이 글은 Codeit의 트렌드를 읽는 방법 강의를 참고하여 작성하였습니다. 시간이 흐를수록 트렌드는 계속 변화하며 개발자로써 살아가면서 트렌드를 읽어내는 것은 정말 중요하다. 아직 프로그래밍에 대해 공부한 지 오래되지는 않았지만 특히나 이 IT 업계는 트렌드가 빠르게 변화하고 있으며 많은 개발자들은 트렌드에 민감하게 반응하며 공부를 평생의 숙명으로 안고 살아간다. 특히나 프레임워크 쪽은 트렌드에 따른 변화가 즉각 일어나고, 이에 따라 크고 작은 기회비용들이 발생할 수도 있기 때문에 어떤 언어를 배워야 하는 지, 어떤 프레임워크, 라이브러리를 배워야 하는 지를 선택하는 것은 시간적 손익을 가를 수 있는 중요한 기준이 되기도 할 것이다. 따라서 어느정도 트렌드에 어울리는 기술인 지 고민해보고 검토해 볼 정도..

express에 내장된 render 메소드의 역할은 view 파일을 렌더링하고, 렌더링된 HTML 문자열을 클라이언트에게 보내는 역할을 한다. 사용법을 알아보자. const express = require('express'); const app = express(); const hbs = require('express-handlebars'); app.engine('hbs',hbs({ extname:'hbs', defaultLayout:'layout', layoutDir: __dirname+'/views/layouts', partialsDir: __dirname+'/views/partials' })); app.get('/', (req, res)=>{ res.status(200).render(__dirnam..

*이 글은 유튜버 생활코딩님의 HTTP 강의를 참고하였습니다. HTTP를 간단하게 얘기해보자면 클라이언트 : 서버님 파일(HTML,Img 등)주세요 (요청, request) 서버 : 여기있습니다 (응답, response) 컨텐츠를 주고받기 위해서는 서버가 클라이언트가 서로가 알아들을 수 있는 공통의 메시지가 필요하다. 그 메시지를 HTTP라고 하며, 크게 request와 response로 구분된다. 개발자도구의 네트워크탭에 가보면 웹서버와 웹브라우저가 어떠한 통신을 하고 있는지 모니터링 할 수 있으며, 헤더로써 HTTP 메세지를 볼 수 있다. Request GET 요청방식 Host 요청하려는 서버 호스트 이름과 포트번호 User-agent 웹브라우저의 다른 표현, 클라이언트 프로그램 정보(웹브라우저, ..

프로그래밍에서는 변수의 이름을 정할 때 띄어쓰기(space)를 사용할 수 없다. 따라서 단어와 단어 사이에 Sign을 주면서 코드의 가독성을 좋게할 수 있는 방법이 필요했고, 그래서 몇가지 네이밍 케이스가 고안되었다. PascalCase (파스칼 케이스) TheDeveloperOfOz : 각 단어의 첫 글자를 대문자로 표시한다. camelCase (카멜 케이스) theDeveloperOfOz : 이름의 첫 글자는 소문자로 작성 후, 각 단어의 첫 글자를 대문자로 표시한다. kebab-case (케밥 케이스) the-developer-of-oz : 공백을 하이픈으로 치환하여 단어를 연결한다. snake_case(스네이크 케이스) the_developer_of_oz : 공백을 언더바로 치환하여 단어를 연결한다.

이 글은 유튜버 '생활코딩' 님의 'Object Model' 강의 영상의 내용을 정리한 것입니다. Javascript를 통해서 브라우저를 제어하기 위해서는 Javascript로 제어할 수 있는 객체(Object)가 있어야한다. 브라우저가 우리에게 Javascript로 제어할 수 있도록 브라우저의 여러 구성 요소들을 객체로 만들어서 제공해주는 것을 객체모델(Object Model)이라고 한다. Javascript로 객체를 만드는 것을 객체화라고 한다. 위와 같은 코드를 HTML에 출력하고, 개발자 도구를 켜보면 아래와 같은 화면이 나타날 것이다. 브라우저에 이미지가 표시된 것은 우리가 와 같은 tag를 작성했기 때문이다. 이것은 HTML 프로그래밍이다. 그러나 Javascript를 통해서 프로그래밍적으로 ..

동기(Synchronous)와 비동기(Asynchronous) 동기 방식은 일을 순차적으로 진행하는 것이고, 비동기 방식은 순서가 중요하지 않을 경우 일을 위임함으로써 효율적으로 처리하는 것 이메일을 만명에게 보낸다. 동기적인 방식 : 발행버튼으로 한 명 한 명에게 이메일을 보낸다. 한 명당 1초가 걸린다면 10000초가 걸리는 것이다. 비동기적인 방식 : 발행버튼을 누르면 이메일을 보내는 별도의 시스템에게 과업을 위임한다. fs.readFile을 예로 동기와 비동기 방식에 대해 살펴보자. 동기방식(Sync) var fs = require('fs'); // Sync console.log(1); var data = fs.readFileSync('data.txt', {encoding:'utf8'}); con..

Single source of truth 정보의 중복, 비정합성 등의 문제를 해결하고자 나온 이론이다. 어찌보면, '리팩토링' 의 개념과 비슷하다고 볼 수 있다. 웹사이트를 제작할 때 우리는 'index' 라는 기본 파일을 만드는 이유 또한 이것에 기인한다. 간단한 예시를 통해 살펴보자. 우리는 지금 블로그를 만드는 중이다. 드디어 우리는 블로그 홈(index)에서 로그아웃 기능을 구현해냈다. 그러나 글목록 페이지에는 로그아웃 기능이 없어서 블로그 홈에 로그아웃 기능을 구현한 코드를 **복사해서 붙여넣기했다**. 이렇게 된다면 Single source of truth의 규칙을 어겼다고 할 수 있다. 그 이유는 코드의 중복이 발생했기 때문이다. 만약 logout의 UI를 개선하고 싶다면 블로그 홈에 있는 ..

이 글은 'Udemy'의 코스 중 하나인 'The Complete JavaScript Course 2019: Build Real Projects!' 의 강의 일부를 번역한 글입니다. statement와 expression의 차이점은 먼저 Java script의 expressions 들은 항상 Value를 생산하는 코드의 조각들입니다. 그리고 코드가 하나의 값을 갖는 한 코드의 길이는 얼마나 길든 상관없습니다. 이를테면, 만약 당신이 "2+3"이라는 쉬운 코드를 작성한다고 가정했을 때, 이게 결과를 만들어낸다는 사실을 알 수 있습니다. 이 경우 '5' 라는 값이 나오는데 우리는 방금 여기 자바스크립트의 expression을 쓴 겁니다. 예를 들어, 위와 같이 함수를 정의하고 브라우저의 콘솔(command+..