2023.12.05 TIL - JS handbook(함수, 객체), Toyproject, React(맛보기)

Innes·2023년 12월 5일

TIL(Today I Learned)

목록 보기

12/147

📖 오늘의 공부 📖

JS handbook

Part 04. 함수

Part 05. 객체 기본문법

Part 06. 객체 심화문법

개인 토이프로젝트(진행중) - 모바일 청첩장

React 맛보기

1주차 강의 3회독차

Part 04. 함수

1. 함수 표현식 vs 함수 선언문

문법
- 함수 선언문 : 주요 코드 흐름 중간에 독자적인 구문 형태로 존재
```
function sum(a, b) {
return a + b;
}
```
- 함수 표현식 : 주요 코드 흐름 중간에 독자적인 구문 형태로 존재
```
let sum = function(a, b) {
return a + b;
};
```
언제 함수를 생성하는지
- 함수 선언문
  - 함수 선언문이 정의되기 전에도 호출할 수 있음
  - 스크립트 어디에 있느냐에 상관없이 어디에서든 사용 가능
- 함수 표현식
  - 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성
스코프
- 함수 선언문
  - 엄격모드 시, 해당 함수는 블록 내 어디서든 접근 가능
  - 블록 밖에서는 함수에 접근 불가
- 함수 표현식
  - 함수 밖에서 접근 가능

2. 화살표 함수(arrow function)

화살표 함수 사용 O

let func = (arg1, arg2, ...argN) => expression

화살표 함수 사용 X

let func = function(arg1, arg2, ...argN) {
  return expression;
};

함수 본문이 한 줄인 간단한 함수는 화살표 함수를 사용해서 만드는 게 편리

Part 05. 객체 기본문법

1. 객체

1) 객체란?

몇 가지 특수한 기능을 가진 연관 배열(associative array)
중괄호 {…}를 이용해 만들 수 있음
중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있음
프로퍼티 키는 ‘프로퍼티 이름’ 이라고도 부름

2) 리터럴과 프로퍼티

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

'콜론(:)'을 기준으로 왼쪽엔 키가, 오른쪽엔 값
프로퍼티 키 = 프로퍼티 ‘이름’ = '식별자’
객체 user에 프로퍼티 두 개
- "name"(이름)과 "John"(값)
- "age"(이름)과 30(값)
객체 프로퍼티엔 ‘for’, ‘let’, ‘return’ 같은 예약어를 사용 가능
(변수 이름(키)에는 사용 불가)

3) for...in 반복문

객체의 모든 키 순회 가능
(for 반복문과는 다름)
문법

for (key in object) {
  // 각 프로퍼티 키(key)를 이용하여 본문(body)을 실행합니다.
}

4) 객체 정렬 방식

객체는 '특별한 방식으로 정렬'됨
정수 프로퍼티(integer property)는 자동으로 정렬
그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬

2. 메서드와 this

메서드 : 객체 프로퍼티에 저장된 함수
object.doSomthing() : 객체를 '행동’할 수 있게 해줌
메서드는 this로 객체 참조
this 값은 런타임에 결정됨
함수 선언 시 this 사용 가능
(함수가 호출되기 전까지 this엔 값이 할당되지 않음)
함수를 복사해 객체 간 전달 가능
함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조함

3. new 연산자와 생성자 함수

1) 생성자 함수(constructor function)

유사한 객체를 여러 개 만들 때 유용
규칙
- 함수 이름의 첫 글자는 대문자로 시작
- 반드시 new 연산자를 붙여 실행
생성자 함수(짧게 줄여서 생성자)는 일반 함수
일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 씀
생성자 함수는 반드시 new 연산자와 함께 호출해야 함
new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됨

Part 06. 객체 심화문법

1. 구조 분해 할당

객체나 배열을 변수로 연결할 수 있음
객체 분해하기

let {prop : varName = default, ...rest} = object

설명
- object의 프로퍼티 prop의 값은 변수 varName에 할당되는데, object에 prop이 없으면 default가 varName에 할당됨
- 연결할 변수가 없는 나머지 프로퍼티들은 객체 rest에 복사됨
배열 분해하기

let [item1 = default, item2, ...rest] = array

설명
- array의 첫 번째 요소는 item1에, 두 번째 요소는 변수 item2에 할당되고, 이어지는 나머지 요소들은 배열 rest 저장됩니다.
할당 연산자 좌측의 패턴과 우측의 구조가 같으면 중첩 배열이나 객체가 있는 복잡한 구조에서도 원하는 데이터를 뽑아낼 수 있음

Toyprojects 진행중

9) 달력 이미지

❓ 아직 해결하지 못한 부분

내가 만든 달력 이미지를 넣고 싶었으나, 내 컴퓨터 안에 있는 파일을 vsc에 작성하는 법을 몰라 인터넷에서 찾아서 넣었음

시도 : 절대 경로, 상대 경로 검색하여 시도해보았으나 번번이 실패하여 인터넷 상의 달력 이미지로 일단 대체

내 컴퓨터에 있는 이미지를 vsc에 넣어 배포해도 다른 컴퓨터에서도 보일까?

10) 마무리 인사

다시 등장한 텍스트 세로 정렬...
- 해결 시도
  - 한 글자씩 세로로 정렬되도록 하는 방법을 구글링 해보았으나, 마땅한 방법을 잘 못찾았음
  - 그나마 table태그로도 그렇게 만들 수 있다는 아이디어를 얻었다. ~~(그치만 이건 너무 뻘짓인걸...ㅠㅠ)~~
- 결국 table태그로 한글자씩 세로 정렬 완료
세로 정렬 중 '스페이스바' 처럼 보이는 공백
- 해당 글자의 td태그에 style=""적용하여 padding top, bottom 값을 적용
'예쁘게~' 문구와 'WEDDING~' 문구에 div영역을 다르게 주려다가, 같은 영역에서도 해결 가능할 것 같아 같은 영역으로 넣었는데 완벽하게 구현했다!!
- '예쁘게~' 문구 : table태그
- 'WEDDING~' 문구 : p태그
- 각 태그는 전체 div class 에 속한 태그로 하여 각각 class 적용할 수 있었음

11) 라이브 웨딩 안내

두줄 연달아 있는 줄의 줄바꿈 시 <br> 말고 다른 방법은 없을까?
😮 이전에 line-height: 0%; 작성했던게 생각나서 적용해봤는데 줄간격 조절 성공했다!!!

버튼 넣어서 사이즈, 각 둥글기 조절은 이제 기본이구만!

12) 오시는 길
❓ 같은 div 박스 안의 문장 3줄 중 1줄과 2줄의 class가 다르면 어떻게 하는게 가장 효율적일까...?
❓ table 1열 3줄은 왼쪽정렬, 2열 3줄은 오른쪽 정렬하려면 어떻게 해야 할까...? 이건 정말 모르겠다ㅠㅠ
<원본>

<작성자> : 버튼만 오른쪽으로 이동하는 방법을 모르겠음

줄글은 왼쪽 정렬, 버튼은 오른쪽 정렬
- table로 만들려면 버튼 있는 칸은 3줄 셀을 병합해야함

📖 세로 셀 병합하기 (rowspan)

병합을 시작하는 td태그 안에 rowspan=' '

' ' 안에는 병합할 셀의 개수 기입

아래의 tr 내 병합된 td자리에는 작성 생략

React 맛보기

📖 참고

React 공식 문서

https://react.dev/learn (웹에서 체험해보는 React)

1. React란?

JS기반 라이브러리
JSX란? : JavaScript eXtension
- HTML태그 (table, div 등)들을 자바스크립트 코드 안에 사용하는 것
- React 스크립트 안에서 일반적인 HTML의 형태의 문법을 사용할 수 있도록 자바스크립트를 확장한 문법
- React 엘리먼트를 생성할 수 있고, 자바스크립트의 모든 기능이 포함됨

😮 그냥 보기에는 지금까지 배웠던 html, css, js랑 생긴게 비슷해 보이기만 한데... 본캠프 들어가서 자세히 배우면 점점 이해가 되겠지?