전체 글
-
webpack? babel?cs 지식 2021. 7. 24. 19:02
웹팩(webpack) 정의 개발환경에서 원할한 작업을 위해 만들어진 모듈 파일들을 하나의 파일로 묶어서 한번만 불러올 수 있게 해주는 기능을 '모듈 번들러' 라고 한다. 이 모듈 번들러는 종류가 아주 다양하지만, 프론트엔드에서 가장 인기 있는 것이 바로 '웹팩'이다. 우린 이것을 어디서 접하고 있었을까? 웹팩을 사용하기 위해서는 프로젝트가 npm에 의해 관리가 되어야 한다. 프로젝트에 'npm init'을 하면 package.json이 생기는데, 여기서 webpack을 설치하면 package.json에 'dependencies' 키가 생긴다. 웹팩을 설치하면 나오는게 바로 이 키이다. 프론트에서 리액트 프로젝트를 진행할 때 이것이 꼭 있었는데, 우리가 웹팩을 사용하고 있다는 것이였다!! 컨트롤 하는 법 ..
-
-
세션? 토큰? JWT?cs 지식 2021. 7. 24. 18:58
클래식한 세션관리 사용자가 로그인에 성공하면 서버에선 세션 티켓인 Sesstion ID를 출력한다. 이 Sesstion ID를 반으로 쪼개서 반쪽은 브라우저에 올리고 반쪽은 서버의 메모리나 하드디스크, 크게는 데이터베이스에 저장한다. 브라우저는 이 반쪽짜리 Sesstion ID를 쿠키에 저장하고, 서버에 네트워크 요청할 때마다 이 Sesstion ID를 같이 보낸다. 서버에선 Sesstion ID를 대조해서 사용자의 로그인이 지속되어있는지를 판단하는데, 이걸 세션이라고 한다. 하지만 사용자가 많아질 경우 메모리를 여러개로 관리해야 하거나, 공용창고인 데이터베이스에서 관리하는 등의 방법을 쓰게 되는데, 어떤 에러에 노출되거나, 서버가 재부팅 되면 세션이 초기화되어 사용자들은 다시 로그인해야 하는 리스크가 ..
-
동기요청? 비동기요청? promiss? async? await?cs 지식 2021. 7. 24. 18:57
동기(synchronous) 자바스크립트에서 코드가 위에서부터 아래로, 작업이 끝난 이후 다음 작업을 진행하는 방식으로 무조건 순서를 지키는 것을 기본으로 둔다. 약간을 유도리없게 보일 수 있는게, 특정 코드가 작업을 처리하는 시간이 3초가 넘어가는 상황이라면, 이 3초가 끝날 때까지 작업이 전체 홀딩된다는 단점이 있다. 비동기(Asynchronous) 동기 방식대로 작업을 하지 않고, 작업시간이 걸리는 코드의 경우 다음 코드를 먼저 실행하라고 양보해주는 이쁜 녀석이다. 이러한 경우 전체 작업이 끝나는 시간이 대폭 줄어드는 아주 유도리있는 퍼포먼스를 보여준다. 대표적으로는 setTimeout이나 네트워크 통신을 위한 코드들이 있다. 비동기의 문제 비동기 방식에는 문제가 있다. 네트워크 통신같이 서버에서 ..
-
브라우저와 통신과정cs 지식 2021. 7. 24. 18:57
브라우저란 인터넷 상에 연결된 '웹서버'에 저장되어 있는 '하이퍼텍스트 및 하이퍼미디어 등의 모든 정보'를 가져와 컴퓨터나 휴대폰 등의 디지털 화면에 보여주는 역할을 한다. 우리가 주소창에 'https://jenyglee.tistory.com/' 라는 URL을 치고 들어갔다고 가정했을 때, 1. tistory.com라는 도메인을 사용하는 웹서버(192.168.~~.~~)에 접근한다. 2. jenyglee 아이디를 사용하는 사용자와 관련된 모든 문서를 요청한다. 3. 웹서버에서는 요청을 받고 문서를 브라우저에게 보내준다.