Buang

* 코드잇 강의를 보면서 필기한 필기록입니다. JSON이란? JSON은 Java Script Object Notaion의 줄임말이다. 어떤 정보를 교환할 때 만들어진 데이터 포멧(형식)이다. 예시로?@@ 자바스크립트 문법을 빌려서 만들어진 데이터 포멧이다. 자바크스립트 문법을 기반으로 했기에 JSON 문법은 자바스크립트 문법과 유사하다. JSON의 형태 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => {console.log(result); }); 위의 코드를 크롬에서 개발자 모드(ctrl+shift+i)를 켜서 실행하면 아래와 같은 결과가 뜬다. 중괄호 안에서 각..

매개변수(파라미터)란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수다. 이게 도대체 무슨 소리일까. 이 매개변수는 '믹서기에 들어가는 재료를 넣을 공간'이라고 생각하면 된다. function 믹서기(재료 넣을 공간1, 재료 넣을 공간2) { //재료 넣을 공간 1엔 '사과'가 들어가고, 2엔 '당근'이 들어간다. 음식을 갈아서 주스를 만든다.; } console.log(믹서기(사과, 당근)); // 믹서기에 넣을 재료인 '사과'와 '당근'을 넣어줬다. 예를 들어서 위의 코드와 같이 '음식을 갈아서 주스를 만든다'는 목적을 가지고 있는 믹서기 함수(function)가 하나 있다고 하자. 나는 사과당근 주스를 만들고 싶어서 재료로 사과와 당근을 넣어줬다. 이를 표현한 부분이 con..

* 코드잇 강의 필기록입니다. * 필기록이라 정확하지 않은 글이 있을 수 있습니다. fetch 함수에 대해 살펴보기 전에 알아야 할 것 fetch 함수는 서버에 요청을 보내고, 응답을 받을 수 있게 해주는 함수다. 글만 봐선 바로 이해가 안 갈 수 있다. 이 fetch 함수에 대해 이해하기 위해선 우선 웹 브라우저의 요청과 응답에 대해 알아야 한다. 웹 브라우저가 서버에게 보내는 요청을 request(요청하다)라 하고 서버가 웹 브라우저에게서 받은 요청을 기반으로 응답 하는 걸 respond(응답하다)라고 한다. 예시를 들자면 내가 웹사트 주소창에 google.com 이라고 입력하면 '서버야! 구글 사이트 좀 나한테 보여줘!'라는 요청이 된다. 이 요청을 서버가 받아서 '구글 사이트 여기있어!'하면서 네..

프론트는 리액트로 백앤드는 Node.js로 해서 사용자가 입력한 두 개의 값을 출력하는 CURD 시스템 포트는 총 3000과 3001 2개를 사용했다. // import React, { useState, useEffect } from 'react'; import React from "react"; import './App.css'; // import Axios from 'axios' // 백앤드에 있는 걸 호출하기 위해 // movieName: movieName 작성 function App() { // const [movieName, setMovieName] = useState(''); // const [review, setReview] = useState(''); // const submitReview..

__dirname은 directoryname의 약자로 현재 파일의 (절대)경로를 의미한다. const express = require('express'); const app = express(); app.use(express.static(__dirname)); 만약 위와 같은 코드가 있고 해당 코드가 저장된 파일 이름이 study.js라 해보자. 위의 코드 파일(study.js)이 저장된 (절대)경로가 /Users/buang/study.js 라면 즉 Users라는 폴더 안으로 들어간 뒤 buang이란 폴더로 또 들어가야 study.js란 파일이 저장되어 있다면 __dirname은 현재 파일 이름인 study.js를 제외한 /Users/buang를 의미하게 된다. app.use(express.static(..

1. 문제 흔한 수학 문제 중 하나는 주어진 점이 어느 사분면에 속하는지 알아내는 것이다. 사분면은 아래 그림처럼 1부터 4까지 번호를 갖는다. "Quadrant n"은 "제n사분면"이라는 뜻이다. 예를 들어, 좌표가 (12, 5)인 점 A는 x좌표와 y좌표가 모두 양수이므로 제1사분면에 속한다. 점 B는 x좌표가 음수이고 y좌표가 양수이므로 제2사분면에 속한다. 점의 좌표를 입력받아 그 점이 어느 사분면에 속하는지 알아내는 프로그램을 작성하시오. 단, x좌표와 y좌표는 모두 양수나 음수라고 가정한다. https://www.acmicpc.net/problem/14681 14681번: 사분면 고르기 점 (x, y)의 사분면 번호(1, 2, 3, 4 중 하나)를 출력한다. www.acmicpc.net 2. ..

마법사의 주문 등록소, 환경변수 환경변수란 '프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임'이라고 위키피디아에 서술되어 있다. 말이 어렵다. 쉽게 말해 환경변수는 '마법사의 주문을 등록하는 곳'이다. 마법사가 '문아 열려라!'라는 주문을 외치면 문이 자동으로 열리고, '맛있는 초코 쿠키가 눈 앞에 나타나라!'는 주문을 외치면 초코 쿠기가 나타나는 마법을 일으키는 것처럼 우리도 컴퓨터 상에서 마법의 주문 등록해서 사용할 있다. 나는 마법의 주문으로 dragon.txt! 를 만들 예정이다. dragon.txt란 주문을 내가 컴퓨터의 cmd창에 외치면 용이 등장하는 주문이다. 실제로는 dragon.txt란 메모장 파일에 저장된 '용 등장!!!'이란 문구가 우리 눈에 보이는 거지만 상상..

express가 뭘까? express는 서버를 구현할 수 있게 해주는 프레임워크다. 서버를 구현한다는 건 뭐고, 프레임워크는 또 무슨 소리일까? 일단 서버를 구현한다는 건 사용자가 naver.com이란 주소를 입력했을 때 naver 사이트 화면이 보여질 수 있도록 만들어 주는 걸 서버를 구현했다고 할 수 있다. 주소창에 아무거나 막 입력해보자. 가령 afsjdfiofwea.dsafad 이런 식으로. 결과로 어떤 화려한 사이트가 뜨진 않는다. 검색 결과가 없다고 한다. 우리가 naver.com을 입력했을 때 naver 사이트를 볼 수 있는 건 naver란 회사에서 서버를 구현해서 naver 사이트를 제작한 다음 사람들이 naver.com을 주소창에 입력했을 때 naver 회사에서 제작한 naver 사이트가..

http 모듈이란? http 모듈 사용방법 req와 res는 뭘까? http 모듈이란? A라는 사용자가 컴퓨터 주소창에 naver.com이라고 입력했다 가정해 보자. A 사용자의 행동은 'naver 사이트 좀 보여줘!'가 될 것이다. 이런 A 사용자의 요청(request)에 누군가가 응답해 줘야 한다. A 사용자의 요청은 Naver의 서버 컴퓨터가 받아서 A 사용자에게 naver 사이트를 보여주는, 즉 A 사용자의 요청에 응답(response)을 해준다. 만약 A 사용자가 naver.com이 아닌 daum.net처럼 다음 사이트 주소를 입력했다면 A 사용자의 요청에는 Naver 서버 컴퓨터가 아닌 Daum 서버 컴퓨터가 응답 해줬을 것이다. 이렇게 사용자(클라이언트)의 요청(request)에 응답(res..

1. 모듈의 정의 2. 모듈 사용 방법 1. 모듈의 정의 모듈은 프로그램 내부를 기능별 단위로 분할한 부분이다. 쉽게 말해 모듈은 '부품'이라고 보면 된다. 레고를 조립할 때 가로 5cm, 세로 10cm인 레고 부품과 가로 세로가 10cm 짜리인 납작한 레고 부품 등 서로 다른 크기와 모양을 가진 레고 부품을 이용해서 작품을 만드는 것처럼 프로그램이라는 작품을 만들 때도 모듈(부품)들을 조립해서 만들 수 있다. 보통 웹 서비스에서 공통적으로 사용되는 기능이 회원가입과 로그인, 그리고 게시판에 글쓰기 기능이 있다. 이런 기능을 모듈(부품)로 만들어 놓으면 내가 A라는 사이트를 만들 때 회원가입 부분 코드를 처음부터 작성하지 않고, 다른 사람이 만든 회원가입 모듈(부품)을 이용하면 쉽고 빠르게 회원가입 페이..