📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

12-4 리액트와 부트스트랩으로 프런트엔드 웹 만들기

JSX란?

💡 JSX 페이스북이 만든 간단한 프로그래밍 언어. 자바스크립트의 확장 기능 형태로 동작. 자바스크립트 파일은 .jsx 확장자를, 타입스크립트는 .tsx를 사용.

JSX 코드가 있는 파일은 반드시 첫 줄에 React라는 심벌을 import문으로 불러오는 코드가 있어야 한다.

import React from 'react'

컴포넌트란?

💡 컴포넌트 JSX 코드는 아무 곳에서나 사용할 수 없고, 리액트가 컴포넌트라고 부르는 함수의 반환값으로만 사용 가능.

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

리액트를 이용해서 실습 프로젝트를 구성하고, API 서버에서 데이터를 가져와 사용했다. 부트스트랩이 무엇인지 이해하고 사용하는 방법을 학습했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

12-3 익스프레스로 API 서버 만들기

REST 방식 서버

💡 REST 웹 서버 소프트웨어 구조의 한 형식. REST 서버는 HTTP 프로토콜의 GET, POST, PUT, DELETE와 같은 메서드를 사용해 웹 클라이언트와 통신하는 서버이다.

💡 API 서버 '웹 API 서버'를 간단히 부르는 용어. API 서버는 일반적인 웹 서버와 달리 서버에서 HTML을 생성해서 웹 브라우저 쪽에 제공하지 않고, JSON 포맷의 데이터만을 제공하는 서버이다. 모바일 앱이 보편화되면서 API 방식의 서버가 대중화되었다.

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

실습에 앞서 REST와 API의 개념을 학습하고 이해했다. Express 프레임워크를 사용해 웹 서버를 구축한 뒤 MongoDB 서버에 접속하는 코드를 작성했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

12-2 몽고DB에 데이터 저장하기

몽고DB란?

💡 몽고DB SQL을 사용하지 않고 다른 방식의 질의어를 사용하는 무료 오픈소스 NoSQL 데이터베이스 시스템

몽고DB 설치

> scoop install mongodb
> mongod --install
> net start mongodb

컬렉션이란?

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

몽고DB를 설치한 후 포트에 접속하고, 데이터베이스를 연결하는 방법을 학습했다. 관계형 DB와 몽고DB에서 사용하는 용어의 차이를 알아보았다. 실습을 통해 문서를 컬렉션에 저장하고, 몽고 셸에 접속해 문서를 직접 다루어보았다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

12-1 빅데이터 배치 프로그램 만들기

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

지금까지 배운 전반적인 타입스크립트 프로그래밍을 토대로 빅데이터 배치 프로그램을 실습했다. 줄곧 사용해온 Node.js에 덧붙여 디렉터리의 생성과 삭제를 위한 mkdirp, rimraf 패키지, 가짜 데이터 생성을 위한 chance 패키지를 설치해서 사용했다. 파일을 처리하는 비동기 함수들을 프로미스로 구현했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

11-3 Maybe 모나드 이해와 구현

👉🏻 데이터의 유무에 따라 코드가 적절하게 동작

class Maybe<T> {
  static Just<U>(value: U) {return new Just<U>(value)}
  static Nothing = new Nothing
}

11-4 Validation 모나드 이해와 구현

👉🏻 데이터가 유효한지 판단

class Validation {
  static Success = Success
  static Failure = Failure
  static of<T>(fn: T): Success<T> {return Success.of<T>(fn)}
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

저번 시간에 이어 Maybe, Validation, IO 모나드를 학습하고 각 클래스를 구현해 보았다. Maybe 모나드는 데이터의 유무를, Validation 모나드는 데이터의 유효성을 판단한다는 차이를 이해했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

11-1 모나드 이해하기

판타지랜드 규격

💡 모나드 클래스의 조건

1. Functor : map 인스턴스 메서드를 가짐
2. Apply : Functor이면서, ap 인스턴스 메서드를 가짐
3. Applicative : Apply이면서, of 클래스 메서드를 가짐
4. Chain : Apply이면서, chain 메서드를 가짐

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

모나드의 특징을 알아보고, 모나드 클래스의 조건에 대해 학습한 뒤 정리해 보았다. Identity 모나드를 이해하고 예제를 따라 구현했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

10-4 타입 가드

export class Bird {fly() {console.log(`I'm flying.`)}}
export class Fish {swim() {console.log(`I'm swimming.`)}}

import {Bird, Fish} from './BirdAndFish'

export const flyOrSwim = (o: Bird | Fish): void => {
  if (o instanceof Bird) {
    o.fly()
  } else if (o instanceof Fish) {
    o.swim()
  }
}

import {Bird, Fish} from './BirdAndFish'
import {flyOrSwim} from './flyOrSwim'

[new Bird, new Fish]
  .forEach(flyOrSwim) // I'm flying. I'm swimming.

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

instanceof 연산자를 통해 타입 가드 기능을 사용하는 방법을 학습했다. 예제를 통해 this 타입으로 인한 F-바운드 다형성과 nullable 타입에 대해 알아보았다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

10-1 제네릭 타입 이해하기

// 제네릭 인터페이스 구문
interface IValuable<T> {
  value: T
}

// 제네릭 함수 구문
function identity<T>(arg: T): T {return arg}

// 제네릭 타입 별칭 구문
type IValuable<T> = {
  value: T
}

// 제네릭 클래스 구문
class Valuable<T> {
  constructor(public value: T) {}
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

제네릭 타입의 기능을 이해하고 인터페이스, 함수, 타입 별칭 그리고 클래스에 어떤 식으로 사용하는지 학습했다. 예제를 통해 제네릭 타입 제약, 대수 데이터 타입에 대해 알아보았다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

09-7 렌즈를 활용한 객체의 속성 다루기

렌즈란?

💡 렌즈의 기능

1. R.lens 함수로 객체의 특정 속성에 대한 렌즈를 만든다.
2. 렌즈를 R.view 함수에 적용해 속성값을 얻는다.
3. 렌즈를 R.set 함수에 적용해 속성값이 바뀐 새로운 객체를 얻는다.
4. 렌즈와 속성값을 바꾸는 함수를 R.over 함수에 적용해 값이 바뀐 새로운 객체를 얻는다.

09-9 배열 다루기

R.prepend와 R.append 함수

import * as R from 'ramda'

const array: number[] = [3, 4]
const newArray = R.prepend(1)(array)
console.log(array, newArray) // [3, 4] [1, 3, 4]

import * as R from 'ramda'

const array: number[] = [3, 4]
const newArray = R.append(1)(array)
console.log(array, newArray) // [3, 4] [3, 4, 1]

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

지난 스터디에 이어서 ramda 함수를 이용한 문자열 다루기, chance 패키지로 객체 만들기, 렌즈를 활용한 객체의 속성 다루기, 객체와 배열 다루기, 조합 논리 등에 대해 학습하며 이해했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

09-1 람다 라이브러리 소개

ramda 패키지 구성

Ramda Documentation

09-3 배열에 담긴 수 다루기

사칙 연산 함수

import * as R from "ramda";

const incNumbers = R.pipe(
  R.map(R.add(1)),
  R.tap((a) => console.log("after add(1):", a))
);
const newNumbers = incNumbers(R.range(1, 9 + 1));

09-4 서술자와 조건 연산

수의 크기를 판단하는 서술자

R.lt(a)(b): boolean // a < b이면 true
R.lte(a)(b): boolean // a <= b이면 true
R.gt(a)(b): boolean // a > b이면 true
R.gte(a)(b): boolean // a >= b이면 true

import * as R from "ramda";

R.pipe(
  R.filter(R.lte(3)),
  R.tap(n => console.log(n)) // [3, 4, 5, 6, 7, 8, 9, 10]
)(R.range(1, 10 + 1);

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

ramda 패키지를 설치하고 import로 불러온 뒤, 라이브러리 내의 함수 예제들을 따라 실습해 보았다. ramda 함수를 이용한 배열 다루기, 서술자와 조건 연산, 문자열 다루기 등을 학습했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

08-4 함수 조합

compose 함수

export const f = <T>(x: T): string => `f(${x})`
export const g = <T>(x: T): string => `g(${x})`
export const h = <T>(x: T): string => `h(${x})`

export const compose = <T, R>(...functions: readonly Function[]): Function => (x: T): (T) => R => {
  const deepCopiedFunctions = [...functions]
  return deepCopiedFunctions.reverse().reduce((value, func) => func(value), x)
}

import {f, g, h} from './f-g-h'
import {compose} from './compose'

const composedFGH = compose(h, g, f)
console.log(
  composedFGH('x') // h(g(f(x)))
)

pipe 함수

export const pipe = <T>(...functions: readonly Function[]): Function => (x: T): T => {
  return functions.reduce((value, func) => func(value), x)
}

import {f, g, h} from './f-g-h'
import {pipe} from './pipe'

const piped = pipe(f, g, h)
console.log(
  piped('x') // h(g(f(x)))
)

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

함수 조합의 의미를 이해하고, compose 혹은 pipe 함수를 이용하여 함수 조합을 구현하는 방법을 학습했다. h(g(f(x))) 수식을 compose 함수는 compose(h, g, f)의 형태로, pipe 함수는 pipe(f, g, h)로 작성해야 한다는 것을 암기했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

07-1 비동기 콜백 함수

실습 프로젝트 설정

> npm init --y
> npm i -D typescript ts-node @types/node
> mkdir src

🔽 tsconfig.json

{
  "compilerOptions": {
    "downlevelIteration": true
  }
}

07-2 Promise 이해하기

resolve와 reject 함수

출처: 자바스크립트 중급 강좌 #16 프로미스(Promise) - 코딩앙마

Promise.all 메서드

const getAllResolvedResult = <T>(promises: Promise<T>[]) => Promise.all(promises)

getAllResolvedResult<any>([Promise.resolve(true), Promise.resolve('hello')])
  .then(result => console.log(result)) // [true, 'hello']

getAllResolvedResult<any>([Promise.reject(new Error('error')), Promise.resolve(1)])
  .then(result => console.log(result)) // 호출되지 않는다
  .catch(error => console.log('error:', error.message)) // error: error

07-3 async와 await 구문

async 함수와 Promise.all

import {readFilePromise} from './readFilePromise'

const readFilesAll = async (filenames: string[]) => {
  return await Promise.all(
    filenames.map(filename => readFilePromise(filename))
  )
}

readFilesAll(['./package.json', './tsconfig.json'])
  .then(([packageJson, tsconfigJson]: string[]) => {
    console.log('<package.json>: ', packageJson)
    console.log('<tsconfig.json>: ', tsconfigJson)
  })
  .catch(err => console.log('error:', err.message))

/* 실행 결과
<package.json>: {
  ...생략(package.json 파일 내용)...
}

<tsconfig.json>: {
  ...생략(tsconfig.json 파일 내용)...
}*/

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

동기와 비동기 방식의 차이점, resolve와 reject 함수를 매개변수로 받는 Promise의 콜백 함수 그리고 then-체인에 대해 학습했다. Promise.all 메서드와 Promise.race 메서드가 어떻게 동작하는지 이해했다. Promise를 then-체인 대신 async와 await 구문을 사용해 구현해 보았다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

06-1 반복기 이해하기

실습 프로젝트 설정

> npm init --y
> npm i -D typescript ts-node @types/node
> mkdir src

🔽 tsconfig.json

{
  "compilerOptions": {
    "downlevelIteration": true
  }
}

반복기와 반복기 제공자

💡 반복기의 특징

1. next라는 이름의 메서드 제공
2. next 메서드는 value와 done 속성을 가진 객체 반환

06-2 생성기 이해하기

yield 키워드

: 값을 대상으로 동작

💡 yield의 기능

1. 반복기 자동 생성
2. 반복기 제공자 역할 수행

yield* 키워드

: 다른 생성기나 배열을 대상으로 동작

function* gen12() {
  yield 1
  yield 2
}

export function* gen12345() {
  yield* gen12()
  yield* [3, 4]
  yield 5
}

import {gen12345} from './yield-star'

for (let value of gen12345())
  console.log(value) // 1 2 3 4 5

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

반복기와 생성기의 역할과 이러한 것들이 왜 필요한지에 대해 이해했다. 반복기의 next 메서드가 value와 done 두 개의 속성을 가진 객체를 반환한다는 것, 생성기의 yield와 yield* 두 키워드의 차이를 학습했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

05-4 순수 함수와 배열

깊은 복사와 얕은 복사

🔽 깊은 복사

let original = 1
let copied = original

copied += 2

console.log(original, copied) // 1 3

🔽 얕은 복사

const originalArray = [5, 3, 9, 7]
const shallowCopiedArray = originalArray

shallowCopiedArray[0] = 0

console.log(originalArray, shallowCopiedArray) // [0, 3, 9, 7] [0, 3, 9, 7]

전개 연산자와 깊은 복사

const oArray = [1, 2, 3, 4]
const deepCopiedArray = [...oArray]

deepCopiedArray[0] = 0

console.log(oArray, deepCopiedArray) // [1, 2, 3, 4] [0, 2, 3, 4]

05-5 튜플 이해하기

튜플에 타입 별칭 사용하기

export type ResultType = [boolean, string]

import {ResultType} from './ResultType'

export const doSomething = (): ResultType => {
  try {
    throw new Error('Some error occurs...')
  } catch(e) {
    return [false, e.message]
  }
}

튜플에 적용하는 비구조화 할당

import {doSomething} from './doSomething'

const [result, errorMessage] = doSomething()
console.log(result, errorMessage) // false Some error occurs...

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

자바스크립트에서 배열이 객체라는 것을 이해했다. 배열의 아이템 타입을 한꺼번에 표현할 때, 제네릭 방식 타입을 사용한다는 것을 알아보았다. 선언형 프로그래밍과 명령형 프로그래밍, 깊은 복사와 얕은 복사의 차이에 대해 학습했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

04-4 일등 함수 살펴보기

콜백 함수

export const init = (callback: () => void): void => {
  console.log('default initialization finished.')
  callback()
  console.log('all initialization finished.')
}

import {init} from './init'

init(() => console.log('custom initialization finished.'))

// 실행 결과
// default initialization finished.
// custom initialization finished.
// all initialization finished.

고차 함수와 클로저, 그리고 부분 함수

export type NumbrToNumberFunc = (number) => number

export const add = (a: number): NumberToNumberFunc => {
  const _add: NumberToNumberFunc = (b: number): number => {
    return a + b // 클로저
  }
  return _add
}

import {NumberToNumberFunc, add} from './add'

let fn: NumberToNumberFunc = add(1)
let result = fn(2)

console.log(result) // 3
console.log(add(1)(2)) // 3

04-5 함수 구현 기법

객체 생성 시 값 부분을 생략할 수 있는 타입스크립트 구문

export type Person = {name: string, age: number}
export const makePerson = (name: string, age: number = 10): Person => {
  const person = {name, age}
  return person
}

console.log(makePerson('Iris')) // { name: 'Iris', age: 10 }
console.log(makePerson('Iris', 24)) // { name: 'Iris', age: 24 }

객체를 반환하는 화살표 함수 만들기

export type Person = {name: string, age: number}
export const makePerson = (name: string, age: number = 10): Person => ({name, age})

console.log(makePerson('Iris')) // { name: 'Iris', age: 10 }
console.log(makePerson('Iris', 24)) // { name: 'Iris', age: 24 }

색인 키와 값으로 객체 만들기

export type KeyValueType = {
  [key: string]: string
}

export const makeObject = (key: string, value: string): KeyValueType => ({[key]: value})

console.log(makeObject('name', 'Iris')) // { name: 'Iris' }
console.log(makeObject('firstName', 'Iris')) // { firstName: 'Iris' }

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

콜백 함수, 고차 함수 등 타입스크립트의 여러 함수 관련 문법들을 학습했다. 처음 읽어나가는 부분인 만큼 아직 이해가 잘 되지 않는 부분들이 있어 표시해둔 뒤 내일 복습하며 다시 한번 읽어보기로 했다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

03-2 객체와 인터페이스

익명 인터페이스

let ai: {
  name: string
  age: number
  etc?: boolean
} = {name: 'Iris', age: 24}

function printMe(me: {name: string, age: number, etc?: boolean}) {
  console.log(
    me.etc ?
      `${me.name} ${me.age} ${me.etc}` :
      `${me.name} ${me.age}`
  )
}

printMe(ai) // Iris 24

03-3 객체와 클래스

생성자

class Person {
  constructor(public name: string, public age?: number) {}
}

let iris : Person = new Person('Iris', 24)

console.log(iris) // Person { name: 'Iris', age: 24 }

03-4 객체의 비구조화 할당문

잔여 연산자

let address: any = {
  country: 'Korea',
  city: 'Seoul',
  address1: 'Gangnam-gu',
  address2: 'Sinsa-dong'
}

const {country, city, ...detail} = address

console.log(detail)

// 실행 결과
{ address1: 'Gangnam-gu',
  address2: 'Sinsa-dong' }

전개 연산자

let part1 = {name: 'jane'}, part2 = {age: 22, city: 'Seoul'}
let merged = {...part1, ...part2}
console.log(merged)

// 실행 결과
{ name: 'jane', age: 22, city: 'Seoul' }

03-5 객체의 타입 변환

타입 단언

export default interface INameable {
  name: string
}

import INameable from './INameable'

let obj: object = {name: 'Iris'}

let name1 = (<INameable>obj).name
let name2 = (obj as INameable).name

console.log(name1, name2) // Iris Iris

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

타입스크립트의 타입 종류와 인터페이스, 클래스, 타입 단언 등 여러 구조에 대해 학습했다. 대부분 자바스크립트와 비슷한 문법이었지만 생성자와 타입 단언 같은 부분은 새롭게 이해한 문법이었다. 이 부분부터 단단히 다지고 가야 다음 장들을 순조롭게 학습할 수 있다고 생각하여, 예제를 따라 작성해 보며 반복해서 읽고 넘어갔다.

📖 전예홍, ⌈Do it! 타입스크립트 프로그래밍⌋, 이지스퍼블리싱, 2021

02장 타입스크립트 프로젝트 생성과 관리

02-1 타입스크립트 프로젝트 만들기

> npm init --y // package.json 파일 생성

프로젝트 생성자 관점에서 패키지 설치하기

> npm i -D typescript ts-node // typescript와 ts-node 패키지 설치
> npm i -D @types/node // @types/node 패키지 설치

tsconfig.json 파일 만들기

> tsc --init // tsconfig.json 파일 생성

🔽 tsconfig.json 수정

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es5",
    "moduleResolution": "node",
    "outDir": "dist",
    "baseUrl": ".",
    "sourceMap": true,
    "downlevelIteration": true,
    "noImplicitAny": false,
    "paths": { "*": ["node_modules/*"] }
  },
  "include": ["src/**/*"]
}

package.json 수정

{
  "name": "ch02-1",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "dev": "ts-node src",
    "build": "tsc && node dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^17.0.5",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  }
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

이번 스터디에서는 타입스크립트 개발을 위해 scoop과 nodejs를 설치하고 json, package 파일을 설치하는 방법을 실습해 보며 순서를 익히는 시간을 가졌다.

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

슬라이드 세부 옵션 설정하기

<script>
  const swiper = new Swiper(".wrap", {
    // 프레임의 요소명
    direction: "horizontal", // 스와이프 방향
    loop: true, // 순환 여부
    pagination: {
      el: ".swiper-pagination", // 페이지 메뉴 요소명
      type: "fraction", // 페이지 버튼 대신 슬라이더 번호 출력
    },
    navigation: {
      nextEl: ".swiper-button-next", // 다음 버튼 요소명
      prevEl: ".swiper-button-prev", // 이전 버튼 요소명
    },
    spaceBetween: 0, // 패널 사이의 간격을 0px로 설정
    slidesPerView: "auto", // CSS에 지정한 슬라이더의 크기를 반영
    grabCursor: true, // 스와이프 시 마우스 포인터 모양 변경
    centeredSlides: true, // 슬라이더 패널을 항상 가운데로 정렬
    speed: 1000, // 슬라이더 이동 속도 지정
    effect: "coverflow", // 이펙트 효과 지정
    coverflowEffect: {
      rotate: 50, // 회전 각도 지정
      stretch: -100, // 슬라이드 간의 당김 정도 지정
      depth: 400, // 원근감 지정
      modifier: 1, // 중첩 정도 지정
      slideShadows: false, // 슬라이드의 그림자 생성
    },
  });
</script>

활성화 패널에 모션 효과 추가하기

@keyframes ani {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  1% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

.wrap .swiper-wrapper .swiper-slide-active .inner::before {
  animation: ani 1s ease 1;
}

.wrap .swiper-wrapper .swiper-slide-active .inner::after {
  animation: ani 1s ease 0.3s 1;
}

자동 재생, 정지 기능 추가하기

<script>
  const swiper = new Swiper(".wrap", {
    autoplay: {
      delay: 1000,
      disableOnInteraction: true,
    },
  });

  // .btnStart 요소를 찾아서 btnStart에 저장
  const btnStart = document.querySelector(".btnStart");
  // .btnStop 요소를 찾아서 btnStop에 저장
  const btnStop = document.querySelector(".btnStop");

  // btnStart 버튼 클릭 시 자동 스와이프 시작
  btnStart.addEventListener("click", () => {
    swiper.autoplay.start();
  });

  // btnStop 버튼 클릭 시 자동 스와이프 정지
  btnStop.addEventListener("click", () => {
    swiper.autoplay.stop();
  });
</script>

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

Swiper 플러그인을 사용하여 스와이퍼 프레임과 각 슬라이드 요소를 쉽게 설정할 수 있었다. 플러그인을 활용해 JavaScript를 보다 간편하게 작성할 수 있다는 것을 알았고, 키프레임을 사용해서 현재 활성화된 패널에 모션 효과를 추가했다.

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

오른쪽 메인 영역에 갤러리 이미지 추가하기

✨ Emmet 사용

<main>
  section>article*20>div>img[src="/assets/images/p$.jpg"]+h2>lorem3^p>lorem7
</main>

🔽 결과

<main>
  <section>
    <article>
      <div>
        <img src="/assets/images/p1.jpg" alt="" />
        <h2>Lorem, ipsum dolor.</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      </div>
    </article>
    ...
    <article>
      <div>
        <img src="/assets/images/p20.jpg" alt="" />
        <h2>Ut, corrupti incidunt!</h2>
        <p>Dignissimos beatae quidem saepe, nisi ipsum dolores!</p>
      </div>
    </article>
  </section>
</main>

float 배치한 레이아웃 재정렬하기

미디어 쿼리를 이용하여 반응형 웹 제작하기

@media screen and (max-width: 1599px) {
  header {
    width: 350px;
  }
  main {
    margin-left: 350px;
  }
  main section article {
    width: 25%;
  }
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

Isotope 플러그인을 사용해서 번거롭고 복잡한 동적 기능을 쉽게 추가하여 반응형 웹 페이지를 제작했다. 브라우저 폭에 따라 article의 배치가 재정렬되게 했고, 짝수 또는 홀수 번째의 article만 분류해서 보여주는 기능을 담은 버튼을 추가했다.

📖 최성일, ⌈Do it! 인터랙티브 웹 페이지 만들기⌋, 이지스퍼블리싱, 2021

article 패널을 자바스크립트로 회전시키기

const frame = document.querySelector("section");
const lists = frame.querySelectorAll("article");
const deg = 45; // 각각의 article 요소가 회전할 각도
const len = lists.length - 1; // 순번이 0부터 시작하므로 전체 개수에서 1을 뺌
let i = 0;

// article의 개수만큼 반복
for (let el of lists) {
  // 각 article 요소를 45도씩 회전하고 아래로 배치
  el.style.transform = `rotate(${deg * i}deg) translateY(-100vh)`;

  let pic = el.querySelector(".pic");
  el.style.transform = `rotate(${deg * i}deg) translateY(-100vh)`;
  pic.style.backgroundImage = `url(/assets/images/member${
    i + 1
  }.jpg)`; /* 배경 이미지 추가 */
  i++;
}

컨트롤 패널 버튼으로 음악을 재생하기

// article의 개수만큼 반복
for (let el of lists) {
  // 각 article 요소 안쪽의 재생, 정지, 처음부터 재생 버튼을 변수에 저장
  let play = el.querySelector(".play");

  // play 버튼 클릭 시
  play.addEventListener("click", (e) => {
    let isActive = e.currentTarget.closest("article").classList.contains("on");
    if (isActive) {
      // play 버튼부터 .pic 요소까지 탐색한 뒤 클래스 on 추가하여 활성화
      e.currentTarget
        .closest("article")
        .querySelector(".pic")
        .classList.add("on");
      // play 버튼부터 audio 요소까지 탐색한 뒤 음악 재생
      e.currentTarget.closest("article").querySelector("audio").play();
    }
  });
}

이전 버튼 클릭 시 패널 회전시키기

const prev = document.querySelector(".btnPrev");
const audio = frame.querySelectorAll("audio");
let num = 0;
let active = 0;

// prev 버튼을 클릭할 때마다
prev.addEventListener("click", () => {
  // 음악 초기화 함수 호출
  initMusic();

  // num값을 1씩 증가시켜서 아래 transform 연산식에 적용
  num++;
  frame.style.transform = `rotate(${deg * num}deg)`;

  // 현재 패널의 순번이 0이면 다시 마지막 패널의 순번으로 변경하고
  // 그렇지 않으면 현재 패널 순번에서 1씩 감소시켜서 activation 함수 호출
  active == 0 ? (active = len) : active--;
  activation(active, lists);
});

function activation(index, lists) {
  for (let el of lists) {
    el.classList.remove("on");
  }
  lists[index].classList.add("on");
}

// 모든 오디오 요소를 반복하면서 정지시키고 .pic 요소의 모션을 중지해서 초기화하는 함수
function initMusic() {
  for (let el of audio) {
    el.pause();
    el.load();
    el.parentElement.previousElementSibling.classList.remove("on");
  }
}

이번 스터디에서 특별히 좋았던 점이나 어려웠던 점, 새로 알게 된 부분

JavaScript로 for 문을 이용하여 각 article 패널의 각도를 조절하고, 컨트롤 패널 버튼으로 삽입된 음악의 재생, 일시정지, 초기화 기능을 다루었다. 활성화된 패널 내에서만 버튼이 동작하고, 비활성화된 패널에서는 음악이 나오지 않도록 했다.