웹 용어에 대해 정리해보았다.GNB (Global Navication bar)웹사이트 전체에 동일하게 적용되는 내비게이션 바이다.보통 웹사이트 최 상단에 위치하며 어떤 페이지를 클릭해도 동일하게 보여지며 메인 메뉴이다.  LNB (Local Navigation Bar)GNB를 클릭하거나 마우스를 댔을 때 나오는 하위 카테고리 리스트로 서브 메뉴이다.  SNB(SIde Navigation Bar)보통 왼쪽이나 오른쪽에 위치해 Side라고 표현해 보통 메인 메뉴와 서브 메뉴를 제외한 기타 메뉴로 구성한다.  FNB (Foot Navigation Bar)GNB와 동일하게 모든 웹페이지 가장 하단에 위치한 내비게이션 바로 보통 웹페이지가 기업이라면, 기업의 로고와 연락처, 주소 등 웹페이지의 정보를 기재한다.

비동기통신, 동기통신은 웹에서 데이터를 주고받는 방식을 설명한다.동기통신(Sync), 비동기통신(Async) 차이점동기(Synchronous)요청과 응답이 동시에 일어난다는 뜻직렬적으로 태스크(task)를 수행 (순차처리)웹페이지를 새로고침하면서 데이터를 불러오는 방식대표적인 예 - Form 제출 : 클라이언트에서 폼을 서버에 제출하면 서버로부터 새로운 웹페이지를 받아서 화면에 표시한다.웹페이지의 전체를 갱신할 수 있게 해주는 기술이 바로 동기(Sync) 통신이다.동기 통신의 장점동기(Sync) 통신은 비동기(Async) 통신보다 코드를 작성하고 이해하는 것이 쉽다.요청과 응답이 순차적으로 이루어지기 때문에 코드의 간결성과 직관성을 유지할 수 있다.동기(Sync) 통신은 요청을 보낸 후에 응답을 받아야 ..

페이로드 란?페이로드(payload)는 전송되는 데이터를 의미합니다. 데이터를 전송할 때, 헤더와 메타데이터, 에러 체크 비트 등과 같은 다양한 요소들을 함께 보내어, 데이터 전송의 효율과 안정성을 높히게 됩니다. 이 때, 보내고자 하는 데이터 자체를 의미하는 것이 바로 페이로드입니다. 우리가 택배 배송을 보내고 받을 때, 택배 물건이 페이로드이고, 송장이나 박스, 뾱뾱이와 같은 완충재 등등은 부가적인 것이기 때문에 페이로드가 아닙니다.추가적으로 위키피디아에 아주 이해하기 좋은 예시가 아래와 같이 나와있어서 첨부합니다.페이로드(payload)라는 단어는 운송업에서 비롯하였는데, 지급(pay)해야 하는 적화물(load)을 의미합니다. 예를 들어, 유조선 트럭이 20톤의 기름을 운반한다면 트럭의 총 무게는 ..

블로그를 만들면서 자세한 설명 글을 위해 codepen을 삽입을 해보았다.일반 삽입 방법오른쪽 하단의 Embed를 클릭한다.클릭하면 아래와 같은 모달창이 뜨는데 원하는 방식으로 코드를 복사해 와 적용하면 된다.  블로그에 적용 중인 코드iframe의 소스코드를 가져와 주소를 동적으로 받아오고 있다. See the Pen videoTag by pminsun (@pminsun) on CodePen.  티스토리 삽입 방법오른쪽 하단의 Embed를 클릭한다.HTML(Recommended) 복사한다.글쓰기 공간에서 기본모드에서 HTML 모드로 변경 후 원하는 위치에 복사한 코드를 붙여놓는다.

React에서 빠르게 아이콘을 사용할 수 있는 react-icons에 대해 알아보고자 한다. react-icons 주소 React Icons react-icons.github.io react-icons 설치한다.yarn add react-icons# ornpm install react-icons --save 해당 사이트에 들어가면 좌측에는 아이콘을 검색할 수 있는 검색 창과 아이콘의 종류들이 있습니다.사용하고 싶은 아이콘을 클릭하면 해당 아이콘의 이름이 복사 됩니다. 그리고 아이콘 종류마다 어떻게 import하면 되는지 설명이 있습니다. ex) import { IconName } from "react-icons/hi";  보통 아이콘의 첫 번째 단어 ex) HiArrowSmLeft (Heroicons 왼..

React개발 시 기본적으로 Node.js 위에서 개발을 하며 package.json 파일에 기본 설정을 하게 된다.개발을 진행하다 보면, 개발 환경과 배포 환경을 다르게 해야 하는 경우가 생긴다.개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다..env의 종류에는 .env.local, .env.development, .env.test, .env.production 이 있다.  React.js CRA(Create-React-App)  사용하여 프로젝트를 시작한다.기본적으로 node.js는 production(배포), development(개발), test(테스트)로 구분하여 사용한다.그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다.# prod..

meta 태그 태그는 HTML 문서의 사이에 입력하는 특수 태그로서 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용합니다.viewport - 반응 형 웹 구현Keywords - 검색엔진에 의해 검색되는 단어 지정Description - 검색 결과에 표시되는 문자 지정author - 웹 페이지의 소유자(또는 회사) 작성  OpenGraph오픈그래프는 웹페이지가 소셜 미디어 또는 오픈그래프를 활용한 사이트로 공유될때 사용되어지는 정보이다. 기본적으로 설정해야하는 og 메타태그 Naver 블로그, 카카오톡 미리보기 설정  트위터 미리보기 설정  모바일 앱 미리보기 설정    Next.js에서 meta 태그 적용하기 정적 메타 태그개인적으로 Layout에서 화면 구성을 하고..

파비콘(favicon)이란?즐겨찾기 아이콘. 즐겨찾기(favorites)와 아이콘(icon)의 합성어로, 인터넷 웹 브라우저의 주소 창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다. 일반적으로 16*16 사이즈로 만들지만 디바이스가 다양해진 만큼 다양한 크기의 아이콘을 만드는 것이 좋다. 그 아이콘은 웹 브라우저 상단에 있는 탭에 표시되기도 하며 브라우저의 북 마크바 나 방문 기록, 검색 결과에서 페이지 url과 함께 표시되기도 한다.  파비콘 만드는 추천 사이트  Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App..