본문 바로가기

분류 전체보기364

계산기 서버 만들기 | body-parser | path.js | 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const express = require('express'); 8 express 셋업 const app = express(); 9 포트 연결 app.listen(3000, function() { console.log("Serve.. 2021. 9. 25.
서버 기본 세팅 work flow 요약 파일 만들고 그 파일 안에 npm init 실행 npm install express npm install nodemon npm install body-parser 다운 받아 놓고 자바스크립트에서 코드 작성 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const expr.. 2021. 9. 24.
Nodemon 설치하기 | rs 앞 포스트에서 보았듯이 코드에디터에 변경이 있을 때마다 터미널에서 계속 서버를 나왔다가 다시 들어갔다가를 반복해야하는데 너무 귀찮다. 소스 코드에 변경이 있을 때마다 이 작업을 자동으로 해주는 프로그램이 있는데 nodemon이다. nodemon 설치하기 https://nodemon.io/ 디렉토리 어디에 설치하든 상관없다. 모든 디렉토리에 적용이 된다. npm install -g nodemon 다운 받고 나서 터미널에 nodemon 과 파일 이름을 작업 중인 파일 안에 적어준다 nodemon server.js nodemon 실행 해보기 하나의 get 요청을 더 추가하니 콘솔에서 자동으로 변경이 된다. 로컬 호스트에 나온 내용 콘솔에서 rs 누르면 restart 할 수 있다. 2021. 9. 24.
request, response | GET 요청하기 우리가 구글에 접속하는 경우 우리 컴퓨터 브라우저가 구글 서버에 데이타 달라고 request를 한다. 구글 서버는 이 브라우저에 HTML, CSS, JS을 보내며 response를 해준다. 요청의 4가지 종류 요청에는 4가지가 있다. HTTP 요청이라고도 부른다. 1. 읽기: GET요청 (페이지 읽게 해달라고 요청) 2. 쓰기: POST 요청 (포스트, 블로그, 댓글 등 쓰게 해달라고 요청) 3. 수정: PUT 요청 (이미 있는 내용 수정해 달라고 요청) 4. 삭제: DELETE GET 요청보내기 기본 문법 app.get("/", function(req, res) { res.send("Hello world")}); 1. get 요청해서 콘솔에 request 내용보기 1) app.get 매소드 작성 app.. 2021. 9. 24.
Express.js 프레임워크 시작하기 express 란? express는 node의 많은 프레임워크 중 하나이다. java script에서 jQuery가 있듯이 node.js에는 express가 있다. 누군가가 써놓은 코드 뭉치들인데 Express는 특히 웹 만들 때 코드들을 organize하고 structure하는데 도움을 준다. Node가 수동 스크루 드라이버라면 express는 전동 드라이버로 Node보다 간단한 코드로 웹 서버를 만들 수 있다. express 라이브러리 설치하기 익스프레스를 다운 받으려면 npm을 먼저 다운 받고 그 npm에서 express를 다운 받는다. 터미널에 npm install express 눌러서 다운받는다. node-modules 라이브러리에 필요한 자료를 담는 공간 관련된 라이브러리 담겨있음 새 Web .. 2021. 9. 22.
npm 사용하기 npm 이란? https://www.npmjs.com/ node 개발팀이 만든 코드 라이브러리 말고, 다른 사람들이 만든 라이브러리를 사용하려면 라이브러리 설치를 도와주는 도구인 npm을 다운 받고서 쓸 수 있다. 즉 npm은 external module을 쓰기 위함이다. NPM: Node Package Manager nodejs 다운 받을 때 같이 다운 받아진다 npm -v 눌러서 다운 받아졌나 확인하기 npm 다운 안되면 yarn으로 해도 된다. package.json 만들기 라이브러리 어떤 걸 썼는지 기록해 놓아야하는데 package.json 이 그 역할을 한다. npm 다운 받을 때 자동으로 같이 온다. 터미널에서 npm init을 치고 나서 프로그램이 읽어지면 만들 package 이름을 넣는다... 2021. 9. 22.
맥에서 Node.js 시작, 끝내기 | 로컬 파일에 접근하기 node.js 시작하기 REPL은 Read Evaluation Print Loop로 node.js 코드를 bite sized chucks로 실행할 수 있게한다 크롬 안에 있는 콘솔처럼 사용가능하다 NodeJS 다운 받을 때 Node REPL도 자동으로 같이 다운로드된다. REPL로 접근하려면 터미널에서 node를 치면된다. > 꺽쇠 모양이 나오면 REPL 안으로 들어 왔다라는 뜻이다. 하는 방식은 크롬 콘솔과 거의 비슷하다. 명령어가 생각이 안날 때 스펠링 조금만 쓰고서 Tap 2번 누르면 가능한 명령어들이 나온다. console. 명령어를 넣고 Tap 2번 누르면 가능한 명령어들이 쭉 나온다. node.js 끝내기 REPL 끝내기 방법1 .exit 방법2 control c (^c) 두번 누르기 Node.. 2021. 9. 22.
서버란? 식당 서빙하는 사람을 우리는 서버라고 한다. 손님이 "닭갈비 2인분 주세요"하면 갖다주고, "물 주세요" 하면 물 갖다 준다. 컴퓨팅에서의 서버도 마찬가지 역할을 합니다. 고객이 요구하는 것을 갖다 준다. 네이버 메인 페이지 누르면 서버에서 메인 페이지 사전 페이지 달라고 하면 사전 페이지 갖다준다. 내 컴퓨터로 갖다주면 브라우저가 해석해서 준다. 서버란? 요청을 받으면 요청한 내용을 보내주는 프로그램이다. 요청이란? HTTP 요청이라고도 부른다. 4가지 종류가 있다. 1. 읽기: GET요청 (나 이페이지 읽고 싶어. 이 페이지 html좀 갖다줘) 2. 쓰기: POST 요청 (생성해주세요 새 글, 댓글,,) 3. 수정: PUT 요청 4. 삭제: DELETE 그러면 서버 개발자는 이런 코드를 짜게 된다 어.. 2021. 9. 22.
자바스크립트 동작원리 stack, queue 자바스크립트를 작성하면 크롬, 사파리, 파이어팍스,,,같은 웹브라우저가 실행을 시킨다. html, css, js를 해석해 주는 엔진이 바로 브라우저 브라우저는 js를 해석하는 순서가 다른 언어와 다르다. 다른 언어들은 코드 쓴 순서대로 실행이 되지만 자바스크립트는 먼저 끝나는 것부터 결과가 나온다. 그 브라우저 동작원리에 대해 알아보자. 브라우저 동작원리 1. stack 브라우저가 js를 해석하는 단계가 있다. stack : 명령어 모아서 실행. 한 군데 밖에 없어서 한번에 한 줄밖에 실행을 못한다 (single threaded language) heap: 변수는 따로 저장해서 stack이 물어보면 알려줌 대기실로 보내지는 명령어 여기서 setTimeout같은 명령어는 기다렸다 실행해야하므로 stack에.. 2021. 9. 22.
Node JS란? 일단 html과 javascript가 무엇인지 알아보자. html 란? 웹페이지를 만들기 위한 언어이다 워드와 비슷하게 글 쓰고 그림넣는 언어 정적인 페이지만 가능하다 Javascript 란? HTML페이지에 종속된 언어이며 HTML을 조작하는 언어이다. 연산을 위해 만든 언어가 아니다. 자바스크립트는 누가 동작시키는 것일까? 브라우저가 동작시킨다. 각각 자바스크립트 동작시키는 브라우저 엔진들이 있다. 크롬: V8 인터넷익스플로어: Chakra 모질라: SpiderMonkey Node.js 의 시작 여기서 크롬의 V8 엔진을 따로 떼서 출시하게 되는데 이 것이 Node.js이다. 이로서 자바스크립트가 브라우저에서 벗어나 컴퓨터 하드웨어와 직접 소통하게 되었다. 내 컴퓨터에 있는 파일 시스템이나 네트워킹 .. 2021. 9. 22.
백엔드란? 프론트엔드란? 웹사이트 디자인 사용자와 인터렉트하는 언어 html,css, Bootstrap, Javascript, JQuery 백엔드란? 데이터베이스, 비지니스 로직, 서버 등 과 인터렉트하는 언어 java, c++, c#, python, NodeJS, Ruby 등등 풀스택 개발자는 프론트엔드와 백엔드 모두를 할 줄하는 개발자이다. 서버: html, css, js 파일 올라가는 곳 데이터베이스: 로그인, 패스워드등 정보 저장 2021. 9. 21.
유닉스 커멘드 라인(Unix Command Line) 강의 끝 매트리스나 다른 영화에서 천재 해커들이 검은 화면에 글자만 끝없이 나오는 장면들을 본 적이 있다. 천재들인 그들만이 이해하고 그들만의 세계인 줄 알았던 터미널 다루는 법을 배웠다. 강의에서 기초만 다룬 거긴 하지만 생각보다 단순하고 간단해서 놀랐다. 엄청난 천재적 능력이 필요한 건 아니었다. 계속 쓰다보면 CLI로 쓰는 것이 더 편해질 것같기도 하다. 그러려면 연습이 필요하겠지만. 이제 백엔드로 들어간다. NodeJS 를 배우는데 강의 시간이 짧다. NodeJS 기초는 38분밖에 되지 않는다. 빨리 끝내버려야징 2021. 9. 21.
커널, 쉘 | bash shell 이란? 커널, 쉘 이란? 커널과 쉘에 대해 알아보자. OS(operating system)이 피스타치오라고 하면, 진짜 먹을 수 있는 알맹이는 Kernel(커널)이다. 커널이란? 하드웨어와 소통하는 실제 프로그램이다. OS(operating system)의 핵심이다 쉘이란? 사람이 커널, 더 나아가 컴퓨터 하드웨어와 소통하기 위해 쓰는 장치를 말한다. 유저 인터페이스라고 한다. 인터페이스란? 명사) 두 시스템, 두 주제등이 만나고 소통하는 포인트 동사) 다른 시스템, 다른 사람등과 소통하다 컴퓨팅 용어로서는 명사) 유저가 컴퓨터와 소통할 수 있게 해주는 프로그램이나 장치 ex) a graphical user interface 동사) 인터페이스를 통해 다른 장치나 다른 컴퓨터에 연결하다 쉘의 종류 쉘은 2가지 종.. 2021. 9. 16.
맥에서 깃Git 설치하기 | xcrun: error 발생시 대처| git 버전 확인 / 에러 발생시 맥에는 git이 기본 설치되어 있다. 현재 컴퓨터에 있는 git의 버젼이 무엇인지 terminal에 물어본다 하지만 맥북인 경우 에러가 발생할 수 있다. 이런 경우 xcode command Line developer tool을 깔아줘야한다. xcode-select --install https://apple.stackexchange.com/questions/254380/why-am-i-getting-an-invalid-active-developer-path-when-attempting-to-use-git-a xcode 설치후 터미널에 git --version을 치면 지금 현재 버전이 나온다. git 설치하기 git이 설치되어 있지 않으면 Homebrew를 통해 git을 설.. 2021. 9. 16.
터미널 기본 명령어 터미널 여는 법 command + space 누르면 spotlight search가 나오고 거기서 terminal을 친다. 그러면 터미널이 열린다. ~ (tilde) 표시는 현재 root directory(user)에 있다는 의미이다. 터미널 명령어 directory pwd: print work directory 현재 있는 directory 알려줌 뭔가 지우기 전에는 지금 어디있는지 확인하고 지우기 ls: list 현재 디렉토리 안에 있는 파일 목록을 보여준다. 현재 user directory 안에 있어서 그 안에 있는 내용이 나옴 cd: change directory 특정 폴더 이동 root directory--> Pictures --> Screenshots 까지 이동해보기 1) 하나씩 적어주며 이동 .. 2021. 9. 16.
제이쿼리 끝 하지만 사이먼게임 만들기 어려워. 2021년 9월 11일 제이쿼리를 끝냈다. 그리고선 제이쿼리, 자바스크립트를 이용해서 다음 단계인 사이먼 게임 만들기를 시도하였다. 8단계 정도에서부터 코드가 이해 가지 않는다. 선생님이 이 게임 만드는 법을 설명을 강의로 만들지 않았다. 글로 설명만 되어있다. 하지만 읽어도 잘 이해가 되지 않는다. 처음부터 다시 코드를 차분히 봐야할 것같다. 시간이 필요할 것이다. 일단 진도를 그 다음 단계인 The Unix Command Line으로 먼저 나가고 나중에 앞부분들을 복습하고서 다시 도전해야할 것같다. 여기 캐나다는 여름이 끝나가니 코로나가 다시 심해지고 있다. 부디 별 탈없길 바란다. 2021년 9월 13일 터미널 다루는 것으로 갈려고 했으나 맥북에 하이퍼 터미널 다운 받는 것부터 막혀서 한 참 걸린다.. 2021. 9. 11.
jQuery] 사이먼 게임 만들기 The Simon Game 먼저 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 기계가 선택해 준 컬러를 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째 컬러와 방금 선택된 컬러, 두 개를 순서대로 클릭해야한다. 또 기계에서 랜덤 컬러 하나가 선택된다. 사용자는 첫번째, 두번째 컬러와 방금 선택된 컬러, 세 개를 순서대로 클릭해야한다. 계속 이렇게 진행되고 사용자가 기계에서 나온 순서와 다른 컬러를 선택하면 게임이 끝난다. 자바스크립트, 제이쿼리 이용해서 코드 짜기 기계에서 랜덤 컬러 선택하기 ✔️ 색이 들어가는 array를 하나만든다 -> buttonColours ✔️ 0~3 랜덤 숫자를 뽑아서 randomNumber에 담는다. ✔️ 나온 숫자로 buttonColours array에서 해당 컬러 뽑아낸 후 .. 2021. 9. 8.
jQuery] 애니메이션 효과 hide( ), show( ), toggle( ) hide( ): 숨기기 기능 h1 클릭시 h1 숨김 show( ): 숨은 글자 다시 보이게 하기 toggle( ): 접었다 폈다하기 접었다 폈다 토글하기 버튼 눌렀을 때 h1이 생겼다 사라졌다하기 fadeOut( ), fadeIn( ), fadeToggle( ) fadeOut() : 천천히 사라짐 fadeIn(): 천천히 나타남 fadeToggle( ): fade in, fade out 됨 slideUp( ), slideDown( ), slideToggle( ) slideUp( ): 아래에서 위로 접힘 slideDown( ): 위에서 아래로 펴짐 slideToggle( ): 위 아래로 접었다 펴졌다함 animate( { css내용 } ) 숫자 벨류를 갖는.. 2021. 9. 7.
jQuery] elements 추가, 삭제하기 다음과 같은 웹사이트가 있다. elements 추가하기 before( ) h1 앞에 버튼 element를 추가하고 싶다면 before( ) 메소드를 사용한다. 버튼이 생성되었다. after( ) h1 뒤에 버튼 element를 추가하고 싶다면 after( ) 메소드를 사용한다. 버튼이 생성되었다. prepend( ) h1 안 text 앞에 버튼이 생긴다 append( ) h1 안 text 뒤에 버튼이 생긴다 elements 제거하기 2021. 9. 7.
jQuery] eventListener 추가하기 / on( ) / loop 하는 법 자바스크립트에서의 eventListener 어떻게 써줄까? 타겟.eventListener("이벤트","함수") 자바스크립트에서 h1 클릭시 글자색을 바꾸고 싶다면 아래처럼 코드를 작성해야 했다. 하지만 제이쿼리에서는 eventListener를 써주지도 않는다. 타겟 뒤에 바로 어떤 event할 지 써주고 나서, 함수를 바로 써주면 된다. 자바스크립트에서 eventListener + for loop 조합을 제이쿼리에서는 어떻게 할까? eventListener + for loop 조합이었을 때 button 5개에 eventlistener가 적용될려면 querySelectorAll("button")[i]를 for loop으로 돌려서 하나씩 적용되도록 하였었다. 하지만 jquery에서는 선택된 모든 아이템에 c.. 2021. 9. 5.
jQuery] attributes 변경하기 HTML가 이렇게 세팅되어있을 때 빨간 박스가 attributes이다. jQuery로 attribute 보는 법 이미지 태그 안 scr attribute보기 drum.png라고 나옴 a 태그 안에 있는 attribute보기 클래스 보기 class도 attribute이다. jQuery로 attribute 세팅 하는법 href를 구글에서 네이버로 변경해보기 attr() 메소드의 첫 번째 인풋은 뭘 바꿀지 두 번째 인풋은 뭘로 바꿀지를 적으면 된다. 클래스 추가/ 삭제는 .addClass("") .removeClass("")로 한다. 2021. 9. 3.

티스토리툴바