1. Vercel 회원가입https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com우측 상단의 Sign up을 선택합니다.  1-1. Plan Type / Your NameHobby를 선택하여 개인적인 프로젝트를 학습용으로 배포할 것임을 알려줍니다.Your Name에는 이름을 입력하면 되는데 **영어**로 입력하셔야 합니다. 1-2. 가입..

📌 배포 준비사항1. 페이지 타이틀페이지 타이틀은 브라우저 탭과 검색 엔진에서 표시되는 이름입니다. 페이지의 목적과 브랜드를 명확히 전달하고 검색 엔진 최적화(SEO)를 개선합니다. 제목은 탭에 렌더링되는 HTML의 태그로 정해집니다.  2. FaviconFavicon은 브라우저 탭에서 페이지 제목 왼쪽에 표시되는 작은 아이콘입니다. 브랜딩과 사용자의 시각적인 인식을 돕습니다. 3. 오픈 그래프 (Open Graph)오픈 그래프는 링크를 공유할 때 미리보기 정보(이미지, 제목, 설명)를 제공합니다. 이는 링크를 공유할 때 매력적이고 명확한 정보를 제공하여 클릭률을 높일 수 있습니다. HTML에서 태그를 이용해 만듭니다. 웹 서비스의 링크를 SNS나 카카오톡, 슬랙 등과 같은 채팅 서비스에서 공유할 때 ..

📌 Link컴포넌트[ 클라이언트 사이드 렌더링 (CSR) ] • React Router에서 Link 컴포넌트를 사용하면, 브라우저는 전체 페이지를 새로고침하지 않고 필요한 부분만 교체하여 화면을 업데이트합니다. • SPA(Single Page Application)의 장점을 활용할 수 있습니다. • 페이지 전환 시 네트워크 요청과 DOM 초기화 과정을 최소화하여 속도가 더 빠릅니다. [ 애플리케이션 상태 유지 ] • 페이지 이동 시 애플리케이션 상태(Redux상태, 컴포넌트의 로컬 상태 등)가 유지됩니다. [ 사용자경험(UX) 개선 ] • 페이지 전환이 바로 이루어져 끊김 없는 사용자 경험을 제공합니다.  📌 a 태그 [ 서버 사이드 렌더링 (SSR) ] • a 태그를 사용하면 브라우저는 페이지 이..

📌 처음 만나는 자바스크립트 인터넷 웹 페이지는 다음과 같은 세 개의 언어로 만들어집니다.⓵ HTMLHTML(HyperText Markup Language)은 텍스트, 이미지, 버튼, 메뉴 등과 같이 웹페이지에 나타나는 모든 요소의 배치와 내용을 기술하는 언어입니다. 예를 들면, HTML로 개발한 웹 페이지는 웹 브라우저에 띄운 움직이지 않는 정적인 온라인 신문이 있습니다. ⓶ CSSCSS(Cascading Style Sheets)는 색상이나 크기처럼 웹 페이지 요소의 스타일을 정할 때 사용하는 언어입니다. ⓷ JavaScript자바스크립트는 웹 페이지에 동적인 기능을 장착할 수 있게 도와줍니다. 버튼의 클릭, 정보의 입력, 페이지 스크롤, 페이지 이동 등 웹 브라우저에서 이루어지는 모든 동작은 자바스..

📌 AJAX의 출현 배경초기 웹은 정적인 HTML 페이지로 구성되어 있어, 사용자가 정보를 요청할 때마다 전체 페이지를 새로고침해야 했습니다. 이로 인해 사용자 경험(UX)은 제한적이고, 웹 애플리케이션의 상호작용이 불편했습니다. AJAX는 이러한 문제를 해결하기 위해 등장했습니다.    📌 AJAX (Asynchronous Javascript and XML) 란 ?AJAX (Asynchronous JavaScript and XML)는 웹 페이지가 전체를 새로 고침하지 않고 서버와 비동기적으로 데이터를 주고받을 수 있게 해주는 기술입니다. 이를 통해 웹 애플리케이션은 서버에 요청을 보내고, 서버에서 응답을 받은 후, 그 데이터를 페이지에 동적으로 반영할 수 있습니다.   📌 동기방식 vs 비동기 방..

📌 SPA란 ? (single page application)SPA는 하나의 페이지로 만들어진 어플리케이션을 의미합니다. html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax 통신을 통해서 처리합니다. 브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리하게 됩니다. 또한 멀티플랫폼 Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용됩니다. 하지만 SPA에도 단점이 존재합니다 🥹앱의 규모가 커지면 JS파일도 너무 커져서 로딩이 오래 걸리게 됩니다. 그로 인해 브라우저에서 렌더링이 완료되기까지 빈 화면이 나오게 됩니다.따라서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리합니다. (웹팩 설정 필요)   📌 라우팅이란 ?라우팅은 브라우저..

📌 React 스타일링⓵ 태그에 직접 디자인 적용하기스타일 속성 중에 -로 연결된 속성은 카멜표기법으로 대체하여 적어줍니다.안녕하세요? ⓶ 일반 css파일에 디자인 후 import 기능을 통해 연결하기📍--- App.css .app-title { border: 1px solid #777; color: red;}-------------------------------------------------------📍--- App.jsimport './App.css'; //--- css파일 importfunction App() { css파일로 디자인하기 }export default App; ⓷ css 모듈 사용하기파일은 '컴포넌트명.module.css' 형식으로..

📌 훅(Hook)이란 ?리액트 훅은 React 16.8버전에 새로 추가된 기능으로 함수형 컴포넌트에서 사용되는 기술을 의미하며 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능입니다. 예시로는 useState, useEffect가 있습니다.   📌 훅의 규칙Hook은 반복문, 조건문, 중첩된 함수 내에서 실행하면 안되고 최상위 scope에서만 호출해야합니다.  이 규칙을 따르면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장받을 수 있습니다. 또한 함수형 컴포넌트에서만 Hook을 호출해야합니다.   📌 반드시 알아야 하는 기본 훅✔︎ useState(초기값)배열을 반환하는 함수이며 첫번째 배열 요소에는 현재값을, 두번째 배열 요소에는 상태를 변경..

📌 Map 함수목록 요소들을 반복 처리할 때에는 map 함수를 사용하고, 반복 컴포넌트에는 반드시 key props를 전달해야합니다. ✔︎ key란 ? map함수를 호출할 때 콜백함수의 인자로 넘어오는 index값으로 컴포넌트를 렌더링 하였을 때 어떤 원소가 변경되었는지 빠르게 감지하기 위해 사용하는 키워드입니다. 만약 key가 지정되지 않았다면 가상 DOM을 순차적으로 비교하면서 변경사항을 감지하기 때문에 key가 없을때보다 속도가 느립니다.  아래는 키가 설정되지 않았을 때 나타나는 console창입니다.key값을 지정하지 않는다고해서 화면이 렌더링되지 않는 것은 아닙니다. 하지만 콘솔창에 이와 같이 유니크한 key prop값을 입력하라고 경고문을 남겨주네요.자 그러면 key를 설정하러 가봅시다! ..