thoughts
-
쿠키, 세션, 토큰thoughts 2019. 8. 22. 00:11
오늘은 쿠키와 세션, 토큰 개념에 대해 배웠다. 웹사이트에 접속할 때마다, '쿠키를 수집한다'는 안내가 뜬 걸 본 적이 가끔 있다. 그때마다 안내 팝업을 읽으면서 막연히 '나의 접속 정보를 수집하는구나'하고 지나갔는데, 오늘에서야 드디어 정확한 개념을 접하게 되었다. 쿠키란 서버가 클라이언트와 대화할 수 있는 일종의 수단으로, 클라이언트 단에서 관리가 된다. 세션은 조금 헷갈리는데, 일단은 '유저가 웹브라우저에 접속한 상태', 즉 서버와 클라이언트 간의 연결이 활성화된 상태라고 이해를 하고 있다. 토큰은 인증을 위해 사용되는 문자열로, 토큰에 담긴 정보는 해싱이 된 상태로 서버와 클라이언트 사이를 왕복한다. 세 개념 모두 아직까지는 추상적인 느낌이라, 확실히 와닿지가 않는 것 같다. 특히 세션 부분! 직..
-
SQL, MySQL 이용하기thoughts 2019. 8. 19. 23:58
오늘은 SQL을 처음으로 배웠다. 듣던 대로 사람의 언어와 정말 비슷해서, 생각보다 빠르게 익힐 수 있었다. 정말 여러가지 프로그래밍 랭귀지 가운데 직관성으로는 1등 아닐까? 싶은 생각이 들었다. SQL 자체보다 어려운 것은 스키마를 디자인하는 일이었다. 여러 테이블 간의 관계를 잘 파악하여 효율적인 설계를 하는 게 중요한 것 같은데, 아직까지는 감이 잘 잡히지 않는다. 앞으로 익숙해질 기회가 많겠지? 개인프로젝트를 진행할 기회가 있다면, 이 부분에 중점을 두고 '잘 빠진' 스키마 디자인을 한 번 해보고 싶다는 생각을 했다. 지난번에 완성했던 채터박스 클라이언트, 서버에 더해 이번에는 서버를 위한 DB를 구축하는 과제를 하고 있다. 드디어 이 부분을 배우는구나! 뭔가 갈증이 해소되는 느낌이다. 프론트엔드..
-
Article Collector 만들기thoughts 2019. 8. 17. 21:37
미디엄 블로그 url을 입력하면, 서버가 url을 http로 요청한 후, 응답을 받아와 블로그 글을 출력하는 간단한 웹 크롤러를 만드는 작업을 했다. 서버 사이드에 중점을 둔 과제였기 때문에 프론트엔드 코드는 건드릴 부분이 크게 없었다. 이번 스프린트를 통해서 지난 한 주 간 학습한 서버에 대한 지식을 전반적으로 복습해 볼 수 있었던 것 같다. 우선, endpoint에서의 get, post 작업과 관련해서는 express를 썼다. 개인적으로 서버 스프린트를 진행할 때 가장 재미있었던 부분이 express를 사용하는 것이었기 때문에, 괜히 반가운 마음이 들었다. 로컬 파일에 데이터를 입력하는 함수를 작성할 때에는 https와 fs 모듈을 다시 사용해 볼 수 있었다. fs모듈은 이제는 조금 편하게 쓸 수 있..
-
React로 To do list 만들기thoughts 2019. 8. 10. 19:19
CRA를 사용해서, 처음으로 스스로 react app을 만들었다. 카테고리를 만들고, 카테고리마다 한 일을 기록하는 아주 간단한 투두 앱이다. 하지만... 아직 리액트와 그렇게 친하지 않았던 탓인지 나에게는 보통 일이 아니었다😂😂특히 가장 상위 컴포넌트에서 state를 관리한다는 개념이 내 머리를 아프게 했던 것 같다. 온갖 컴포넌트에서 입력되고 수정되는 정보를 state에서 어떻게 관리할지 고민이 참 많이 되었다. state의 데이터 구조가 어떤 형태여야 효율적으로 props를 내려줄 수 있을지 생각을 해 볼 수 있는 기회였다. 또 다른 고민은 컴포넌트들의 depth가 너무 깊어지지 않으려면 어떻게 짜야 할까 하는 부분이었다. 그림을 그렸다 지웠다 하면서 컴포넌트 간의 관계를 여러 방식으로 짜 봤다. ..
-
-
Client-Server and Browser, HTTP, 채터박스 구현하기thoughts 2019. 8. 2. 23:31
- 클라이언트는 '유저가 보는 부분'을 담당한다. 사용자 입력, 또는 서버에 대한 응답을 화면에 표시하는 역할이다. - 서버는 리소스를 제공(serve)하는 컴퓨터로, 다수의 클라이언트 컴퓨터의 요청을 받아 그에 대한 응답을 하는 역할을 한다. - 브라우저는 html, js, css 등으로 작성된 코드를 내장 엔진(e.g. v8)로 해독하여, 컴퓨터에 바이너리 데이터로 넘겨준다. 컴퓨터가 처리한 바이너리 데이터를 브라우저는 화면에 다시 출력하는 역할을 한다. - 클라이언트가 서버와 통신하기 위한 규약이다. - HTTP의 두 가지 속성으로 stateless와 connectionless가 있다. - stateless: HTTP의 각 요청은 모두 독립적이다. 때문에, HTTP로 이루어진 요청에는 어떤 정해진 ..
-
N-queens에 도전하다thoughts 2019. 8. 1. 18:15
N-queens는 nxn 사이즈의 체스판이 주어졌을 때 서로를 공격할 수 없는 자리에 n개의 퀸을 배치하는 방법을 구하는 문제다. 한 줄로 이렇게 요약해 두니 간단해 보이지만, 막상 문제풀이에 뛰어드니 금세 정신이 아득해졌다. 고려해야 할 부분이 너무 많았다. N-queens 문제 풀이를 앞두고 전략을 세울 때 고심했던 첫 번째 부분은 '수많은 경우의 수 가운데, 퀸 간의 충돌이 일어나지 않는 경우를 어떻게 찾을 것인가'였다. 체스판의 사이즈가 4x4 정도밖에 안 된다 하더라도 퀸 4개가 놓일 수 있는 경우는 총 4^4, 즉 256가지나 된다. n이 1씩 증가할 때마다 배치 가능한 경우가 기하급수적으로 증가하는 가운데, 모든 케이스를 하나 하나 체크하고, 것은 정말 무식하도록 비효율적인 일일 것이라 생각..
-
Value vs Reference, Order of Execution, Prototype chainingthoughts 2019. 7. 29. 22:29
- 데이터 타입에는 참조 타입(reference type)과 원시 타입(primitive type)이 있다. - 변수 간에 원시 타입 데이터를 복사하면 데이터 값이 복사된다. var x = 2; var y = x; // x는 원시타입 데이터이므로, y에 x값을 그대로 카피해 넣는다. y = 3; console.log(x) // x는 y의 영향을 받지 않으므로, 2 - 반면 변수 간에 참조 타입 데이터를 복사하면 주소가 넘어간다. 참조 타입 복사와 관련하여 사례 몇 가지를 정리해 보았다. // case 1 var x = { foo: 3 }; var y = x; // x는 참조 타입이므로, { foo: 3 }이라는 객체의 주소가 y에 할당된다. y.foo = 3; console.log(x.foo) // 3 ..