🐕 SSG는 뭐임... CSR, SSR은 어느정도 알고 있다고 생각하는데 Next.js 생태계로 들어가보면 처음 보는 단어들이 튀어나옵니다 SSG는 뭐고 ISR은 뭔가 싶어요 fullname으로 보면 이해가 쉬울 것 같아 찾아보니 SSG는 "Static Site Generation"을 뜻한다고 합니다. 직역하면 정적 사이트 생성으로 해석할 수 있겠네요 SSG와 ISR은 서버사이드 렌더링 환경에서 성능과 사용자 경험을 개선하는 데에 사용하는 일반적인 기술입니다. 웹사이트의 콘텐츠들을 빌드 시점에서 사전 구축하여 정적인 HTML 페이지의 형태로 사용자에게 제공하는 것 이라고 요약을 할 수가 있겠네요 SSG는 빌드 시점에 페이지를 생성해두는 것 정도로 이해하고 넘어가겠습니다. 엄밀한 개념은 다를 수 있지만요...
🐕Proxy 우선 프록시 서버가 무엇인지 간단히 알아보고 리액트 프록시에 대해 알아보도록 하겠습니다. 혹시 글에 오류가 있다면 알려주세요.. https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9D%EC%8B%9C_%EC%84%9C%EB%B2%84 프록시 서버 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 도식화한 프록시 서버. 두 컴퓨터 사이에 끼어 있는 컴퓨터가 바로 프록시 서버이다. 프록시 서버(영어: proxy server 프록시 서버[*])는 클라이언트가 자신을 통해 ko.wikipedia.org wikipedia에서는 프록시 서버를 다음과 같이 설명합니다. 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 ..
⚡문제정보 https://www.acmicpc.net/problem/1094 1094번: 막대기 지민이는 길이가 64cm인 막대를 가지고 있다. 어느 날, 그는 길이가 Xcm인 막대가 가지고 싶어졌다. 지민이는 원래 가지고 있던 막대를 더 작은 막대로 자른다음에, 풀로 붙여서 길이가 Xcm인 막대 www.acmicpc.net 백준은 입력받는게 귀찮아보여서 멀리하고 있다가 입력받기 아하모먼트가 오면서 허겁지겁 문제를 푸는 중입니다. 가볍게 실버 5 문제 하나 풀어봤읍니다. 조건은 간단합니다 64보다 작은 자연수 X가 주어지고 그 자연수를 만들기위해 필요한 막대의 수를 구하면됩니다. 막대는 반드시 반으로만 자를 수 있는데 반으로 자른 막대의 길이가 X보다 작다면 막대 하나를 버립니다. 여기까지 이해가 되었다..
🙄궁금했던 이유 import Link from 'next/link'; import React from 'react'; const HomeHeader = () => { return ( Gmail Images Zinyu ); }; export default HomeHeader; Next.js로 구성한 프로젝트에서 Link 컴포넌트를 이용해 라우팅을 해줬습니다. 그런데 이게 빌드된 결과물을 보면 따로 어떤 처리가 들어간것도 아니라 그냥 href 속성만 가진 a태그로 변하게되는데 Link 컴포넌트는 어떻게 흰화면을 보여주지 않을 수 있는걸까요? 어떻게 새로고침 없이 url을 변경시켜줄 수 있는 것일까요? https://hun1846.medium.com/next-js-link-db4a183a68a0 Next JS..
🐕 웹 표준 웹표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙입니다. 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일한 view와 정상적인 작동을 보장할 수 있게하는 웹페이지 제작 기법을 담고 있습니다. 크롬, 엣지 , 사파리, 오페라 , 파이어폭스 등 최신 웹 브라우저들은 모두 웹 표준을 지원합니다. 웹 표준은 다음과 같은 장점을 지닙니다. 1. 유지보수의 용이성 웹 표준으로 HTML , CSS , Javscript등의 사용 방법을 정리하는 것을 통해 각 영역이 분리되면서 유지보수가 용이해졌고 코드가 경량화 되었습니다. 2. 웹 호환성 확보 웹 사이트가 특정 운영체제 , 브라우저에 종속된다면 그 외 환경에서는 정상적..
🐕 Typescript는 브라우저에서 실행될 수 없다. 처음 웹에 입문하고 절 가장 힘들게 했던 것은 이것이었습니다. 리액트가 중요하다는데..? 타입스크립트가 좋다는데? 쌩으로 CSS 쓰는거보다 SCSS 배워야한다는데? 하면서 여러가지를 설치하고나면 항상 그것을 컴파일 or 트랜스파일해주고 번들링해줄 추가적인 툴들이 필요합니다. 많이 사용되는 것으로는 바벨, 웹팩, 롤업 등이 있을 수 있겠네요. 왜 열심히 만들어둔 우리의 프레임워크, 라이브러리를 그대로 사용할 수 없고 HTML, CSS , JS로 변환하는 과정이 필요한 것일까요? 그것은 브라우저가 인식할 수 있는 파일이 HTML, CSS , JS이기 때문입니다. 즉 리액트로 아무리 JSX를 멋지게 써내려가도 ts로 멋지게 코드를 작성해도 그것이 우리의 ..
🐕 yarn berry yarn berry, yarn2 , yarn3.~~ 등 여러가지 이름으로 불리지만 결국 다 같은 것을 지칭한다고 볼 수 있습니다. yarn berry가 왜 좋은지 yarn berry를 왜 사용하는지는 이미 구글에 yarn berry를 검색하는 것만으로도 같은 내용으로 도배되어있는 자료들을 찾아볼 수 있으니 굳이 서술하지는 않겠습니다. yarn berry를 도입하려고 한 이유는 다음과 같습니다. 1. yarn berry의 zero install과 pnp(plug and play)가 너무나도 매력적이었기 때문에 2. npm install의 느린 속도에 진절머리가 나서 3. 조금 오만하지만.. npm은 어느정도 익숙해졌다는 생각이 들어서 4. yarn이 2020년부로 유지보수 모드에 들..
🐕 스위치 스위치는 2계층에서 동작하는 네트워크 장비입니다. 2계층이기에 MAC 주소를 기반으로 동작합니다. 여기까지는 잘 알고 있는 내용이지만 스위치가 MAC 주소를 어떻게 이해하고 활용하는 지에 대해서...는 이야기하기가 힘드네요 스위치는 네트워크 중간에서 패킷을 받아 필요한 곳에만 보내주는 네트워크의 중재자 역할을 수행합니다. 아무 설정 없이 네트워크에 연결만 해도 MAC 주소를 기반으로 패킷을 전달하는 기본 동작을 스위치는 수행할 수 있어요! 또한 스위치는 MAC 주소를 인식하고 패킷을 전달하는 스위치의 기본적인 동작 이외에도 한대의 장비에서 "논리적"으로 네트워크를 분리할 수 있는 VLAN 기능과 네트워크의 루프를 방지하는 스패닝 트리 프로토콜(STP)와 같은 기능을 기본적으로 가지고 있습니다...
