🙄궁금했던 이유 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)와 같은 기능을 기본적으로 가지고 있습니다...
🐕 쿠키 Domain 쿠키에 저장할 도메인 정보 Path 서버가 라우팅할 때 사용하는 경로 MaxAge or Expires 쿠키의 유효기간 정하는 옵션 Secure 프로토콜에 따른 쿠키 전송 여부 옵션 HttpOnly 자바스크립트로 쿠키에 접근 가능한지 결정하는 옵션 SameSite Cross-Origin 요청을 받은 경우 요청에서 사용한 메소드와 해당 옵션의 조합을 기준으로 서버의 쿠키 전송 여부를 결정 다양한 옵션이 있음 Domain 쿠키옵션에서 도메인은 포트 및 서브 도메인 정보, 세부 경로를 포함하지 않습니다. 서브 도메인이란 www 같은 도메인 앞에 추가로 작성되는 부분을 말합니다. 따라서 요청해야할 URL이 http://www.localhost.com:3000/users/login 이라고 가정..
🐕 ARP(Address Resolution Protocol) ARP는 간단하게 생각하면 MAC 주소를 알아내기 위한 프로토콜 입니다. 왜 MAC 주소를 알아내야 하는가 하면 IP 주소 체계는 물리적 MAC 주소와 연관성이 없지만 두 주소를 연계시킬 필요성이 있기 때문입니다. ARP 프로토콜의 헤더는 다음과 같이 구성됩니다. 하드웨어타입(2계층) 프로토콜 타입(3계층) 하드웨어 주소 길이 (2계층) 프로토콜 주소 길이 (3계층) 오퍼레이션 코드 송신자 하드웨어 주소 (2계층) MAC 주소 송신자 프로토콜 주소 (3계층) IP 주소 대상자 하드웨어 주소 (2계층) 대상자 프로토콜 주소 (3계층) IP 주소 MAC 주소가 없으면 곤란한 이유는 데이터 링크 계층에서 주소 매핑을 할수가 없어지기 때문입니다. M..
제가 자주 사용하는 속성들을 간단히 정리합니다. Animation transition all transition 효과 duration 100 , 200 , 300 전환 기간 delay 100 150 전환 지연 rotate 0~6 요소 회전 ease-in-out ease-in-out 애니메이션 처리 skew skew-(x or y)-1 요소 기울이기 요소 가운데 정렬 flex display:flex justifycenter justifycontent-center itemscenter alignitem-center 자주 사용하는 디자인 속성 rounded md, lg , xl ,2xl etc border radius border border-(n*2) border border t,r,b,l top, left..
