Develop/FrontEnd

스코프란? 스코프는 코드가 유효한 범위를 의미합니다. 우리는 스코프를 크게 "지역" 과 "전역" 으로 나누죠 :D 이를 조금 더 자세히 이야기 해보자면, 식별자(=변수이름, 함수 이름, 클래스 이름) 가 본인이 선언된 위치에 따라 다른 코드에서 참조될 수 있는지 없는지를 결정하는 것을 의미합니다. 이를 아래의 코드를 통해 설명 해보겠습니다. function add(x,y) { console.log(x, y); // 2, 3 return x + y; } add(2,3); // 5 console.log(x,y) // Reference Error : x is not defined 2,3 은 함수로 전달이 되어 x, y라는 지역 변수에 저장이 된다. 그렇기 때문에 함수 내에서는 자유롭게 사용이 가능합니다. 반면..

2021. 7. 13.

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/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.