들어가며 웹에서 데이터를 보내고 받기 위해서는 어떤 식으로 전송하고 어떤 경로(End-point)에 전달할지를 중요하게 본다. 데이터를 전송하고 받는 방식으로는 GET, POST 등의 HTTP 메서드가 있고, 관련해서 REST API라는 개념이 있다. 그보다 이번 글에서는 경로에 대해서, 그 중에서도 Query Parameter와 Path Variable에 대해서 정리해보려 한다. Query Parameter (Query String) 위 이미지는 우리가 흔하게 보는 URL의 구조이다. 여기서 ? 이후부터 시작되는 Parameters라는 부분이 바로 Query Parameter이다. 흔히 Query String, 쿼리 스트링이라고 부르기도 한다. 쿼리 파라미터와 쿼리 스트링은 같은 표현! Query St..

이번에는 netlify 같은 서비스의 도움을 받지 않고, 웹팩으로 빌드해보고 Github Pages에서 배포해보기로 했다. 일단 빌드하는 데도 삽질을 많이 했지만, 배포하고 나니 로컬환경에선 잘 동작했던 게 먹통이 되어서 (...) 또 한바탕 삽질을 했다. 아직 온전히 웹팩을 이해한 것은 아니지만, 현재 배포까지는 해결했기 때문에 다음엔 이 만큼의 삽질을 하지 않기 위해 기록한다... 😇 그래서 웹팩이 뭔지?... 웹팩.. 프론트엔드를 공부하다 보면 한번쯤은 들어봤을 법한 이름. 우리가 사용하는 여러 웹 애플리케이션은 모두 수많은 자원들을 바탕으로 구성되어 있다. HTML, CSS, JavaScript 파일 뿐만 아니라 페이지를 구성하는 이미지, 폰트 등등.. 만들 때야 각각의 자원들을 필요에 따라서 구..

들어가며 뭔가 뒤바뀐 순서지만 지난번 CSR과 SSR에 대해 알아보며, 우리가 웹페이지에 접속하면 '렌더링'이라는 과정을 거친다는 것을 알게 되었다. 자연스레 이 렌더링이 구체적으로 어떻게 이루어지는지 궁금해져서, 얼핏 들어본 단어들을 드디어 정리할 시기가 왔다..! 머리 한편에 흩어져있는 단어들을 한번 맞춰가며 이번 글에서는 브라우저 렌더링에 대해 정리해본다. 일단 브라우저가 뭔가요? 렌더링이 일어나는 주체, 우리가 매일같이 흔하게, 인터넷 접속을 하기 위해서 사용하고 있는 프로그램이다. 예전에는 인터넷 익스플로러, 요즘엔 크롬, 파이어폭스, 네이버 웨일, 맥 유저라면 사파리. 그 외에도 브레이브, 비발디 등등 다양한 브라우저가 있다. 그럼 렌더링은 뭔데요? render라는 단어는 사전적으로 make와..

들어가며 상태 관리에 대해서 알아보기를 결심!.. 어디서부터 이미 먼저 작성된 많은 글들을 둘러보다 보니 음.. 🤨 먼저 알고 있어야 하는 이론이..... 이 부분에 대한 지식이 아주 얕은 상태인 걸 깨달았다. 지금의 나.. 어렴풋이 들어본 CSR과 SSR의 이름만 알고 있을 뿐.. 😓 모르면 찾아보면 되지!! 좋아 그럼 어디부터 알아볼까~ 하고 거슬러 올라가다 보니 먼저 열심히 찾고 읽고 보게 된 지점이 SPA부터 CSR, SSR이라서 정리해 보았다. SPA는 MPA와 비교되는 방식이라 함께 작성! 🥊 MPA vs SPA MPA (Multi Page Application) 여러 페이지로 구성된 웹 애플리케이션. 전통적인 웹 페이지 구성 방식이다. MPA의 렌더링 방식 인터랙션이 발생한다. (클릭 같은)..