트랜스포트 계층이란 무엇일까?트랜스포트 계층은 네트워크에서 데이터를 전송할 때 중요한 역할을 담당하는 계층 중 하나로, 애플리케이션 프로세스 간의 논리적인 통신을 제공합니다. 쉽게 말해, 서로 다른 컴퓨터에서 실행되는 프로그램들이 서로 데이터를 주고받을 수 있도록 돕는 계층입니다.이때 트랜스포트 계층은 네트워크 계층과 함께 작동하는데, 네트워크 계층이 호스트 간의 통신을 담당하는 반면, 트랜스포트 계층은 호스트 내부 프로세스 간 통신을 담당합니다. 따라서 트랜스포트 계층은 호스트 간 논리적인 통신 외에도, 각 호스트 내에서 애플리케이션 프로세스가 데이터를 주고받을 수 있도록 보장합니다.트랜스포트 프로토콜: TCP와 UDP트랜스포트 계층에서 사용되는 두 가지 주요 프로토콜은 TCP(Transmission ..

나도 예전에는 발표가 정말 떨리고 두려웠다. 청중 앞에 서서 말하는 게 얼마나 부담스러운지, 아마 다들 공감할 거다. 그런데 그 두려움을 극복할 수 있었던 계기가 바로 전국대학생연합발표동아리 SPLing에서의 경험이다. 나는 6개월 동안 기수로 활동하면서 매주 다양한 주제로 발표를 준비했고, 그 과정에서 내가 느낀 점들을 바탕으로 스토리텔링을 연습했다. 때로는 나의 이야기를 녹여낸 발표도 했고, 정보를 소개하거나 마케팅을 목적으로 하는 발표도 진행했다. 이런 다양한 발표 경험을 통해 점점 발표에 대한 자신감을 키울 수 있었다.기수가 끝난 후에는 운영진으로 6개월 더 활동하며, 나처럼 처음 발표를 시작하는 사람들에게 내가 배운 것들을 어떻게 전해줄지 고민했다. 기획팀장으로 활동하면서 발표 주제 선정부터 이..

코드를 작성하다 보면, 코드 블록을 하이라이트해서 가독성을 높이는 것이 중요합니다. 특히 기술 블로그나 문서 작성에서 코드를 더 잘 보여주기 위해 코드 하이라이트 기능을 자주 사용하죠. 이번 프로젝트에서도 MDX 파일에서 코드 블록을 잘 보여주기 위해 하이라이트 문제를 해결한 경험을 공유하려고 합니다.문제: MDX 파일에서 코드 블록 하이라이트가 제대로 되지 않음처음에는 MDX 파일에서 코드 블록을 작성했지만, 코드의 가독성이 떨어졌습니다. 코드 블록에 하이라이트가 제대로 적용되지 않았기 때문에, 이를 해결하기 위해 라이브러리를 찾아보게 되었습니다.더보기✅MDX 파일이란?MDX는 Markdown과 JSX를 결합한 포맷입니다. Markdown은 간결하게 글을 작성할 수 있는 언어로, 주로 블로그나 문서 작..

여러분, 코딩하면서 이런 상황 겪어본 적 있나요?"어? 분명 코드는 잘 썼는데 왜 갑자기 오류가 뜨지?""이거 분명 동작은 하는데... 뭔가 이상해..."혹시 내가 놓친 버그나 잘못된 문법이 있을까 걱정되죠? 바로 이때 ESLint가 도와줄 수 있습니다😊ESLint란 뭐지?쉽게 말해서, ESLint는 "코드 경찰"이에요. 여러분이 자기도 모르게 저지르는 작은 실수들을 찾아내고 알려주는 똑똑한 툴이죠. 자, 예를 들어볼게요. 우리가 JavaScript 코드를 작성할 때, 어디서 변수 하나 빼먹었거나, 함수 괄호를 잘못 닫았을 때 "삑삑!" 하면서 알려줘요. 마치 교통 신호를 지키는 경찰처럼요.코드를 막 쓰고 나서 "괜찮겠지?"라고 생각했는데, 갑자기 ESLint가 와서 "잠깐! 여기서 변수 하나 안 썼잖..

웹 개발을 하다 보면 링크를 클릭했을 때 새 탭에서 열리도록 설정하는 경우가 자주 있습니다.이를 위해 보통 target="_blank" 속성을 사용합니다. 하지만 이 속성만 사용했을 때 보안 문제가 발생할 수 있다는 사실을 알고 계셨나요? 이번 글에서는 target="_blank"와 함께 rel="noopener noreferrer"를 사용하는 이유와 그 방법에 대해 알아보겠습니다.1. target="_blank"의 기본 기능target="_blank"는 HTML에서 링크()를 클릭할 때 새 탭에서 열리도록 설정하는 속성입니다. 예를 들어, 아래와 같이 작성하면 링크가 새 탭에서 열립니다.Visit사용자는 이 링크를 클릭하면 기존 페이지는 그대로 유지된 채로 새 탭에서 링크된 페이지를 열 수 있습니다. ..

프로젝트를 진행하면서 다크 모드를 추가로 작업하게 되었습니다. 이 과정에서 팀원들의 제가 수정하는 일이 생겼습니다. 그런데 코드를 이해하는 데 시간이 오래 걸리는 문제를 겪게 되었습니다. 특히 주석이 거의 없거나 부족할 때, 상대방이 짠 코드를 파악하는 데 어려움이 많았습니. 그때 깨달은 것이, 코드 작성 시 중요한 부분만 주석을 남기는 게 아니라 팀 프로젝트에서는 모든 사람이 코드를 쉽게 이해할 수 있도록 주석을 잘 작성하는 것이 중요하다는 사실입니다.이 글에서는 주석을 효율적으로 다는 방법과, 팀원들이 코드의 흐름을 쉽게 이해할 수 있도록 도와주는 좋은 주석 작성법에 대해 알아보겠습니다.왜 주석이 중요한가?코드의 가독성 향상주석은 코드를 읽는 사람이 코드의 의도와 구현 방식을 더 쉽게 이해할 수 있도..

Atomic 디자인은 UI 컴포넌트를 설계할 때 작은 단위부터 큰 단위까지 점진적으로 조합해나가는 방법론입니다. 이 방법론은 Brad Frost가 제안한 디자인 시스템으로, 생물학의 원자론에서 착안해 UI 컴포넌트를 마치 원자(atom), 분자(molecule), 유기체(organism)와 같이 작은 구성 요소들로 나누어 관리하는 구조입니다.이 디자인 방법론의 핵심은 재사용성과 확장성을 고려한 컴포넌트 설계를 가능하게 한다는 점입니다. 프로젝트가 커지고 복잡해질수록 단일 컴포넌트가 여러 곳에서 사용될 수 있는데, 이때 Atomic 디자인을 적용하면 코드 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.Atomic 디자인의 5가지 구성 요소Atoms (원자)원자는 더 이상 나눌 수 없는 가장 작은 단위입니다..

처음에는 카드 컴포넌트를 간단하게 만들 생각이었습니다. 사용자가 입력한 내용을 카드 안에 문자열로만 출력하는 방식이었습니다. 예를 들어, 카드에 들어갈 내용을 "description"이라는 Prop으로 받아서 출력하면 충분하다고 생각했습니다.const CardBasic = ({ title, description }: { title: string, description: string }) => { return ( {title} {description} );};이처럼 문자열만 받는 방식은 굉장히 간단하고 빠르게 구현할 수 있었습니다. 단순 텍스트를 출력하는 상황이라면 충분한 방법이었습니다.하지만, 확장성 문제프로젝트가 진행되면서 사용자가 입력할 내용이 단순한 텍스트가 아닐..