C-log

보호되어 있는 글입니다.

이번 시간에는 지난 포스팅에서 말했던 코드를 분석하는 시간을 가져 볼 것이다. 우리가 분석할 코드는 아래와 같다. section26부분을 중심으로 둘러 보려고 했으나 함수를 분리하기 전 section24에 있는 main.js 코드를 중심으로 분석 할 예정이다. 분석 대상이 될 코드는 아래 더보기를 참조 하면 되겠다.더보기var http = require('http');var fs = require('fs');var url = require('url');var app = http.createServer(function (request, response) {  var _url = request.url;  var queryData = url.parse(_url, true).query;  var pathname..

이번 수업에서는 우리가 이전에 제작했던 코드들을 함수화해서 리팩토링을 하는 과정을 가질 것이다. 우선 가장 크게 중복이 되고 있는 부분은 바로 html 부분이다. 그 다음으론 파일을 리스트화 하는 list 부분이다. 해당 부분들을 함수로 만든 코드는 다음 아래와 같다.function templateHTML(title, list, body) {  return `            WEB    ${list}    ${body}      `;}function templateList(filelist) {  var list = '';  var i = 0;  while (i filelist.length) {    list = list + `${filelist[i]}">${filelist[i]}`;    i = ..

알고리즘을 공부할 때 기본적으로 탄탄하게 알아야 하는 것이 기본 입출력 이라고 생각한다. 이 요령이 없으면 어떤 문제라도 해결해내기 어렵다고 생각해서 이렇게 포스팅을 하게 되었다.기본적인 input() 선언일반작인 input 방식#--- input() ---inputValue = input()print(type(inputValue))# test 입력 시 -> str# 123 입력 시 -> str# 결론 : 단일 input을 했을 시 기본 str을 반환하게 된다.* 아래 코드들은 inputValue 변수에 선언한 input()함수를 활용한 사례이다. input()함수에 직접 split()을 적용할 수 있지만 편의를 위해 input()과 split()을 따로 분리 하였다.list() 형변환 없이 List로 ..

스택과 큐를 공부하다가 Tree로 넘어오게 된 이유는 알고리즘 강의들을 청강만 여럿 해보다 보니 결과적으로 도달하는 개념과 실제 프로젝트나 실무에서 가장 흔하게 접하는 개념이 바로 Tree라는 것을 느끼고 덥석 Tree 알고리즘을 먼저 포스팅하게 되었다. 물론 링크드 리스트와 같은 개념들을 순차적으로 배워가면 좋겠지만 알고리즘은 큰 개념 부터 작은 개념으로 쪼개지면서 배워 나가는 것이 나에게 맞겠다는 생각이들어서 공부 순서를 뒤집었다. Tree를 공부하고 나면 BFS와 DFS를 배울 것이다.Tree트리는 노드와 엣지로 연결된 그래프의 특수한 형태로, 주요 특징은 다음과 같다. 즉, 그래프의 표현으로도 tree를 표현 할 수 있다. (따라서 우리는 Tree를 알기 위해서 그래프를 알아야 한다.)트리의 특징..

이번 시간에는 webpack과 등장 배경에 관해서 이야기 해볼 것이다.Webpack의 등장먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES6(ES2015)부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. ('김정환 블로그' 중..)예전에는 html에 있는 script 태그를 사용해서 js파일들을 연결하고 html로 관리 했다. 예전에 사용했던 방식을 구현 해본 코드는 아래 더보기를 참고하라더보기math.jsfunction sum(a,b){ return a+b;}app.jsconsole.log(sum(1,2));index.html command::CMDstart index.html예전 방식을..

이번 수업 시간에서는 외부 패키지를 관리하는 방법에 관해서 배울 것이다. CDNCDN은 접적으로 라이브러릴 설치 및 다운로드하는 방법이 아니다. 필요한 라이브러리 패키지를 html에서 로딩해서 간단하게 가져오는 방법이다.  하지만 라이브러리는 지속적으로 관리되고 업데이트가 된다. 강의에서 보여주는 리액트 라이브러리의 버전은 16버전이다. 위의 CDN은 18버전이다. 변경된 버전이 있을 때 마다 수동적으로 CDN을 계속해서 변경해줘야 하는 번거로움이 있다. 이를 해결 하기 위해선 우린 NPM을 통해서 패키지를 관리한다.::CMDnpm install reactNPM을 통해서 설치가 완료된다면 아래와 같이 package.json파일안 devDependencies에 이러한 형식으로 저장이 될 것이다. "dev..

Nodejs는 개발 환경을 커스텀 할 수 있다. 개발 환경이 자동으로 설정되지 않는 경우에는 직접 커스텀을 해야하기 때문에 Nodejs를 알아야 한다. 따라서 커스텀을 하기 위해서는 Nodejs가 기본으로 설치 되어 있어야 한다. (본인은 Nodejs를 설치와 관리리를 NVM으로 관리하고 있다.) 참고로 개발 환경이 주목적이라면 최신 버전을 사용하고 그렇지 않고 서버를 위함이라면 Nodejs LTS버전을 사용하면 된다. 수업에서는 nodejs 13.7.0버전을 사용하고 있다. 하지만 우리는 최신 버전을 사용할 것이며 22.3.0버전을 사용할 것이다. 따라서 NVM으로 최신버전을 맞춰 놓자.NVM//CMD//실행 순서//NVM 설치 가능 버전 확인nvm list available//원하는 버전 설치nvm ..