TIL

html 태그 다음에는 항상 head 태그가 위치한다.사이트의 제목, 설명, 부가 정보, 기술적 내용이 들어가는 부분이다.<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와

모든 요소의 기본 정렬은 왼쪽 정렬이다.span 태그는 inline-element이기 때문에span이 차지하는 영역은 "span의 오른쪽 정렬"만큼의 길이밖에 안된다.자바스크립트는 다음에 스페이스를 10개를 추가해도하나의 스페이스밖에 적용되지 않는다.이럴 때는 스페이스

해당 프로그램을 실행했을 때 width 값을 주지않는 block 요소는 화면의 크기에 따라 늘어지지만, width값을 줘서 고정시키면 내가 원하는 크기로 고정시킬 수 있게 된다.이때 margin에 auto를 설정해주면 화면 가운데로 오게 만들어 줄 수 있다.margi

객체 객체는 다른 데이터 타입처럼 변수에 저장할 수 있다. {} 만 사용하면 된다. {}생긴 모양의 객체를 object literal이라고 부른다. 객체는 순서가 없는 데이터의 모음이다. 순서가 있는 데이터는 배열이다. key는 property name이라고도 하며,

DOM이란 웹페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이다.JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다.DOM은 HTML인 웹 페이지와 스크립팅언어(JavaScript)를 서로 잇는 역할이다.그래서 JavaScri

github remote에 push를 했기 때문에 로컬의 저장소에서 파일을 삭제해도 원격 저장소에서는 해당 파일이 삭제되지 않고 남아있게 된다.이때는 아래와 같은 명령어를 이용하면 github의 리모트에 존재하는 파일을 삭제하는 것이 가능해진다.원격 저장소와 로컬 저장

JSX는 JavaScript의 확장버전이다.JSX는 JavaScript도 아니고 html도 아니다.React.js를 사용하기 위해서 JSX 문법이 포함되어 있으면, 해당 파일을 정규 javascript 문법으로 변환시키는 컴파일 과정이 필요하다.HTML 문법을 Java

Component는 재사용 가능한 UI 단위이다.기존의 작업들에서는 각각의 요소를 만들기 위해서 동일한 코드를 복사 붙여넣는 형식으로 만들었지만 동일 코드가 반복되는 부분을 하나의 component로 만들어서 동일한 디자인의 input이 필요한 곳마다 재사용할 수 있다

HTML5, CSS3, 애니메이션, 애니메이션 관련, 미디어 쿼리, 레이아웃 연습레이아웃 작성body 부분에 id=wrap으로 해서 작성하고 그 아래에 5가지 요소를 class로 붙인다.해당 사이트로 접속하게 되면 side, contents 부분이 아래로 내려가 있는데

벡엔드로부터 데이터를 받아오려면 api를 React에서 벡엔드로부터 fetch 함수를 이용해서 api를 받아올 때는 대체로 GET 방식과 POST 방식을 통해서 데이터를 받아온다.일반적으로 GET 방식을 사용하고 회원정보와 같은 비밀정보는 POST방식을 통해서 전달하게

merge된 branch가 존재하면git checkout main으로 진입한다.로컬 main에서 merge된 git pull origin main을 받으면 자동으로 branch 전체에 pull 받은 값이 반영된다.다시 내가 코딩하고 있는 branch로 들어간다. git

Intro 이번에 맥북을 새로 장만하게 되어서 vscode를 맥에 설치하고 code 명령어를 이용해서 vscode를 실행하기 위해서 설정을 해주려고 한다. 사실 이전에 vscode를 설치했었는데 재부팅을 하니 명령어와 vscode가 사라져 있어서 잠깐 당황했다가 다시

REST API에서는 요청의 종류에 따라 다른 HTTP 메소드를 사용한다. HTTP 메소드는 여러 종류가 있는데 그 중 주로 사용되는 것은 다음과 같다.GET: 데이터를 가져올 때 사용POST: 데이터를 등록할 때 사용, 인증작업을 거칠 때 사용 (Login 등)DEL

API 기능을 구현하기 전에 koa-bodyparser라는 미들웨어를 적용한다.이 미들웨어는 POST/PUT 등의 메소드의 Request Body에 JSON 형식으로 데이터를 넣어주면 이를 파싱해서 서버측에서 사용할 수 있도록 해준다.bodyParser를 적용해서 다

부모 컴포넌트와 자식 컴포넌트 사이의 관계에서 데이터를 전달할 때는 Props를 이용해야 한다.Props는 부모 컴포넌트에서 자식 컴포넌트로만 전달할 수 있다.부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는 과정에서 Props는 변할 수 없다. (immutable)

TIL Props vs State Props 부모 컴포넌트와 자식 컴포넌트 사이의 관계에서 데이터를 전달할 때는 Props를 이용해야 한다. Props는 부모 컴포넌트에서 자식 컴포넌트로만 전달할 수 있다. 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되는

Firebase를 사용하기 위해서는 우선 Firebase 홈페이지로 이동해서 로그인을 해줘야 한다.로그인을 마친 뒤에 홈페이지에서 Firebase 프로젝트 항목을 볼 수 있는데, 프로젝트 추가를 눌러 프로젝트를 추가한다.https://s3-us-west-2.a

register 폼에 errors가 랜더링되어 출력되지 않길래 이상하게 생각했더니...Firebase의 프로젝트 페이지로 이동해서 빌드 항목의 Authentication을 시작하기를 눌러줘야 제대로 값이 전달 되는 거였다.https://s3-us-west-2.

useRef는 특정한 DOM을 선택하고 싶을 때 사용한다.이게 무슨 말인지 설명하자면, 우선 아래의 코드를 추가하고 파일 삽입 기능을 추가하고 싶다고 했을 때를 예로 들어보자.https://s3-us-west-2.amazonaws.com/secure.notio

provider: 테라폼으로 생성할 인프라의 종류를 의미resource: 테라폼으로 실제로 생성할 인프라 자원을 의미state: 테라폼을 통해 생성한 자원의 상태를 의미output: 테라폼으로 만든 자원을 변수 형태로 state에 저장하는 것을 의미module: 공통적

Infrastructure as a Code의 약자로 IT 서비스를 위한 시스템을 구성할 때 수동으로 구성하는 대신 Shell 기반의 스크립트를 사용하여 컴퓨팅 인프라를 구성하는 기술.보통 '프로그래밍형 인프라'라고도 하는 Infrastructure as a Code는

시스템 → 리눅스, 윈도우네트워크AWS 클라우드 - public, private클라우드 업체 → 가상화라는 형식으로 서비스를 지원AWS의 콘솔을 이용해서 클라우드를 컨트롤 하는 것이 아니라 IaC를 이용해서 클라우드를 설계하고 실제 장비 쪽으로 배포한다.서버 - 일반적

서울 리전: ap-northeast-2ap-northeast-2VPChttps://docs.aws.amazon.com/공인 IP이기 때문에 요금이 발생해 반드시 삭제해야 한다.공인(Public) && 사설(Private) IP의 차이점공인 IP는 전세계에서 유

고객사가 요구하는 대로 서버 인스턴스 구성을 할 수 있어야 한다.시스템네트워크 (VPC) - 온프레미스 환경에서는 네트워크 환경을 구축할 수 있지만 되지만 클라우드 환경에서는 장비를 물리적으로 세팅할 수 없기 때문에 설정만 할 수 있다.클라우드 서비스protocol통신

AWS EC2 활용팁