본문 바로가기

분류 전체보기28

브라우저가 사용자에게 홈페이지를 보여주는 방법 오늘은 브라우저가 사용자에게 홈페이지를 어떻게 보여주는지를 알아봅시다. 그 전에 오랜만에 window 객체를 생각해보는 시간을 가져보았습니다. 0. window 객체와 브라우저 구조 우리가 보는 브라우저를 크게 보면 Window > Document > navigator로 이루어져있습니다. 근데 좀 더 구체적으로 나누면, window object는 DOM, BOM, JavaScript로 구성되어 동작합니다. DOM 요소와,BOM (브라우저에 관련된 Wep API와 관련된 것들)과 Javascript와 관련된 것들이 포함되어 있는데, 일단은 이렇게 크게만 알고 동작이 어떻게 되는지는 서서히 알아봅시다. window 객체를 console로 찍어보니 document도 보이고, navigator를 펼치면 블루투스.. 2023. 2. 20.
내가 알던 REST API는 새 발의 피였떵 백엔드를 시작하고 얼마 전 만든 api에서 rest api 주소정책을 다시 공부해보라는 코드리뷰를 받았다. 코드를 공개하긴 좀 그렇지만 A에서 B의 뭐를 불러온다. 이런거였음 개발 공부를 처음 시작 할 때 html, css, javascript 다음에 배운게 rest api였고, 이제 REST API를 더 심도있게 생각해봐야 되겠다고 생각도 들었다. 그리고 이번에 공부하면서, 간단하게 알고있었던 POST, PUT, DELETE .. 또는 ststus code의 의미의 쓰임새 뿐만 아니라, response를 어떻게 보내주냐도 restful해지는 것임을 알게되었다. HATEOAS는 처음 들어 본 개념이었고, JSON을 통한 에러 응답처리 또한 실무에서 사용하고있었지만 이 개념에 들어있는지는 처음 알게되었다... 2023. 2. 18.
MSA 와 MS 새로운 팀프로젝트를 만들기 전에 어떤 아키텍쳐로 개발하는 것이 좋을지 생각해보자는 의견이 나왔다. 마이크로서비스 아키텍쳐를 들어보긴 했지만 사실 그때는 뭐가뭔지 어렵고 가늠이 되지않아서 넘어갔는데, 이번 기회에 간단하게 나마 알게 되었고, 우리 팀프로젝트에 어떻게 적용해야 할 지 생각해보았다. 결론부터 말하면 우리는 약 2~3개월의 단기 프로젝트이고, 학습을 위한 프로젝트이기 때문에 FE 라이브러리는 React를 BE 프레임워크는 Nest, 데이터베이스는 MySQL을 사용하기로 했다. 따라서 아키텍쳐를 선택한다면 빠르게 개발할 수 있고, 기능이 엄청 많지는 않을 것이기 때문에 MS 아키텍쳐를 선택하게 될 것같다. 또 내가 일하는 회사는초기스타트업인데 이 개념을 적용해보니 MS였다. 회사에서 지금 프로젝트.. 2023. 2. 11.
Big O Notation 고등학교 때를 생각해보면 수학의 정석 1단원인 집합 부분은 모두 열심히 공부했다. 수학의 집합, 한국사의 선사시대가 있다면 자료구조에는 빅오가 있는걸까 ㅎ 제발 느리더라도 끝까지 가기를 바라면서 너무 열심히 쓰지는 말아야지. 빅오를 1줄로 요약해서 결론부터 생각해본다면, 어떤 것의 추세라고 요약하고싶다. 그리고 그 어떤 것에 대해 설명해보면 (어떤 것 -> 시간복잡도, 공간복잡도) 어떤 알고리즘이 효율적인가를 판단할 때, 크게 시간복잡도와 공간복잡도를 기준으로 판단하는데, 그것들이 얼만큼 효율적인가를 보기 쉽게 나타내주는 것이 빅오 표기법! 빅오 표기법을 처음 봤을 때 너무 간단해서 더 어렵게 느껴졌다. 첫인상: O(1) 👀 이게뭔데. 뭐이렇게 많이 요약되어있는데 그런데 요약!! 그게 빅오 표기법의 뽀인.. 2022. 10. 19.
CSR, SSR을 이해해야 하는 이유? SEO 🌐 프론트엔드 개발자가 꼭 챙겨야 하는 것 중 하나는 SEO입니다. 이번에는 SEO란 무엇인지, 왜 프론트엔드에서 신경써서 챙겨야 하는지, 어떻게 신경쓸 수 있을지 그리고 CSR과 SSR를 통해 어떻게 SEO를 향상시킬 수 있는지에 대해 알아보았습니다. SEO (Search Engine Optimization 검색 최적화) 검색 크롤러 먼저 웹 크롤러 봇에 대해 설명드리겠습니다. 웹 크롤러 봇(검색 크롤러/ 스파이더 / 검색 엔진 봇)는 웹 상의 모든 웹페이지를 돌아다니며, 그 페이지가 무엇에 대한 페이지인지 파악하여 필요할 때 정보를 추출할 수 있도록 합니다. 이렇게 소프트웨어 프로그램을 통해 자동으로 웹사이트에 엑세스하여 데이터를 얻는 과정을 "크롤링"이라고 합니다. 이런 웹 크롤러 봇은 구글이나 네이버.. 2021. 9. 7.
[GraphQL] # 2. Apollo Client (React) 이번에는 Apollo Client를 구현해보겠습니다! 통신을 해보는 것이 목적이기에 Client 셋팅 방법과, 어떤식으로 통신이 이루어지는지 전체적인 그림을 그려보겠습니다. 컴포넌트 구조와 리액트 대해서는 자세하게 다루지않습니다. (저는 Apollo + React를 사용하였지만 Vue로도 graphQL Client를 만들 수 있습니다!) Setting Apollo Client npm install @apollo/client graphql 명령어를 입력하여 아폴로 클라이언트모듈을 설치합니다. app.js에서 ApolloClient 모듈을 import 해줍니다. import { ApolloProvider } from '@apollo/client'; import { ApolloClient, InMemoryCa.. 2021. 8. 14.
빙글빙글 이벤트 루프 🏃‍♀️➰ 목차 - Process & Thread - MultiTreading - Javascript 엔진? - Javascript 실행 환경 ( Javascipt와 Web APIs가 어떻게 함께 협업할까?) - 이벤트 루프 예시로 개념 정리 - 렉 걸리게 하기. - Task Queue VS Microtask Queue # Process와 Thread의 차이 Process Process란 '운영체제 위에서 연속적으로 실행되는 프로그램'입니다. 핸드폰에서 어플리케이션을 실행하다가 갑자기 하나의 앱이 강제로 종료된 적이 있으신가요? 그것이 프로세스가 죽었다라고 말합니다. 각 프로세스는 메모리에서 실행되고 있는 프로그램입니다. 프로세스 안에는 프로그램을 위한 code, 함수에 대한 정보가 저장된 stack, 데이터가 저.. 2021. 8. 14.
동기 & 비동기(Promise, async/await) 제 머릿속은 짬뽕이었습니다.. 콜백, 동기, 비동기, async, await, Promis, 콜백지옥, 화살표함수, 와갸갸갸갸갹!! 하지만 오늘부로 이 꼬여버린 친구들을 가지런한 짬뽕 면들로 분리하겠습니다.. 더이상은 지긋지긋해요. 혹시나 다시 뒤죽박죽 꼬여버리는 것을 대비하여 복습 차원으로 볼 것이기에 오늘 배운 내용을 토대로 정말 간단하게 핵심만 다루도록 할 것입니다. 개념에 대해 처음 보시는 분들에게는 내용이 부족할 수 있습니다. 하지만 저처럼 생각의 정리가 필요하신 분들에게 조금이나마 도움이 되었으면 좋겠습니다. :) 목차 1. 동기 & 비동기 2. 콜백함수 3. Promise 4. async/await 동기 & 비동기 동기 현재 실행 중인 task가 종료할 때까지, 다음 task가 대기 장점: .. 2021. 8. 12.

티스토리툴바