<Yeonny0723/> <Yeonny0723/>

🍎 배경 현재 사이드 프로젝트로 커뮤니티 앱 개발을 진행 중이다. 기존의 jwt 토큰 기반 인증/인가 방식에서 Session Cookie 기반의 방식으로 변경하게 되었다. 구현해야 할 기능과 각 방식의 장단점을 고려하여 선택을 내렸고, 그 과정 얻은 지식과 결정 과정을 공유하고자 한다. 🍎 읽기 전 용어 정리 간단하게 짚고 넘어가면 이해에 도움이 될 것 같다. 인증 == Authentication ≒ 로그인 인가 == Authorization ≒ 로그인된 상태에서 일어나는 일을 허락해 주는 것 🍎 Session Cookie 인증/인가 방식 사용자가 로그인을 시도한다. 사용자의 실제 인증 정보를 서버 측 세션 저장소에 저장한다. 사용자에게 저장된 세션 정보의 식별자인 session id를 발급한다. 발급한..

🍎 소개 과거에 작성한 브라우저 구조/동작 원리 포스팅을 정리하다가, 분리할 수 있는 주제를 발견하였고, 요즘 왜?라는 질문을 던지고 대답하는 연습을 하고 있기에 간단히 정리해 보았다. 🍎 호출 스택, 콜백 큐가 각각의 자료형을 사용하는 이유? 왜 호출 스택에서 스택 자료형이 사용될까요? 아래 예제의 내부 동작 과정을 런타임 환경의 각 장치가 각각의 자료구조를 사용하는 이유와 대입해 설명해 보겠다. function level1(){ console.log(1) // -- (4) } function level2(){ level1() // -- (2) console.log(2) // -- (3) } function welcome(){ console.log("welcome!") } level2() // -- (..

🍎 서론 정적인 웹사이트, 돔의 변경이 적은 웹사이트라면 문제가 없겠지만, SPA처럼 돔 변경이 빈번하게 발생하는 웹사이트의 경우 렌더링 과정에서 각 노드에 관해 많은 연산을 수행하여 웹서버 성능 이슈의 원인이 될 수 있습니다. 리액트는 이 문제를 어떻게 해결하였을까요? (렌더링 과정과 웹서버 성능 이슈에 공감이 가지 않는다면 아래 🍎 브라우저 렌더링의 흐름?부터 읽어보시길 추천드립니다) 🍎 DOM이 뭔가요? 저희가 부르는 DOM은 DOM 트리입니다. DOM 트리란 바로 / 브라우저가 이해하고 또 조작할 수 있도록 / 응답으로 받아온 HTML파일의 각 원소들을 / 노드로 하는 / 트리 형태의 파싱본이랍니다. 어떠한 원소에 개발자가 속성을 부여하면, 브라우저는 그 원소를 담은 노드를 돔 트리에서 찾고, 수..

🍎 소개 Event Loop를 이해하기 위해 훨~씬 더 큰 범위의 브라우저에 대해 이해하고 넘어가는 시간이었다. 흩어져 있던 조각들이 한 곳에 모인 느낌이랄까…? 나만 이런 건지는 모르겠지만… 어릴 때부터 빨리, 많이 외워야할 단어나 개념들을 A4 용지에 꾸겨 넣은 후 한눈에 보면 정말 빨리 외워졌다. 이번에 흩어진 개념을 한 데로 모을 때 모든 영역을 한눈에 그리면 이해가 더 잘될 것 같다는 생각에 그려보았다. 이 글을 읽는 분들에게도 도움이 되었으면 좋겠다. 🍎 퍼즐 모으기 우선 브라우저는 html, css, javascript, static (img와 같은) 파일들을 다운받아와 화면상 보여주는 소프트웨어라고 정의할 수 있겠다. 지금 당신이 이 글을 읽으며 사용하는 그 Chrome! 또한 브라우저이다..