잡동구리들

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

The Hunger Games. 영화 소개로 스토리를 조금은 알고 있어서 어떤 내용인지 파악은 됐는데...이전에 읽은 Lois Lowry 책들에 비해 단어 수준이 갑자기 수직 상승한 느낌이다. 시리즈 3권 읽는 동안 단어 때문에 고생할게 눈에 보인다.

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

The Hunger Games. 역시 처음은 어렵다.

1. Hoisting(호이스팅)

어디에 선언했느냐에 상관없이 항상 제일 위로 선언을 끌어올려 주는 것

2. Method(메소드)

object(객체)의 property 값이 function(함수)일 경우, 일반 function과 구분하기 위해 method라고 부른다. 즉 method는 object에 제한되어 있는 fucntion를 의미한다. 

3. JSON(JavaScript Object Notation)

서버와 클라이언트 간의 Data 교환 형식

4. JavaScript

JavaScript(자바스크립트)는 웹 페이지와 상호작용하도록 만들어진 언어 

5. Function(함수)

하나의 특정한 작업을 수행하도록 설계된 독립적인 블록

6. Scope(변수 영역)

변수 영역은 변수가 유효성을 갖는 영역을 가리킨다. 

7. Object-oriented(객체 지향)

객체지향 프로그래밍이란, 프로그램을 객체들로 구성하고, 객체들 간에 서로 상호 작용 하도록 작성하는 방법이다.

8. [React]side-effect

함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위

(ex. 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, API로부터 유저 목록을 받아올때 해당 데이터를 호출하는 경우)

9. [React]state

화면에 보여줄(렌더링) 데이터(값)를 가지고 있는 객체(혹은 값 그 자체). 즉, 정보!(상태)

10. ORM(Object-Relational Mapping)

데이터베이스의 체계(테이블과 컬럼 등)를 클래스(객체)와 연관지어 사고하는 패러다임

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Fluent Forever 끝.
오전에 미국 시트콤 How I met your mother S1E17편을 무자막으로 봤다. 올해 초반에만 해도 쉐도잉으로 열씸히 달리던 시트콤이라서 보는데 따로 배경 지식은 필요 없었다. 간만에 봤더니 뭔가 조금 들리기도 하고, 아무래도 책이랑은 다르게 인물들의 표정이나 행동에서 무슨 말을 할지 어느정도 예측이 되기 때문에 전체적인 흐름을 파악하는데 조금 수월했던것 같다. 100% 이해해야된다는 강박을 버리니까 그냥 재밌게 봤던 것 같다. 앞으로는 하루에 한편씩이라도 이렇게 그냥 봐야겠다.

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Fluent Forever. 문장은 쉬운것 같은데...뭔가 내용이 머리속에 안박히는 기분이다.

오류 1

"SyntaxError: Unexpected token k in JSON at position 6" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 맨 마지막 값에 콤마(,)가 들어가 있으면 발생 ==> 콤마(,) 제거로 해결

오류 2

"SyntaxError: Unexpected token } in JSON at position 99" 에러

발생 원인 및 해결 : JSON 데이터를 만들때 키값이 쌍따옴표("")로 감싸져 있지 않으면 발생  ==> 쌍따옴표("") 추가로 해결

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Fluent Forever. 오늘 읽은 부분은 뭔가 문장 자체는 바로 직전에 읽었던 소설에 비해서는 간결하고 쉬웠는데, 내용이 머리에 안들어온 느낌이다. 이 책은 번역본으로 다시 한번 봐야 할 것 같다. 

상태 코드는 3자리 숫자로 만들어져 있으며, 첫번째 자리는 1에서 5까지 제공된다. 첫번째 자리가 4와 5인 경우는 정상적인 상황이 아니기 때문에 사이트 관리자가 즉시 알아야 하는 정보다.

• 1xx(정보) : 요청을 받았으며 프로세스를 계속 진행
• 2xx(성공) : 요청을 성공적으로 받았으며 인식했고 수용함
• 3xx(리다이렉션) : 요청 완료를 위해 추가 작업 조치가 필요
• 4xx(클라이언트 오류) : 요청의 문법이 잘못되었거나 요청을 처리할 수 없음
• 5xx(서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패

지금까지 컴퓨터를 하면서 가장 자주 접하는 상태 코드는 역시나 "404 Not Found"가 아닐까 싶다. 서버가 요청한 페이지를 찾을 수 없다는 의미로 서버에 존재하지 않는 페이지에 대한 요청이 있을 경우 서버에서 이 코드를 제공한다.

있어야 할 페이지가 갑자기 사라진다면, 개발자 마음은 어떨까..?

response는 어떠한 작업을 요청한 곳에 무엇인가를 돌려주는 역할을 한다. 

app.get('/', (req, res) => {
  res.send()
  res.json({ message: "'I'm Jason Mraz." })
  res.end()
})

• res.send() : 정보를 돌려보내 주는 가장 기본적인 역할을 수행한다. 
• res.json() : 정보를 돌려보내긴하는데, json 형태로 바꿔서 돌려준다.
• res.end() : 주로 서버가 작동을 안하거나 오류가 있을 경우, 특정 문구를 나타내고 응답을 종료하고자 할 때 사용된다.

Node.js의 http 모듈과 express 프레임워크로 server를 생성하는 방법중 가장 큰 차이점은 바로...

routing과 modularization(모듈화)이다. 

앱이나 웹의 규모가 커지면 커질수록 코드는 복잡해 질수밖에 없는데 라우팅이나 모듈을 사용하지 않을 경우, 아래 코드와 같이 조건문으로 분기해서 다른 로직을 처리하게끔 해주어야 한다. 

const http = require('http')
const { sendPosts } = require('./sendPosts')

const server = http.createServer((req, res) => {
  const { url, method } = req
  res.setHeader('Content-Type', 'application/json')

  if (url === '/') return res.send({ message: '/ endpoint' })
  if (url === '/signup' && method === 'POS') return res.end(JSON.stringify({ message: '회원가입 완료!' }))
  if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
  if (url === '/products' && method === 'GET') return sendPosts(res)

  res.send(JSON.stringify({ message: 'this response answers to every request' }))
})

server.listen(8080, () => { console.log('server is listening on PORT 8000')})

하지만 express 프레임 워크를 쓴다면, 아래와 같이 조금 더 간결하게 코드를 구성할 수 있게 된다. 

const http = require('http')
const express = require('express')
const { sendPosts } = require('./postings')

const app = express()
app.use(express.json())

app.get('/', (req, res) => {
  res.json({ message: '/ endpoint' })
})

app.post('/signup', handleSignUp) // 첫번째 인자에는 endpoint url 을 기입하고,
app.post('/login', handleLogin) // 각각의 요청에 대해 핸들링 하는 함수를 두번째 인자로 넣는다.
app.get('/products', sendPosts)

const server = http.createServer(app)

server.listen(8000, () => {
  console.log('server is listening on PORT 8000')
})

UI(User Interface)란?

사용자(User)가 컴퓨터와 의사소통을 가능하게 만드는 접점(Interface)을 의미한다.

하드웨어로는 키보드, 조이스킥, 마우스 등등이 있고, 소프트웨어로는 웹페이지, 터미널 등등이 UI라고 할 수 있다. 

API

컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 즉, 프로그램들이 서로 상호작용하는 것을 도와주는 매개체라고 볼 수 있다. 

Study Planner(Google Spredsheet)

Book Library(Notion)

Today I Read

Son. 재밌게 잘 읽었다. 내일부터는 Fluent Forever 다시 시작!