전송 계층 전송 계층 이전에 네트워크 계층의 IP의 활약으로 전송될 데이터의 네트워크가 어디인지 알게 됩니다. 전송 계층에서는 그 다음 일이 일어납니다. 받아온 데이터를 활용할 프로세스를 구분하는 역할이 전송 계층에서 일어납니다. 프로세스 구분은 포트(PORT)를 통해 이뤄지며, 이미 사용중인 포트는 중복해서 사용할 수 없습니다. 포트번호는 0번부터 65535번까지 사용할 수 있습니다. 이 중 0번부터 1023번까지는 Well Known 포트로 주요 통신 규약에 따라 이미 정해진 것들입니다. 가장 잘 알려진 포트번호로는 80번(HTTP), 443번(HTTPS), 22번(SSH)가 있습니다. 세그먼트(TCP)와 데이터그램(UDP) 세그먼트(TCP 헤더 + 데이터) TCP는 Transmission Contr..
흔들거리는 sticky 헤더 상단에 고정되어야 할 헤더가 스크롤을 움직일때마다 덜덜덜 떨리는 현상이 발생했습니다. 이 현상은 flickering이라는 현상이고, sticky나 fixed를 사용할 때 간헐적으로 발생하는 버그인 것 같습니다. 이 현상을 해결하기 위해 sticky나 fixed에 z-index를 같이 주라는 답변도 있고, 하드웨어 가속을 사용하라는 답변도 있었는데 모두 통하지 않았습니다. https://github.com/ampproject/amphtml/issues/18469 jridgewell의 답변은 일부 발췌하면 position sticky의 flickering 현상은 쉽게 고쳐질 수 없는 것이 아니라고 합니다. 그런데 의외의 방법을 통해 이 버그가 해결되었습니다. width를 수정하니..
앱 라우터에 scss 세팅 공식문서를 참고하면서 scss를 앱 라우터에 세팅해보았습니다. Next.js 공식문서가 하나부터 열까지 세세하게 잘 알려줘서 어렵지 않게 했습니다. 그래도 헤메실 누군가를 위해 그리고 또 잊어버릴 저를 위해,,, 기록을 다시 한번 남겨봅니다. 이 게시글에서는 앱 라우터에 scss를 설치하고 초기 셋팅 하는 방법까지를 기록합니다. https://nextjs.org/docs/app/building-your-application/styling/sass Styling: Sass | Next.js Using App Router Features available in /app nextjs.org 설치할 것 npm install --save-dev sass 먼저 sass를 설치해야 합니다...
네트워크 계층 네트워크 계층은 물리적으로 연결되어 있는 (MAC 주소로 연결되어 있는) 공간을 떠나 네트워크를 통해 다른 네트워크를 찾아가는 단계라고 정의할 수 있습니다. IP(Internet Protocol)라는 키워드가 등장합니다. IP는 네트워크 계층에서 정보를 송수신하는 통신 규약입니다. MAC 주소가 랜카드의 물리적인 주소였다면, IP는 어느 한 네트워크 집단의 주소라고 생각할 수 있습니다. 데이터 링크의 데이터에 숨어있는 네트워크 데이터 데이터 링크 계층의 데이터 속에 네트워크 데이터가 있습니다. 네트워크 데이터는 목적지 IP 주소, 출발지 IP 주소, 다음 계층에 넘겨줄 데이터 등으로 구성되어 있습니다. 대략적인 이해를 위해 아래 그림을 참고하면 좋을 것 같습니다. 네트워크의 구성 일반적인 ..
문제 인지 토이 프로젝트의 유지보수를 하다가 아래와 같은 에러를 만나게 되었습니다. You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used. emotion/react가 로드 되어있는 상태에서 emotion/react를 또 로드하고 있다는 에러 메세지였습니다. next.js 내부에서 emotion을 사용할 것으로는 짐작을 하고 있었지만, 추가적으로 emotion을 설치한 적은 없어서 약간은 당혹스러웠습니..
유효성 검증 구현 프론트엔드 개발자는 서버에 올바른 데이터를 전달하기 위해서 유효성 검사를 고려해보아야 합니다. 저의 경우에는 댓글을 다는 기능을 구현했었고, 서버에는 닉네임, 비밀번호, 댓글 내용을 전송해야 했습니다. 저는 유효성 검증을 통해 너무 짧거나 긴 닉네임, 비밀번호, 댓글 내용이 서버로 전달되는 것을 사전에 방지하고자 했습니다. 구상 유효성 검증 기능 구현 자체는 어렵지 않았습니다. 그래서, 어떻게 코드를 도입해야 기존 로직이 깔끔하게 보일 수 있을지 고려 해보았습니다. 코드의 로직을 깔끔하게 하려면 응집도가 있는 코드들끼리 모으는 것을 베스트라고 생각했고, 유효성 검증 기능을 커스텀 훅으로 빼면 좋겠다는 생각을 했습니다. useValidation 원시적인 형태의 훅을 개발했습니다. useV..
데이터 링크 계층 0과 1로 구성된 데이터가 의미를 갖게되는 계층입니다. 데이터의 목적지가 어디인지, 출발지는 어디인지, 네트워크 유형은 어떤걸 사용할 것인지, 전달하고자 하는 데이터는 무엇인지 등을 하나로 묶어 프레임(Frame)이라는 단위로 만듭니다. 프로토콜(통신규약)은 이더넷을 사용합니다. 주요 장비 스위치 / 허브 동작원리 물리 계층에서 변환된 비트가 그대로 비트로만 남아있다면 쓸모있는 데이터가 아니게 됩니다. 비트로 변환된 데이터를 이더넷이라는 프로토콜(통신규약)으로 묶어 의미있는 단위로 재조립하는 과정이 데이터 링크 계층에서 벌어집니다. 이 계층에서 데이터의 목적지 MAC 주소와 데이터를 보낸 MAC 주소가 규명됩니다. MAC 주소는 랜 카드의 고유한 주소로써 각자의 컴퓨터를 대변하는 주소입..
물리 계층 물리적인 장치의 전기적, 전자적 연결에 대한 명세입니다. 컴퓨터는 기본적으로 0과 1만 읽을 수 있습니다. 이를 디지털 데이터인 비트라고 합니다. 디지털 데이터(비트)를 아날로그 신호(전기 신호)로 변환하거나, 그 반대로 변환하는 기능을 합니다. 주요 장비 랜카드, 랜선 동작원리 컴퓨터는 0과 1로 이루어진 데이터만 다룰 수 있습니다. 하지만 현실 세계에서는 0과 1로만 세상을 표현할 수 없습니다. 따라서 이를 전기 신호로 컴퓨터에게 전달하고자 합니다. 하지만 전기 신호는 0과 1처럼 딱 떨어지는 값이 아닙니다. 전기신호는 sin 그래프처럼 파동 형태로 나타납니다. 랜카드는 전기의 파동에서 신호가 강하고 약하고의 차이를 잡아 0과 1로 변환해줍니다. 파동은 손실되거나, 데이터 변환간 오류가 있..
white-space - white-space 는 엘리먼트 내 공백을 어떻게 다뤄야 하는지 설정하는 CSS 프로퍼티이다. - CSS 작업 중, 줄바꿈이나 공백을 표현하려고 할 때, 의도대로 잘 동작하지 않는 경우에 사용해볼 수 있다. 문법 /* Keyword values */ white-space: normal; // 공백 축소 처리. 개행문자(\n)는 공백과 동일하게 처리됨. white-space: nowrap; // 공백 축소 처리. 글자수가 많아지면 태그가 박스를 깨고 나감. white-space: pre; // 공백 보존(preserve). 개행은 개행문자와 엘리먼트에서 이뤄짐. white-space: pre-wrap; // 공백 보존. 개행은 박스 넓이, 개행문자, 에 의해 이뤄짐. white-..
전체 코드 import { useState } from "react"; export default function EditProfile() { const [isEdit, setIsEdit] = useState(true); const [input, setInput] = useState({ firstName: "", lastName: "" }); const handleIsEdit = (e) => { e.preventDefault(); setIsEdit(!isEdit); }; const handleInput = (e) => { setInput({ ...input, [e.target.name]: e.target.value }); }; return ( First name:{" "} {input.firstName}..
