Front-End/웹 (Web)6 React(SPA)에서 Next.js(SSR)를 써야하는 이유 원티드에서 주관하는 7월 프리온보딩 프론트엔드 챌린지에 참가하게 되었다. 참가하기에 앞서 직접 해보길 권장하는 사전 과제가 있었다. 1. CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요 2. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유에 대하여 설명해주세요. 3. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. 과제를 진행하면서 유익한 공부가 되었기에 해당 과제와 관련된 지식들을 정리하고, 이후에도 참.. 2023. 7. 21. [Web] 웹 표준과 접근성 매일 인터넷을 통해 웹 페이지들을 방문하고, 사용하다보면 문득 드는 의문점이 있다. 사람마다 쓰는 기기도 다르고 브라우저도 다른데, 어떻게 모든 웹 사이트가 똑같이 보여질 수 있는걸까? 이는 대부분의 웹 페이지들이 "웹 표준"이라는 것을 잘 지키고 있기 때문이다. 그렇다면 웹 표준이란 정확히 무엇을 말하는걸까? 인터넷과 웹 표준 다음 문구를 살펴보자. 웹이란 인터넷을 포함하는 개념이다. 틀린 말이다. 인터넷은 컴퓨터로 연결하여 TCP/IP라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다. 반면 웹은 월드 와이드 웹(World Wide Web, WWW)의 약자로 인터넷을 통해 사람들이 문서, 이미지, 영상 등 다양한 정보를 공유할 수 있는 전 세계적인 정보 공간이다. 따라서 위 문구는 아래와.. 2022. 11. 20. [HTTP/네트워크] REST API 앞선 포스팅을 통해 우리는 웹 브라우저의 작동 원리와 HTTP 프로토콜에 대해 배웠다. 여기서 한 가지 의문이 든다. 웹 페이지 구성 시 필요한 리소스를 가져올 수 있는 더 간단한 방법이 없을까? 이에 대한 해답으로 API가 있다. API와 REST API API (Application Programming Interface)란 "응용 프로그램 프로그래밍 인터페이스"로, 클라이언트에게 리소스를 잘 활용할 수 있도록 서버에서 제공하는 인터페이스다. 좀 더 은유적으로 표현하자면 고객(사용자)이 식당(서버)에서 음식(리소스)을 주문하기 위해 필요한 메뉴판과 같다. 하지만 만약 메뉴판이 위와 같다면 어떨까? 사용자가 메뉴판을 읽을 수 없으니 주문을 할 수 없을 것이다. 물론 인내심이 많은 고객은 위 메뉴판을 천.. 2022. 11. 5. [Web] UI와 UX 가끔 웹 서핑을 하다 보면 우리는 '불편한 경험'을 하곤 한다. 예를 들어 온라인 쇼핑몰에서 장바구니에 물건이 담기지 않는다거나, 상품에 대한 정보를 자세히 알 수 없다거나, 재고가 없음에도 있다고 표시가 되는 등의 상황을 겪었다고 가정해보자. 많은 사람들은 이 '불편한 경험'으로 인해 더 이상 해당 웹 페이지를 방문하지 않을 것이다. 우리는 인터넷의 방대함과 신속한 처리 속도에 익숙해져 있기 때문에 웹 페이지를 사용하면서 조금의 불편함이라도 느낀다면 현실에서 느끼는 불편함보다 더 강렬하게 와 닿는다. 그렇다면 어떻게 해야 사용자가 '불편한 경험'을 하지 않을 수 있을까? UI와 UX 좋은 웹 페이지를 디자인하기 위해서 우리는 사용자 인터페이스(UI)와 사용자 경험(UX)이 무엇인지 명확히 알 필요가 .. 2022. 11. 3. [HTTP/네트워크] HTTP와 브라우저 작동 원리 처음 프론트엔드 개발에 대한 것을 배우고자 한다면 우선 가장 기본이 되는 HTML/CSS/JavaScript를 접하고 배우게 된다. 그리고 우리는 이 과정을 통해 웹 페이지의 뼈대가 HTML을 기반으로 한 하이퍼텍스트로 구성되어 있다는 것을 알 수 있었다. 이전 포스팅에서 언급 했듯, 웹 브라우저는 HTML과 같은 문서를 전송하기 위해 HTTP(HyperText Transfer Protocol)라는 프로토콜을 사용한다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었으며, HTTP를 이용해 주고받는 메세지를 HTTP 메세지라고 한다. 그렇다면 HTTP라는 통신 규약을 통해 우리는 어떻게 웹 페이지를 구성하고 작동시키는 걸까? 브라우저 작동 원리 웹 브라우저는 앞서 언급됐던 TCP/IP, HTT.. 2022. 10. 19. [HTTP/네트워크] 웹 애플리케이션 구조 프론트엔드 개발자가 된다고 결심했을 때, 혹은 그보다 먼 옛날 처음 "인터넷"이란 걸 썼을 때부터 궁금했던 것이 있었다. 위키백과에 따르면 인터넷은 "컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이요해 정보를 주고받는 컴퓨터 네트워크"라고 정의하고 있다. 통신 프로토콜,컴퓨터 네트워크...다소 생소한 개념들이다. 무엇을 의미하는걸까? 웹 애플리케이션 구조(아키텍쳐) 많은 사람들이 인터넷은 "통신"을 통해 내가 요구한 어떤 "데이터"를 받아오는 것이라는 걸 알고 있다. 그렇다면 이 데이터를 받아오는 통신은 구체적으로 어디로, 그리고 어떤 식으로 보내는 걸까? 간단한 예시를 통해 생각해보자. 아침으로 빵을 먹기 위해.. 2022. 10. 17. 이전 1 다음
