프론트엔드

1. 객체란?자바스크립트의 객체는 관련된 데이터와 함수의 집합입니다. 객체는 프로퍼티(속성)와 메서드로 구성됩니다.const person = { name: 'Lee', // 프로퍼티 age: 20, // 프로퍼티 sayHello() { // 메서드 console.log(`Hello, I'm ${this.name}`); }};  2. 객체 생성 방법2.1 객체 리터럴가장 일반적이고 간단한 방법입니다.const obj = { property1: 'value1', property2: 'value2'};2.2 Object 생성자 함수const obj = new Object();obj.property1 = 'value1';obj.proper..

`제어문`은 코드의 실행 흐름을 제어하는 문입니다. 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용합니다. 1. 블록문 (Block Statement)0개 이상의 문을 `중괄호`로 묶은 코드 블록자바스크립트는 블록문을 하나의 실행 단위로 취급{ var foo = 10; console.log(foo);}2. 조건문 (Conditional Statement)2.1 if...else 문주어진 `조건식`의 평가 결과에 따라 실행할 코드 블록 결정if (조건식) { // 조건식이 true일 때 실행} else { // 조건식이 false일 때 실행}2.2 switch 문주어진 표현식의 평가 결과와 일치하는 case 문으로 실행 흐름 이동switch (표현식) { case 값1: // 표현식..

단위 테스트(Unit Test)특정 조건에서 어떻게 작동해야 할지 정의한 것 (기능을 테스트)Input에 따라 계산한 결과를 Output으로 반환하는 것 (`함수`)단위 테스트 3단계1. 준비(arrange) : Input을 준비하는 단계2. 실행(act) : Input을 전달받아 함수를 실행하는 단계3. 단언(assert) : 결과를 검증하는 단계이러한 단위 테스트를 통해 `테스트 주도 개발(TDD)`을 할 수 있다. 테스트 주도 개발(Test Driven Development)적색(Red), 녹색(Green), 리팩터(Refactor) 순환테스트하기 쉬운 코드관심사의 분리🔍 적색(Red), 녹색(Green), 리팩터(Refactor) 순환적색(Red) : 실패하는 테스트 작성녹색(Green) : 테..

지난번에 CI/CD를 구축하고 나서 정적 페이지를 호스팅까지 했었다.오늘은 AWS의 CDN(Content Delivery Network) 서비스인 CloudFront를 이용해 정적, 동적 콘텐츠를 배포하고자 한다.[CI/CD 구축] / [CloudFront 정리]1. CloudFront 생성`원본 도메인`을 선택하고, `원본 엑세스`를 원본 엑세스 제어 설정으로 선택하고 `OAC(Origin Access Control)`을 생성한다.*OAC(Origin Access Control) 목적S3 버킷에 대한 직접 접근을 차단CloudFront를 통해서만 S3 콘텐츠에 접근 가능하도록 제한뷰어 프로토콜은 선택사항이지만, HTTPS만 사용하기 위해서 HTTP 요청을 HTTPS로 리다이렉트하도록 설정한다.`기본값 ..

React 프로젝트의 빌드 결과는 정적 리소스 파일(`.html`, `.js`, `.css` 등)이다. 정적 리소스 파일은 `AWS S3 버킷`에 올려 baseURL을 index.html로 연결시켜 클라이언트가 baseURL에 접속했을 때 index.html을 받도록 한다. 클라이언트측인 브라우저는 `S3 버킷`에 필요한 리소스를 요청하여 정적 리소스를 전달한다.1. AWS S3 버킷⭐️ S3 버킷 생성`버킷 만들기` 버튼을 눌러 버킷을 생성할 준비를 한다.버킷의 이름은 자유롭게 작성하고 `퍼블릭 엑세스 차단 설정`에서 모든 퍼블릭 엑세스 차단을 해제한다.그리고 버킷 만들기를 클릭하여 버킷을 생성한다.⭐️ 버킷 정책 편집`버킷 정책 편집`에서 새 문 추가를 클릭하여 기존 문을 아래와 같이 알맞게 내용을 ..

CI/CD는 자주 접해본 단어인데 소규모 프로젝트만 해보면서 되게 멀게만 느껴졌던 단어였다. Wouldyouguess? 프로젝트를 진행하면서 팀원 형님이 CI/CD를 구축하는 모습을 보면서 '아 어렵구나...'라고만 생각했었다. 구축이 된 이후에는 '아 편하구나...'라고 느꼈는데 이번을 기회로 차근차근 내용을 습득해보고자 한다.1. CI/CD란?일반적인 애플리케이션 개발 단계개발(develop) → 빌드(build) → 테스트(test) → 릴리즈(release) → 배포(deploy)CI/CD는 `지속적 통합(Continuous Integration)` / `지속적 배포(Continuous Deployment) or 지속적 제공(Continuous Delivery)`의 줄임말로, `CI`는 빌드 및 ..

제어문조건에 따라 코드 블록을 실행(`조건문`), 반복 실행(`반복문`)할 때 사용한다. 제어문을 사용해 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문블록문은 0개 이상의 문을 중괄호(`{}`)로 묶은 것으로 코드 블록 또는 블록이라고 부른다.자바스크립트에서 블록문은 하나의 실행 단위로 취급한다.문의 끝에는 세미콜론(`;`)을 붙이지만 블록문은 자체 종결성을 갖고 있기 때문에 세미콜론을 붙이지 않는다.// 블록문{ var foo = 10;}// 제어문var x = 1;if (x  조건문조건문은 주어진 조건식의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.if 문의 조건식이 불리언 값이 아닌 값으로 평가되면 자바스크립트 엔진에 의해 ..