태그 태그는 paragraph(단락) 을 뜻하는 태그이다. 주로 들여쓰기나 빈 줄로 구분되는 텍스트 단락을 표현하는 데 사용되지만, 텍스트 단락뿐만 아니라 단락처럼 묶고 싶은 내용이라면 어떤 것이든 태그로 묶을 수 있다.ex) 텍스트뿐 아니라 이미지, 입력 필드 등을 태그로 묶을 수 있다!특징1. 블록 레벨 요소 (Block-level Element) 태그는 블록 레벨 요소로, 기본값으로 상하에 여백이 생긴다.블록 레벨 요소란?기본적으로 부모 요소의 전체 너비를 차지하여 '블록'을 만드는 요소.화면에서 새 줄로 시작하며, 기본적으로 전체 너비를 차지한다.2. 닫는 태그 자동 생략 태그는 닫는 태그()가 없더라도 브라우저가 자동으로 닫는 지점을 판단할 수 있다.다만, 명시적으로 닫는 태그를 사용하는 것이..

버전 관리 시스템 (VCS)1. 버전 관리 시스템이 제공하는 것   버전 관리 시스템(VCS)은 팀원이 프로젝트의 변경사항을 효과적으로 기록하고 관리할 수 있는 도구이다.주요 제공 기능모든 팀원이 접근할 수 있는 보관소 (Repository)소프트웨어 변경사항을 기록하는 데이터베이스이다.변경사항을 효율적으로 관리하고 추적할 수 있다.2. Git의 개요   Git은 리눅스의 창시자인 리누스 토발스(Linus Torvalds) 가 만든 분산형 버전 관리 시스템이다.   Git의 장점기존의 버전 관리 시스템보다 속도가 빠르다.심플한 디자인을 가지고 있다.Non-linear development (비선형 개발) 을 지원한다.여러 브랜치를 동시에 개발할 수 있다.Fully distributed (완전 분산형)이다..

리액트의 라이프사이클리액트 컴포넌트에는 라이프사이클이 존재한다. Mount컴포넌트가 처음 탄생한 순간, 즉 처음으로 화면에 렌더링되는 순간을 의미한다."A 컴포넌트가 마운트 되었다" => "A 컴포넌트가 렌더링 되었다."컴포넌트가 화면에 처음 마운트 됐을 때, 백엔드 서버에 네트워크 요청을 보내 데이터를 불러오는 기능을 만들 수 있다. Update마운트 이후에 컴포넌트가 다시 렌더링되는 순간을 말한다. (리렌더링)"A 컴포넌트가 업데이트 되었다" => "A 컴포넌트가 리렌더링 되었다."컴포넌트가 업데이트 될 때 변경된 값이 무엇인지 콘솔에 출력하는 기능 UnMount컴포넌트가 화면에서 사라지는 순간을 말한다.렌더링에서 제외되는 순간"A 컴포넌트가 언마운트 되었다" => "A 컴포넌트가 화면에서 사라졌."..

React Hooks란?클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 도와주는 메서드를 말한다. 나는 이미 사용하고 있었다!!! useState와 useRef도 사실은 React Hooks였다.  React Hooks의 특징React Hooks에는 이름 앞에 접두사 use가 붙는다는 특징이 있다. 함수 컴포넌트 내부에서만 호출 가능하다.조건문, 반복문 내부에서는 호출 불가능하다. Custom Hooks 만들기함수를 만들고 함수의 이름 앞에 단지 use만 붙여주면 된다. 리액트는 내부적으로 use 접두사를 사용하는 함수를 커스텀 훅으로 인식하기 때문에 리액트 훅을 호출하여도 오류를 발생시키지 않는다. 커스텀 훅은 보통 src 폴더 밑에 hooks라는 폴더를 만들어서 보관한다.

FastAPI 어플리케이션을 도커를 사용해 배포해보자. 리눅스 컨테이너 이미지를 생성하여 배포하는 방법은 보안, 반복 가능성, 단순함등의 장점을 갖는다.개념컨테이너의 정의컨테이너(주로 리눅스 컨테이너)는 어플리케이션의 의존성과 필요한 파일들을 모두 패키징하는 매우 가벼운 방법이다. 컨테이너는 같은 시스템에 있는 다른 컨테이너(다른 어플리케이션이나 요소들)와 독립적으로 유지된다. 컨테이너가 시작되면, 해당 커맨드/프로그램이 실행된다.컨테이너 이미지 개념컨테이너는 컨테이너 이미지를 실행한 것이다.컨테이너 이미지란 컨테이너에 필요한 모든 파일, 환경 변수 그리고 디폴트 명령/프로그램의 정적 버전을 의미한다.여기서 정적이란 말은 컨테이너 이미지가 작동되거나 실행되지 않으며, 단지 패키지 파일과 메타 데이터라는 ..

JSX란?JSX란 JavasScript와 HTML의 장점을 결합하여 효율적으로 UI를 구성하는데 도움을 주는 확장된 자바스크립트 문법이다.JSX를 사용하면 JavaScript와 HTML을 혼용하여 사용할 수 있습니다. JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만!{} 내부에는 자바스크립트의 표현식만 넣을 수 있다. 즉, 한 줄의 코드가 특정한 값으로 표현되어야 하기 때문에, if문과 for문은 사용할 수 없다. 대신 삼항 연산자(조건 ? true값 : false값)를 사용해 조건에 따라 값을 표시하거나, map을 사용해 반복적인 렌더링을 할 수 있다. 2. 숫자, 문자열, 배열의 값만 렌더링된다.숫자, 문자열, 배열의 값은 잘 렌더링되지만, boolean값, undefined, null은 ..

이전 포스팅에서  vite를 이용해 앱을 생성하고 npm run dev 라는 명령어를 통해 리액트 앱을 구동시키는 방법을 배웠다.앱을 구동시키고 나면 위와 같은 문구가 뜬다, 여기서 http://localhost:5173/을 클릭하면 가동중인 리액트 앱에 접속된다. 이 때 http://localhost:5173/ 은 어디서 나온 주소일까? 또 우리는 이 주소를 통해 어떻게 리액트 앱에 접속할 수 있었던걸까? 리액트 앱에는 웹서버가 내장되어 있기 때문이다. 또한 사실은 npm run dev가 리액트 서버를 가동시키는 명령어였다!!  그렇다면 localhost라는 주소는 무엇일까? localhost는 내 컴퓨터의 주소를 의미한다. 그렇기 때문에 웹브라우저에서 localhost:5173이라는 주소로 접속한다는..

리액트에서는 자바스크립트 함수가 html 태그를 반환하도록 설정할 수 있고, 이러한 자바스크립트 함수를 컴포넌트라고 한다. 컴포넌트를 부를 때에는 함수 이름으로 부른다. ex) App 컴포넌트클래스를 사용하여 컴포넌트를 만들 수도 있지만, 직접 작성해야 하는 코드의 양이 많아지기 때문에 일반적으로 함수 컴포넌트를 사용한다.컴포넌트를 만들 때에는 주의해야 할 점이 있다.컴포넌트를 생성하는 함수의 이름은 반드시 첫 글자가 대문자여야 한다. 첫 글자를 소문자로 하는 경우, 리액트는 컴포넌트로 인식하지 않는다. 컴포넌트 예시이다.const Header = () => { return Header;};이렇게 컴포넌트를 만든다고 해서 화면에 그려지는 게 아니다. 이 컴포넌트를 App.jsx에 추가해줘야 한다.fun..

Vite라는 차세대 프론트엔드 개발 툴을 사용하면 기본설정이 적용된 React app을 생성하는게 가능하다. Vite은 리액트 공식 문서에서도 권장하고 있기 때문에, 오늘날 대부분의 리액트 앱은 vite를 사용해 만들어졌다고 생각해도 무방하다.vite 이용해서 리액트 앱 생성하기npm create vite@latest위와 같은 커멘드 라인을 작성하고 엔터를 치면 진행할건지 묻는 문장이 나온다. y를 입력하면 된다.그 다음에 엔터를 누르면 차례대로 프로젝트 이름, 프레임 워크, 앱의 버전을 묻는데, 원하는 대로 설정해주면 된다.√ Project name: ... section04√ Select a framework: » React√ Select a variant: » JavaScript다 하고나면 폴더가 ..

리액트란? 리액트는 페이스북(현 메타)이 개발한 프론트엔드를 위한 오픈소스 자바스크립트 라이브러리이다.우리는 리액트를 사용해서 복잡한 대규모 웹서비스의 UI를 좀 더 편하고 빠르게 개발할 수 있다. 리액트는 제공하는 기능이 매우 강력하기 때문에 넷플릭스, 페이스북, 인스타그램, 노션등의 오늘날 여러 대규모 서비스들을 지탱하는 기술로 활발히 사용되고 있다.  리액트의 기술적 특징 리액트는 아래와 같은 기술적인 특징을 갖는다.  각 특징에 대해 더 자세하게 알아보자. ① 컴포넌트를 기반으로 UI를 표현한다. 컴포넌트(Component)란 우리말로 "구성요소"로, 화면을 구성하는 요소/ UI를 구성하는 요소를 말한다. 예를 들어 우리가 구현해야 하는 웹페이지가 헤더, 메인, 푸터 세 가지 부분으로 나눠져 있다..

원시타입과 객체타입의 차이 (글)원시 타입과 객체 타입의 차이점을 알아보자. 자바스크립트의 타입은 크게 원시 타입과 객체 타입으로 나눠지게 된다.자바스크립트 모든타입을 원시타입과 객체타입으로 구분하는 이유는,원시타입과 객체타입은 값이 저장되거나 복사되는 과정이 서로 다르기 때문이다.원시 타입의 경우에는 값 자체로서 변수에 저장되고 복사되는 반면에, 객체 타입의 경우 참조값을 통해 변수에 저장되고 복사된다.원시타입과 객체타입의 차이 (예시)예시를 들어 이해해보자!원시타입첫 번째, 아래와 같은 코드가 있다고 해보자. p1에는 1이라는 값으로 초기화하고 p2에는 p1에 저장된 값을 복사했다.let p1 = 1;let p2 = p1;메모리에는 아래처럼 저장된다.만약에 p2의 값을 2로 변경시키는 코드를 추가하면..

Spread 연산자란?Spread라는 단어의 뜻을 살펴보면 '흩뿌리다', '펼치다' 라는 뜻을 갖는다.Spread 연산자는 객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할을 하는 연산자로 ...의 형태이다.배열에 사용하는 방법let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];두 개의 배열이 있다고 하자. arr2 배열 사이에 arr1을 넣어 [4, 1, 2, 3, 5, 6]으로 만들고 싶을 때,아래처럼 만들면 어떤 불편함이 있을까?let arr2 = [4,arr1[0], arr1[1], arr1[2], 5, 6];console.log(arr2); //4, 1, 2, 3, 5, 6일단 귀찮기도 하고, arr1 배열에 원소가 추가되거나 삭제되어 배열이 변경되는 경우 ar..