개발 블로그

정적 웹과 동적 웹의 차이를 정리해보겠다. 정적 웹 ( Static Web ) 서버가 이미 만들어진(정적인) html, css, javascript 파일을 클라이언트에게 제공하는 것. 더 자세히 말하면, 서버에는 단순히 html, css, javascript 파일들이 이미 만들어져 있고 서버는 라우터로 요청이 들어오면 그에 맞는 파일을 단순히 제공만 해주는 것이다. 동적 웹 (Dynamic Web ) 서버가 직접 html, css, javascript 를 만들어서 클라이언트에게 제공하는 것. 요청이 들어오면 그 때 html, css, javascript 파일을 생성하여서 클라이언트에게 제공하는 것. SPA 웹은 정적 웹 일까? 동적 웹 일까? 정적 웹이다. 해당 내용에 대해서 구글링을 해보면 많은 블로..

용어 간단 요약 용어에 대해서만 궁금해하는 분들도 많을 것 같아서 미리 간단 요약을 해본다. - MVC: Model , View, Controller 의 약자로 어플리케이션을 세가지 구조로 나누어서 개발하는 디자인 패턴이다. Model 은 데이터베이스를 직접적으로 접근하는 로직을 말하고, View 는 유저가 실제로 보는 화면을 말한다. 그리고 Controller 는 유저와 상호작용하는 로직을 말한다. - MPA: Multiple Page Application 의 약자로 여러 페이지로 구성된 애플리케이션을 말한다. - SPA: Single Page Application 의 약자로 한 페이지로 구성된 애플리케이션을 말한다. - CSR: Client Side Rendering 의 약자로 클라이언트 측에서 Vi..

DNS 는 Domain Name System 의 약자로, 도메인 이름을 ip주소로 변환하기 위한 시스템이다. 여기서 말하는 Domain Name 은 흔히 우리가 접속하는 웹사이트의 주소이다. 만약 www.naver.com 을 브라우저에서 입력 하였을 경우, 우리는 아래와 같은 웹사이트를 볼 수 있다. 어떤 과정을 통해서 볼 수 있을까? 우선 저 네이버의 html 파일과, css, js, 이미지 파일 등 웹사이트를 구성하는 기본적인 콘텐츠들은 모두 네이버의 서버에 있다. 그렇기 때문에 네이버 서버로 부터 해당 파일들을 받는 과정이 필요하다. 그럴려면 네이버의 ip 주소를 알아야 한다. www.naver.com으로 어떻게 네이버의 ip 주소를 알 수 있을까? 바로 DNS 를 이용해서 ip 주소를 얻을 수 있..

오늘은 CDN 에 대해서 정리를 해본다. CDN 은 Content Delivery Network 의 약자이다. 번역을 그대로 하면 콘텐츠를 전달하는 네트워크 이다. 네이밍을 정말 잘한 것 같다. 이름에 모든 것이 담겨 있다. 조금 더 자세히 설명해보겠다. CDN은 콘텐츠( 예를 들면 html 파일, js 파일, 이미지 파일, 동영상 파일 등등)를 전달해주는 캐싱 서버이다. 예를 들어 내 블로그 주소인 https://program-note.tistory.com/ 이 CDN 이 적용되어 있지 않다면, 아래와 같은 그림으로 사용자의 브라우저가 요청을 하고 응답 값을 받게 될 것이다. 그리고 받은 응답 값으로 잘 꾸며진 나의 블로그를 렌더링되고 사용자는 렌더링된 화면을 보게 될 것이다. 이게 CDN 이 적용되지..

프록시 서버는 클라이언트와 서버가 통신할 때, 중간에 위치한 서버이다. 그림으로 그려보았다. 그림과 같이 클라이언트가 바로 서버로 요청을 가지 않고, 프록시 서버를 통해서 서버에게 요청을 하게된다. 서버측 또한 마찬가지로 응답 값을 클라이언트에게 바로 주지 않고 프록시 서버로 응답 값을 전해주면, 프록시 서버가 각 클라이언트들에게 응답 값을 주게 된다. 그렇다면 왜 프록시 서버를 사용하는 걸까? - 프록시 서버는 서버로 부터 받은 응답값을 기억, 즉 캐싱해서 같은 요청이 왔을 때, 서버에게 요청 없이 응답값을 바로 반환해 줄 수 있다. 예를 들어, 클라이언트 측에서 커피 아이콘을 요청하면, 첫 요청이 들어왔을때, 서버에게 직접적인 요청을 프록시서버가 하고, 두번째 부터는 아래 이미지와 같이 프록시 서버가..

우선 나는 프론트엔드 개발자이다 보니, 자바스크립트가 비동기 논블로킹 언어이다 라는 말을 정말 많이 들어왔다. 근데 항상 동기와 비동기나 블로킹과 논블로킹 개념이 나올때, 동기가 결국 블로킹이고, 비동기가 논블로킹이지 않냐는 생각이 항상 들었다. 그래서 이번에 작정하고 찾아봤다..! 정말 많은 블로그와 유튜브에서 정리를 해주고 있었다. 근데 막 엄청 와닿게 이해를 하지 못하고 있다가 정말 많은 곳을 찾아보고 깊게 생각을 해서 결국 이해를 해냈다! 그래서 정말 쉽게 누구나 이해할 수 있게 정리를 하기 위해 이 글을 작성하게 되었다. 1. 동기 (Synchronous) vs 비동기 (Asynchronous) 동기는 요청한 작업이 완료가 되고 나서, 그 다음 작업을 순차적으로 진행하는 것이다. 반면, 비동기는..

벌써 2년차 프론트 개발자로 일하고 있다. 최근 git 명령어가 익숙하지 않은 분에게 실제로 실무에서 매일 쓰고 있는 git 명령어를 정리해서 참고용으로 드렸는데, 너무 유용하다고 해주셔서 더 많은 분들이 도움받을 수 있게 포스팅을 작성해본다. 나는 그냥 지금 내가 적는 명령어들로만 모든 작업을 처리하고 있으며, 딱히 명령어를 검색해서 찾아본 적이 없다. git-post 라는 폴더를 만든 뒤 깃허브에 올려서, 브랜치를 여러개 만들고 깃허브에 올리는 과정을 담아 포스팅해보겠다. git init 깃 을 세팅하는 명령어이다. 해당 명령어를 치면 .git 이라는 파일이 생긴다. 해당 파일에는 깃에 관한 모든 설정이 담겨있다. .git 파일은 숨겨진 파일이라서 실제로는 안보이는데, 숨겨진 파일 보기를 하면 보일 ..

https://www.youtube.com/watch?v=1QiOXWEbqYQ 해당 영상을 보고 정리해보았다. 인증( Authentication ): 로그인이다. 특정 서비스에 일정 권한이 주어진 사용자임을 아이디와 패스워드를 통해서 인증을 받는 것이다. 인가( Authorization ): 로그인 이후 서비스의 여러 기능을 사용할 때 서버측에서 로그인 유무를 확인하여 허가해주는 것. 로그인이 유지된 상태에서 일어나는 일. 어떤 사이트나 서비스에 사용자가 로그인 했다는 사실을 알 수 있는 방법은 뭐가 있을까? 일차원적으로 생각해보면, 매 요청마다 아이디와 비밀번호를 같이 보내서 인증을 하면되지 않을까? - 당연히 안된다. 우선 로그인(인증) 작업은 꽤 무거운 작업이다. 로그인은 DB에 저장된 사용자의 정..