Develop/FrontEnd

탄생 배경 웹 초기에는 적은 양의 코드와 페이지를 통해 구축이 가능 했습니다. 저를 포함한 초보자 분들이 공감 할 수 있는 시점에서 말씀을 드리자면, "개발을 완성 했던 것"만으로도 기쁘고 즐거웠던 것이죠. 그만큼 현재와 비교해 그 당시의 개발은 영/유아기가 아니였을까요? :D ( 물론 저도 그 때는 청소년..? ) 그렇기 때문에, 작성한 코드에 문제가 발생하거나 보수/유지를 해야 할 때는 "모든 코드를 갈아 엎는" 방식을 사용 했다고 합니다. 우리가 만든 도미노만 부셔도 ^^.. 화가 나는데 저걸 처음부터 다시 할 생각에 다시 개발자 분들이 많이 힘드셨겠죠. 그래서 보수/유지가 가능한 코드를 만들고자, 다양한 방법을 적용 하였고 그 중 화면, 로직, 데이터를 분리 하는 방법인 MVC 패턴이 인기를 끌어..

2021. 7. 13.

Develop/FrontEnd

탄생 👶🏻 기존의 CSS 파일은 .css 파일에 작성하여 사용하죠. 그렇기 때문에, 프로젝트의 규모가 커지면 이를 관리하기가 매우 어려워 졌는데 이를 해결 하기 위해 CSS를 JS 파일 내부에 배치하는 개념인 CSS-in-JS가 탄생 하였습니다 대표적인 라이브러리는 "Styled-Component" 가 있습니다. Inline vs Css-in-Js 🥊 인라인과 Css-in-Js 모두 코드 내부에 작성한다는 공통점이 있습니다. 하지만, 그 둘은 약간의 차이를 보입니다. 아래의 코드는 Inline이 css를 적용 시키는 방법입니다. const styles = { backgroundColor: 'palevioletred', color: 'papayawhip', }; 다음 코드는 CSS-in-JS가 적용 시키는..

2021. 7. 13.

Develop/FrontEnd

1. 들어 가기 전에 🗒 - 자동 로그인은 어떻게 이루어지나요? 브라우저에는 토큰 등의 정보가 쿠키로 저장이 되있기에, 그 값을 로그인 하는 사이트에 접속 할 때 요청에 실어서 보냅니다. 그러면 사이트에서는 쿠키를 확인 한 후에, 로그인이 되어있다고 판단을 하기에 로그인이 유지 됩니다. 위의 상황을 통해, 우리가 알아야 하는 사실은 "우리의 개인정보가 웹사이트에 있다는 것" 입니다. - 악의적인 접근이 있다면? 만약 누군가 악의적으로 이러한 데이터에 접근 하기 위해서, 자신의 웹사이트를 유도 한다고 가정을 해봅시다 ! 어떤 사이트에 들어 간다는 것은, 그 사이트의 HTML, CSS, JS 파일을 브라우저에 받아진다는 것이므로. 이 때 받아진 JS 코드 내부에 개인 정보를 탈취 할 수 있는 기능을 세팅 해..

2021. 7. 8.

Develop/FrontEnd

머릿말 하단의 글에서 이미 같은 글을 작성 했었습니다. 하지만, 번역을 하면서도 그 이후에도 명확히 이해가 가지 않아서 다시 정리하고자 글을 올리게 되었습니다. 요새 느끼는거지만, 애매하게 아는건 아예 모르는 것보다 못하다는 것을 느낍니다. 뭔가를 배울 때는, 누군가를 앉혀놓고 설명 할 수 있는 수준까지 깊게 학습 하는 것이 중요하다고 생각합니다 ! 본문 자 그럼 이제부터 브라우저에 URL를 입력하고, Enter를 눌렀을 때 일어 나는 일에 대해 이야기 해보겠습니다. 1. 브라우저의 URL 파싱 최초에 브라우저는 사용자가 "단순 검색을 한 것인지", "URL" 을 입력 했는지 확인합니다. URL인 경우에는 https:(protocol) google.com (URL) : 443(Port) 다음과 같이 [ ..

2021. 7. 5.

Develop/FrontEnd

1. JWT란? JWT는 일반적으로 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이다. URL에대해 안전한 문자열로 구성되어 있기 때문에 HTTP 어디든(URL, Header, ...) 위치할 수 있다. 2. JWT의 구조 JWT는 "." 을 기준으로 HEADER / PAYLOAD / SIGNATURE 로 나뉩니다. HEADER.PAYLOAD.SIGNATURE Header JWT를 검증하는데 필요한 정보를 가진 JSON 객체는 Base64 URL-Safe 인코딩된 문자열이다. 헤더(Header)는 JWT를 어떻게 검증(Verify)하는가에 대한 내용을 담고 있다. 즉 alg는 3번째 값인 서명 값을 어떤 알고리즘으로 만들지 적혀 있습니다. {..

2021. 7. 4.

Develop/FrontEnd

머릿말 사용에 목적을 두어 JWT를 사용해서, 기술면접에서 이에 대해 올바르게 대답 하지 못했다. 이를 계기로 사용하는 기술에 대해서는 "이유와 목적"을 명확히 해야겠다는 생각이 들었다. 그리하여, 서버 - 토큰 기반 인증과 JWT에 대해서 자세히 알아 보고자 합니다. 시작 하기 전에 HTTP는 다음 특징을 가지고 있습니다. Connenctionless: 클라이언트가 요청을 서버에게 보내면 서버는 이에 대한 적절한 응답을 한 후에 연결을 종료합니다. Stateless: 서버와 클라이언트와의 연결이 종료된다면 상태 정보는 저장하지 않고 사라집니다. 따라서 위의 특징으로 인해 이벤트를 발생 시킨 유저를 확인 할 수 있는 수단이 필요합니다. 이에따라, 하단의 서버 및 토큰을 기반으로 한 인증 방식이 등장합니다..

2021. 7. 4.

Develop/JavaScript

[1] 자바스크립트의 This 자바스크립트의 함수는 일급 객체 이기 때문에 "This"를 자기 자신이라 부르기에 모호하다. 그래서 어떤 객체에 호출 되는지에 따라서, This의 의미가 달라진다. 이렇게 This는 동적으로 결정 되기 때문에 우리는 이것을 Binding 된다고 말할 수 있다. [2] 자바스크립트의 구동 자바스크립트는 다음과 같은 방식으로 작동이 되는데, 실행 문맥 단계에서 바인딩을 한다. [3] This Binding Rules [1] 기본 바인딩 가장 기본적인 방법은 단독 실행 하는 것이다. 함수를 단독 실행 할 때는 기본적으로 전역객체에 바인딩이 된다. 따라서, 브라우저 환경 속에서는 window 객체에 바인딩 된다. 노드의 전역 객체는 Global 이므로, Global 객체에 바인딩이..

2021. 7. 2.

Develop/FrontEnd

[1] 브라우저의 공통구조 User InterFace : 주소 표시줄, 이전 / 다음/ 새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 Browser Engine : UI와 Rendering Engine을 연결 Rendering Engine : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 [2] 렌더링의 목표 1) HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다. 2) 업데이트가 필요할 때, 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다. [3] Critical Rendeing Path 3-1 DOM Tree 와 CSSOM Tree 생성 최초에 HTML은 어휘 분석에 따라 토큰화가 이루어지고, 이후에 Node 객체로 변환 됩니다...

2021. 7. 2.