개발하는 방

[패스트캠퍼스] 프론트엔드 강의 8주차 - React, Redux

Thu, 16 Feb 2023 04:58:47 GMT

8주차에는 React와 Redux를 학습한 것으로 알고 있습니다. 이번 주차에서는 React와 Redux의 개념과 사용 방법, 그리고 React에서 Redux가 어떻게 만들어졌는지 직접 만들어보는 과정을 진행하면서 어떻게 사용되는지에 대해 학습했습니다.

React

React는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나입니다. React는 컴포넌트 기반의 라이브러리로, 재사용성이 높고 유지보수가 용이하다는 장점을 가지고 있습니다. 이번 주차에서는 React의 개념과 컴포넌트, 상태(state)와 속성(props), 이벤트 처리 등을 직접 라이브러리로 만들어보고 사용하는 방법에 대해 학습했습니다.

Redux

또한, Redux는 React와 함께 사용되는 상태 관리 라이브러리입니다. Redux를 사용하면 상태를 중앙에서 관리할 수 있으며, 상태 변경에 따른 문제점을 예측하고 해결할 수 있습니다. 이번 주차에서는 Redux의 개념과 작동 방식, 그리고 Redux를 React에서 사용하는 방법 등에 대해 학습했을 것입니다.

React와 Redux를 학습하면서, 컴포넌트와 상태, 이벤트 처리, 그리고 상태 관리 등에 대해 많은 것을 배울 수 있었습니다. 특히, Redux를 사용하면서 상태 관리의 필요성과 Redux를 사용하여 상태를 관리하는 방법에 대해 배울 수 있었습니다. 이러한 지식을 토대로 실제 웹 프로젝트를 진행할 때 상태를 관리하고 UI를 구성하는 데 도움이 될 것입니다.

하지만, React와 Redux는 복잡한 개념을 다루는 만큼 학습하기에 어려움이 있을 수 있습니다. 이러한 어려움을 극복하기 위해서는 학습을 꾸준히 이어나가는 것이 중요할 것 같습니다. 이번 강의를 통해서 라이브러리를 기초적인 부분에 대해 직접 구현해보면서 React와 Redux에 대해 쉽게 접근할 수 있었습니다. 또한, 실제로 프로젝트를 진행하면서 React와 Redux를 활용하는 경험을 쌓는 것이 중요합니다. 이번 교육을 통해 배웠던 것을 토대로 앞으로 더욱 전문적인 수준으로 성장하겠습니다!

[패스트캠퍼스] 프론트엔드 강의 7주차 - 스타벅스 클론 코딩

Thu, 16 Feb 2023 04:10:02 GMT

스타벅스 클론 코딩 강의는 원래 3주차 부터 진행하는 것이지만, 클론 코딩 중 javascript에 대한 내용도 들어가기 때문에, Javascript에 대해 어느 정도 공부한 뒤 진행하고 싶어서 7주차에 진행하게 되었습니다.

이론만 배우고 쉽게 까먹을 수 있는데, 그 동안 배웠던 내용들에 대해서 총 정리 및 적용해볼 수 있었던 시간이었습니다. 특히 추상적이었던 개념들이 실습을 진행하면서 구체적으로 머릿속에 그려지는 과정들이 매우 만족스러웠습니다.

아래 이미지는 제가 직접 클론 코딩한 스타벅스 홈페이지 입니다.

아래 이미지는 클론 코딩 프로젝트의 구조입니다! 엄청 간단해 보이지만 그 안에 내용은 엄청나게 많습니다..!

특히, 유튜브 영상을 API로 불러들여서 홈페이지 내부에 재생시키는 부분을 학습하면서 open api 의 개념도 잘 학습할 수 있었습니다. 아래는 해당 api의 코드입니다.

      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an  (and YouTube player)
      //    after the API code downloads.
      function onYouTubeIframeAPIReady() {
        // 
        player = new YT.Player('player', {
          videoId: 'An6LvWQuj_8', // 최초 재생할 유튜브 영상 ID
          playerVars: {
            autoplay: true, // 자동 재생 여부
            loop: true, // 반복 재생 여부
            playlist: 'An6LvWQuj_8', // 반복 재생할 유튜브 영상 ID 목록
          },
          events: {
            onReady: function (event) {
              event.target.mute() // 음소거
            }
          }

        });
      }

7주차에 클론 코딩을 진행하면서 html, css, javascript를 총 복습하면서 더욱 익숙해지는 계기가 되었습니다. 하지만 아직도 부족한 점들이 많기 때문에 작성했던 코드들을 복습하면서 스스로도 깔끔한 웹 페이지 UI를 만들 수 있도록 노력해야될 것 같습니다!

[패스트캠퍼스] 프론트엔드 강의 6주차 - Javascript 데이터 및 실습

Thu, 16 Feb 2023 04:02:01 GMT

const searchEl = document.querySelector('.search')
const searchInputEl = searchEl.querySelector('input')

searchEl.addEventListener('click', function () {
  searchInputEl.focus() // 강제 포커싱
})

searchInputEl.addEventListener('focus', function() {
  searchEl.classList.add('focused') // search 요소 클래스명에 ' focused' 추가
  searchInputEl.setAttribute('placeholder', '통합검색') // 검색창에 placeholder 추가 
})

searchInputEl.addEventListener('blur', function() { // 'blur' : 포커스 해제 시
  searchEl.classList.remove('focused') // search 요소 클래스명에서 ' focused' 삭 제
  searchInputEl.setAttribute('placeholder', '') // 포커스 해제시 placeholder 삭제
})

위 코드는 js로 데이터 제어 실습을 하면서 실제로 DOM API를 통해서 html을 제어하는 코드 일부 이미지입니다. 이를 통해 Html에 좀 더 역동적인 동작을 부여할 수 있다는 것을 배웠습니다! 이런 동작들을 편리하게 제공해주는 라이브러리인 'lodash'를 6주차에 정리해보았습니다!

lodash 유용한 메소드

lodash는 default 통로로 가져오는 방법으로 { } 으로 감싸지 않고 할당받는 변수명을 자유롭게 쓸 수 있다. 통상적으로 언더바 ( _ )를 사용한다.

_ . uniq( arr ) -> arr

중복 요소를 제외한 배열을 리턴한다. (=집합)

_ . uniqBy(arr, identity) -> arr

중복을 구별할 식별자를 통해 arr의 중복을 제거한 배열을 반환한다.

_ . unionBy(...arr, indentity) -> arr

식별자를 토대로 중복을 제거하여 합친 배열을 반환한다.

_ . find(collection, identity, fromIndex=0)

콜렉션에 0번 인덱스부터 식별자 조건에 부합하는 요소를 탐색하고, 가장 먼저 탐색되는 요소를 반환한다.

_ . findIndex(collection. identity, fromindex=0)

find와 로직이 같고 반환하는 값만 요소가 아닌 해당 인덱스를 반환한다.

_ . remove(collection, indentity)

식별자 조건에 부합하는 모든 요소를 콜렉션에서 지운다.

lodash documentation

[패스트캠퍼스] 프론트엔드 강의 5주차 - Javascript 심화학습

Thu, 16 Feb 2023 03:54:40 GMT

5주차 과정에선 Javascript 에 대한 심화 학습 내용으로 많은 것을 배웠습니다. 아래 목록과 같은 내용들을 전부 배웠습니다!

Arguments
Array
Arrow Function
Boolean
CallBack
Destructuring Assignment
DOM API
ECMAscript
ES6 Class
extends
function
Hoisting
IIFE
Immutability
import & export & default
JSON
lodash
Math
Method
null
Number
Object
prototype
Reference Type
Shallow Copy & Deep Copy
spread operator
Object Static Method
Storage
String
this
timer
typeof
Undefined
Variable Scope

javascript는 html과 css와 함께 웹 애플리케이션 개발에 있어서 중요한 프로그래밍 언어입니다. js를 통해 html의 요소를 제어할 수 있는데 이러한 것을 DOM API로 제어할 수 있습니다. DOM API 가 중요하다 생각하여 해당 내용을 정리해 보았습니다!

JS DOM API

Document Object Model, Application Programming Interface의 약어이다. 이때 DOM은 HTML의 div, span, input 같은 요소들을 가리킨다. 쉽게 말해서 JS로 HTML를 제어할 때 사용하는 명령어들을 DOM API 라 한다. 이러한 기능들은 브라우저의 JS 엔진에 이미 정의되어 지원되는 것들이다.

웹 앱에 'UI'를 핸들링 할 수 있는 유일한 방법이다. 웹 앱을 만드는데 거의 모든 기능을 제공해주지만 다루기가 까다롭고, 웹 애플리케이션 제작에 최적화 되어 있지 않다. 따라서 react나 redux를 사용해서 이러한 불편함들을 해결할 수 있다.

script defer 속성

'defer' 속성은 html의 head 영역에 script 태그를 사용하여 HTML과 JS 파일을 연동할 때 필요한 속성이다. 만약 defer을 적용하지 않는다면, 연동되는 시점에 JS 파일이 html의 body 영역은 해석하지 못하는 문제가 발생한다. 이런 문제가 발생하면 body의 요소들을 JS에서 인식하지 못 하기 때문에 DOM API들을 사용하지 못하게 된다. 따라서 defer을 적용하게 되면 head 에서 연동되는 시점에 body 영역을 해석하는 것이 아니라 html 구조가 전부 해석된 다음 body 영역을 해석하게 된다

요약: JS 파일을 HTML 문서 분석 이후에 실행하도록 지시하는 속성

`document.querySelector()`

HTML 요소(Element) 1개 검색/찾기

const 변수명 = document.querySelector('선택자명');

만약 같은 클래스명의 요소가 여러 개 존재하는 경우, html 구조 상 가장 위에 있는 요소가 선택된다.

`document.querySelectorAll()`

HTML 요소(Element) 모두 검색/찾기

const boxEls = document.querySelectorAll('.box');
console.log(boxEls);

// <콘솔 출력>
// NodeList(3)
// 0: div.box
// 1 div.box
// 2: div.box
// length: 3
// [[Prototype]]: NodeList

데이터 유형: 배열같이 생겼지만 '유사 배열(Array-like)' 타입이다

`document.createElement()`

const ulEl = document.querySelector('ul')

const li = document.createElement('li')
li.textContent = 'String'

ulEl.appendChild(li)

ulEl 부모 요소에 li 자식 요소 추가하는 방법이다. createElement를 통해 요소를 js로 생성할 수 있고, selector로 가져온 요소에 appendChild로 생성한 요소를 자식 요소로 등록할 수 있다. 등록된 순서대로 차례대로 구조상 위에서 부터 쌓인다.

`forEach()`

querySelectorAll()로 찾은 요소들에 대해 반복해서 함수를 실행한다. 익명 함수를 인수로 추가한다.

boxEls.forEach( function( boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});

// 첫 번째 매개변수(boxEl): 반복 중인 요소
// 두 번째 매개변수(index): 반복 중인 번호

각 매개변수 이름은 개발자가 자유롭게 정할 수 있다. 두 번재 매개변수는 통상적으로 index로 적는다. 두 번째 매개변수(index)는 생략 가능하다.

`addEventListener()`

HTML 요소에 이벤트를 생성/적용할 수 있는 메소드이다.

// HTML 요소 1개 검색 및 할당
const boxEl = document.querySelector('.box');

// 첫 번째 인수 - 이벤트(이벤트의 정보)
// 두 번째 인수 - 핸들러(실행할 익명 함수)
boxEl.addEventListener('click', function () {
  console.log('Click~!');
});

`classList`

요소의 클래스 정보 객체를 활용하는 속성이다.

elem.classList.add()
elem.classList.contains()
elem.classList.remove()

위 에서 'elem'은 querySelector를 통해 얻은 HTML의 요소를 저장한 변수이다.

const boxEl = document.querySelector('.box');

// boxEl에 해당하는 요소의 클래스명에 '띄어쓰기 + 문자열'이 추가된다.
boxEl.classList.add('active'); // -> class="box active"

// 클래스명에 해당 문자열이 포함되어 있는지.
let isContains = boxEl.classList.contains('active');
console.log(isContains); // true

// boxEl에 해당하는 요소의 클래스명에 '띄어쓰기 + 문자열'이 삭제된다. 
boxEl.classList.remove('active'); // -> class="box"
isContains = boxEl.classList.contains('active');
console.log(isContains); // false

`textContent`

querySelector()로 찾은 요소의 내용(Content)에 대해 Getter or Setter 로 활용된다.

const boxEl = document.querySelector('.box');

// Getter
console.log(boxEl.textContent); // box

// Setter
boxEl.textContent = 'new box'
console.log(boxEl.textContent); // new box

메소드 체이닝(Method Chaining)

조건을 부합하는 메소드들을 이어서 사용하는 것을 메소드 체이닝이라 한다.

const a = 'Hello';
const b = a.split('').reverse().join(); // 메소드 체이닝

console.log(a); // Hello
console.log(b); // olleH

<메소드 설명>

split : 문자를 인수(구분자, separator) 기준으로 쪼개서 배열 반환
reverse : 배열을 뒤집기
join : 배열을 인수 기준으로 문자열로 병합 반환 (default: '')

주의❗️ split 바로 뒤에 join 은 사용 못한다.

[패스트캠퍼스] 프론트엔드 강의 4주차 - javascript 기초

Thu, 16 Feb 2023 03:42:27 GMT

4주차에서는 JavaScript의 기초 문법을 학습했습니다. 이번 주차에서는 변수, 연산자, 조건문, 반복문, 함수 등에 대한 개념과 사용 방법에 대해 요약 정리해보았습니다.

Javascript 란?

우선, JavaScript는 웹 프로그래밍에서 가장 중요한 언어 중 하나입니다. 이번 주차에서 배운 변수, 연산자, 조건문, 반복문, 함수 등은 JavaScript를 이해하는 데 매우 중요한 기초 개념들입니다. 이를 제대로 이해하고 활용하는 것은 웹 프로그래밍을 하는 데 매우 중요합니다.

특히, 함수는 JavaScript에서 가장 중요한 개념 중 하나입니다. 함수를 이용하면 코드의 재사용성을 높일 수 있으며, 유지보수를 쉽게 할 수 있습니다. 이번 주차에서는 함수의 정의와 호출, 매개변수와 반환값, 함수 스코프 등 여러 가지를 배웠습니다. 이를 제대로 이해하고 활용하는 것은 웹 프로그래밍에서 매우 중요합니다.

또한, JavaScript의 데이터 타입과 형변환, 객체와 배열 등에 대한 학습도 진행했을 것입니다. 이를 이해하면서, 데이터를 다루는 방법과 객체와 배열을 이용하여 유연하게 데이터를 처리하는 방법을 배울 수 있었습니다.

Javascript 개요

주석

// 한 줄 주석

/* 한 줄 주석 */

/**
* 여러 줄 주석
* 메모 1
* 메모 2
*/

데이터 종류(자료형)

String
Number
Boolean
Undefined
Null
Object
Array

JS로 개발할 땐 데이터를 중심으로 사고해야한다. JS는 모든게 데이터로 이루어져 있다.

변수 선언

let 변수 = 값;

변수는 재사용, 재할당 가능하다.

상수 선언

const 상수 = 값;

상수는 재사용은 가능하지만, 재할당은 불가능하다.

예약어(Reserved Word)

특별한 의미와 용도가 있어서 변수나 함수 이름 등으로 사용할 수 없는 단어이다.

this
if
break
etc

조건문

조건의 결과(true, false)에 따라 코드를 분기 실행하는 구문이다. 키워드는 if 와 else가 있다.

if (isShow) {
  console.log('show!');
} else {
  console.log('hide!');
}

일치 연산자 vs 동등 연산자

일치 연산자 '===' : 두 변수의 메모리 주소 값이 같은지 참/거짓, 형변환 없이 실제 값 비교
동등 연산자 '==' (사용 미권장) : 형 변환(Type Conversion) 이 일어나서 값을 비교한다.

1 === '1' // false
1 == '1' // true

불리언 형 변환(Type Conversion)

Truthy(참과 같은 값)
- true
- {} (객체, 빈객체)
- [] (배열, 빈배열)
- 양수, 음수
- 문자열

Falsy(거짓과 같은 값)
- false
- '', "" (빈 문자열 또는 빈 문자)
- null
- undefined
- 0
- NaN (Not a Number) <- 1 + undefined

리터럴 생성 방식

특정 기호로 어떤 데이터를 바로 만들어내는 방식을 리터럴 방식이라 한다.

const obj = {}

const str = "a"

const arr = []

[패스트캠퍼스] 프론트엔드 강의 3주차 - CSS 심화학습

Thu, 16 Feb 2023 02:26:19 GMT

3주차에서는 CSS에 대한 심화 학습을 진행했습니다. 이번 주차에서는 CSS의 다양한 속성 활용법에 대해서 배웠습니다. 정말 다양한 속성들이 존재하고 활용할 수 있는 방법도 엄청 많았습니다.

이번 주차에서는 CSS의 심화 학습을 통해 웹 사이트를 구축할 때 필요한 다양한 기술들을 배웠습니다. 이를 실제로 능숙하게 활용하려면 더 많은 연습이 필요하겠지만, CSS에 대한 공부 방향을 잡을 수 있었던 것 같습니다. 더욱 전문적인 수준으로 익혀나갈 수 있도록 연습을 많이 하는것이 중요할 것 같습니다!

3주차 때 배운 CSS Properties

backface-visibility
background
border
box-sizing
display
flex
flex-container
flex-items
font
margin
opacity
overflow
padding
perspective
position
text
transform
transition
width, height

위 속성들 중 flex 에 대한 내용이 어려웠는데, 해당 내용으로 한 번 정리 요약을 해보았습니다!

CSS flex

부모 요소에 display: flex; 를 적용하면 자식 요소가 수평 정렬된다. 이때, 부모 요소를 Flex Container라고 하고, 자식 요소를 Flex Items 라고 한다.

Flex Container에 사용 가능한 속성들

display
flex-flow
flex-direction
flex-wrap
justify-content
align-content
align-items

Flex Items에 사용 가능한 속성들

order
flex
flex-grow
flex-shrink
flex-basis
align-self

CSS Flex Container

부모 요소인 Flex Cotainer에 적용 가능한 속성들은 아래와 같다.

`display`

Flex Container의 화면 출력(보여짐) 특성

flex : 블록 요소와 같이 Flex Container 정의
inline-flex : 인라인 요소와 같이 Flex Container 정의

`flex-direction`

주 축(Main-Axis)을 설정; 수평정렬? or 수직정렬? 보통 블록 요소는 기본적으로 수직으로 쌓이기 때문에 column 속성값들은 거의 쓰지 않음. 주축에 직각인 축을 교차축(Cross-Axis)라고 한다. 주축과 교차축, 시작점과 끝점은 상대적이다.

<수평>

row : 행 축 정렬(좌 -> 우)
row-reverse : 행 축 정렬 (우 -> 좌)

<수직>

column : 열 축 정렬 (위 -> 아래)
column-reverse : 열 축 정렬 (아래 -> 위)

<시작점과 끝점>

flex-start: 시작점
flex-end: 끝점

`flex-wrap`

Flex-items 묶음(줄 바꿈) 여부

nowrap(기본값) : 묶음(줄 바꿈) 없음
wrap : 여러 줄로 묶음

자식 요소들이 정렬될 때 컨테이너의 너비를 초과하면 요소들의 너비가 찌그러진다. 이 현상을 막기 위해 만약 컨테이너의 너비를 초과한다면 줄 바꿈을 하는 속성이다(wrap). 줄바꿈을 하면 자식 요소의 너비는 찌그러지지 않는다.

`justify-content`

주 축의 정렬 방법

flex-start(기본값) : Flex Items(자식 요소들) 를 시작점에서 정렬
flex-end : Flex Items 를 끝점에서 정렬
center : Flex Items 를 가운데에서 정렬

주의 ❗️

flex-direction 을 바꿔서 주축을 변경하지 않는 이상, 정렬되는 위치만 다를 뿐 정렬되는 요소들의 순서는 바뀌지 않는다!

Tip ⭐️

보통 자식 요소들의 '수평 정렬'에 사용된다.

`align-content`

교차 축의 '여러 줄' 정렬 방법. flex는 대부분 수평 정렬에 사용하게 되므로 교차 축을 보통 수직 축으로 생각하면 편하다.

stretch(기본값) : Flex Items(자식 요소들)를 교차축으로 늘림
flex-start : Flex Items를 시작점으로 정렬
flex-end : Flex Items를 끝점으로 정렬
center : Flex Items를 가운데 정렬

사용 시 주의 사항 ❗️

align-content를 사용하기 위해선 두 줄 이상이어야 하고 컨테이너의 여백이 남아 있어야 한다. 즉 flex-wrap: wrap; 적용이 선행되어야 하고 컨테이너에 여유 공간이 남아 있어야 한다.

Tip⭐️

사용 조건이 위 사항처럼 까다롭기 때문에 해당 속성보단 'align-itmes' 속성을 더 많이 사용하게 된다.

`align-items`

교차 축의 '한 줄' 정렬 방법

stretch : Flex Items(자식 요소들)를 교차 축으로 늘림
flex-start : Flex Items를 각 줄의 시작점으로 정렬
flex-end : Flex Items를 각 줄의 끝점으로 정렬
center : Flex Items를 각 줄의 가운데 정렬

자식 요소들의 정렬이 한 줄에서 표현이 된다면 align-items를 사용하는 것이 좋고, 여러 줄로 표현이 된다면 align-content를 사용하는 것이 좋다.

Tip ⭐️

보통 자식 요소들의 '수직 정렬'에 많이 사용된다.

CSS Flex Items

자식 요소들인 Flex Items에 적용 가능한 속성들은 아래와 같다.

`order`

Flex Item 의 정렬 순서를 지정한다

0 (기본값) : 순서 없음
숫자 : 숫자가 작을 수록 먼저, 음수 사용 가능

`flex-grow`

Flex Item의 증가 너비 비율, 컨테이너의 '여백'을 차지하는 비율 정도를 의미한다.

0(기본값) : 증가 비율 없음
숫자 : 증가 비율

flex-shrink

Flex Item의 감소 너비 비율, 아이템(자식요소)들의 정렬된 크기보다 컨테이너(부모요소)가 작아질 경우 찌그러지는 경우가 있다. 이때 기본 값이 1이기 때문에, 줄어드는 것이다.

1(기본값) : Flex Container 너비에 따라 감소 비율 적용
숫자 : 감소 비율

`flex-basis`

Flex Item의 공간 배분 전 기본 너비

auto(기본값) : 요소의 Content 너비
단위 : px, em, rem 등 단위로 지정

기본 너비를 지정하지 않을 땐 flex-basis: 0; 으로 설정한다.

[패스트캠퍼스] 프론트엔드 강의 2주차 - CSS 기초

Thu, 16 Feb 2023 01:59:22 GMT

안녕하세요! 패스트 캠퍼스의 프론트엔드 국비지원교육을 시작한지 벌써 2주차 입니다!

2주차에는 CSS에 대한 기초 내용을 배웠는데, 이에 대한 회고록을 작성해보겠습니다!

CSS 기초

CSS는 HTML과 함께 웹 개발에서 꼭 필요한 기술 중 하나입니다. 2주차에서는 CSS의 기본적인 문법과 속성, 선택자, 박스 모델 등에 대해 배웠습니다.

우선, CSS를 학습하는 과정에서 가장 중요한 것은 역시 많은 실습입니다. 많은 예제와 실습을 통해 CSS의 개념을 이해하고, 익히는 것이 매우 중요합니다. 실제로 강의를 수강하면서도 그러한 실습들을 직접 적용해보면서 생기는 문제들을 해결하고 경험을 쌓을 수 있도록 도와줍니다.

또한, CSS는 디자인에 매우 중요한 역할을 합니다. 따라서, 디자인에 대한 감각과 이해가 필요합니다. 시간이 충분하다면 디자인과 관련된 책이나 온라인 강의를 참고하여, 기본적인 디자인 원리와 색상, 레이아웃 등에 대해 학습하는 것도 도움이 될 것입니다.

위의 이미지는 직접 실습을 진행하면서 CSS를 적용해본 코드입니다. 직접 작성하면서 스타일이 변화하는 것을 바로바로 확인 할 수 있으니 재미있었습니다!

마지막으로, CSS는 HTML과 함께 사용되는 기술이므로, HTML의 구조와 문법에 대한 이해도 필요합니다. 따라서, 1주차 때 배운 HTML을 충분히 익혀두시는 것이 좋습니다.

이번 주차에 배운 CSS는 웹 개발에 있어 매우 중요한 기술 중 하나입니다. 계속해서 실습과 개인 공부를 통해 더욱 전문적인 수준으로 성장해 나가야겠습니다.

CSS 기초 정리

아래는 2주차 과정을 거치면서 배웠던 내용 중 일부분을 정리한 내용입니다!

선택자(Selector)

: 선택자는 CSS 스타일을 html의 어떤 요소에 적용할지를 선택하는 일종의 규칙이다.

선택자 {
  속성: 값;
}

선택자: 스타일 적용할 대상
속성: 스타일의 종류(Property)
값: 특정 속성의 값
{ }: 해당 선택자에 적용될 스타일 범위

브라우저 스타일 초기화

: 크로스 브라우징 이슈를 해결하기 위해 각 브라우저가 기본으로 제공하는 CSS 스타일을 초기화 해줘야 한다.

주로 www.jsdelivr.com 사이트 이용
구글 검색: reset.css cdn
reset.min.css -> Copy HTML link -> 태그에 link
주의❗️ 메인 css 파일보다 위에 link를 적용하는 것이 깔끔히 리셋되고 충돌 우려가 적다.

CSS 주석 처리

/* Comment */

CSS 선언 방식 4 가지

내장 방식: 부분에 작성
링크 방식: 부분에 로 외부 CSS 문서 연동(병렬 연결)
인라인 방식: 요소의 전역 속성(style="")에 직접 스타일 작성(우선 순위 높음)
@import 방식: CSS문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식이다.(직렬 연결) 지연 연결이 발생할 수 있다.

@import 방식 장단점

link로 연결되는 메인 CSS파일이 연동되고 메인 파일크기가 클 경우 import 구문의 해석이 딜레이 되기 때문에 임포트 파일은 지연 연결이 일어날 수 밖에 없다. 고의로 지연 시킬 의도로 사용할 수 있다.

💡 사용 권장 시나리오

권장하지 않는 방식: 내장, 인라인
권장 방식 : link 로 전부 head에 작성
지연 연결 의도 시 고려 방식 : @import

CSS 단위

아래 표현 단위 중 px만 절대 단위 이다. 나머진 상대 단위이다.

px (픽셀)
% (상대적 백분율, 부모 요소와 비교)
em (부모 요소의 글꼴 크기)
rem (루트 요소(html)의 글꼴 크기) 루트 요소(html)의 기본 글꼴 크기는 16px이다.
vw (뷰포트 가로 너비의 백분율) 50vw -> 뷰포트 가로 너비의 절반 100vw -> 뷰포트 가로 너비 전체
vh (뷰포트 세로 너비의 백분율) 50vh -> 뷰포트 세로 너비의 절반 50vh -> 뷰포트 세로 너비의 전체

[패스트캠퍼스] 프론트엔드 강의 1주차-HTML

Wed, 01 Feb 2023 08:47:47 GMT

프론트 입문을 위하여...

백엔드를 공부했었고, 팀 프로젝트에 참여해 백엔드 개발을 했던 경험이 있다. 팀 프로젝트를 마친 후 개인 프로젝트를 진행하고 싶었다. 혼자서 프론트와 백엔드를 전부 개발해야 하는 상황이다보니 프론트 공부의 필요성을 느꼈다. 그리하여 프론트 입문을 위한 교육을 찾아 헤매다 패스트캠퍼스의 프론트엔드 국비지원교육 강의가 있어서 신청하게 됐다.

위 과정의 커리큘럼은 아래와 같다.

1주차 : HTML로 시작하기
2주차 : CSS 학습하기
3주차 : CSS 심화 학습하기
3주차 추가강의 : 스타벅스 홈페이지 클론 코딩
4주차 : JavaScript 선행 학습
5주차 : JavaScript 심화 학습하기
6주차 : JavaScript 데이터 및 실습
7주차 : React 공식문서로 디테일 잡기
8주차 : Redux 기초 학습하기

해당 과정을 신청하게된 이유는 현대 웹 프론트 개발을 위한 기본기가 모두 포함되어 있다는 점이 만족스러웠다.

어렴풋이 기억나는 HTML, CSS, JS 의 개념을 확고히 하는데 도움이 될 것 같았고, 현대 SPA 개발을 위한 React&Redux에 입문하고 싶어서 망설임 없이 커리큘럼을 보고 신청하게 됐다.

아래는 1주차 동안 배웠던 HTML에 대해 정리한 내용이다.

`index.html`

브라우저는 어떤 경로를 탐색하든 우선적으로 index.html을 찾는다. 따라서 랜딩페이지에 해당하는 index.html 파일은 최상위 경로(root)에 존재해야 한다.

`DOCTYPE(Document Type Definition, DTD)`

DOCTYPE은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 해석하면 되는지를 알려주는 정의이다.

Version 순서

HTML1
HTML2
HTML3
HTML4
XHTML
HTML5(현재 웹 표준)

html 문서의 전체 범위를 나타낸다. 어디서 시작하고 어디서 끝나는지 명시.

문서의 정보를 나타내는 범위이다.

웹 페이지의 제목, 설명
사용할 파일 위치
스타일(CSS)
웹 페이지의 보이지 않는 정보를 작성하는 범위

문서의 구조를 나타내는 범위이다.

사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 등
웹 페이지의 보여지는 구조를 작성하는 범위

html 태그의 lang 속성은 문서의 언어를 지정하는 속성이다. 기본적으로 en으로 되어 있다.

"en"로 설정 시 구글 번역기가 자동 실행 된다.
"ko"로 설정 시 구글 번역기가 자동 실행 안된다.

상대 경로 vs 절대 경로

상대 경로

./ ➡️ 현재 경로를 의미하며 생략 가능하다.
../ ➡️ 상위 폴더

절대 경로

/ ➡️ 루트 경로를 의미한다. (도메인 생략되어 있음)
http(https) ➡️ 웹 url로 절대 경로에 해당한다.

HTML 명칭

시작(열린) 태그 : <태그>
종료(닫힌) 태그 :
내용(contents) : 태그가 감싼 데이터
요소(element) : <태그>내용

요소는 태그와 내용까지 포함한 것을 가리킨다. 그치만 태그와 유사한 의미로 불리기도 한다.

부모와 자식 관계

<태그>
    <태그>내용

바깥 태그는 부모요소, 안쪽 태그는 자식요소이다. 들여쓰기(indent)로 부모요소와 자식요소를 시각적으로 분리한다.

상위(조상)요소는 부모 요소를 포함하여 해당 부모를 또 감싸는 부모의 부모 요소를 칭할 때 사용한다. 즉, 본인을 감싸고 있는 윗 단계의 요소들을 통틀어 상위(조상)요소라 부를 수 있다.

반대로 본인이 감싸고 있는 요소들 통틀어 하위(후손)요소라 할 수 있다. 즉, 본인보다 아랫 단계의 요소들을 하위(후손) 요소라 할 수 있다.

빈(empty) 태그

닫히는 태그와 내용이 없는 태그를 칭한다. 빈 태그도 하나의 요소로 볼 수 있다.

<태그> : 편리함, HTML 1/2/3/4/5
<태그/> : 안전함, XHTML, HTML5 -> 사용권장

태그의 속성과 값

    <태그 속성=“값”>내용

속성과 값은 열리는 태그 안에 포함시킬 수 있다. 속성과 값의 역할은 ‘태그의 기능 확장’ 이라 볼 수 있다. 보통 빈 태그들은 내용을 채울 수 없기 때문에 거의 속성과 값이 필연적으로 사용하게 되어 있다. 따라서 필수 속성이란 것들이 존재한다.

HTML 주석

html 주석 처리:

웹페이지에서 주석 처리된 내용은 보이지 않는다.