프로그래밍233 [220128] express 모듈로 서버 시작하기, 요청헤더, 응답헤더, form과 연결하기 목록 1. 헤더란? 2. 서버시작하기 3. 요청헤더 (express 모듈 : get, post) 4. 응답헤더 (express 모듈 : send, render) 5. form과 연결하기 1. 헤더란? : 긴 텍스트로 이루어진 요청헤더, 응답헤더 브라우저가 해당 서버에 대한 htto://localhost:3000을 입력하게되면 요청을 하게된다. '/' : 현재 연결되어있는 호스트. 아무것도 적어놓지 않았기때문에 기본(홈)주소를 뜻함 app.get('/',(req,res)=>{ res.send(`hello world`) } 요청을 하는 data(긴 텍스트 정보들)는 연결되어 있는 파일로 넘어오고, request가 get인 이 코드가 받게된다. 네트워크에 접속하고 개발자도구에 들어가면 다음과 같은 값을 볼 수.. 2022. 2. 3. 티스토리 코드블럭 스타일 수정하기 - 모서리 둥글게, 줄간격, margin 코드블럭 안의 폰트스타일이나 배경색을 바꾸고 싶은 경우는 다음 글에 게시해놓았다. https://hancoco.tistory.com/55 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 hancoco.tistory.com 코드블럭 폰트랑 배경색을 바꾸고나니 좀더 욕심이 생긴다. 줄간격도 넓히고 삐쭉한 모서리도 좀 둥글둥글하게 바꾸고 싶다!!!! 그러니, 바꿔보자. 1) 티스토리 블로그관리 > 스킨편집 > html 편집 > css에 들어가자 2) css에 해당 .. 2022. 2. 3. 티스토리 코드블럭 스타일 수정하기 - highlight, 어두운 배경, 원하는 폰트로 바꾸기. 방법은 2가지다. 1) 블로그 관리 > 플러그인 > 코드 문법 강조를 선택해서 코드블럭 스타일을 바꾼다. 2) 직접 스타일을 받아서 바꾼다. ( 여기서 주의할점은, 위에서 말한 코드 문법 강조를 해제한 상태여야한다. 별 다섯개!!!!! ) 1. 원하는 스타일의 폰트를 고르기 https://highlightjs.org/static/demo/ highlight.js demo highlightjs.org 여기 들어가서 원하는 스타일의 폰트를 고른다. 나는 Atom One Dark를 골랐다. 2. 설치방법을 선택하기 폰트를 설치하는 방법은 두가지가 있다. 첫번째는 파일 다운로드를 하지않고 네트워크로 연결해서 바꾸는 cdnjs 방법. 두번재는 파일을 다운로드해서 폰트를 바꾸는 방법. 첫번째는 간편하지만 인터넷 상.. 2022. 2. 3. [220127] 콜백함수를 활용한 자동차 레이싱 게임 [ 목표 ] 세 대의 차를 아반떼>소나타>제네시스 순서대로 출발시킨다. 출발할때 GO!라는 텍스트를 표시한다. 도착할때 END!라는 텍스트를 표시한다. 한대의 차가 출발하고 도착하고나서 다음 차가 출발하게 한다. 3대의 차가 도착하고나면 경기끝!이란 텍스트를 표시한다. 시도 1) 우선 콜백함수를 차례대로 생성해서 출력값을 만들어서 결과값을 보자. const 아반떼 = () => { console.log('아반떼 GO!') setTimeout(()=>console.log('아반떼 END!'),1000) } const 소나타 = () => { console.log('소나타 GO!') setTimeout(()=>console.log('소나타 END!'),1000) } const 제네시스 = () => { c.. 2022. 2. 2. [220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서 목록 1. 함수를 선언하는 여러가지 방법 2. 함수가 생성되는 순서 3. 익명함수 4. 호출되는 순서 함수를 선언하는 여러가지 방법 function test(){ console.log("hello world!") } let elementObj = { addEventListener:함수,} elementObj.addEventListener("click",test) elementObj.addEventListener("click",function(){console.log('익명함수')}) elementObj.addEventListener("click",function(){console.log('두번째')}) elementObj.addEventListener("click",()=>console.log('세번째'.. 2022. 2. 2. [220105] 콜스택과 메모리힙, 스택과 힙, 메모리 할당 순서 목록 1. 스택구조 2. 큐구조 3. 콜스택 4. 메모리힙 간단한 자료구조를 배웁시다 : 스택 구조, 큐 구조 알고 있던것 같더라도 막상 설명하려고하면 어 뭐더라..?하고 생각하게 되는 스택과 큐 구조의 차이점을 알아보자 스택구조(LIFO) Last in , First Out / 후입선출 프링글스통에 들어가있는 과자를 생각하면 편함. 가져오기 O(n) -> 시간복잡도 여러번 반복할때 실행하는 횟수 for문처럼 저장하기 O(1) -> 한번 실행할때 삭제하기 O(1) -> 위에서부터 삭제(추가도 마찬가지. 한 방향으로만 가능한 스택) 큐구조 (FIFO) First in, First Out / 선입선출 편의점 냉장고를 생각하자. 뒤에서 순서대로 채우지만 꺼낼때는 앞에서 꺼냄. 가져오기 O(n) 저장하기 O(.. 2022. 2. 2. [220128] nunjucks 설치, 세팅, 사용 목록 1. 템플릿엔진 2. nunjucks 설치 3. nunjucks 세팅 4. nunjucks 사용 5. nunjucks 흐름 이해도 (링크) node.js 시작하기전 프로그램 세팅하는 법은 여기에! https://hancoco.tistory.com/70?category=1035202 [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 터미널 명령어 알기 기본적인 명령어 ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는 -a : 숨긴 디렉토리까지 보여줌 -l : 자세히 보기 pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표 hancoco.tistory.com 템플릿 엔진 웹 개발에서, 지정된 템플릿 양식과 데이터가 합쳐.. 2022. 2. 2. [220127] promise, then, resolve 목록 1. promise의 목적 2. promise의 매개변수 2가지 3. then 사용법 4. promise의 상태 3가지 5. resolve 사용하는 법 promise를 사용하기 위한 선수지식 : 객체와 this 간단 정리! this에 관한 자세한 설명은 아래 블로그 게시글에 --> https://hancoco.tistory.com/36 [220107] this와 new 그리고 arrow function 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체란 붕어빵을 만드는 붕어빵 틀, this !주의! 우선, 가볍게만 알자. 깊게 들어가면 내용이 상 hancoco.tistory.com promise의 목적 콜백 기능은 그대로! 하지만 코드는 좀 더 깔끔.. 2022. 2. 2. [220127] require, export 명령문 목록 1. require 메서드 2. exports를 통해 추가하기 NODEJS의 require 메서드 require은 표준 문법이 아니다 : 표준에 없는데 왜 nodejs에 이게 필요할까? 자바스크립트는 여러 파일에서 사용할 경우, 불편했다. 왜? A 파일에 있는 변수가 왜 B 파일에서 실행될때 같이 실행되지? (브라우저의 예시) 다른 사람들과 협업할때 불편함. (예시) 내가 a변수를 만들었는데, 다른사람도 a변수를 선언하거나 사용 --> 에러발생 이를 방지하기 위해 모듈(파일을 가져와서 사용할 수 있게끔 만들어 주는 시스템)이 나옴. 모듈은 ES7부터 있었음. -> import문이 생겨있음 근데!! import가 나오기 전에 NODEJS가 먼저 만들어 놓은 require가 존재. import(리액트때.. 2022. 2. 2. [220125] 맥북에서 터미널, nodejs 개발환경 세팅하기 (M1칩) + 용어설명, npm, nvm, express 목차 1. 터미널 명령어 2. npm 사용하기 3. express 사용하기 4. 서버 실행하기 터미널 명령어 알기 기본적인 명령어 ls : 현재 있는 디렉토리 안의 파일 리스트를 출력해주는 -a : 숨긴 디렉토리까지 보여줌 -l : 자세히 보기 pwd : 어떤 디렉토리 경로에 있는지 절대 경로로 표시해준다. Print Working Directory의 약어 cd : 작업하는 디렉토리의 위치를 바꾸는 명령어. Change Directory의 약어 mkdir : 디렉토리를 만들어준다. clear : 터미널 화면을 비워준다. d... 디렉토리 - ... 파일 / : 최상위 디렉토리 cd / : 최상위 디렉토리로 이동 cd /root : 루트 디렉토리로 이동 /home/계정명 : 홈디렉토리 맥이랑 리눅스랑 비슷.. 2022. 2. 2. 이전 1 ··· 17 18 19 20 21 22 23 24 다음
