1. 웹 렌더링

웹 렌더링은 웹 페이지를 사용자에게 보여주는 과정이다. 서버나 브라우저가 HTML, CSS, JavaScript 등을 이용해서 실제 화면을 만들어 보여준다.

렌더링 방식에 따라 로딩 속도, SEO, 사용자 경험 등이 달라질 수 있다.

렌더링 방식

• CSR (Client Side Rendering)
• SSR (Server Side Rendering)
• SSG (Static Site Generation)
• ISR (Incremental Static Regeneration)

2. CSR

CSR은 브라우저에서 JavaScript를 이용해 웹페이지를 만드는 방식이다.

서버에서 HTML과 JavaScript를 받아온 후, 브라우저가 JavaScript를 실행해서 화면을 만든다.

장점

• 초기 로딩 이후에는 필요한 데이터만 가져와서 화면을 바꿀 수 있다.
• 사용자와의 인터랙션이 빠르다.
• 전체 페이지를 다시 렌더링하지 않아 서버 부담을 줄일 수 있다.

단점

• JavaScript를 불러오고 실행해야 해서 초기 로딩이 느릴 수 있다.
• 처음에는 빈 HTML이 전달되기 때문에 SEO에 불리할 수 있다.

→ 사용자와의 상호작용이 많은 대시보드나 어드민 페이지 등에 적합하다.

3. SSR

SSR은 서버에서 HTML을 완성해서 브라우저로 보내는 방식이다.

사용자가 페이지를 요청하면 서버에서 필요한 HTML을 만들어서 보내준다.

장점

• 완성된 HTML을 바로 받을 수 있어서 초기 페이지를 빠르게 볼 수 있다.
• 검색 엔진이 내용을 쉽게 읽을 수 있어서 SEO에 유리하다.

단점

• 사용자가 요청할 때마다 서버에서 페이지를 만들어야 해서 서버 부담이 커질 수 있다.

→ 사용자 맞춤 콘텐츠나 실시간으로 변경되는 데이터가 있는 웹사이트 등에 사용할 수 있다.

4. SSG

SSG는 빌드할 때 웹페이지를 미리 HTML로 만들어 놓는 방식이다.

사용자가 접속하면 미리 만들어 놓은 HTML을 바로 보내준다.

장점

• 미리 만들어져 있어서 로딩이 빠르다.
• 서버에서 매번 페이지를 만들 필요가 없어서 서버 부담이 적다.

단점

• 데이터가 변경될 때마다 다시 빌드해야 한다.

→ 회사 소개, 제품 소개, FAQ, 개인 블로그처럼 내용이 자주 바뀌지 않는 사이트에 적합하다.

5. ISR

ISR은 SSG처럼 페이지를 미리 만들어 놓지만, 일정 시간이 지나면 페이지를 다시 생성해서 변경된 데이터를 반영하는 방식이다.

즉, SSG와 SSR의 특징을 어느 정도 합친 방식이라고 볼 수 있다.

장점

• 미리 만들어진 페이지를 사용해서 빠르게 보여줄 수 있다.
• 데이터 변경 내용을 반영할 수 있다.
• 모든 요청마다 페이지를 새로 만들지 않아 서버 부담을 줄일 수 있다.

단점

• 페이지 상태를 관리해야 해서 구현이 복잡할 수 있다.
• 페이지를 다시 만드는 시간이 필요하다.

→ 일부 데이터는 자주 변경되고, 일부 데이터는 자주 변경되지 않는 사이트에 적합하다.

추가로 정리한 용어

6. 인터랙션

인터랙션(Interaction)은 사용자와 웹페이지가 서로 상호작용하는 것이다.

예를 들어 버튼을 클릭했을 때 화면이 바뀌거나, 검색어를 입력했을 때 검색 결과가 나타나는 것이 인터랙션이다.

→ 사용자의 행동에 웹페이지가 반응하는 것

7. 동적으로 페이지를 업데이트

동적으로 페이지를 업데이트한다는 것은 페이지 전체를 새로 불러오지 않고 필요한 부분만 변경하는 것이다.

예를 들어 검색 버튼을 눌렀을 때 페이지 전체가 새로고침되는 것이 아니라 검색 결과 부분만 바뀌는 것이다.

CSR에서는 필요한 데이터만 받아서 해당 부분을 동적으로 업데이트할 수 있다.

→ 새로고침 없이 필요한 부분을 바꾸는 것

8. SEO

SEO(Search Engine Optimization)는 검색 엔진 최적화이다.

웹페이지의 내용을 검색 엔진이 잘 이해하고 검색 결과에 잘 나타날 수 있도록 하는 것이다.

렌더링 방식에 따라서 SEO에 유리하거나 불리할 수 있다. 예를 들어 SSR과 SSG는 완성된 HTML을 제공하기 때문에 SEO에 유리하고, CSR은 JavaScript 실행 전 빈 HTML이 먼저 보여 SEO에 불리할 수 있다.

→ 검색 엔진에서 웹페이지가 잘 검색되도록 하는 것

9. 빌드

빌드(Build)는 작성한 코드를 실제로 실행하거나 배포할 수 있는 형태로 만드는 과정이다.

특히 SSG에서는 빌드할 때 웹페이지를 미리 HTML로 생성한다.

→ 작성한 코드를 배포할 수 있는 결과물로 만드는 과정

한 번에 비교

핵심

렌더링 방식은 하나가 무조건 좋은 것이 아니라 웹사이트의 목적과 필요한 기능에 맞게 선택하는 것이 중요하다.

Scope

전역 / 지역 → 스코프의 범위 함수 / 블록 → 스코프가 만들어지는 기준 중첩 스코프 → 스코프가 들어가 있는 구조 렉시컬 스코프 → 스코프가 결정되는 기준 스코프 체인 → 변수를 찾는 방법

스코프란?

변수를 사용할 수 있는 범위

• 전역 스코프 → 프로그램 전체에서 사용 가능
• 지역 스코프
  • 함수 스코프 → 함수 내부에서 사용 가능
  • 블록 스코프 → {} 내부에서 사용 가능

let, const, var

• let → {} 블록을 기준으로 범위가 정해짐
• const → {} 블록을 기준으로 범위가 정해짐
• var → {} 블록으로는 범위가 제한되지 않고, 함수 기준으로 범위가 정해짐

중첩 스코프, 렉시컬 스코프, 스코프 체인

• 중첩 스코프 → 스코프 안에 또 다른 스코프가 있는 관계

• 렉시컬 스코프 → 함수가 어디에 작성되었는지를 기준으로 접근할 수 있는 바깥 스코프가 결정되는 것

• 스코프 체인 → 현재 스코프에서 변수를 찾고, 없으면 바깥쪽 스코프로 이동하면서 찾는 방식 (현재 → 바깥 → 전역)

Closure

클로저란?

*내부 함수가 자신이 선언된 곳의 외부 변수를 기억해서, 외부 함수가 끝난 후에도 그 변수를 사용할 수 있는 현상 *

• 외부 함수: 내부 함수를 포함하고 있는 함수

• 내부 함수: 함수 안에 선언된 함수

• 외부 변수: 현재 함수의 바깥쪽 스코프에 선언된 변수

  function outer() { 
    let name = "민서"; 
  
    function inner() { 
        console.log(name); 
    } 
  }

• outer: 외부 함수

• inner: 내부 함수

• name: 외부 변수

return inner, return inner()

return inner; // inner 함수 자체를 반환 
return inner(); // inner 함수를 실행하고 결과를 반환

• inner: 함수 이름
• inner(): 그 함수를 실행
• return inner: 그 함수 자체를 반환

function outer() {
  let name = "민서";

  function inner() {
    console.log(name);
  }

  return inner;
}

const hello = outer();

hello(); // 민서

outer() 실행→inner 함수 반환→outer() 실행 종료→hello() 실행→inner가 name 사용 가능

클로저로 변수를 외부에서 직접 접근하지 못하게 하는 방법

변수를 직접 공개하지 않고 필요한 기능만 함수로 제공 → 클로저를 이용하면 외부에서 변수에 직접 접근하지 못하게 하면서, 내부 함수로 값을 관리할 수 있다.

클로저의 실제 활용

• 값을 계속 유지해야 할 때
• 변수를 외부에서 직접 접근하지 못하게 하고 필요한 기능으로만 관리할 때
• 각각 독립적인 상태를 만들어야 할 때

→ 클로저는 외부 변수의 값을 유지하거나, 변수를 보호하고, 독립적인 상태를 관리할 때 활용된다.

• Hook이란 무엇인가?: Hook은 함수 컴포넌트에서 React의 다양한 기능을 사용할 수 있도록 해주는 기능이다.

  • useState : 화면에 영향을 주는 상태를 저장한다.
  • useEffect : 렌더링 이후 React 외부와 관련된 작업을 처리한다.
  • useRef : 리렌더링 없이 값을 저장하거나 DOM 요소에 접근한다.
  • useMemo : 계산된 값을 기억한다.
  • useCallback : 함수 참조를 기억하여 필요할 때 같은 함수 참조를 재사용한다.

• 왜 Hooks를 사용하는가?: React 컴포넌트는 화면을 구성하지만, 단순히 화면만 보여주는 것 외에도 다양한 기능이 필요하다. 예)

  • 사용자가 입력한 값을 저장하기
  • 버튼 클릭에 따라 값을 변경하기
  • API에서 데이터 가져오기
  • 특정 HTML 요소에 접근하기
  • 불필요한 계산이나 함수 생성을 줄이기

• 함수 컴포넌트와 Hooks의 관계: Hooks는 함수 컴포넌트 내부에서 React의 기능을 사용할 수 있도록 해준다. 즉, 함수 컴포넌트에서 상태를 관리하거나 렌더링 이후 특정 작업을 실행하기 위해 Hooks를 사용한다.

  2. Hooks를 이해하기 전에 알아야 하는 개념

  2-1. 컴포넌트

• 컴포넌트란 무엇인가?: 컴포넌트(Component)는 웹사이트의 화면이나 기능을 독립적인 단위로 나눈 것이다.

• 컴포넌트의 역할: 컴포넌트는 웹사이트를 여러 개의 독립적인 부분으로 나누어 관리할 수 있도록 한다.

• 컴포넌트를 사용하는 이유

  • 코드 재사용: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있다.
  • 코드 관리: 웹사이트의 기능을 나누어 관리할 수 있어 코드가 길어지는 것을 줄이고 수정과 관리가 쉬워진다.

    2-2. 함수 컴포넌트

• 함수 컴포넌트란?: 함수 컴포넌트(Function Component)는 함수를 이용하여 만든 React 컴포넌트이다. 일반적으로 JSX를 반환하여 화면을 구성한다.

• function으로 선언하는 방법

• 화살표 함수로 선언하는 방법

2-3. State

• State란?: State는 컴포넌트가 기억하고 관리해야 하는 값이다. 예) 좋아요 수, 로그인 여부, 검색어, 게시글 목록, 선택한 카테고리 등이 있다.
• 일반 변수와 State의 차이
  • 일반 변수 변경 → 화면 업데이트 X
  • State 변경 → 리렌더링 → 화면 업데이트
• State가 필요한 이유: 웹사이트에서는 값이 변경되면 화면도 함께 변경되어야 한다. 따라서 화면에 영향을 주는 값을 관리하기 위해 State를 사용한다.

  2-4. Props

• Props란?: Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터이다.
• 부모 컴포넌트와 자식 컴포넌트: 다른 컴포넌트를 포함하거나 사용하는 컴포넌트를 부모 컴포넌트, 그 안에서 사용되는 컴포넌트를 자식 컴포넌트라고 한다.
• Props를 이용한 데이터 전달: Props를 사용하면 부모 컴포넌트의 데이터를 자식 컴포넌트에게 전달할 수 있다. Props는 기본적으로 부모에서 자식 방향으로 전달된다.

  2-5. 렌더링과 리렌더링

• 렌더링이란?: 렌더링(Rendering)은 React가 컴포넌트를 실행하고 화면에 표시할 내용을 준비하는 과정이다.
• 리렌더링이란?: 리렌더링(Re-rendering)은 컴포넌트가 다시 실행되어 화면에 필요한 변경 사항을 반영하는 과정이다.
• 어떤 경우에 리렌더링되는가?
  • State가 변경되면 해당 컴포넌트가 리렌더링된다.
  • Props가 변경되면 해당 Props를 받는 컴포넌트가 리렌더링될 수 있다.
  • 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 기본적으로 리렌더링될 수 있다.
• React.memo와 리렌더링
  • React.memo를 사용하면 Props가 변경되지 않은 자식 컴포넌트의 불필요한 리렌더링을 줄일 수 있다.

    3. useState

• useState란?: useState는 컴포넌트의 State를 저장하고 관리하기 위한 Hook이다.
• 역할: State 값을 저장하고, 값이 변경되면 React가 화면을 업데이트할 수 있도록 한다.
• 기본 문법: const [state, setState] = useState(initialValue);
• 초기값: useState의 괄호 안에는 State의 초기값을 넣는다. ex) useState(0)→초기값은 0
• 상태 변경 방법: State는 값을 직접 변경하는 것이 아니라 Setter 함수를 사용하여 변경한다. 예) setCount(1)과 같이 Setter 함수를 사용하여 State를 변경한다.
• State 변경과 리렌더링: State 변경 → 컴포넌트 리렌더링 → 변경된 화면 반영

4. useEffect

• useEffect란?: useEffect는 컴포넌트 렌더링 이후 API 요청, 이벤트 등록, 타이머 설정 등 React 외부와 관련된 작업을 처리하기 위한 Hook이다.
• 역할
  • API 요청
  • 이벤트 등록
  • 타이머 설정
  • 외부 데이터와 연결
• 기본 문법: useEffect(() => { 실행할 작업 }, [dependencies]);
• Dependency Array란?: Dependency Array는 Effect가 다시 실행될 조건을 관리하는 배열이다.
• Dependency Array가 없는 경우: Dependency Array를 작성하지 않으면 렌더링이 완료될 때마다 Effect가 실행된다.
• []: 빈 배열을 전달하면 일반적으로 컴포넌트가 처음 화면에 나타난 후 Effect가 실행된다.
• [value]: value가 변경되면 Effect가 다시 실행된다.
• Cleanup: Cleanup은 useEffect에서 생성한 작업을 정리하기 위한 기능이다. 예를 들어 타이머나 이벤트 리스너를 제거할 때 사용할 수 있다.
• API 요청과 useEffect: 컴포넌트 렌더링 → useEffect 실행 → API 요청 → 데이터 받기 → State에 데이터 저장 → 리렌더링 → 화면에 데이터 표시

5. useRef

• useRef란?: useRef는 값을 저장하지만 값이 변경되어도 리렌더링을 발생시키지 않는 Hook이다.

• 역할

  • 리렌더링 없이 값을 저장
  • 특정 DOM 요소에 접근

• 기본 문법: const ref = useRef(initialValue);

• .current: useRef로 생성한 Ref 객체의 값은 .current에 저장된다. 값을 읽거나 변경할 때 .current를 사용한다. 예)

• 값 저장: useRef에 저장된 값은 컴포넌트가 다시 렌더링되어도 유지된다.

하지만 .current의 값을 변경해도 화면은 다시 렌더링되지 않는다.

• useState와 차이

• DOM 접근: useRef는 특정 HTML 요소에 직접 접근할 때 사용할 수 있다. 예를 들어 input 요소에 포커스를 이동시키는 기능을 구현할 수 있다.

6. useMemo

• useMemo란?: useMemo는 계산한 결과를 기억하는 Hook이다.

• 역할: 컴포넌트가 리렌더링될 때 불필요하게 같은 계산을 반복하지 않도록 도와준다.

• 기본 문법: const value = useMemo(() => { 계산하는 코드 }, [dependencies]);

• 계산 결과를 기억하는 이유: 컴포넌트가 리렌더링되면 컴포넌트 내부의 코드가 다시 실행될 수 있다. 계산 비용이 큰 작업을 매번 반복하면 성능에 영향을 줄 수 있기 때문에 useMemo를 사용하여 필요한 경우 이전 계산 결과를 재사용할 수 있다.

• Dependency Array: Dependency Array에 있는 값이 변경되면 계산을 다시 실행한다. 값이 변경되지 않았다면 이전에 계산한 결과를 사용할 수 있다.

• 언제 사용하는가?

  • 계산 비용이 큰 경우
  • 같은 계산이 반복되는 경우
  • 불필요한 계산이 반복되는 경우

• 무조건 사용하면 안 되는 이유: useMemo 역시 값을 기억하고 관리하는 과정이 필요하기 때문에 모든 값에 사용한다고 성능이 항상 향상되는 것은 아니다. 필요한 경우에 사용하는 것이 중요하다.

7. useCallback

• useCallback이란?: useCallback은 함수 참조를 기억하는 Hook이다.

• 역할: 컴포넌트가 리렌더링될 때 함수가 불필요하게 새로 생성되는 것을 줄이는 데 사용할 수 있다.

• 기본 문법: const callback = useCallback(() => { 실행할 함수 }, [dependencies]);

• Dependency Array: Dependency Array의 값이 변경되면 새로운 함수 참조를 반환하고, 변경되지 않았다면 이전 함수 참조를 유지한다.

• 함수를 기억하는 이유: 컴포넌트가 리렌더링되면 컴포넌트 내부에서 선언한 함수도 새로운 함수로 생성될 수 있다. 함수 참조가 변경되면 자식 컴포넌트의 Props가 변경된 것으로 판단될 수 있기 때문에 필요한 경우 useCallback을 사용한다.

• React.memo와 관계: React.memo는 Props가 변경되지 않았을 때 컴포넌트의 불필요한 리렌더링을 줄이는 데 사용할 수 있다. 하지만 부모 컴포넌트가 리렌더링될 때마다 새로운 함수를 Props로 전달하면 함수 참조가 변경되어 자식 컴포넌트는 Props가 변경되었다고 판단할 수 있다. 이때 useCallback을 사용하여 함수 참조를 유지하면 React.memo와 함께 최적화에 도움이 될 수 있다.

• 언제 사용하는가?

  • 함수를 자식 컴포넌트의 Props로 전달하는 경우
  • React.memo를 사용하는 경우
  • 동일한 함수 참조를 유지해야 하는 경우

8. useMemo와 useCallback 비교

useMemo -> 값 기억 useCallback -> 함수 참조 기억

9. 전체 Hook 비교

배열(Array)

자주 쓰는 연산자

1.변수(variable)

: 값을 저장하는 이름이 있는 공간.(const,let)

const name = "Mike"; ->name이라는 상자 안에"Mike"를 저장함.

변수 선언 방법

const name = "Mike";
let age = 20; 

• const:값을 바꾸지 않을 때
• let:값을 바꿀 때

let age = 20;

age = 21;

console.log(age);

-> 결과: 21

2.자료(Data)

: 변수에 저장되는 값. 예:10,"Mike",true

const age = 20;

• 변수:age
• 자료:20 const name = "Mike";
• 변수:name
• 자료:"Mike"

3.자료형(Data Type)

: 자료의 종류. number,string,boolean,object,undefined 등

number

10 3.14 -5

string

"Mike" "안녕하세요"

boolean

true false

object

{ name: "Mike", age:20 }

undefined

let name; -> 값이 아직 없음. 자료형 확인 console.log(typeof 10); -> 결과: number

4.console.log()

: 콘솔(터미널이나 개발자 도구)에 값을 출력하는 함수

console.log("Hello"); -> 결과: Hello

5.alert()

: 브라우저에 알림 창을 띄우는 함수

alert("안녕하세요"); ->브라우저에서 나오는 창: 안녕하세요

[확인]

6.prompt()

: 사용자에게 입력을 받는 함수

const name = prompt("이름을 입력하세요"); -> 사용자가 Mike입력 ->name = "Mike"

7.confirm()

: 확인/취소 창을 띄워 true 또는 false를 반환하는 함수

확인 여부를 물어봄 const result = confirm("삭제하시겠습니까?"); 사용자가 확인->true 취소->false

8.연산자(Operator)

: 값을 계산하거나 비교하는 기호. 예: +,-,*,/,===,>,&&

산술 연산

10 + 5 10 - 5 10 * 5 10 / 5 ->결과: 15 5 50 2

비교 연산

10 > 5 -> true 10 < 5 -> false 10 === 10 -> true

논리 연산

• OR true || false -> true
• AND true && false -> false
• NOT !true -> false

9.조건문(Conditional)

: 조건에 따라 다른 코드를 실행. if,else,switch

const age = 20;

if(age >= 20){ console.log("성인"); } -> 결과: 성인

• else

if(age >=20){ console.log("성인"); }else{ console.log("미성년자"); }

10.반복문(Loop)

: 같은 코드를 여러 번 실행. for,while

for

for(let i=1; i<=5; i++){ console.log(i); } -> 결과: 1 2 3 4 5

while

let i=1;

while(i<=5){ console.log(i); i++; }

11.함수(Function)

: 여러 줄의 코드를 하나로 묶어 필요할 떄 실행하는 기능

function hello(){ console.log("안녕하세요"); } 실행 -> hello(); -> 결과: 안녕하세요

매개변수 function hello(name){ console.log(name); }

hello("Mike"); -> 결과: Mike 반환값 function add(a,b){ return a+b; }

console.log(add(3,5)); -> 결과: 8

12.객체(Object)

: 관련된 데이터를 하나로 묶는 자료형, 속성으로 데이터를 저장함.

관련된 정보를 하나로 묶는다: const person = { name:"Mike", age:20 }; 꺼내기: console.log(person.name); -> Mike

console.log(person.age); -> 20

13.배열(Array)

: 여러 개의 값을 순서대로 저장하는 자료형

여러 개의 값을 저장한다. const fruits = [ "사과", "바나나", "포도" ];

첫 번째

console.log(fruits[0]); -> 사과

두 번째

console.log(fruits[1]); -> 바나나

길이

console.log(fruits.length); -> 3

• 리액트(React)는 메타(구 페이스북)에서 개발한 웹 애플리케이션의 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
• 리액트 라우터(React Router)는 리액트 앱에서 페이지 이동을 구현할 때 사용하는 표준 라이브러리이다.

1. react-router-dom이 필요한 이유

전통적인 웹사이트(MPA, Multi Page Application)는 페이지를 이동할 때마다 서버에 새로운 HTML 파일을 요청한다. 이 과정에서 화면 전체가 순간적으로 깜빡이며 새로고침된다.

하지만 리액트는 SPA(Single Page Application) 방식을 사용한다. SPA는 처음에 HTML을 딱 한 장만 받아두고, 주소가 바뀔 때마다 자바스크립트가 필요한 부분의 컴포넌트(화면 조각)만 동적으로 갈아끼우는 방식이다.

이때 주소창의 URL이 바뀜에 따라 어떤 컴포넌트를 화면에 보여줄지 결정하고 관리해 주는 내비게이션 역할을 하는 라이브러리가 바로 react-router-dom이다.

2. 패키지 설치

리액트 프로젝트 폴더의 터미널에 아래 명령어를 입력하여 라이브러리를 설치한다.

```bash npm install react-router-dom

fetch & axios

서버와 비동기 통신을 하기 위해 자바스크립트에서 사용하는 가장 대표적인 두 가지 방법이다.

1. fetch API

브라우저에 기본적으로 내장되어 있는 API로, 별도의 설치 없이 즉시 사용할 수 있는 자바스크립트 내장 기능이다.

• 장점: 내장 기능이기 때문에 외부 라이브러리 설치가 필요 없고, 프로젝트의 무게가 가벼워진다.
• 단점: 구형 브라우저 지원이 부족하며, 기능이 단순하여 개발자가 직접 추가로 코딩해야 하는 부분이 많다.

fetch의 특징

• 데이터를 보낼 때 객체를 문자열로 직접 변환(JSON.stringify())해서 보내야 한다.
• 데이터를 받을 때도 response 데이터를 한 번 더 JSON 형식으로 변환(response.json())하는 과정이 필요하다.
• 서버에서 에러가 발생해도(예:404, 500 에러) 통신 자체는 성공한 것으로 간주하여 에러를 자동으로 잡아내지 못한다.

2. axios

웹 브라우저와 Node.js 환경 모두에서 사용할 수 있는 별도의 외부 라이브러리(패키지)이다.

• 장점: 기능이 매우 다양하고 편리하며, 구형 브라우저와의 호환성이 뛰어나 실무 및 대규모 프로젝트에서 가장 많이 쓰인다.
• 단점: 외부 라이브러리이기 때문에 설치 과정(npm install axios)이 필요하다.

axios의 특징

• 서버와 데이터를 주고받을 때 자동으로 JSON 변환을 처리해 주므로 코드가 간결하다.
• 서버가 에러 상태 코드(예: 404 Not Found, 500 Server Error)를 반환하면 자동으로 에러를 인지하고 catch블록으로 넘겨준다.
• 요청을 보내기 전이나 응답을 받기 전에 가로채서 특정 작업(예: 로그인 토큰 검사)을 수행할 수 있는 인터셉터 기능을 제공한다.

API(응용 프로그램 프로그래밍 인터페이스)

서로 다른 소프트웨어가 서로 통신하고 데이터를 주고받을 수 있게 해주는 연결 고리이다.

- API의 역할

: 앱과 서버 간의 소통 창구이다. 예를 들어, 날씨 앱이 자체적으로 모든 날씨 정보를 생산하지 않고 기상청의 서버에 데이터를 요청하고 응답받아 화면에 띄우는 과정이 대표적인 API의 활용이다.

오픈 API

이 인터페이스를 누구나 제한 없이 사용할 수 있도록 외부에 공개한 것을 의미한다.

- 오픈 API란?

특정 기업이나 기관이 보유한 기능과 데이터를 외부 개발자들이 자유롭게 활용할 수 있도록 개방한 퍼블릭 API이다. 이를 통해 개발자는 방대한 데이터를 처음부터 수집할 필요 없이 효율적인 앱과 서비스를 만들 수 있다.

• 공공 데이터: 정부 및 공공기관의 데이터를 활용할 수 있는 대한민국 공공데이터포털이나 서울열린데이터광장에서 실시간 버스/지하철 정보, 날씨 등을 제공한다.
• AI 및 기계학습: OpenAI API를 통해 ChatGPT와 같은 강력한 언어 모델을 자체 서비스에 연동할 수 있다.
• 지도 및 위치: 지도 데이터를 앱에 그대로 가져다 쓸 수 있도록 네이버 지도나 카카오 맵 등에서 오픈 API를 제공한다.

오픈API를 사용하려면 일반적으로 해당 제공 사이트에서 회원가입 후 인증키(API Key)를 발급받아야 하며, 이를 통해 호출 권한을 얻고 데이터를 받아올 수 있다.

통신이란?

사람/기계들 간에 여러 종류의 매체를 이용해 정보를 전달하는 과정이다. 전화, 이메일 등 우리가 살아가면서 하는 모든 온라인상의 커뮤니케이션이 통신에 속한다.

방식

1. 데이터 형식(데이터가 어떤 형태의 '문자'나 '신호'로 이루어져 있는가에 따른 분류이다.)

• 텍스트 기반: 사람이 메모장으로 열어도 읽을 수 있는 문자 형태이다. ex) HTML, JSON, XML

• 바이너리 기반: 컴퓨터가 처리하기 빠른 0과 1의 이진 데이터 형태이다. ex) gRPC, 이미지/동영상 파일, 이미지 스트리밍

2. 전송 방향(데이터가 어느 쪽으로 흐를 수 있는가에 따른 분류이다.)

• 단방향: 오직 한쪽 방향으로만 송신한다. ex) 단방향 브로드캐스트

• 양방향(주고받는 것이 모두 가능하며, 두 가지로 나뉜다.)

  • 반이중: 양방향 소통은 되지만 동시는 불가능해 번갈아 가며 전송한다. ex) 무전기, 일반 HTTP 요청-응답
  • 전이중: 동시에 양방향으로 데이터를 주고받는다. ex) 전화기, 웹소켓, 네트워크 소켓 통신

3. 연결 방식(데이터를 보내기 전에 상대방과 통로를 개설하는가에 따른 분류이다.)

• 연결 지향:먼저 안전하게 연결을 확인하고 데이터를 보낸다. 신뢰성이 높다. ex) TCP 프로토콜(웹 브라우징, 파일 다운로드)

• 비연결 지향: 연결 과정 없이 데이터를 목적지를 향해 던진다. 속도가 매우 빠르다 ex) UDP 프로토콜(실시간 온라인 게임, 실시간 라이브 영상 스트리밍)

4. 데이터 처리 타이밍

• 동기식: 요청을 보낸 후 응답(결과)이 올 때까지 다음 작업을 멈추고 대기한다.
• 비동기식: 요청을 보낸 후 응답 여부와 상관없이 즉시 다음 작업을 계속 수행한다.

퍼블리싱

웹 퍼블리싱이란?

웹 퍼블리싱은 웹 디자이너가 만든 시각적 디자인을 웹 브라우저에서 실제 작동 가능한 웹 페이지로 구현하는 작업이다. HTML, CSS, JavaScript를 사용하여 뼈대를 잡고, 스타일을 적용하며, 동적 기능을 추가한다. 이를 전문적으로 담당하는 사람을 '웹 퍼블러셔'라고 부르며,디자이너와 프론트엔드 개발자 사이의 가교(다리) 역할 을 한다.

1. 웹 퍼블리싱 작업에 필요한 것

• HTML(뼈대)

  <!doctype html>  <!-- HTML5 버전이 쓰임. HTML 버전마다 들어가는 마커가 다름 -->
  <html>
  <head> <!-- head에는 제목, meta, css, js 적용 등 셋팅. 제목, 파비콘, 유니코드에 대한거, css 외부꺼를 뭘 가져올건지에 대해
  웹페이지의 전반적인 셋팅 내용을 적어준다. -->
    <title>제목을 적어보자</title>  
  </head>
  <body><!--body에는 실질적인 코드가 들어간다 -->
    <p>Hello World!</p>
  </body>
  <footer> <!-- 이용약관, 저작권 등에 대한 부분. 요즘에는 바디에도 많이 넣어놓음 -->
  </footer>  
  

3. 웹 퍼블리셔의 역할

과거에는 단순히 화면을 그대로 그리는 역할에 그쳤지만, 현대의 퍼블리싱은 다음과 같은 중요한 요구 조건을 충족해야 한다.

• 반응현 웹(Responsive Web): Pc, 태블릿, 모바일 등 화면 크 기에 맞춰 레이아웃이 자동으로 변하도록 만든다.
• 웹 표준 & 웹 접근성: 크롬, 사파리, 엣지 등 어떤 브라우저에서도 똑같이 보이고, 시각 장애인용 스크린 리더 프로그램도 사이트를 잘 읽을 수 있도록 표준 규칙에 맞춰 코딩한다.
• 크로스 브라우징: 구형 브라우저부터 최신 브라우저까지 깨짐 없이 화면이 잘 나오도록 검수한다.

Eslint란?

Eslint는 JavaScript와 TypeScript 코드에서 문법 오류나 코드 스타일 문제를 찾아주는 도구이다.

개발자가 실수한 부분을 미리 알려주기 때문에 오류를 줄이고, 여러 사람이 함께 개발할 때 일관된 코드를 작성하는 데 도움이 된다.

주요 기능

• 문법 오류 검사
• 사용하지 않는 변수 확인
• 코드 스타일 검사
• 프로젝트 규칙 적용

예시

❌ ESLint 경고

let a = 10;
let b = 20;

console.log(a);

위 코드에서는 b를 사용하지 않았기 때문에 ESLint가 사용하지 않는 변수(no-unused-vars)라고 경고한다.

Prettier란?

Prettier는 코드의 들여쓰기, 줄바꿈, 따옴표 등의 형식을 자동으로 맞춰주는 코드 포맷터이다.

개발자가 직접 코드를 정리하지 않아도 일정한 스타일로 자동 저장해 준다.

주요 기능

• 들여쓰기 자동 정렬
• 코드 줄바꿈
• 따옴표 통일
• 세미콜론 자동 정리
• 코드 가독성 향상

🎨 Prettier 예시

정리 전

function hello(){console.log("Hello")}

정리 후

function hello() {
  console.log("Hello");
}

Prettier는 코드의 들여쓰기, 줄바꿈, 세미콜론 등을 자동으로 정리하여 가독성을 높여준다.

EsLint와 Prettier의 차이점

ESLint는 코드의 오류를 검사하는 도구이고, Prettier는 코드의 형식을 자동으로 정리하는 도구

TailwindCSS란?

TailwindCSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.

HTML 클래스 속성 안에 스타일을 바로 작성하는 방식입니다. 별도의 CSS 파일 없이도 스타일링이 가능합니다.

예를 들어 버튼을 만들 때 기존 방식이랑 비교하면 이렇습니다:

/* 기존 방식 - styles.css */
.btn {
  background-color: #3b82f6;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
}

<!-- 기존 방식 - HTML -->
<button class="btn">클릭</button>

<!-- Tailwind 방식 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">클릭</button>

처음에는 클래스가 너무 많았는데, HTML 파일 하나에서 스타일까지 바로 확인할 수 있다는 점이 생각보다 편리했습니다.

기존 CSS와 비교

설치 방법

빠르게 테스트해보고 싶다면 (CDN)

<head> 안에 한 줄 추가하면 바로 사용할 수 있습니다:

<script src="https://cdn.tailwindcss.com"></script>

다만 이 방법은 학습용이고, 실제 프로젝트에는 npm 설치를 권장한다고 합니다.

npm으로 설치하기 (일반 프로젝트)

npm install -D tailwindcss
npx tailwindcss init

설치하면 tailwind.config.js 파일이 생기는데, 여기서 content 항목에 내 파일 경로를 적어줘야 합니다. 이걸 안 하면 클래스가 빌드 결과물에 포함이 안 됩니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],  // 내 파일 경로에 맞게 수정
  theme: {
    extend: {},
  },
  plugins: [],
}

그다음 CSS 파일을 만들고 (src/input.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

빌드 명령어 실행:

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

--watch를 붙이면 파일을 저장할 때마다 자동으로 빌드됩니다.

React + Vite 프로젝트

요즘 많이 쓰이는 조합이라 따로 정리했습니다:

npm create vite@latest my-app -- --template react
cd my-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

-p 옵션을 붙이면 postcss.config.js도 같이 만들어집니다.

클래스 규칙 이해하기

Tailwind 클래스에는 일정한 규칙이 있습니다.

[속성]-[값]

text-red-500   →  color: 빨간색 계열
bg-blue-300    →  background: 파란색 계열 (연한 편)
p-4            →  padding: 1rem
mt-8           →  margin-top: 2rem
flex           →  display: flex
rounded-lg     →  border-radius: 0.5rem

숫자 크기 단위

Tailwind에서 숫자 1 = 0.25rem = 4px

4 = 1rem = 16px 이게 기준점이라고 생각하기

색상 숫자 규칙

색상 숫자는 작을수록 밝고, 클수록 어둡습니다.

gray-50   → 거의 흰색
gray-300  → 연한 회색
gray-500  → 중간 회색
gray-700  → 진한 회색
gray-900  → 거의 검정

자주 쓰이는 클래스 정리

여백 (Padding / Margin)

<!-- Padding -->
<div class="p-4">       <!-- 상하좌우 모두 16px -->
<div class="px-4">      <!-- 좌우만 -->
<div class="py-4">      <!-- 상하만 -->
<div class="pt-4 pb-2"> <!-- 위 16px, 아래 8px -->

<!-- Margin -->
<div class="mt-4">      <!-- 위쪽만 -->
<div class="mx-auto">   <!-- 좌우 auto (수평 가운데 정렬) -->
<div class="mb-0">      <!-- 아래 여백 제거 -->

mx-auto는 컨테이너를 가운데 정렬할 때 많이 쓰이는 것 같습니다. max-w-xl mx-auto 이렇게 세트로 자주 보입니다.

텍스트

<p class="text-sm">     <!-- 14px -->
<p class="text-base">   <!-- 16px, 기본 -->
<p class="text-lg">     <!-- 18px -->
<p class="text-xl">     <!-- 20px -->
<p class="text-2xl">    <!-- 24px -->
<p class="text-4xl">    <!-- 36px -->

<p class="font-bold">       <!-- 굵게 -->
<p class="font-semibold">   <!-- 약간 굵게 -->
<p class="text-center">     <!-- 가운데 정렬 -->
<p class="leading-relaxed"> <!-- 줄간격 넓게 -->

Flexbox

레이아웃 잡을 때 flex를 제일 많이 사용하게 됩니다:

<div class="flex">                 <!-- 가로 배치 -->
<div class="flex flex-col">        <!-- 세로 배치 -->
<div class="flex items-center">    <!-- 세로 중앙 정렬 -->
<div class="flex justify-center">  <!-- 가로 중앙 정렬 -->
<div class="flex justify-between"> <!-- 양 끝에 배치 -->
<div class="flex gap-4">           <!-- 아이템 간격 16px -->
<div class="flex flex-wrap">       <!-- 넘치면 줄 바꿈 -->

Grid

<div class="grid grid-cols-2 gap-4">  <!-- 2열 그리드 -->
<div class="grid grid-cols-3 gap-6">  <!-- 3열 그리드 -->

크기

<div class="w-full">           <!-- 너비 100% -->
<div class="w-1/2">            <!-- 너비 50% -->
<div class="w-64">             <!-- 너비 256px -->
<div class="h-screen">         <!-- 높이 100vh -->
<div class="max-w-lg">         <!-- 최대 너비 512px -->
<div class="max-w-2xl mx-auto"><!-- 컨테이너로 자주 쓰는 패턴 -->

테두리 & 그림자

<div class="rounded">       <!-- 살짝 둥글게 -->
<div class="rounded-lg">    <!-- 더 둥글게 -->
<div class="rounded-xl">    <!-- 많이 둥글게 -->
<div class="rounded-full">  <!-- 완전 원형 -->

<div class="border border-gray-200"> <!-- 회색 테두리 -->

<div class="shadow">     <!-- 기본 그림자 -->
<div class="shadow-md">  <!-- 중간 그림자 -->
<div class="shadow-lg">  <!-- 큰 그림자 -->

반응형 디자인

Tailwind는 모바일 퍼스트 방식입니다. 접두사 없는 클래스가 기본(모바일)이고, 접두사를 붙여서 큰 화면의 스타일을 추가합니다.

사용 예시:

<!-- 모바일: 1열 / 태블릿: 2열 / 데스크탑: 3열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  ...
</div>

<!-- 모바일에서는 숨기고, 데스크탑에서만 표시 -->
<div class="hidden lg:block">
  데스크탑에서만 보입니다
</div>

<!-- 화면 크기에 따라 텍스트 크기 조절 -->
<h1 class="text-2xl md:text-3xl lg:text-5xl font-bold">
  제목
</h1>

미디어 쿼리를 별도로 작성하지 않아도 돼서 편리합니다.

상태에 따른 스타일 (hover, focus 등)

인터랙션 스타일도 접두사를 붙이는 방식으로 처리합니다:

<!-- 마우스 올렸을 때 -->
<button class="bg-blue-500 hover:bg-blue-600">버튼</button>

<!-- 포커스 상태 -->
<input class="border focus:border-blue-500 focus:outline-none">

<!-- 비활성화 상태 -->
<button class="bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
  비활성화
</button>

전환 효과도 간단하게 추가할 수 있습니다:

<button class="bg-blue-500 hover:bg-blue-600 transition-colors duration-200">
  부드럽게 색상 변경
</button>

다크 모드

dark: 접두사를 붙이면 다크 모드 스타일을 별도로 지정할 수 있습니다:

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">제목</h1>
  <p class="text-gray-600 dark:text-gray-400">본문 텍스트</p>
</div>

tailwind.config.js에서 방식을 설정할 수 있습니다:

// 시스템 설정을 따르는 방식 (기본값)
darkMode: 'media'

// 클래스로 직접 제어하는 방식
darkMode: 'class'

블로그 카드 만들어보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-8">

  <div class="bg-white rounded-2xl shadow-lg overflow-hidden max-w-sm w-full
              transition-transform duration-200 hover:-translate-y-1 hover:shadow-xl">

    <!-- 썸네일 영역 -->
    <div class="bg-gradient-to-br from-indigo-400 to-purple-500 h-44
                flex items-center justify-center">
      <span class="text-6xl">🛠️</span>
    </div>

    <!-- 카드 내용 -->
    <div class="p-5">

      <!-- 카테고리 태그 -->
      <span class="text-xs font-semibold text-indigo-600 bg-indigo-50
                   px-2.5 py-1 rounded-full">
        TailwindCSS
      </span>

      <!-- 제목 -->
      <h2 class="text-lg font-bold text-gray-900 mt-3 mb-1.5 leading-snug">
        TailwindCSS 공부 중입니다
      </h2>

      <!-- 요약 내용 -->
      <p class="text-sm text-gray-500 leading-relaxed line-clamp-2">
        CSS 파일 없이 HTML에서 바로 스타일을 적용하는 방식인데,
        생각보다 빠르게 UI를 만들 수 있어서 공부해보고 있습니다.
      </p>

      <!-- 하단 정보 -->
      <div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100">
        <div class="flex items-center gap-2">
          <div class="w-7 h-7 rounded-full bg-gradient-to-br from-pink-400 to-orange-400"></div>
          <span class="text-sm font-medium text-gray-700">작성자</span>
        </div>
        <span class="text-xs text-gray-400">2025. 1. 1</span>
      </div>

    </div>
  </div>

</body>
</html>

공부하면서 헷갈렸던 부분들

오타가 나도 에러가 안 납니다

오타가 있으면 에러 없이 그냥 스타일이 적용이 안 됩니다.

<!-- 오타가 있어도 에러 없음 (그냥 적용 안 됨) -->
<div class="backgroud-blue-500">

<!-- 정상 -->
<div class="bg-blue-500">

React에서 동적 클래스 이름 조합 시 주의

클래스 이름을 문자열로 조합하면 빌드에 포함이 안 됩니다:

// ❌ 이렇게 하면 빌드에 포함이 안 됩니다
const color = 'red';
<div className={`text-${color}-500`}>

// ✅ 완성된 클래스 이름을 사용해야 합니다
const cls = isError ? 'text-red-500' : 'text-green-500';
<div className={cls}>

Tailwind가 빌드 시 소스 파일을 스캔해서 완성된 클래스 이름만 인식하기 때문이다.

기본 클래스에 없는 값을 쓰고 싶을 때

대괄호 안에 값을 직접 넣는 방법이 있습니다:

<div class="w-[342px]">
<div class="bg-[#1da1f2]">
<div class="text-[13px]">

이걸 Arbitrary Values라고 부른다.

도움이 됐던 자료들

• play.tailwindcss.com — 설치 없이 바로 실습할 수 있어서 처음 감 잡을 때 많이 사용했습니다.
• tailwindcss.com/docs — 공식 문서인데 Ctrl+K로 클래스 검색이 가능합니다. 클래스 이름이 기억 안 날 때마다 찾아봤습니다.
• VS Code Tailwind CSS IntelliSense — 자동완성과 실제 CSS 값 미리보기가 돼서 편리합니다.

기능 명세서

1. 기능 명세서란?

• 기능 명세서는 "우리가 만들 서비스가 구체적으로 어떻게 움직여야 하는지"를 상세하게 정의한 프로젝트 설계도입니다. 사용자의 행동에 대해 시스템이 어떻게 반응해야 하는지 기획자, 개발자, 디자이너가 미리 약속하는 공통의 설명서와 같습니다.

2. 왜 필요한가?

1. 커뮤니케이션의 기준: 팀원 간의 오해를 줄이고 "말하지 않아도 아는" 상태를 만듭니다.

2. 빈틈 없는 설계: 글로 정리하는 과정에서 놓치기 쉬운 예외 상황(에러 등)을 발견하게 됩니다.

3. QA(검증)의 기준: 제품이 완성되었을 때, "제대로 만들어졌는지"를 판단하는 유일한 근거가 됩니다.

3. 핵심 용어 정리

🛠 시스템 로직 관련

• 요구사항 (Requirement): 구현해야 할 목표 ("로그인이 되어야 함")

• 비즈니스 로직 (Business Logic): 서비스 운영의 핵심 규칙 ("포인트는 1,000원부터 사용 가능")

• 유효성 검사 (Validation): 입력값이 규칙에 맞는지 확인 ("이메일 형식이 맞는가?")

🎨 화면 및 동작 관련

• 인터랙션 (Interaction): 사용자 동작에 대한 시스템의 반응 (클릭, 스크롤, 애니메이션)

• 컴포넌트 (Component): 화면을 구성하는 부품 (버튼, 입력창, 모달 등)

• 플레이스홀더 (Placeholder): 입력창 안에 미리 적힌 안내 문구

⚠️ 상황 및 상태 관련

• 예외 처리 (Exception/Edge Case): 정상적이지 않은 상황 대비 ("결제 중 인터넷 끊김")

• 상태 (State): 요소의 현재 모습 (기본, 마우스 올림(Hover), 비활성화(Disabled), 로딩 중)

• 디폴트 (Default): 설정된 기본값

4. 기능 명세서 작성 흐름 (Step-by-Step)

[단계 1] 목적 및 시나리오 정의

• 이 기능이 왜 필요한가?

• 사용자가 어떤 순서로 이 기능을 사용하는가? (User Flow)

[단계 2] 기능 요구사항 상세화

• 정상 경로: 사용자가 모든 정보를 올바르게 입력했을 때의 동작.

• 상태 정의: 버튼이 언제 활성화되고, 언제 비활성화되는지 명시.

[단계 3] 예외 케이스(Edge Case) 발굴

• 잘못된 값을 입력하면 어떤 메시지를 보여주는가?

• 서버 오류가 나면 어떻게 안내하는가?

[단계 4] 데이터 및 화면 이동 정의

• 버튼을 누르면 어느 페이지로 이동하는가?

• 입력한 데이터는 어디로 전송되는가?

5. 작성 시 주의할 점 (작성 팁)

• 명확성: '적절히', '빠르게' 같은 모호한 단어 대신 '3초 이내', '빨간색 1px 테두리' 등 수치를 사용하세요.

• 객관성: 누가 읽어도 똑같이 이해할 수 있도록 주관을 배제하고 서술하세요.

• 시각화: 텍스트만으로 부족할 때는 와이어프레임(그림)을 함께 첨부하는 것이 좋습니다.

6. 요약

• 입력 (무엇을 넣고) → 검증 (규칙에 맞는지 보고) → 처리 (어떻게 계산해서) → 출력 (결과를 보여줌)

API 명세서

1. API 명세서란?

• API 명세서는 "프론트엔드(화면)와 백엔드(서버)가 데이터를 주고받는 규칙"을 상세히 기록한 문서입니다. 서로 다른 환경에서 작동하는 프로그램들이 어떤 언어로, 어떤 정보를, 어떤 순서로 소통할지 약속하는 데이터 통신 규약입니다.

2. 왜 필요한가?

1. 독립적 개발 가능: 명세서만 있으면 서버 개발이 끝나지 않아도 프론트엔드 개발자가 가짜 데이터(Mock Data)로 화면을 먼저 만들 수 있습니다.

2. 데이터 정확성: 어떤 값이 숫자인지, 문자인지 명시하여 데이터 전달 과정에서 발생하는 오류를 방지합니다.

3. 협업 효율성: "데이터를 어떻게 보내야 하나요?"라고 일일이 묻지 않고 명세서를 통해 스스로 해결할 수 있습니다.

3. 핵심 용어 정리

📡 통신 기본 방식

• Endpoint (엔드포인트): API가 자원에 접근할 수 있는 주소입니다. (예: /api/v1/users)

• HTTP Method (메서드): 데이터에 어떤 행위를 할지 정하는 방식입니다.

• GET: 데이터 조회 (가져오기)

• POST: 데이터 생성 (보내기/저장하기)

• PUT/PATCH: 데이터 수정 (바꾸기)

  • DELETE: 데이터 삭제 (지우기)

📤 요청과 응답 (Request & Response)

• Parameter (파라미터): 데이터를 요청할 때 함께 보내는 조건입니다.

• Request Body (바디): POST 등을 통해 서버로 보낼 실제 데이터 뭉치 (주로 JSON 형식).

• Header (헤더): 데이터 외에 인증 토큰(Token), 브라우저 정보 등 부가 정보를 담는 공간.

• Status Code (상태 코드): 요청의 결과 상태를 알려주는 숫자입니다.

• 200: 성공

• 400: 요청 오류 (사용자가 잘못 보냄)

• 401/403: 권한 없음 (로그인 필요 등)

• 500: 서버 내부 오류 (서버 쪽 고장)

4. API 명세서 작성 흐름 (Step-by-Step)

[단계 1] 기본 정보 정의

• API의 목적이 무엇인가? (예: "회원 정보 수정")

• 주소(URL)와 HTTP 메서드 결정.

[단계 2] 요청(Request) 규격 작성

• 필수 입력값이 무엇인가?

• 각 값의 데이터 타입은 무엇인가? (String, Number, Boolean 등)

[단계 3] 응답(Response) 규격 작성

• 성공했을 때 서버가 돌려줄 데이터 구조 정의.

• 데이터가 없을 때는 어떤 빈 값을 보낼지 결정.

[단계 4] 예외 상황(Error) 정의

• 실패했을 때의 에러 코드와 에러 메시지를 정의. (예: "존재하지 않는 사용자입니다.")

5. 작성 시 주의할 점

• 최신화: 코드 로직이 바뀌면 명세서도 즉시 업데이트해야 합니다. (문서와 코드가 다르면 큰 혼란이 생깁니다.)

• JSON 형식 준수: 가장 범용적인 데이터 포맷인 JSON 형태를 기본으로 작성하세요.

• 도구 활용: 메모장보다는 Swagger, Postman, Notion 등 협업에 최적화된 도구를 사용하는 것이 좋습니다.

6. 요약

• 어디로? (URL) + 어떻게? (Method) → 무엇을 주면? (Request) → 무엇을 돌려받나? (Response)

  QA

  1. QA란?

• QA는 "서비스가 출시되기 전, 기획대로 잘 만들어졌는지 검증하고 품질을 확인하는 과정"입니다. 단순히 버그를 찾는 것을 넘어, 사용자가 서비스를 이용할 때 불편함이 없는지, 보안이나 성능에 문제가 없는지 종합적으로 체크하는 최종 방어선입니다.

2. 왜 필요한가?

1. 신뢰도 확보: 결함이 많은 서비스는 사용자의 이탈을 초래합니다. 출시 전 문제를 해결하여 서비스의 신뢰도를 높입니다.

2. 비용 절감: 서비스 출시 후에 발견된 버그를 고치는 비용은 개발 중에 고치는 비용보다 훨씬 큽니다.

3. 기획 준수 확인: 개발 결과물이 처음에 약속했던 '기능 명세서'와 일치하는지 확인합니다.

3. 핵심 용어 정리

📋 테스트 계획 및 설계

• 테스트 케이스 (TC): 테스트를 위해 입력 값, 실행 조건, 예상 결과를 정리한 문서입니다. (QA의 가장 기본 단위)

• 체크리스트 (Checklist): 주요 기능을 간단하게 나열하여 누락 없이 확인하기 위한 목록입니다.

• 테스트 시나리오: 여러 기능을 엮어서 사용자의 실제 이용 흐름대로 테스트하는 과정입니다.

🐞 결함 관련 (Bug/Defect)

• 버그 리포트 (Bug Report): 발견된 결함을 개발자에게 전달하기 위해 작성하는 보고서입니다.

• 우선순위 (Priority): 얼마나 빨리 고쳐야 하는가? (P0: 즉시 수정, P1: 중요 등)

• 심각도 (Severity): 시스템에 얼마나 치명적인가? (Critical, Major, Minor 등)

🔄 테스트 종류

• 회귀 테스트 (Regression Test): 버그를 고친 후, 그 수정으로 인해 잘 되던 다른 기능에 문제가 생기지 않았는지 다시 확인하는 테스트입니다.

• 스모크 테스트 (Smoke Test): 세부 테스트 전, 주요 기능(로그인, 결제 등)이 작동하는지 짧게 확인하는 테스트입니다.

4. QA 진행 흐름 (Step-by-Step)

[단계 1] 테스트 계획 및 TC 작성

• 기능 명세서를 바탕으로 "무엇을 테스트할 것인가"를 정하고 테스트 케이스(TC)를 작성합니다.

[단계 2] 테스트 수행 (Execution)

• 작성된 TC를 하나씩 실행하며 결과가 '통과(Pass)'인지 '실패(Fail)'인지 기록합니다.

[단계 3] 결함 리포팅 및 수정

• 실패한 항목은 버그 리포트를 작성하여 개발팀에 전달합니다. 이때 재현 경로(Step)와 스크린샷이 필수입니다.

[단계 4] 재테스트 및 종료

• 개발자가 수정을 완료하면 다시 확인(Retest)하고, 전체 품질이 기준을 통과하면 QA를 종료합니다.

5. 작성 시 주의할 점

• 재현 경로 명확화: 개발자가 똑같은 버그를 볼 수 있도록 "어떤 페이지에서 무엇을 눌렀는지" 순서대로 적어야 합니다.

• 기대 결과 명시: "로그인이 안 됨"이라고 적지 말고, "로그인 실패 팝업이 뜨고 페이지가 유지되어야 함"처럼 정확한 기대를 적으세요.

• 기기 환경 기록: 버그가 발생한 OS(iOS/Android), 브라우저(Chrome/Safari), 기기명 등을 반드시 기록해야 합니다.

6. 요약

• 무엇을 볼까? (TC 작성) → 직접 해보기 (테스트 실행) → 틀린 것 찾기 (버그 리포트) → 다시 확인 (재테스트)

  릴리즈

  1. 릴리즈란?

• 릴리즈는 "개발과 테스트(QA)가 완료된 서비스를 실제 사용자들에게 제공(배포)하는 과정"입니다. 단순히 코드를 올리는 것을 넘어, 새로운 기능과 수정 사항을 문서화하고 사용자에게 알리는 모든 마무리를 포함하는 최종 출시 단계입니다.

2. 왜 필요한가?

1. 가치 전달: 개발된 기능이 드디어 사용자에게 전달되어 서비스의 가치를 실현합니다.

2. 버전 관리: 서비스가 언제, 어떤 모습으로 변화했는지 기록하여 장애 발생 시 복구(Rollback)의 근거를 만듭니다.

3. 사용자 소통: 우리 서비스가 어떻게 개선되었는지 사용자에게 공식적으로 알리는 창구가 됩니다.

3. 핵심 용어 정리

🔢 버전 관리 (Versioning)

• SemVer (Semantic Versioning): 버전을 세 자리 숫자로 관리하는 방식입니다. (예: v1.2.3)

  • Major(1): 기존과 호환되지 않는 대대적인 변화

  • Minor(2): 기능 추가 (기존 기능과 호환됨)

  • Patch(3): 버그 수정 및 작은 개선

• RC (Release Candidate): 정식 출시 전, 마지막으로 테스트하는 후보 버전입니다.

📦 배포 관련

• 배포 (Deployment): 코드를 실제 서버에 적용하는 행위입니다.

• 롤백 (Rollback): 릴리즈 후 심각한 문제가 발견되었을 때, 이전의 안정적인 버전으로 되돌리는 것입니다.

• 릴리즈 노트 (Release Note): 이번 업데이트에서 무엇이 바뀌었는지 적은 설명서입니다.

4. 릴리즈 진행 흐름 (Step-by-Step)

[단계 1] 최종 빌드 및 환경 점검

• 개발 완료된 코드의 최종본(Build)을 만들고, 실제 서비스와 동일한 환경에서 마지막 점검을 합니다.

[단계 2] 배포 (Deployment)

• 자동화 도구(CI/CD) 등을 이용해 서버에 코드를 반영합니다. 사용자가 끊김 없이 서비스를 이용하도록 '무중단 배포'를 주로 사용합니다.

[단계 3] 릴리즈 노트 작성

• 내부 공유 및 사용자 공지용으로 변경 사항을 정리합니다. (추가 기능, 수정된 버그, 개선 사항)

[단계 4] 모니터링

• 배포 직후 실시간으로 에러가 발생하는지, 서버 부하가 없는지 집중적으로 살핍니다.

5. 작성 시 주의할 점

• 대상자 고려: 개발자용은 기술적으로(예: "API 응답 지연 개선"), 사용자용은 이해하기 쉽게(예: "페이지 속도가 빨라졌어요") 작성합니다.

• 날짜 명시: 버전과 함께 배포 완료 날짜를 반드시 기록합니다.

• 영향도 안내: 사용자가 꼭 알아야 할 주의 사항이나 데이터 삭제 등의 변화가 있다면 가장 강조해서 적습니다.

6. 요약

• 완성 확인 (Build) → 서버 반영 (Deploy) → 변경 기록 (Changelog) → 이후 관찰 (Monitoring)

JavaScript란?

자바스크립트는 웹 페이지에 동적인 기능을 추가하기 위해 사용하는 프로그래밍 언어입니다.

• HTML: 웹의 구조(뼈대)
• CSS: 웹의 디자인(피부)
• JavaScript: 웹의 동작(근육/신경)

주요 특징

1. 동적 상호작용: 클릭 시 메뉴가 나타나거나, 폼 데이터를 검사하는 등 사용자와 소통합니다.
2. 이벤트 기반: 클릭, 마우스 휠, 키보드 입력 등 특정 사건(Event)에 반응합니다.
3. 웹 브라우저에서 실행: 별도의 설치 없이 크롬, 사파리 같은 브라우저만 있으면 작동합니다.

자바스크립트가 하는 일(예시)

• 버튼을 클릭했을 때 알림창 띄우기
• 다크 모드/라이트 모드 전환하기
• 서버에서 데이터를 받아와서 화면에 보여주기
• 실시간 계산기나 게임 만들기

변수

데이터를 저장하는 바구니입니다. 선언 방식에 따라 특징이 다릅니다.

• const: 재할당 불가능 (상수). 값이 변하지 않을 때 사용합니다.
• let: 재할당 가능. 값이 변해야 할 때 사용합니다.
• var: 예전에 쓰던 방식(중복 선언 가능 등 문제가 있어 현재는 거의 쓰지 않습니다).

데이터 타입(Data Types)

자바스크립트의 값은 크게 두 가지 타입으로 나뉩니다.

원시 타입(Primitive Types): 값이 하나인 단순한 타입

• Number: 숫자 (예: 10,3.14)
• String: 문자열 (예: 'Hello',"안녕하세요")
• Boolean: 참/거짓 (true,false)
• null: 값이 없음을 명시적으로 나타냄
• undefined: 값이 할당되지 않은 상태

객체 타입(Object Types): 여러 데이터를 하나로 묶은 타입

• object: 키(key)와 값(Value)의 쌍으로 이루어진 집합
• Array: 순서가 있는 데이터의 목록(배열) 💡정리

1. 변수 선택: 기본적으로 const를 쓰고, 나중에 값을 바꿔야 할 떄만 let을 쓰기
2. 객체(Object): 실제 사물을 묘사할 때 유용하다. (예: 자동차 = {색상: '빨강', 속도: 100})
3. 배열(Array): 같은 종류의 데이터 목록을 관리할 때 씁니다. (예: 상품리스트 = ['사과', '배', '포도'])

DOM 선택 메서드

DOM(Document Object Model) 선택 메서드는 자바스크립트가 HTML 뼈대에서 특정 요소를 집어내어 명령을 내릴 수 있게 해주는 통로이다.

1. 고전적인 선택 방식(빠름)

• document.getElementById('아이디'): 해당 id를 가진 단 하나의 요소를 반환합니다.
• document.getElementsByClassName('클래스'): 해당 class를 가진 모든 요소를 리스트(HTMLCollection) 형태로 반환합니다.
• document.getElementsByTagName('태그명'): 해당 태그(div,p)를 가진 모든 요소를 반환합니다.

2. 현대적인 선택 방식

CSS 선택자 문법을 그대로 사용할 수 있어 매우 편리합니다.

• document.querySelector('CSS선택자'): 조건에 맞는 요소 중 가장 첫 번째 것 하나만 가져옵니다.
• document.querySelectorAll('CSS선택자'): 조건에 맞는 모든 요소를 리스트(NodeList) 형태로 가져옵니다. 💡정리
• 하나만 고를 때: getElementById 또는 querySelector를 사용하세요.
• 여러 개를 고를 때: querySelectorAll이 가장 범용성이 높고 편리합니다. (forEach 반복문을 바로 쓸 수 있기 때문입니다.)
• CSS 선택자 활용: querySelector('.my-class'), querySelector('#my-id'), querySelector('div > p') 처럼 CSS에서 쓰던 방식 그대로 사용하면 됩니다.

window.scroll()

브라우저의 스크롤을 특정 위치로 이동시킬 수 있는 메소드. 사용 방법은 다음과 같다.

1. 문법

• 좌표 방식: window.scroll(x좌표, y좌표)
• 옵션 방식: window.scroll({ top: y좌표, left: x좌표, behavior: 'smooth' })

2. 주요 속성

• top:이동하고 싶은 세로 위치(단위:px)
• left: 이동하고 싶은 가로 위치(단위:px)
• behavior: 스크롤 동작 방식
  • auto: 즉시 이동(기본값)
  • smooth: 부드럽게 애니메이션 효과와 함께 이동

💡정리

1. scroll() vs scrollTo(): 둘은 완전히 같습니다. 보통 더 명확한 의미인 scrollTo()를 선호하기도 합니다.

2. scrollBy(): 현재 스크롤 위치를 기준으로 상대적으로 이동합니다. (예: scrollBy({top: 100})는 현재 위치에서 100px 더 아래로 내려감)

3. 마크다운 정리 팁: "특정 위치로 이동할 때는 scrollTo, 현재 위치에서 더 움직일 때는 scrollBy"라고 요약해보기

HTML요소.offsetTop

요소의 윗면 경계가 최상위 요소의 윗면 경계와(쉽게 말해 브라우저 화면 맨 위) 얼마만큼 떨어져 있는지 그 거리를 반환해주는 속성이다.

offsetTop

offsetTop 속성은 읽기 전용 속성으로, 현재 요소의 상단 면과 offsetParent(가장 가까운 상위 배치 요소) 상단 면 사이의 거리를 픽셀(px) 단위로 반환합니다.

1. 특징

• 상대적 거리: 문서 전체(body) 기준이 아니라, 가장 가까운 포지셔닝된(Position이 static이 아닌) 부모를 기준으로 합니다.
• 단위: 숫자 값만 반환합니다. (예: 150 -> 150px을 의미)
• 읽기 전용: element.dffsetTop = 100) 처럼 값을 직접 수정할 수 없습니다.

2. 활용 사례

• 스크롤 시 특정 섹션의 위치를 파악하여 메뉴 활성화
• "Top"버튼이나 "특정 위치로 이동" 버튼 구현
• 무한 스크롤 구현 시 마지막 요소의 위치 파악

💡정리

1. 기준점 확인: 만약 offsetTop값이 예상보다 작게 나온다면, 부모 요소에 position: relative;가 걸려 있는지 확인하기
2. 문서 전체 기준: 만약 부모가 아닌 전체 문서 상단에서의 위치를 알고 싶다면, 요소의 offsetTop과 부모들의 offsetTop을 계속 더해나가거나 getBoundingClientRect().top _ window.pageYOffset공식을 주로 사용합니다.

offsetParent

offsetParent속성은 해당 요소의 위치를 계산할 떄 기준이 되는 가장 가까운 배치된(positioned) 조상 요소를 반환합니다.

1. 기준이 되는 조건 (우선순위)

다음에 해당하는 가장 가까운 조상 요소를 찾습니다.

1. position 속성이 static이 아닌 요소(relative,absolute,fixed,sticky)
2. <td>,<th>,<table>태그
3. 위 조건에 아무도 해당하지 않으면 <body>

2. 예외 사항

• 요소의 display가 none인 경우: null 반환
• 요소의 position이 fixed인 경우: 브라우저에 따라 다르지만 보통 null반환(화면 전체가 기준이 되기 때문) 💡정리

1. 계산의 기초: offsetTop: 100px이라는 결과를 봤을 때, "그 100px이 어디서부터의 100px인가?"를 결정하는 것이 바로 offsetParent입니다.
2. 레이아웃 팁: 자식 요소를 특정 박스안에서 절대 위치(absolute)로 배치하고 싶을 때 부모에게 position: relative;를 주는 이유가 바로 이 offsetParent를 해당 부모로 고정하기 위함입니다.

textContent와 innerText의 공통점

textContent와 innerText는 요소와 그 자식 요소의 텍스트 콘텐츠를 반환하거나 대입할 수 있다.

textContent와 innerText의 차이점

'텍스트 콘텐츠를 읽거나 변경한다...결국 둘은 같은 것 아니야?'라고 생각하기 쉽지만, 실은 서로 조금씩 다르다.

textContent

• 엔터를 이용한 줄바꿈 포함
• 스페이스를 이용한 연속적인 공백 포함
• 모든 텍스트 노드를 반환
• 모든 노드 개체에 대해 정의

innerText

• 엔터를 이용한 줄바꿈 미포함
• 스페이스를 이용한 연속적인 공백 미포함
• 사용자가 볼 수 있는 텍스트 노드만을 반환
• HTMLElement 개체에 대해서만 정의

setInterval

일정한 시간 간격에 따라 함수를 반복 실행할 수 있도록 해주는 타이머 메소드

clearInterval

setInterval 메소드가 호출되어 반복 실행할 함수 타이머를 등록하면, 타이머는 0이 아닌 숫자를 반환한다. 숫자는 타이머의 ID를 의미하며, 이를 clearInterval 메소드에 전달하면 해당 타이머의 반복 실행이 취소된다.

CSS란

CSS는 Cascading Style Sheets를 의미한다.

• Cascading:계단식
• Style:멋을 내다
• Sheets:(종이)한 장 -> 계단식으로 스타일을 정의하는 문서 CSS는 HTML 문서에 스타일을 더해준다. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.

CSS가 일하려면

CSS문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다. HTML: 웹 문서의 콘텐츠를 구성하는 언어 CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등) -> HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며, 웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML문서 작성이 선행되어야 합니다.

내용 정리

• CSS는 웹문서를 꾸며주기 위해 사용하는 언어이다.
• CSS코드는 CSS파일에 작성한다. 확장자는 *.css이다.
• CSS코드는 HTML 문서에 스타일을 추가(정의)하는 언어이다. 따라서 HTML 문서가 존재하지 않을 때는 단순 텍스트에 불과하다.

CSS 기본 문법

• 선택자:어떤 요소에 스타일을 적용 할지에 대한 정보
• {중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
• 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
• 속성값: 어떻게 정의하고 싶은지에 대한 정보

CSS 기본 문법 사용 예

• 속성값: p 태그에 스타일을 적용하겠다.
• {중괄호}: 이 안에 p 태그에 대한 스타일을 정의하겠다.
• 속성명: color를 정의하겠다. 이건 글자색을 의미한다.
• 속성값: red로 정의하겠다. 빨간색 글자를 원한다.

주석

주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.

HTML에 CSS를 더하려면

HTML문서에 CSS 문서(코드)를 적용하고자 할 떄는 다음과 같은 방식들을 사용할 수 있다.

• 인라인 스타일: 태그에 직접 기술하기
• 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기
• 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기

인라인 스타일

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식. 따라서 선택자는 필요 없다. 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

스타일 태그

HTML 문서에 <style></style>태그를 추가하여 그 안에 CSS코드를 작성할 수 있다.

문서 간의 연결

확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS코드를 작성하고, HTML문서에 이를 연결해줄 수 있다. 이때는 <link>태그를 사용한다.

• href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
• rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성 -> <link> 채그는 HTML 문서의 <head></head> 내부에서 사용해야 합니다.

내용 정리

• CSS 코드는 선택자, 중괄호 영역, 속성명, 속성값 등으로 구성된다.
• CSS 코드에도 주석을 사용할 수 있다./주석/
• CSS 코드를 HTML 문서에 적용하기 위해서는 인라인 스타일, 스타일 태그, 외부 문서 연결 등의 방식을 사용해야 한다.

선택자

선택자: 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

선택자의 종류

• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소

기본 선택자 1. 전체 선택자

모든 요소를 선택한다. *(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.

기본 선택자 2. 태그 선택자

주어진 이름을 가진 요소를 선택한다. '유형 선택자'라고도 한다. 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

기본 선택자 3. 클래스 선택자

주어진 class 속성값을 가진 요소를 선택한다. 주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.

기본 선택자 4. 아이디 선택자

주어진 id 속성값을 가진 요소를 선택한다. id는 고유한(unique) 식별자 역할을 하는 전역 속성이다.

그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다. 쉼표(,)를 이용해 선택자를 그룹화한다.

선택자가 겹치는 경우

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다. 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다. 선택자 우선순위: 아이디 선택자 > 클래스 선택자 > 태그 선택자

텍스트 관련 속성

• font-family: 글꼴을 정의한다.
• font-size: 글자 크기를 정의한다.
• text-align: 정렬 방식을 정의한다.
• color: 글자 색상을 정의한다.

font-family

요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다.

font-size

수치와 단위를 지정해 글자의 크기를 정의할 수 있다.

• px: 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
• rem: <html>태그의 font-size에 대응하는 상대적인 크기
• em: 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기

text-align

블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정한다.

• left/right: 왼쪽 또는 오른쪽 정렬한다
• center: 가운데 정렬한다
• justify: 양끝 정렬한다(마지막 줄 제외)

color

텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.

• 키워드: 미리 정의된 색상별 키워드를 사용한다(ex. red, blue)

• + 여섯자리 16진수 값 형태로 지정한다

• Red, Green, Blue 의 수준을 각각 정의해 지정한다

내용 정리

• font-family는 글꼴을 지정하는 속성이며, 여러 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다.
• font-size는 글자 크기는 지정하는 속성이며, px,rem,em등의 단위를 사용할 수 있다.
• text-align은 블록 내에서 텍스트의 정렬 방식을 정의한다.
• color는 다양한 방법으로 텍스트의 색상을 정의한다.

블록 레벨 요소 vs 인라인 요소

블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (ex.div,p,h1 등) 인라인 요소: 자기에게 필요한 만큼의 공간만 차지한다.(ex.span,a 등)

display 속성

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

display 속성 값

• inline: 인라인으로 처리한다.
• block: 블록 레벨로 처리한다.
• inline-block: 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다.
• none:디스플레이(표시)하지 않는다.

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.

border 속성의 하위 속성

• border-color:color정의 방식과 동일
• border-width: thin,medium,thick 등의 키워드 또는 px,em,rem 등의 단위
• none(기본값),solid(직선),dotted(점선),dashed(긴 점선)등

박스모델(Box-Model)

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색,배경,테두리 모양 등)을 결정할 수 있다. 하나의 박스는 다음 네 개의 영역으로 구성된다.

• 콘텐츠 영역
• 안쪽 여백
• 경계선(테두리)
• 바깥쪽 여백

박스 각 영역의 크기는 어떻게?

• 콘텐츠 영역: width,height
• 안쪽 여백:padding
• 바깥쪽 여백:margin
• 테두리:border-width

box-sizing

box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.

• content-box: 기본값. 너비와 높이가 콘텐츠 영역만을 포함한다.
• border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함한다.

background

배경(background)은 콘텐츠의 배경을 정의한다.

• background-color
• background-image
• background-position
• background-size
• background-repeat

float

float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

• none
• left
• right

clear

clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

• none
• left
• right
• both

position

position은 문서 상에 요소를 배치하는 방법을 정의한다.

• static
• relative
• absolute
• fixed
• sticky

flexbox

flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

• 행(row)
• 열(column)

flex-direction

• row
• row-reverse
• column
• column-reverse

flexbox 다루기

• justify-content
• align-items
• align-self
• flex-wrap

의사클래스

• hover
• active
• focus
• disabled
• nth-child()

의사요소

• after
• before
• first-line
• marker
• placeholder

상속

상속(Inheritance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.

공용 키워드

• inherit
• initial
• unset

z-index

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.

• 기본값: auto
• 값이 클수록 위에 표시됨

Flexbox

Flexbox(Flexible Box)는 요소들을 가로 또는 세로 방향으로 자유롭게 정렬하고 공간을 배분하기 위해 사용하는 1차원 레이아웃 모델입니다.

1. 주요 용어

• Flex Container:display: flex;가 적용된 부모 요소
• Flex Item: 컨테이너 안에 포함된 자식 요소들
• Main Axis(주축): 아이템이 배치되는 기본 방향
• Cross Axis(교차축): 주축과 수직을 이루는 방향

2. 컨테이너에 쓰는 속성 (부모)

• display: flex;:Flex 컨테이너로 정의 (필수)
• flex-direction: 주축의 방향 설정(row,colums,row-reverse,column-reverse)
• justify-content: 주축 (가로) 정렬(flex-start,center,space-between,space-around)
• align-items: 교차축(세로) 정렬(flex-start,center,stretch)
• flex-wrap: 줄 바꿈 여부(nowrap,wrap)

3. 아이템에 쓰는 속성 (자식)

• flex: 아이템의 증가, 감소, 기본 크기를 한 번에 설정(flex: 1;)
• align-self: 특정 아이템 하나만 개별적으로 세로 정렬

HTML이란

HTML은 HyperText Markup Language를 의미한다.

• HyperText:하이퍼링크를 통해 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
• Markup:(콘텐츠를) 표시하다
• Language:언어

->하이퍼 텍스트와 콘텐츠를 표시해주는 언어, 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다.

웹페이지의 콘텐츠를 정의한다

• HTML은 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어이다. 개발자는 HTML코드로 웹페이지에 어떤 내용이 표시될지를 정의한 HTML 문서를 만든다. 완성된 HTML코드를 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링이라 한다.

HTML 문서 만들기

HTML 문서는 파일의 확장자가 html 또는 htm 이다.

->파일을 수정하고 싶다면, 텍스트 편집기로 열기 ->결과(웹페이지)를 확인하고 싶다면, 웹브라우저로 열기

-대표적인 텍스트 편집기:기본 메모장, Brackets, VSCode 등 -대표적인 웹브라우저:크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등

내용 정리

-HTML은 웹페이지 콘텐츠를 정의하는 언어(문서 작성 양식)이다. -HTML 코드는 HTML 파일에 작성한다. 확장자는 _.html 또는 _.htm이다. -텍스트 에디어에서 작성한 HTML코드는 웹브라우저를 통해 표시할 수 있다.

개발자 도구

웹브라우저에는 개발자 도구가 탑재되어 있다.

개발자 도구란?

• 웹사이트 개발용 도구로 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다. HTML CSS코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.

개발자 도구 열기(크롬 기준)

• 크롬은 브라우저가 열려 있는 상태에서 F12 버튼을 누르거나 우측 상단 메뉴 설정 -> 도구 더 보기 -> 개발자 도구 를 선택해 열 수 있다.

개발자 도구의 활용

• 네이버 사이트를 연 상태에서 개발자 도구를 열면, 네이버 홈페이지의 HTML 코드를 확인할 수 있다.

코드 에디터

코드 에디터란?

• 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어. 코드는 결국 텍스트이다. 그러나 이 텍스트를 더 빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.

• 텍스트 자동 완성 + 하이라이팅 기능이 추가된 메모장

내용 정리

-대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다. -개발자 도구는 개발자의 웹 개발 속도 및 편의를 증가시킨다. -개발자는 코드를 더 빠르고 편하게 편집하기 위해 코드 에디터를 사용한다.

HTML은 언어이다

• 한국어, 영어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용해야 하듯, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다. HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다.

• 태그란?

• HTML 코드에서 정보(콘텐츠)를 정의하는 형식

HTML 태그 사용법: 시작과 끝

• 태그는 <>과 </>기호를 사용해 콘텐츠의 시작과 끝을 표시한다. 각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타낸다.

• 태그 사용 형태) <태그명>여기에 콘텐츠를 기입합니다</태그명>

HTML 태그 사용법: 단일 태그

• 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다. 이를 단일 태그라 하며, 단일 태그의 형식은 다음 예와 같다.

• 단일 태그 사용 형태) <태그명/> 또는 <태그명>

->단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.

HTML 태그 사용법: 속성

• 속성은 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.

• 속성이 추가된 태그의 예) <태그명 속성명="속성값">내용이 들어감</태그명> <태그명 속성명="속성값"/>

->태그명과 속성 정의는 공백(space)으로 구분하며, 큰따옴표를 사용한다.

HTML 태그 사용법: 주석

• 주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드이다. 주로 코드에 대한 메모를 남기기 위한 용도를 사용된다.

• HTML 주석의 예) <!--이 사이에 작성한 내용은 주석으로 처리된다.-->

HTML 문서의 구조

• 일반적으로 HTML문서는 다음과 같은 기본 구조를 가진다.

• 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다. HTML5 문서임을 브라우저에게 알린다.

~

• HTML 문서의 시작과 끝을 나타내는 태그이다. 이 태그 내부에 전체 HTML 코드가 작성된다.

~

웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보가 들어간다.

<meta charset="utf-8">

• 문자 인코딩을 설정한다.

<title>문서제목</title>

• 브라우저 탭 제목을 설정한다.

~

실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.

• 텍스트
• 이미지
• 버튼
• 입력창
• 메뉴

등이 들어간다.

문단(paragraph)

p 태그는 문단 요소를 나타내는 태그이다.

• 하나의 p 태그는 하나의 문단을 표현한다.

제목(headline)

h 태그는 제목 요소를 나타내는 태그이다.

• h1 가장 큼
• h6 가장 작음

수평선

hr 태그는 수평선을 표시하는 태그이다.

줄바꿈 태그와 공백문자

HTML에서는 br 태그가 줄바꿈을 담당한다.

• 공백을 두 번 이상 표시할 때   사용

텍스트 강조 태그

굵게

<strong>

이탤릭

<em>

형광펜

<mark>

이미지 img 태그

이미지를 표시할 때 사용하는 태그

기본 형태

<img src="이미지" alt="설명">

이미지 크기 조절

<img src="이미지" alt="설명" width="300" height="200">

컨테이너 태그

div

블록 레벨 컨테이너

span

인라인 컨테이너

링크

a 태그 사용

<a href="주소">텍스트</a>

새 탭 열기

<a href="주소" target="_blank">

목록

목록은 연관 있는 항목(item)들을 나열한 것을 의미한다. HTML 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분된다.

순서 없는 목록

<ul>
<li></li>
</ul>

순서 있는 목록

<ol>
<li></li>
</ol>

• 목록은 연관 있는 항목들을 나열한 것이다.
• 목록 요소는 '순서 없는 목록'과 '순서 있는 목록'으로 구분할 수 있다.
• 목록 안에 들어가는 항목 요소를 표시할 때는 li태그를 사용한다.
• ol,ul,li 태그는 모두 레벨 요소를 표시하는 태그이다.

input

input의 핵심, type 속성

type의 값에 따라 입력 요소의 형태나 입력 데이터 유형 등이 달라진다. 사용 가능한 type은 20여 가지이며, 기본값은 text이다.

사용자 입력 태그

<input type="text">

select

<select>
<option>선택1</option>
</select>

textarea

<textarea></textarea>

form

<form action="" method="">

속성

• action : 서버 주소
• method : GET / POST

meta 태그

HTML 문서 정보 제공 태그

<meta charset="utf-8">

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 화면 대응 설정