Skip to main content

200711

HTTP#

HyperText Transfer Protocol


2021-04-05-200711-image-0


2021-04-05-200711-image-1

ํด๋ผ์ด์–ธํŠธ๋Š” ์„œ๋ฒ„์—๊ฒŒ HTML ํŒŒ์ผ์„ ์š”์ฒญ(Request), ์„œ๋ฒ„๋Š” ์‘๋‹ต(Response)

Request Message#

  • GET /1.html HTTP/1.1 => ์š”์ฒญํ–‰

  • Host: localhost:8080 => ๋„คํŠธ์›Œํฌ์˜ ์ปดํ“จํ„ฐ ์‹๋ณ„ํ•˜๋Š” ์ด๋ฆ„

  • User-Agent : ... => ์œ ์ € ์ปดํ“จํ„ฐ, ์›น๋ธŒ๋ผ์šฐ์ € ์ •๋ณด

  • Accept-Encoding : gzip, deflate, br => ๋ฐ์ดํ„ฐ ์–‘์ด ๋งŽ์œผ๋ฉด ์••์ถ•ํ•ด์„œ ์ „์†กํ•˜๋Š”๋ฐ, ์–ด๋–ค ์••์ถ•๋ฐฉ์‹์„ ์ง€์›ํ•˜๋Š”์ง€ ์„ค๋ช…

  • If-Modified-Since: => ๋งˆ์ง€๋ง‰์œผ๋กœ ํŽ˜์ด์ง€๋ฅผ ๋‹ค์šด๋ฐ›์€๊ฒŒ ์–ธ์ œ์ธ์ง€ ํ™•์ธํ•˜์—ฌ ๋‹ค์‹œ ๋‹ค์šด๋ฐ›์„์ง€ ๊ฒฐ์ •

  • <blank line> => ๋ธ”๋žญํฌ๋กœ ํ—ค๋”์™€ ๋ฐ”๋”” ๊ตฌ๋ถ„

  • Request Message Body

Response Message#

2021-04-05-200711-image-2

  • status : ์„œ๋ฒ„์˜ ์‘๋‹ต ๊ฒฐ๊ณผ๋ฅผ ์•Œ๋ ค์คŒ.


๊ทธ ์™ธ#

  • HTTPS, SSL

  • Cache

  • cookie

  • web storage

  • proxy

200301

์ธํ„ฐ๋„ท ๊ฐ•์ขŒ๋กœ๋Š” ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ์ ๋“ค์ด ๋งŽ์•„์„œ '์ธ์‚ฌ์ด๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ebook์„ ๊ตฌ์ž…ํ•ด ๊ณต๋ถ€ํ•œ๋‹ค.

์ด ๊ธ€์€ ๊ณ ํ˜„์ค€, ์†กํ˜•์ฃผ ๋‹˜์˜ ์ธ์‚ฌ์ด๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.

JavaScript ๋ฐ์ดํ„ฐ ํƒ€์ž…๊ณผ ์—ฐ์‚ฐ์ž#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ’๋“ค์€ ํฌ๊ฒŒ ๊ธฐ๋ณธ ํƒ€์ž…๊ณผ ์ฐธ์กฐ ํƒ€์ž…์œผ๋กœ ๋‚˜๋‰œ๋‹ค.

  • ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ํƒ€์ž…

    • ์ˆซ์ž

    • ๋ฌธ์ž์—ด

    • boolean

    • null

    • undefined

  • ์ฐธ์กฐ ๋ฐ์ดํ„ฐ ํƒ€์ž…

    • ๊ฐ์ฒด

      • ๋ฐฐ์—ด

      • ํ•จ์ˆ˜

      • ์ •๊ทœํ‘œํ˜„์‹

๋ฐฐ์—ด, ํ•จ์ˆ˜, ์ •๊ทœํ‘œํ˜„์‹์ด ๋ชจ๋‘ ๊ฐ์ฒด์— ์†ํ•˜๋Š” ๊ฐœ๋….


๊ธฐ๋ณธ ํƒ€์ž…#

๊ธฐ๋ณธ ํƒ€์ž…์˜ ํŠน์ง•์€ ๊ทธ ์ž์ฒด๊ฐ€ ํ•˜๋‚˜์˜ ๊ฐ’์„ ๋‚˜ํƒ€๋‚ธ๋‹ค๋Š” ๊ฒƒ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋Š์Šจํ•œ ํƒ€์ž… ์ฒดํฌ ์–ธ์–ด๋‹ค. C๋‚˜ Java ๋“ฑ์˜ ์—„๊ฒฉํ•œ ํƒ€์ž… ์ฒดํฌ ์–ธ์–ด๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ๋ณ€์ˆ˜์— ์ €์žฅํ•  ๋ฐ์ดํ„ฐ ์ข…๋ฅ˜์— ๋”ฐ๋ผ char, int, float ๋“ฑ์˜ ์˜ˆ์•ฝ์–ด๋ฅผ ์ด์šฉํ•ด์„œ ๋ณ€์ˆ˜์˜ ๋ฐ์ดํ„ฐ ํƒ€์ž…์„ ์ง€์ •ํ•œ๋‹ค.

๋ฐ˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ ํƒ€์ž…์„ ๋ฏธ๋ฆฌ ์ •ํ•˜์ง€ ์•Š๊ณ  var (let, const) ๋ผ๋Š” ํ•œ ๊ฐ€์ง€ ํ‚ค์›Œ๋“œ๋กœ๋งŒ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ๋‹ค.

var intNum = 10;
var floatNum = 0.1;
var singleQuoteStr = "Single quote string";
var doubleQuoteStr = "Double quote string";
var singleChar = "a";
var boolVar = true;
var emptyVar;
var nullVar = null;
console.log(
typeof intNum, // number
typeof floatNum, // number
typeof singleQuoteStr, // string
typeof doubleQuoteStr, // string
typeof boolVar, // boolean
typeof emptyVar, // undefined
typeof nullVar //object
);

์ˆซ์ž#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ๋ชจ๋“  ์ˆซ์ž๋ฅผ 64๋น„ํŠธ ๋ถ€๋™ ์†Œ์ˆ˜์  ํ˜•ํƒœ๋กœ ์ €์žฅํ•œ๋‹ค.

intNum๊ณผ floatNum ๋ณ€์ˆ˜ ๋ชจ๋‘ typeof ์—ฐ์‚ฐ์ž์˜ ๊ฒฐ๊ณผ๊ฐ’์ด number ํƒ€์ž…์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ •์ˆ˜ํ˜•์ด ๋”ฐ๋กœ ์—†๊ณ  ๋ชจ๋“  ์ˆซ์ž๋ฅผ ์‹ค์ˆ˜๋กœ ์ฒ˜๋ฆฌํ•˜๋ฏ€๋กœ ๋‚˜๋ˆ—์…ˆ ์—ฐ์‚ฐ์„ ํ•  ๋•Œ 5/2 ์˜๊ฒฝ์šฐ 2๊ฐ€ ์•„๋‹ˆ๋ผ 2.5๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.

var num = 5 / 2;
console.log(num); // 2.5
console.log(Math.floor(num)); // 2

๋ฌธ์ž์—ด#

๋ฌธ์ž์—ด์€ ์ž‘์€ ๋”ฐ์˜ดํ‘œ๋‚˜ ํฐ ๋”ฐ์˜ดํ‘œ๋กœ ์ƒ์„ฑํ•œ๋‹ค. typeof์˜ ๊ฒฐ๊ณผ๋Š” string์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” C์–ธ์–ด์˜ char ํƒ€์ž…๊ณผ ๊ฐ™์ด ๋ฌธ์ž ํ•˜๋‚˜๋งŒ์„ ๋ณ„๋„๋กœ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ์ดํ„ฐ ํƒ€์ž…์€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

์ฃผ์˜ํ•ด์•ผํ•  ์ ์€ ํ•œ ๋ฒˆ ์ •์˜๋œ ๋ฌธ์ž์—ด์€ ๋ณ€ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. (immutable)


๋ถˆ๋ฆฐ๊ฐ’#

true, false๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ถˆ๋ฆฐ ํƒ€์ž…์ด๋‹ค.


null๊ณผ undefined#

์ด ๋‘ ํƒ€์ž…์€ ๋ชจ๋‘ '๊ฐ’์ด ๋น„์–ด์žˆ์Œ'์„ ๋œปํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ ๋‚ด์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ’์ด ํ• ๋‹น๋˜์ง€ ์•Š์€ ๋ณ€์ˆ˜๋Š” undefined ํƒ€์ž…์ด๋ฉฐ, undefined ํƒ€์ž…์˜ ๋ณ€์ˆ˜๋Š” ๋ณ€์ˆ˜ ์ž์ฒด์˜ ๊ฐ’ ๋˜ํ•œ undefined์ด๋‹ค. ์ด์ฒ˜๋Ÿผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ undefined๋Š” ํƒ€์ž…์ด์ž, ๊ฐ’์„ ๋‚˜ํƒ€๋‚ธ๋‹ค

null ํƒ€์ž… ๋ณ€์ˆ˜์˜ ๊ฒฝ์šฐ๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ช…์‹œ์ ์œผ๋กœ ๊ฐ’์ด ๋น„์–ด์žˆ์Œ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.

์ฃผ์˜ํ•  ์ ์€ null ํƒ€์ž… ๋ณ€์ˆ˜์˜ typeof ๊ฒฐ๊ณผ๊ฐ€ null์ด ์•„๋‹ˆ๋ผ object๋ผ๋Š” ๊ฒƒ์ด๊ณ  ๋”ฐ๋ผ์„œ null ํƒ€์ž… ๋ณ€์ˆ˜์ธ์ง€ ํ™•์ธํ•  ๋•Œ typeof ์—ฐ์‚ฐ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์•ˆ๋˜๊ณ , ์ผ์น˜ ์—ฐ์‚ฐ์ž(===)๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ง์ ‘ ํ™•์ธํ•ด์•ผ ํ•œ๋‹ค.

var nullVar = null;
console.log(typeof nullVar === null);
console.log(nullVar === null);

์ฐธ์กฐ ํƒ€์ž…(๊ฐ์ฒด ํƒ€์ž…)#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ์ˆซ์ž, ๋ฌธ์ž์—ด, boolean, null, undefined ๊ฐ™์€ ๊ธฐ๋ณธ ํƒ€์ž…์„ ์ œ์™ธํ•œ ๋ชจ๋“  ๊ฐ’์€ ๊ฐ์ฒด๋‹ค.

๋”ฐ๋ผ์„œ ๋ฐฐ์—ด, ํ•จ์ˆ˜, ์ •๊ทœํ‘œํ˜„์‹ ๋“ฑ๋„ ๋ชจ๋‘ ๊ฒฐ๊ตญ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ํ‘œํ˜„๋œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด๋Š” ๋‹จ์ˆœํžˆ '์ด๋ฆ„(key):๊ฐ’(value)' ํ˜•ํƒœ์˜ ํ”„๋กœํผํ‹ฐ๋“ค์„ ์ €์žฅํ•˜๋Š” ์ปจํ…Œ์ด๋„ˆ๋กœ์„œ, ์ปดํ“จํ„ฐ ๊ณผํ•™ ๋ถ„์•ผ์—์„œ ํ•ด์‹œ(hash)๋ผ๋Š” ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์ƒ๋‹นํžˆ ์œ ์‚ฌํ•˜๋‹ค.

๊ฐ์ฒด๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ธฐ๋ณธ ํƒ€์ž…์˜ ๊ฐ’์„ ํฌํ•จํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ ์ˆ˜๋„ ์žˆ๋‹ค. ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋Š” ํ•จ์ˆ˜๋กœ ํฌํ•จํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ด๋Ÿฌํ•œ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฉ”์†Œ๋“œ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.


๊ฐ์ฒด ์ƒ์„ฑ#

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ ์„ธ ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  • Object() ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด์šฉ
var foo = new Object();
foo.name = "foo";
foo.age = 30;
foo.gender = "male";
console.log(typeof foo); // object
console.log(foo); // { name: 'foo', age: 30, gender: 'male' }
  • ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹ ์ด์šฉ
var foo = {
name: "foo",
age: 30,
gender: "male",
};
console.log(typeof foo); // object
console.log(foo); // { name: 'foo', age: 30, gender: 'male' }

์ค‘๊ด„ํ˜ธ๋ฅผ ์ด์šฉํ•ด์„œ ์ƒ์„ฑ, {} ์•ˆ์— ์•„๋ฌด๊ฒƒ๋„ ์ ์ง€ ์•Š์€ ๊ฒฝ์šฐ ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.

  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ์ด์šฉ

์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ์— ๋‹ค๋ฃฌ๋‹ค.


๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ์ฝ๊ธฐ/์“ฐ๊ธฐ/๊ฐฑ์‹ #

๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•

  • ๋Œ€๊ด„ํ˜ธ ( [] ) ํ‘œ๊ธฐ๋ฒ•

  • ๋งˆ์นจํ‘œ ( . ) ํ‘œ๊ธฐ๋ฒ•

var foo = {
name: "foo",
major: "computer science",
};
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ์ฝ๊ธฐ
console.log(foo.name); // foo
console.log(foo["name"]); // foo
console.log(foo.nickname); // undefined
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ๊ฐฑ์‹ 
foo.major = "electronics engineering";
console.log(foo.major); // electronics engineering
foo["major"] = "digital media";
console.log(foo["major"]); // digital media
// ๊ฐ์ฒด ํ”„๋กœํผํ‹ฐ ๋™์  ์ƒ์„ฑ
foo.age = 30;
console.log(foo.age); // 30
foo["gender"] = "male";
console.log(foo["gender"]); // male

๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์˜ ๊ฒฝ์šฐ ์ ‘๊ทผํ•˜๋ ค๋Š” ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ๋ฌธ์ž์—ด ํ˜•ํƒœ๋กœ ๋งŒ๋“  ๋‹ค์Œ ๋Œ€๊ด„ํ˜ธ๋กœ ๋‘˜๋Ÿฌ์‹ธ์•ผ ๋œ๋‹ค.

๋งŒ์•ฝ ๋ฌธ์ž์—ด ํ˜•ํƒœ๋กœ ๋งŒ๋“ค์ง€ ์•Š๊ณ  foo[name] ๋กœ ์ ‘๊ทผํ•œ๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” name ์ด๋ผ๋Š” ๋ณ€์ˆ˜ ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ์ฐพ์•„ toString() ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๊พธ๋ ค๋Š” ์‹œ๋„๋ฅผ ํ•œ๋‹ค.


๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ• ๋งŒ์„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์ ‘๊ทผํ•˜๋ ค๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ํ‘œํ˜„์‹์ด๊ฑฐ๋‚˜ ์˜ˆ์•ฝ์–ด์ผ ๊ฒฝ์šฐ, ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•๋งŒ์„ ์ด์šฉํ•ด์„œ ์ ‘๊ทผํ•ด์•ผ ํ•œ๋‹ค. ex) foo['full-name']


๊ฐ์ฒด ์†์„ฑ ์ด๋ฆ„ ์ง“๊ธฐ#

์  ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์†์„ฑ์˜ ์ด๋ฆ„์ด ์‹๋ณ„์ž ๊ทœ์น™์„ ๋”ฐ๋ผ์•ผ ํ•œ๋‹ค. ์‹๋ณ„์ž ๊ทœ์น™์„ ๋”ฐ๋ฅผ ๊ฒฝ์šฐ ์†์„ฑ์˜ ์ด๋ฆ„์„ '' ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹๋ณ„์ž ์ฝ”๋“œ ๋‚ด์˜ ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ์†์„ฑ์„ ์‹๋ณ„ํ•˜๋Š” ๋ฌธ์ž์—ด ๋Œ€์†Œ๋ฌธ์ž๋ฅผ ๊ตฌ๋ณ„ํ•˜๋ฉฐ ์œ ๋‹ˆ์ฝ”๋“œ ๊ธ€์ž, $ , _ ,์ˆซ์ž(0-9)๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•  ์ˆ˜๋Š” ์—†๋‹ค.

๐Ÿ”—MDN web docs - ์‹๋ณ„์ž


๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์—์„œ๋Š” ๋ฌธ์ž์—ด์ด๋‚˜ Symbol์„ ์†์„ฑ์˜ ์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ์œ ํšจํ•œ ์‹๋ณ„์ž๊ฐ€ ์•„๋‹ˆ์–ด๋„ ๋œ๋‹ค. 1foo , !bar! , ์‹ฌ์ง€์–ด ๊ณต๋ฐฑ ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” foo['name'] ์ฒ˜๋Ÿผ ' ' ๋กœ ๊ฐ์‹ธ์ฃผ์–ด์•ผ ํ•œ๋‹ค.


๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด ๋ฐฉ์‹์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์˜ค์ง ์ˆซ์ž๋กœ ๊ตฌ์„ฑ๋œ ์†์„ฑ ์ด๋ฆ„์ด ' ' ๋กœ ๊ฐ์‹ธ์ง€ ์•Š์•„๋„ ๊ฐ€๋Šฅํ•œ๋ฐ (์‹๋ณ„์ž ๊ทœ์น™์— ์–ด๊ธ‹๋‚จ.) ์ด ์ด์œ ๋Š” ์•„์ง ์ž˜ ๋ชจ๋ฅด๊ฒ ์Œ. ์ˆซ์ž๊ฐ€ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๋€Œ๋Š” ํŠน์ง•์ด ์žˆ๋Š” ๊ฒƒ ๊ฐ™์Œ. ์ด ๊ฒฝ์šฐ ์  ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ณ , ๋Œ€๊ด„ํ˜ธ ํ‘œ๊ธฐ๋ฒ•์—์„œ๋Š” foo['์ˆซ์ž'] ์™€ foo[์ˆซ์ž] ๋ชจ๋‘ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•จ.


์ฐธ๊ณ ์ž๋ฃŒ#

๐Ÿ”—MDN web docs - ์†์„ฑ ์ ‘๊ทผ์ž

๐Ÿ”—MDN web docs - ์‹๋ณ„์ž

๐Ÿ”—JavaScript Object['key'] vs Object.key ์ฐจ์ด


201120

์ฟ ํ‚ค์™€ ์ธ์ฆ(Auth)#

์ฟ ํ‚ค๋ž€?#

๐Ÿ“Œ ์ƒํƒœ๊ฐ€ ์—†๋Š”(stateless) HTTP ํ”„๋กœํ† ์ฝœ์—์„œ ์ƒํƒœ ์ •๋ณด๋ฅผ ๊ธฐ์–ตํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ 

  • ์„œ๋ฒ„๊ฐ€ ์‚ฌ์šฉ์ž์˜ ์›น ๋ธŒ๋ผ์šฐ์ €์— ์ „์†กํ•˜๋Š” ์ž‘์€ ๋ฐ์ดํ„ฐ ์กฐ๊ฐ

  • ๋™์ผํ•œ ์„œ๋ฒ„์— ์žฌ ์š”์ฒญ ์‹œ ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ํ•จ๊ป˜ ์ „์†ก

  • ์ฟ ํ‚ค๋Š” ๋™์ผํ•œ ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋“ค์–ด์™”๋Š”์ง€ ์•„๋‹Œ์ง€๋ฅผ ํŒ๋‹จํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ (์‚ฌ์šฉ์ž์˜ ๋กœ๊ทธ์ธ ์ƒํƒœ๋ฅผ ์œ ์ง€)

๋ชฉ์ #

  • ์„ธ์…˜ ๊ด€๋ฆฌ

    ์„œ๋ฒ„์— ์ €์žฅํ•ด์•ผ ํ•  ๋กœ๊ทธ์ธ, ์žฅ๋ฐ”๊ตฌ๋‹ˆ, ๊ฒŒ์ž„ ์Šค์ฝ”์–ด ๋“ฑ๋“ฑ์˜ ์ •๋ณด๋ฅผ ๊ด€๋ฆฌํ•จ

  • ๊ฐœ์ธํ™”

    ์‚ฌ์šฉ์ž ์„ ํ˜ธ, ํ…Œ๋งˆ ๋“ฑ์˜ ์„ธํŒ…

  • ํŠธ๋ž˜ํ‚น

    ์‚ฌ์šฉ์ž์˜ ํ–‰๋™์„ ๊ธฐ๋กํ•˜๊ณ  ๋ถ„์„ํ•˜๋Š” ์šฉ๋„

์ฟ ํ‚ค ์ƒ์„ฑํ•˜๊ธฐ#

HTTP ์‘๋‹ต ํ—ค๋”์˜ Set-Cookie key์— ๊ฐ’์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

function(req, res) {
res.writeHead(200, {
'Set-Cookie': ['yummy_cookie=choco', 'tasty_cookie=strawberry'],
})
}

์ฟ ํ‚ค ๊ฐ€์ ธ์˜ค๊ธฐ#

function(req, res) {
console.log(res.headers.cookie); // ['yummy_cookie=choco', 'tasty_cookie=strawberry']
}

Session vs Persistent#

Session Cookie#

  • ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ข…๋ฃŒ๋˜๋Š” ๊ฒฝ์šฐ ์‚ญ์ œ ๋จ.

session storage๋Š” ๋ธŒ๋ผ์šฐ์ € ํƒญ์ด ์ข…๋ฃŒ๋˜๋ฉด ์‚ญ์ œ๋˜๋Š” ๋ฐ˜๋ฉด, ์ฟ ํ‚ค๋Š” ๋ธŒ๋ผ์šฐ์ € ํƒญ ๊ฐ„์—๋„ ๊ณต์œ ๋˜์–ด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์™„์ „ํžˆ ์ข…๋ฃŒ๋˜์–ด์•ผ ์‚ญ์ œ๋œ๋‹ค. ์ฐธ์กฐ

Persistent Cookie#

  • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ข…๋ฃŒํ•ด๋„ ์‚ฌ์šฉ์ž์˜ ํ•˜๋“œ๋””์Šคํฌ์— ์ €์žฅ.

  • ์‚ญ์ œ ์‹œ๊ธฐ : Max-Age ์†์„ฑ์— ๋ช…์‹œ๋œ ๊ธฐ๊ฐ„ ์ดํ›„์—, ๋˜๋Š” Expires ์†์„ฑ์— ๋ช…์‹œ๋œ ๋‚ ์งœ์— ์‚ญ์ œ, ๋˜๋Š” ์ง์ ‘ ์‚ญ์ œ

Secure & HttpOnly#

Secure#

'Set-Cookie': ['hello_secure_cookie=hello-secure; Secure'],

Secure ์ฟ ํ‚ค๋Š” HTTPS ํ”„๋กœํ† ์ฝœ ์ƒ์—์„œ ์•”ํ˜ธํ™”๋œ ์š”์ฒญ์ผ ๊ฒฝ์šฐ์—๋งŒ ์ „์†ก๋œ๋‹ค. ํ•˜์ง€๋งŒ ์ด ํ”Œ๋ž˜๊ทธ๊ฐ€ ์‹ค์งˆ์ ์ธ ๋ณด์•ˆ์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.

HttpOnly#

'Set-Cookie': ['hello_http_only=hello-http; HttpOnly'],

HttpOnly ์ฟ ํ‚ค๋Š” JavaScript์˜ document.cookie API๋กœ ์ ‘๊ทผํ•  ์ˆ˜ ์—†๋‹ค. ์„œ๋ฒ„์—๊ฒŒ ์ „์†ก๋˜๊ธฐ๋งŒ ํ•œ๋‹ค.

Path & Domain#

path#

path=/subpath ์ด๋Ÿฐ ์‹์œผ๋กœ ์ฟ ํ‚ค๋ฅผ ์ „์†กํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ์š”์ฒญ๋˜๋Š” URL ๋‚ด์— ๋ฐ˜๋“œ์‹œ ์กด์žฌํ•ด์•ผ ํ•˜๋Š” URL ๊ฒฝ๋กœ๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

domain#

'Set-Cookie': ['hello_domain=hello-domain; Domain=o2.org'],

์ด๋ ‡๊ฒŒ ์ง€์ •ํ•˜๋ฉด subdomain.o2.org ๋“ฑ๋“ฑ์˜ ๋ชจ๋“  ์„œ๋ธŒ ๋„๋ฉ”์ธ์— ๋Œ€ํ•ด์„œ๋„ ์ฟ ํ‚ค๊ฐ€ ์ €์žฅ๋˜๊ฒŒ ๋œ๋‹ค.

201207

ํšŒ๊ณ #

  • ๋‚ฏ์„  ํ™˜๊ฒฝ์—์„œ ์ƒˆ๋กœ์šด ํŒ€ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ํ•œ๋™์•ˆ ์ง‘(์ปดํฌํŠธ ์กด)์—๋งŒ ์žˆ์œผ๋ฉด์„œ, ๋™๊ธฐ ๋ถ€์—ฌ๋‚˜ ์˜์ง€๋ ฅ ๋“ฑ๋“ฑ์ด ์•ฝํ•ด์กŒ์—ˆ๋Š”๋ฐ, ์ƒˆ๋กœ์šด ํ™˜๊ฒฝ์—์„œ ๋„์ „ ๊ณผ์ œ๋ฅผ ๋ถ€์—ฌ๋ฐ›๊ฒŒ ๋˜๊ณ , ํ•จ๊ป˜ ํ˜‘์—…ํ•ด์•ผ ํ•ด์„œ ๋™๊ธฐ ๋ถ€์—ฌ๊ฐ€ ๋˜์—ˆ๋‹ค.

  • ์šฐ์•„ํ•œํ…Œํฌ์บ ํ”„๊ฐ€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž์™€ ํ˜‘์—…ํ•  ์ˆ˜ ์žˆ๋Š” ์บ ํ”„์˜€๋‹ค๋ฉด, ์ด๋ฒˆ ์บ ํ”„๋Š” ๋‹ค๋ฅธ ๋ถ„์•ผ ๊ฐœ๋ฐœ์ž๋“ค๊ณผ ํ˜‘์—…ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ์˜€๋‹ค. ํŠนํžˆ ์ด๋ฒˆ ํŒ€ ๋นŒ๋”ฉ์„ ํ†ตํ•ด์„œ ์ž๋ฐ” ๋ฐฑ์—”๋“œ ํŒ€๊ณผ ํ˜‘์—…ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

  • ์บ ํ”„ ์ „์ฒด์— ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฑฐ์˜ ์—†๋Š”๊ฒŒ ์กฐ๊ธˆ ์ถฉ๊ฒฉ์ด์—ˆ๊ณ , ์บ ํ”„์—์„œ ํ˜ผ์ž ํ”„๋ก ํŠธ์—”๋“œ๋ฅผ ํ•˜๋Š” ๊ฒƒ์ด ๋ถˆ์•ˆํ•˜๊ณ  ๋‘๋ ค์šด ๋งˆ์Œ์ด ๋“ ๋‹ค.

  • ์ด๋ฒˆ์— ์ง„ํ–‰ํ•  ํ”„๋กœ์ ํŠธ ์ฃผ์ œ์— ๋Œ€ํ•ด ๊ฐ์ด ์ž˜ ์˜ค์ง€ ์•Š๋Š”๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„์„ํ•ด์„œ ๋ณด์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ ๋ ˆํผ๋Ÿฐ์Šค๋“ค์„ ์ฐพ์•„๋ด์•ผ๊ฒ ๋‹ค.

์ด๋ฒˆ ์บ ํ”„์˜ ๋ชฉํ‘œ#

  • ๋งค์ผ์˜ ๊พธ์ค€ํ•œ ๋ฃจํ‹ด

    • ์ง€๋‚œ ์บ ํ”„์—์„œ๋Š” ํ‰์ผ์— ๋„ˆ๋ฌด ๋ฌด๋ฆฌํ•ด์„œ ๊ฐœ๋ฐœํ•˜๋Š๋ผ ์ฃผ๋ง์— ํ”ผ๋กœ๊ฐ€ ๋ˆ„์ ๋˜์–ด ์“ฐ๋Ÿฌ์ ธ๋ฒ„๋ฆฌ๋Š” ์ผ์ด ๋งŽ์•˜๋‹ค.

    • ํŽ˜์ด์Šค๋ฅผ ์ž˜ ์กฐ์ ˆํ•˜์ž.

    • ๋งค์ผ ๊ฐœ์ธ ํšŒ๊ณ ๋ฅผ ์Šต๊ด€ํ™”ํ•˜์ž.

  • ์ด์Šˆ ๊ด€๋ฆฌ, ํƒœ์Šคํฌ ๊ด€๋ฆฌ

    • ์˜ค๋Š˜ ์„ธ์…˜์—์„œ "์ •์‹ ์—†์ด ๋ฐ”์œ ์บ ํ”„์ด๊ธฐ ๋•Œ๋ฌธ์—, ํ•œ ๋ฌธ์ œ์— ๋„ˆ๋ฌด ๊นŠ์ด ์‚ฌ๋กœ์žกํžˆ๋Š” ๊ฒƒ์ด ๋ณ‘๋ชฉ์„ ๋ฐœ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ฃผ์˜ํ•˜๋ผ"๋Š” ๋‚ด์šฉ์„ ๋“ค์—ˆ๋‹ค.

    • ํ˜‘์—…์ด ํ•„์š”ํ•œ ์ผ์„ ๋จผ์ € ํ•ด๊ฒฐํ•˜์ž.

    • ๋‚ด๊ฐ€ ํ•  ์ˆ˜ ์žˆ๋Š” ์ผ์„ ๋จผ์ € ํ•ด๊ฒฐํ•˜์ž.

    • ์–ด๋ ค์šด ๋ฌธ์ œ๋Š” ์‹œ๊ฐ„์„ ํ™•๋ณดํ•˜๊ณ  ๊ฐœ์ธ ์‹œ๊ฐ„์— ๊นŠ์ด ํŒŒ๊ณ ๋“ ๋‹ค.

  • ์ƒˆ๋กญ๊ฒŒ ์•Œ๊ฒŒ๋œ ๊ธฐ์ˆ , ๋Š๋‚€ ์ ์— ๋Œ€ํ•œ ๋ฌธ์„œํ™”

  • ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์ดํ•ด

    • ๋ฉ”์ธ ๊ธฐ์ˆ  ์Šคํƒ์ธ React, TypeScript์— ๋Œ€ํ•œ ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ–ˆ๋‹ค

    • ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ์ œ๋Œ€๋กœ ๊ณต๋ถ€ํ•˜๊ณ  ์ ์šฉํ•ด๋ณด์ž

  • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ

    • ํ…Œ์ŠคํŠธ ์ฝ”๋“œ๋ฅผ 1๋„ ์ž‘์„ฑํ•˜์ง€ ์•Š์•˜๋‹ค

    • ์ด๋ฒˆ ๋ธ”๋ž™์ปคํ”ผ ์Šคํ„ฐ๋””์—์„œ ๋ฐฐ์šด ๋‚ด์šฉ์„ ์ ์šฉํ•ด๋ณด์ž

  • ์ž์‹ ๊ฐ ๊ฐ€์ง€๊ธฐ

    • ์ž์‹ ๊ฐ์€ ํ’์„ ๊ณผ ๊ฐ™๋‹ค

    • ๋ถˆ์–ด๋„ฃ๊ธฐ๋Š” ํž˜๋“ค์ง€๋งŒ ๋น ์ง€๋Š”๊ฑด ๊ธˆ๋ฐฉ ๋น ์ง„๋‹ค


201224

Github์— ์žˆ๋Š” Pull Request๋ฅผ Local๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ#

git fetch origin pull/{ํ’€ ๋ฆฌํ€˜์ŠคํŠธ ID}/head:{๋ธŒ๋žœ์น˜ ์ด๋ฆ„}
git checkout {๋ธŒ๋žœ์น˜ ์ด๋ฆ„}

์—…๋ฐ์ดํŠธ๋œ Pull Request ๊ฐ€์ ธ์˜ค๊ธฐ#

git pull origin pull/{ํ’€ ๋ฆฌํ€˜์ŠคํŠธ ID}/head