본문 바로가기
카카오x구름 풀스택/특강

[w/퍼실리테이터 이대희 강의] TO-DO LIST 만들기, HTML/Javascript/CSS 관련 강의 -1

by 꾸주니=^= 2024. 11. 22.
  • 강의 내용
    • TO-DO LIST 만들기 강의
    • 그 외 HTML/Javascript/CSS 관련 강의

 

html은 뼈대, css는 외모,옷이라고 볼 수 있고 js는 뇌,신경,근육이라고 볼 수 있다.
js는 사무적인거나 이벤트를 캐치한다는 등 기능적인 부분에서 한다.

이 세가지가 들어가면 웹페이지답게 만들어진다.

 

1. 기본 태그
: h태그는 1~6이 있고, p는 간단한 글이 들어가고, a는 어디로 이동할지, 위치 설정

3. HTML5
: HTML을 공부하면 주로 HTML5을 공부한다고 생각하면됨. HTML5 기준으로는 주로 시맨틱 태그가 있다.

4. HTML 유효성 검사
: lighthouse가 주로 많이 사용함. 보통 한가지만 알면 된다고 함.

 

css는 스타일 부분을 채워준다. 

 

레이아웃을 잡는 display속성에는 flexbox, grid, position, float등이 있다.

1. Flexbox

  • 정의: 1차원(1D) 레이아웃 시스템으로, 한 방향(행 또는 열)에서 아이템을 정렬하고 배치하는 데 효과적입니다.
  • 사용법:
    • display: flex;를 부모 요소에 지정합니다.
    • 주요 속성:
      • justify-content: 가로축(메인 축) 정렬 (e.g., center, space-between 등)
      • align-items: 세로축(교차 축) 정렬 (e.g., flex-start, center 등)
      • flex-wrap: 아이템의 줄바꿈 설정 (nowrap, wrap)
      • 자식 요소에 flex-grow, flex-shrink, flex-basis로 크기 조절 가능
  • 장점: 요소 간의 간격과 정렬을 유연하게 조정.
  • 사용 예시:
    • 버튼 그룹 정렬, 내비게이션 바, 간단한 카드 정렬.

2. Grid

  • 정의: 2차원(2D) 레이아웃 시스템으로, 행(row)과 열(column)을 동시에 관리하며 레이아웃을 잡습니다.
  • 사용법:
    • display: grid;를 부모 요소에 지정합니다.
    • 주요 속성:
      • grid-template-rows, grid-template-columns: 행과 열의 크기 정의
      • gap: 행과 열 간 간격 정의
      • grid-template-areas: 이름을 사용해 특정 영역을 배치
      • 자식 요소에 grid-column, grid-row로 위치 지정 가능
  • 장점: 복잡한 레이아웃을 만들 때 효율적.
  • 사용 예시:
    • 대시보드, 블로그 레이아웃, 카드 레이아웃.

3. Position

  • 정의: 요소의 위치를 지정하는 방법으로, 레이아웃의 특정 요소를 고정하거나 상대적으로 배치할 때 사용.
  • 사용법:
    • position 속성값:
      • static: 기본값, 문서 흐름에 따라 배치.
      • relative: 원래 위치를 기준으로 상대적 이동.
      • absolute: 부모 또는 조상 요소 중 relative, absolute, fixed를 기준으로 배치.
      • fixed: 뷰포트(화면)를 기준으로 고정.
      • sticky: 스크롤 위치에 따라 고정되거나 문서 흐름에 따라 이동.
    • 주요 속성:
      • top, left, right, bottom으로 위치 지정
  • 장점: 특정 요소를 고정하거나 자유롭게 배치 가능.
  • 사용 예시:
    • 고정된 헤더/푸터, 팝업 창, 툴팁.

4. Float

  • 정의: 요소를 왼쪽(left) 또는 오른쪽(right)으로 정렬하는 데 사용되며, 한때 레이아웃을 만드는 데 많이 쓰였으나 현대에는 잘 쓰지 않음.
  • 사용법:
    • float: left; 또는 float: right;로 요소를 배치.
    • 플로트된 요소 아래의 다른 콘텐츠가 따라오지 않게 하려면 clear: both;를 사용.
  • 장점: 텍스트 주변에 이미지나 작은 요소를 배치하기 좋음.
  • 단점: 복잡한 레이아웃을 구성하기 어렵고, 정렬 유지가 어려움.
  • 사용 예시:
    • 텍스트 주변 이미지 배치.

비교 및 선택

기능FlexboxGridPositionFloat

주요 목적 1D 레이아웃 2D 레이아웃 위치 고정 및 이동 텍스트 주변 정렬
복잡한 레이아웃 중간 매우 적합 부적합 부적합
정렬 유연한 정렬 가능 세밀한 배치 가능 수동 배치 제한적
현대적 사용 빈도 높음 높음 중간 낮음

추천

  • 단순한 정렬: Flexbox (예: 내비게이션 바, 버튼 정렬)
  • 복잡한 레이아웃: Grid (예: 전체 페이지 레이아웃)
  • 특정 요소 고정: Position (예: 고정된 헤더, 팝업 창)
  • 이미지 정렬: Float (예: 텍스트 옆 이미지 배치)

 

1. html, css는 명시해주는 언어는 아니다. 이 두가지만으로 변동적인 부분을 줄 수 없다.
자바스크립트가 없는 웹 페이지는 항상 변화가 없이 똑같이 작동할 것이다. 
자바스크립트는 프로그래밍언어이다.

2. 프로그래밍언어에서는 '디버깅'이 중요하다고 생각한다. 프로그램을 개발하면 한번에 내가 원하는대로 작동하지 않는 경우도 있다. 내가 중간중간에 개발을 잘하고 있는지 '디버깅'을 통해 알 수 있다. -> '콘솔'을 사용해야지 개발을 수월하게 할 수 있을 것이다.

 

html, css는 기초만 잡고 js에 공부 비중을 더 두자

 

태그와 요소의 차이
: <html> </html> <- 이 자체를 태그라고, 브라우저가 요소로 컨트롤한다고 함.

면접 단골 문제로 볼 수 있음

 

 

 

레이아웃을 어떻게 잡으면 좋을지에 대해 간단하게 종이나 그림판에 프로토타입으로 그려놓고. 그 모양대로 그려보는게 중요함

 

이 부분은 생략

 

DOM (Document Object Model)

  • 설명: 웹 페이지의 구조를 표현하는 객체 모델로, HTML 문서를 트리 구조로 표현합니다. JavaScript를 사용해 DOM을 조작하면 웹 페이지의 내용이나 스타일을 동적으로 변경할 수 있습니다.
  • 관련 개념:
    • Virtual DOM: React에서 사용하는 개념으로, 실제 DOM 대신 가상의 DOM을 사용해 변경 사항을 효율적으로 관리.
    • Shadow DOM: 웹 컴포넌트에서 사용하는 기술로, DOM의 일부를 캡슐화해 스타일이나 구조를 보호.
    • HTML5 API: DOM과 상호작용할 수 있는 JavaScript API 집합.

Dom은 태그를 이해하는 과정? 이다.

 

React

  • 설명: Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 효율적으로 구축할 수 있습니다. 컴포넌트 기반 아키텍처로 재사용성을 높이고, **가상 DOM(Virtual DOM)**을 사용해 성능을 최적화합니다.
  • 유사/관련 프레임워크/라이브러리:
    • Vue.js: 가벼운 JavaScript 프레임워크로 React와 비슷하지만 더 간단한 학습 곡선을 가짐.
    • Angular: Google에서 개발한 JavaScript 프레임워크로, 더 많은 기능을 제공하며 대규모 애플리케이션에 적합.
    • Svelte: 빌드 시점에 DOM 업데이트 코드를 생성하는 새로운 접근 방식의 프레임워크.

 

왜 react를 배워야하나?

react는 html, css, js가 있는데 이것을 각각 관리하다 보니까 코드가 난잡해지기도 하고 항상 쓰이는 코드긴 하지만 없어도 될 것같은, 중복되는 부분이 있어서 dom에서 js를 접근해야하다보니까 보기 어려워지는 측면이 있어서 이것을 한번에 관리할 수 있지 않을까라는 측면으로 나왔다. 

가상 dom은 dom을 브라우저가 관리하는데 react측에서 가상으로 한번 더 가지고 올려서, dom를 바로 바꾸는게 아니라 react로 바뀌는걸 작동시킨다. 한마디로 dom을 더 쉽게 관리할 수 있다. 좋은 성능을 가지고 갈 수 있다.
노력을 별로 안 들이고 적정 높은 개발을 할 수 있다고 할 수 있다.

 

 

 

강의 들으면서 궁금한 점 1) 애플리케이션 프레임워크랑 라이브러리?

 

1. 애플리케이션 프레임워크(Application Framework)

기본 개념

  • 애플리케이션 개발의 "기반 구조"를 제공하는 소프트웨어 환경입니다.
  • 프레임워크는 애플리케이션의 기본 뼈대를 제공하고, 개발자가 이 뼈대 위에 코드를 작성하여 애플리케이션을 완성합니다.
  • 보통 프레임워크는 애플리케이션의 전체 구조와 흐름을 제어하며, 특정 규칙에 따라 개발자가 코드를 작성해야 합니다.

특징

  1. 제어의 역전(Inversion of Control, IoC)
    • 프레임워크는 애플리케이션의 흐름을 프레임워크가 관리하고, 개발자는 필요한 부분만 코드를 추가합니다.
    • 즉, 프레임워크가 "개발자의 코드를 호출"하여 실행합니다.
      예: Spring Framework에서 사용자가 만든 컨트롤러는 특정 규칙에 따라 호출됩니다.
  2. 규칙과 구조 제공
    • 개발자는 프레임워크에서 정한 설계 규칙을 따라야 합니다.
      예: Model-View-Controller(MVC) 패턴을 따르는 웹 프레임워크.
  3. 완성도 높은 기능 제공
    • 인증, 데이터베이스 연동, 로깅, 에러 처리 등 복잡한 기능을 이미 구현해 두어서 개발자는 이를 간단히 사용할 수 있습니다.

예시

  • Spring (Java): 엔터프라이즈 애플리케이션 개발용 프레임워크.
  • Django (Python): 웹 애플리케이션 개발을 위한 프레임워크.
  • React Native: 모바일 앱 개발용 프레임워크.

2. 라이브러리(Library)

기본 개념

  • 특정 기능을 수행하기 위해 재사용 가능한 코드의 집합입니다.
  • 개발자가 직접 호출하여 사용하는 도구로, "필요한 기능"을 추가하는 데 사용됩니다.

특징

  1. 제어권(Control)
    • 라이브러리는 개발자가 직접 호출하고, 호출된 함수나 클래스만 실행됩니다.
    • 즉, "개발자가 라이브러리를 호출"하여 애플리케이션의 흐름을 제어합니다.
  2. 특정 작업에 초점
    • 특정한 기능(예: 숫자 계산, HTTP 요청 처리, 데이터 시각화)을 수행하는 데 집중합니다.
    • 프레임워크처럼 애플리케이션 전체를 관리하지 않습니다.
  3. 조합 가능성
    • 개발자가 여러 라이브러리를 선택적으로 조합하여 사용할 수 있습니다.

예시

  • Pandas (Python): 데이터 분석용 라이브러리.
  • Lodash (JavaScript): JavaScript에서 유용한 유틸리티 함수 제공.
  • NumPy (Python): 수학 연산 및 배열 계산을 위한 라이브러리.

3. 프레임워크와 라이브러리의 주요 차이점

구분프레임워크라이브러리

제어 흐름 프레임워크가 애플리케이션의 흐름을 제어 개발자가 호출하여 애플리케이션의 흐름을 제어
사용 방식 정해진 규칙과 구조에 따라 개발자가 코드 작성 필요한 기능만 골라서 자유롭게 호출
포괄성 애플리케이션 전체의 설계와 개발을 지원 특정 작업이나 기능에 집중
학습 곡선 초기 학습이 어렵지만, 기능이 많고 강력함 상대적으로 간단하며 빠르게 사용할 수 있음

4. 비유로 이해하기

프레임워크:

"요리 키트"
프레임워크는 요리 키트처럼 레시피와 재료를 제공하며, 그 레시피대로만 요리를 만들어야 합니다. 요리 키트는 기본적으로 모든 준비를 끝내 두었기 때문에 시간이 절약됩니다.

라이브러리:

"요리 재료"
라이브러리는 다양한 재료와 도구를 제공합니다. 어떤 요리를 만들지는 개발자에게 달려 있습니다. 따라서 창의적으로 조합해 사용할 수 있지만, 더 많은 계획과 작업이 필요할 수 있습니다.

 

강의 들으면서 궁금한 점 2) 웹 개발에 필요한 기술

웹 개발에 필요한 기술은 **프론트엔드(Frontend)**와 백엔드(Backend), 그리고 이를 연결하는 기초 기술 및 도구로 나눌 수 있습니다. 웹 개발자는 프로젝트의 범위에 따라 특정 기술을 깊이 있게 배우거나, 전체를 골고루 익혀야 할 수도 있습니다. 아래는 주요 기술과 역할에 대한 설명입니다.

1. 기초 기술

(1) HTML (HyperText Markup Language)

  • 웹 페이지의 구조를 정의하는 언어입니다.
  • 예: 텍스트, 이미지, 버튼 등의 요소를 배치.

필수 학습 항목

  • HTML 태그: <div>, <h1>, <p>, <a>, <img>, <form> 등.
  • 시맨틱 태그: <header>, <footer>, <article> 등.
  • 기본 속성: id, class, src, href 등.

(2) CSS (Cascading Style Sheets)

  • HTML로 작성된 웹 페이지의 스타일(디자인)을 지정하는 언어입니다.
  • 예: 글꼴, 색상, 레이아웃.

필수 학습 항목

  • CSS 선택자: class, id, 태그 선택자.
  • 레이아웃: Flexbox, Grid.
  • 반응형 디자인: 미디어 쿼리(@media).
  • 애니메이션: @keyframes.

(3) JavaScript

  • 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
  • 예: 버튼 클릭 시 팝업 열기, 데이터 검증.

필수 학습 항목

  • DOM(Document Object Model): HTML 요소 조작.
  • 이벤트 처리: click, hover, submit 등.
  • ES6+ 문법: let, const, arrow function, destructuring.
  • 비동기 처리: Promise, async/await.

2. 프론트엔드 개발 기술

프론트엔드는 사용자가 직접 보는 부분(화면)과 상호작용을 담당합니다.

(1) 프레임워크/라이브러리

  • React: 컴포넌트 기반 UI 라이브러리.
  • Vue.js: 간단하고 가벼운 UI 프레임워크.
  • Angular: 대규모 애플리케이션에 적합한 프레임워크.

필수 학습 항목

  • 컴포넌트 구조: UI를 작은 단위로 나누는 방식.
  • 상태 관리: React의 useState/useEffect, Redux.
  • 데이터 바인딩: Vue.js의 v-bind, Angular의 ngModel.

(2) UI 프레임워크

  • Bootstrap: 빠르게 스타일링 가능.
  • Tailwind CSS: 유틸리티 기반 CSS 프레임워크.
  • Material UI: React를 위한 스타일링 라이브러리.

3. 백엔드 개발 기술

백엔드는 서버, 데이터베이스, 비즈니스 로직을 관리하는 부분입니다.

(1) 프로그래밍 언어

  • JavaScript (Node.js): 서버 개발에 사용하는 JavaScript 환경.
  • Python: Django, Flask와 같은 백엔드 프레임워크.
  • Java: Spring Framework로 엔터프라이즈 애플리케이션 개발.
  • PHP: 기존 CMS(WordPress)나 간단한 웹 서비스에서 사용.
  • Ruby: Ruby on Rails 프레임워크로 웹 개발.

(2) 백엔드 프레임워크

  • Express.js: Node.js용 경량 웹 프레임워크.
  • Spring: Java 기반 강력한 웹 프레임워크.
  • Django/Flask: Python 기반 프레임워크로 빠른 개발 가능.

(3) 데이터베이스

웹 애플리케이션에서 데이터를 저장하고 관리하는 데 사용됩니다.

  • 관계형 데이터베이스(RDBMS):
    • 예: MySQL, PostgreSQL, SQLite.
    • SQL 언어 사용: SELECT, INSERT, UPDATE.
  • NoSQL 데이터베이스:
    • 예: MongoDB, Redis.
    • 비정형 데이터를 효율적으로 저장.

(4) API

백엔드는 프론트엔드와 데이터를 교환하기 위해 API를 제공합니다.

  • REST API: HTTP를 사용하여 자원(Resource)을 CRUD.
  • GraphQL: 데이터를 더 효율적으로 요청하고 가져올 수 있는 쿼리 언어.

4. DevOps 및 기타 도구

(1) 버전 관리

  • Git: 코드의 변경 사항을 관리.
  • GitHub/GitLab/Bitbucket: 협업 도구.

(2) 배포 및 서버

  • 클라우드 플랫폼: AWS, Google Cloud, Azure.
  • PaaS: Heroku, Vercel, Netlify.
  • Docker: 컨테이너를 사용하여 애플리케이션 실행.

(3) 도구

  • VS Code: 웹 개발에 최적화된 코드 편집기.
  • Postman: API 테스트 도구.
  • Webpack: 자바스크립트 번들링 도구.

5. 추가적으로 알아야 할 개념

  • SEO (Search Engine Optimization): 검색 엔진 최적화.
  • 웹 보안: XSS, CSRF, SQL Injection 등 예방.
  • 반응형 웹: 다양한 기기(모바일, 태블릿)에서 최적화.

6. 전체적인 학습 순서

  1. 기초 기술: HTML → CSS → JavaScript.
  2. 프론트엔드 심화: React/Vue.js + Tailwind CSS.
  3. 백엔드 기술: Node.js + Express.js → 데이터베이스(SQL, MongoDB).
  4. 전체 흐름 익히기: REST API + 프론트/백엔드 통합.
  5. 배포 및 유지보수: Git + 클라우드 플랫폼.

강의 들으면서 궁금한 점 3) JavaScript와 Node.js?

Node.js

기본 개념

  • Node.js는 JavaScript 런타임 환경입니다.
  • JavaScript가 브라우저 외부에서도 실행될 수 있도록 만든 도구입니다.
  • Google의 V8 엔진(Chrome의 JavaScript 엔진)을 사용하여 브라우저 밖에서 JavaScript를 실행할 수 있습니다.

특징

  1. 서버 사이드 개발:
    • Node.js는 서버 애플리케이션을 구축하는 데 사용됩니다.
    • JavaScript로 데이터베이스 연결, 파일 읽기/쓰기, 네트워크 요청 등을 처리할 수 있습니다.
  2. 비동기 처리:
    • Node.js는 이벤트 기반 비동기 I/O를 지원하므로, 대규모 네트워크 요청을 효율적으로 처리합니다.
    • CPU 집약적인 작업에는 적합하지 않지만, 빠른 입출력 처리에 강점이 있습니다.
  3. 모듈 시스템:
    • Node.js는 다양한 내장 모듈(fs, http, path 등)을 제공하며, NPM(Node Package Manager)을 통해 추가 패키지를 설치할 수 있습니다.
  4. 환경:
    • 서버에서 실행되므로 시스템 파일, 네트워크, 데이터베이스 접근이 가능합니다.

JavaScript와 Node.js의 차이점

구분JavaScriptNode.js

환경 웹 브라우저에서 실행 브라우저 외부에서 실행 (서버, CLI 등)
용도 클라이언트 측 웹 애플리케이션 서버 측 애플리케이션 및 도구 개발
파일 시스템 접근 불가능 (브라우저 Sandbox 제한) 가능 (fs 모듈 사용)
네트워크 작업 AJAX, Fetch API로 서버와 통신 (브라우저에서 제한됨) 서버 간 통신, 데이터베이스 연결 등 네트워크 작업 가능
모듈 시스템 모듈 시스템이 없거나 기본적으로 지원되지 않음 CommonJS, ES6 모듈 시스템 지원 (require, import)
주요 사용 예시 웹 페이지 동적 업데이트, 사용자 입력 처리 REST API 서버, 파일 처리, 실시간 채팅 앱 개발

 

4. JavaScript와 Node.js의 관계

  • JavaScript는 언어이고, Node.js는 환경입니다.
  • JavaScript는 Node.js의 핵심 언어로 사용되며, Node.js가 JavaScript를 확장해 브라우저 바깥에서도 사용할 수 있게 만들어 줍니다.
  • 예를 들어, JavaScript는 브라우저 DOM을 조작할 수 있지만, Node.js에서는 파일을 읽고 서버를 실행할 수 있습니다.

5. 요약

  • JavaScript: 클라이언트(브라우저)에서 실행되는 프로그래밍 언어로, 웹 페이지를 동적으로 만듭니다.
  • Node.js: JavaScript를 서버나 CLI에서 실행할 수 있는 런타임 환경으로, 서버 개발, 파일 관리, 네트워크 작업 등에 사용됩니다.
저작자표시

'카카오x구름 풀스택 > 특강' 카테고리의 다른 글

[250106] 이슈 트래커 협업 생산성 도구  (2) 2025.01.07
[w/퍼실리테이터 이대희 강의] React 예제 살펴보기  (0) 2024.12.02
[w/퍼실리테이터 이대희 강의] TO-DO LIST 만들기, HTML/Javascript/CSS 관련 강의 -2  (0) 2024.11.22

관련글

티스토리툴바