[C/F TIL] 0일차 - 귀염뽀짝 코드스테이츠 맛보기, 프론트엔드 사전학습

mu-eng·2023년 4월 7일

사전학습 코드스테이츠 코드스테이츠사전학습 프론트엔드부트캠프

TIL (in boost camp)

목록 보기

1/53

Code States
Front-end boost camp
Today
I
Learned

🌻 코드스테이츠 프론트엔드 사전학습

코트 측에서 개강 전 사전학습을 제공해주었다. 사실.. 꽤 오래전에 전달 받았지만 이제 학습해보고 회고한다. 쿠쿠... 총 5개의 주제로 구성되어 있다.

STEP 1. HTML/CSS, 변수와 타입, 함수
STEP 2. 조건문, 반복문
STEP 3. 배열, 객체
STEP 4. class, 태그 속성 적용, CSS 속성값 활용 등 실습
STEP 5. 이전 내용 복습 및 실습

🌻 STEP 1. HTML/CSS, 변수와 타입, 함수

실습 예시 1)

실습 예시 2)

봄이 왔네.. 새싹.. 커엽기도 하지.

마크업 언어 HTML : 구조를 표현함
<>, </> 형태
CSS : 크기, 배경색, 테두리, 텍스트 등 각종 스타일 부여, 태그를 꾸밀 수 있는 언어
class이름엔 ""로 씌워줌
class 형태 : .class { 속성 : 속성값 }
자바스크립트에서 '='은 "같다"라는 의미가 아닌 할당 연산자
변수 : 숫자(Number), 문자열(String), 불리언(Boolean)
함수(function) : 표현식/ 선언식으로 나뉨
선언식 함수 : 키워드를 선수로 함수 작성
표현식 함수 : 예시) let name = function(parameter) { ... }
let 변수 = "할당값";

🌻 STEP 2. 조건문, 반복문

실습 예시 3)

비교연산자 : ===, !==, <, > 등
조건문 : 조건에 따라 분기점이 달라지는 문 즉, 프로그램 내에 주어진 표현식(조건)의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문
if -> else if -> else
if (표현식) { ... }

// 조건문

for (초기화; 조건문; 증감문) {
	조건문의 결과가 참인 동안 반복하고자 실행하고자 하는 실행문;
}

초기화 : 반복문을 시작하기 위한 초기 설정. 반복문에 활용할 변수를 선언 및 할당하는 단계 (ex. let i = 1;), 반복문의 시작점, i(integer)
조건문 : 반복문을 끝내기 위한 종료 조건 설정 단계
증감문 : 반복문이 한 번 실행될 때마다 반복문에 사용되는 변수의 값을 갱신하는 단계 (i = i + 1) === (i++)

🌻 STEP 3. 배열, 객체

배열 : 다수의 값을 담을 수 있는 상자, [ ] 안에 들어가 있는 형태
요소 : 배열 [ ]에 들어가 있는 각각의 값, 요소와 요소는 "," 로 구분

// 배열
let 배열이름 = ['가', '나', '다'];
let 빈배열이름 = [];

//배열에 요소 추가하기 - 변수명.push(추가할 요소)
box.push('라')
console.log(box) // ['라']

// 더 추가하기
box.push('마')
box.push('바')

//새롭게 push를 한 요소는 배열의 가장 마지막 요소로 추가됨
console.log(box) // ['라', '마', '바']

배열의 길이 확인 : console.log(box.length); -> 배열의 요소가 몇개인지 알려줌
배열은 [] 대괄호, 객체는 {} 중괄호
객체는 키와 값으로 이루어짐, 키 : 정보/ 값 : 정보에 대한 값

let 객체이름 = { 키 : 값 };

/* 토마토가 21개인 상자*/
const box = { 토마토 : 21 }

--> 키 : 토마토 / 값 : 21

/*토마토 21개, 감자 35개, 양파 31개, 고구마 13개인 상자*/
const box = {
	토마토 : 21,
	감자 : 35,
	양파 : 31,
	고구마 : 13,
};

/*객체 안에 있는 정보 조회하기*/
객체이름.키 형태

console.log(box.토마토); // 21
console.log(box.감자); // 35
console.log(box.양파); // 31
console.log(box.고구마); // 13

객체에 있는 정보 추가하기 : "객체이름.키 = 값" 형태

예시)

/*농작물이 들어있는 상자*/
const box = {
	토마토 : 8,
	당근 : 5,
	딸기 : 6,
	감자 : 7,
};

/*상자 안에 키위 5개 추가*/
box.키위 = 5;
==> console.log(box.키위); // 5
==> 이미 존재하는 키일 경우, 값이 변경됨

/*기존 값에 새로운 값을 더하는 방법도 있다.*/
box.감자 = box.감자 + 3;
==> 조회하면 감자 7개에 3개가 추가된 10이 값으로 나옴