Bin's Blog

들어가며 오늘은 HTML에서 다뤄보려고 한다. 실제로 이 주제는 내가 면접에서 받았던 질문이다. 그 당시를 회상하면, 시맨틱태그에 대해서 알긴 하나 대답의 깊이가 없는 나의 모습을 반성하면서 꼭 포스팅을 해야겠다고 결심했다. 왜 시맨틱 태그가 중요해서 면접에서 단골로 질문이 나오는지 살펴보자. 시맨틱 태그란? 내가 프로젝트를 했었을 때는, 시맨틱 태그를 사용하지 않아도 태그를 활용해서 웹 문서를 만들었다. 사실 그 당시에는 시맨틱 태그가 무엇인지, 왜 중요한지에 대한 이해 자체가 없었다. 우리가 시맨틱 태그를 사용해야 하는 이유는 다음 3가지로 말할 수 있다. 1️⃣ HTML 문서의 가독성과 유지보수가 쉬워진다. 실제로 프로젝트에서 div를 많이 쓰다보면 div지옥에 빠져서 나중되면 어디가 어느 부분인지..

글의 시작 오늘 다루는 주제는 로그인할 때 사용자 인증 방식에 대한 내용이다. 이 내용은 내가 실제 면접 때 질문을 받아봤던 내용이다. 쿠키와 세션만 알고 있었지, JWT와 OAuth 방식에 대해서는 잘 몰랐다. 그래서 이번 포스팅을 통해서 3가지 방법을 비교해 보면서 어떤 장단점들이 존재하는지 동작 방식에 대해서 파헤쳐 본다. 회원기능 동작 방식 예를 들어 게시물들을 로그인한 사람만 볼 수 있게 만든다면 회원기능이 필요한데 어떤 식으로 회원기능을 만들면 될까? 회원가입 유저가 가입하면 아이디/비밀번호를 DB에 저장해 놓는다. 로그인 유저가 로그인시 아이디/비밀번호를 서버로 보낸다. 서버는 DB에 있는 아이디/비밀번호와 유저가 보낸 아이디/비밀번호가 일치하는 경우 입장권을 발급해준다. 로그인이 필요한 서..

글의 시작 오늘 다루는 주제는 웹 브라우저가 어떻게 동작하는지에 대한 내용이다. 자바스크립트의 동작 원리에 대해서 공부하다가 궁금해진 내용이다. 사실 가장 기초가 되면서도 중요한 내용이다. 웹 개발자가 웹 브라우저가 어떻게 동작하는지에 대한 이해도가 있어야 한다고 생각한다. 스스로 이해도를 높이기 위해서 그림을 많이 사용할 예정이다. 🤔 우리가 작성한 코드가 어떻게 브라우저에서 실행되는 걸까? 오늘은 우리가 작성한 코드가 어떻게 웹 브라우저에서 동작하는지 Stack, Queue를 이용해서 살펴보고자 한다. 먼저 다음 코드를 살펴 보자. console.log(1+1) setTimeout(function(){ console.log(2+2)}, 1000) console.log(3+3) 결과값이 어떤 순서로 출..

CORS란? 브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다. 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다. 이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)라고 부른다. 이를 통해 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처(프로토콜, 도메인, 포트번호)의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 출처와 다를 때 교차 출처 HTTP 요청을 실행한다. 브라우저에서 cross-ori..

쿠키과 세션의 차이가 뭔지 알고 싶어서 이렇게 정리한다. 쿠키 1️⃣ 쿠키란? 👉 쿠키(Cookie)라는 용어의 어원을 보면 웹 브라우저가 활동하면서 남기는 사용자의 자취들이 마치 먹다 떨어뜨린 과자부스러기와 유사한 점에서 비롯했다. 👉 쿠키는 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 👉 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다. 👉 클라이언트에 300개까지 쿠기저장 가능, 하나의 도메인당 20개의 값만 가질 수 있다. 👉 쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request Header를 넣어서 자동으로 서버에 전송한다. 2️⃣ 쿠키의 구성 요소 👉 이름 : 각각의 쿠키를 구별하는 데 사용되는 이름 👉 값 : 쿠키의 이..