맨땅에 헤딩_디지털 마케터

[코딩온] 웹 풀스택 영등포 5기 과정_docker(2)

geograp — Thu, 4 Jan 2024 16:18:15 +0900

0. Docker Desktop

Docker 플랫폼의 데스크톱 버전

사용자가 GUI를 이용해 컨테이너를 쉽게 생성, 실행, 관리할 수 있음

기능

- 이미지 빌드하거나 Docker Hub에서 이미지 다운할 수 있음

- 컨테이너 시작, 중지, 재시작, 삭제 뿐만 아니라 상태 모니터링 및 로그 확인 가능

- 컨테이너 간의 네트워크를 연결할 수 있음

- 컨테이너의 보안을 강화할 수 있음

1. Docker Desktop 설치

공식 문서 방문

https://docs.docker.com/get-docker/

Get Docker

Download and install Docker on the platform of your choice, including Mac, Linux, or Windows.

docs.docker.com

참고로 저는 윈도우이고, installer는 별 다른 설정없이 그냥 next 몇번 넘겨서 설치해주었습니다.

예,,,몇분째 username이 승인나지 않는 모습입니다

결국 걍 다른 이메일로 만듬

[코딩온] 웹 풀스택 영등포 5기 과정_docker(1)

geograp — Tue, 2 Jan 2024 22:50:02 +0900

안녕하세요

도커 온라인 수업을 듣고 정리하기 위해 왔습니다.

요즘 완전 핫한 개념입니다.

0.Docker란?

컨테이너를 기반으로 하는 오픈 소스 가상화 플랫폼

1. Container란?

애플리케이션의 코드, 라이브러리, 환경 설정을 포함하는 어떤 상자(?)로,

애플리케이션을 안전하고 효율적으로 실행하게끔하고,

한 곳에서 다른 곳으로 쉽게 배포가 가능해서 이식성이 높은 것이 특징입니다.

애플리케이션을 실행하기 위한 가상의 환경으로, 커널쪽을 사용하여

가볍고 효율적으로 실행할 수 있어서 요즘 완전 핫한 기술입니다.

- Container 핵심 기술

1) 호스트 OS의 자원을 분리해서 각 애플리케이션을 독립성을 높여 안전하게 실행 가능

2) Container는 쉽게 이동하고 공유하고 재사용할 수 있다.

3) Container는 호스트 OS 커널을 공유해서 가볍다.

- 가상머신 vs 도커

저는 일전에 virtual mechine으로 CLI만 활용하여 Cent Os를 구축하는 과제를 하였습니다.

가상머신으로 그냥 뭣도 모르고 하긴 했었는데,,, 확실히 비효율적이라는 생각이 듭니다.

가상화 소프트웨어 OS 위에 별도의 가상 OS를 또 실행하는 형식이라서,

운영체제를 다시 설치해야합니다.

컨테이너는 운영체제의 커널을 공유해서 애플리케이션을 실행하는 가상 환경입니다.

그래서 덕분에 가볍고 효율적이며 빠른 실행 속도를 가집니다.(운영체제가 없으니까)

대신에 운영체제의 커널을 공유해서 가상머신과 같은 완전한 독립성을 제공할 수 없고,

커널의 업데이트나 문제가 생긴다면 컨테이너들의 영향을 받습니다.

그리고 강력한 보안기능을 제공하지 못합니다. (개인적으로 도커의 가장 큰 단점이라고,,,생각함미다..)

2. Docker의 Architecture

2-1. Docker Daemon

Docker API 요청을 수신하고 Docker 내부의 오브젝트들을 관리함

client측에서 Daemon에게 명령어를 전달하고 Demon이 명령어를 실행하는 구조

2-2. Docker Client

CLI명령어를 사용하여 도커와 상호작용하게 해주는 수단 (인터페이스를 지칭하는 듯...?)

2-3. Docker Registry

Docker Images를 저장하는 곳 (도커 이미지는 가상머신의 스냅샷같은 것을 말합니다)

: Docker Hub - 누구나 도커를 저장할 수 있는 퍼블릭 레지스트리 (프라이빗도 있음)

2-4. Docker objects

도커에서 생성하고 사용하는 기타 개체

[코딩온] 웹 풀스택 영등포 5기 과정_next.js(2)

geograp — Mon, 1 Jan 2024 01:41:31 +0900

안녕하세요

프로젝트를 위해 next.js 인강을 들으면서 새로 익혔던

next.js에 대해 2부 시작하도록 하겠습니다.

3. Link 컴포넌트 사용

매우 단순하지만 어쨌든 next 13부터 바뀐 내용이니 다뤄보도록 하겠습니다.

import Link from 'next/link'

먼저 next의 link에서 Link 컴포넌트를 가져옵니다.

export default function Page() {
	return <Link href="/">Dashboard</Link>
   }

a태그 처럼 사용하면 됩니다.

이렇게 바로 사용하는 경우보다는, 버튼을 눌렀을 때 움직이는 경우가 더 많습니다.

그럴 경우에는 useRouter라는 훅을 사용해서 사용할 수 있습니다.

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
	const router = useRouter()
    
    return (
    <button onClick={() => router.push('/')}>
    	Main
    </button>
    )
}

next/navigation에서 useRouter를 호출해 온 다음에 간단하게 사용할 수 있습니다.

그다음 push라는 함수를 사용해서 가고 싶은 경로를 작성해 주면 됩니다.

여기서 가장 큰 유의점은 useRouter는 client 사이드에서만 사용이 가능합니다.

4. 데이터 캐싱과 페칭

데이터의 전체적인 캐싱을 다 공부하기에는 양이 너무 방대해서

fetch를 위주로 공부하였습니다.

fetch api는 next.js에서 확장해서 제공하며 사용을 권장하고 있습니다

이 fetch는 서버 컴포넌트와 클라이언트 컴포넌트에서 다 사용이 가능하며

next.js에서 만드는 api에서도 사용할 수 있습니다.

기본적으로 이 next.js에서 제공하는 fetch를 사용하게 되면

발생하는 모든 데이터들을 캐싱을 하고 있게 됩니다.

server side

저희가 현재 얘기하는 fetch에 대한 데이터 caching은 보라색 영역입니다.

Data Recalidating (데이터 재검증)

1. 시간 기반 재검증

특정 시간이 지날 때까지 캐싱을 유효화하다가 시간이 지나면 무효화함

fetch('https://...', { next: { revalidate: 3600 }})

next라는 키를 가진 객체를 만들고 revalidate를 추가해 주면

3600초 동안 유효한 데이터를 만들어줍니다.

만약 3600초가 지난다면 그 시간 이후에는 만료가 되어 새로운 데이터를 가져와서

데이터 재검증이 이루어집니다.

2. 온디맨드 재검증 - 태그 기반의 재검증

수요가 있을 때 검증하는 방법

// 캐시에 태그를 지정
fetch('https://...', { next: { tags: ['collection'] }})

// 태그된 캐시를 재검증
revalidateTag('collection')

데이터 재검증을 위해 태그를 사용해서 다시 소환해서 캐시를 재검증합니다.

그러면 데이터의 재검증이 이뤄지면서 최신화가 이루어지게 됩니다.

5. 메타 데이터

5-1. 정적 메타데이터

metadata를 객체로 정의하는 방법에서 이루어집니다.

import type { Metadata } from 'next'

export const metadata: Metadata = {
	title: '...',
    description: '...',
}

Metadata 객체를 정의해서 title과 description을 정의해 주고 외부로 export 해주면

이 정적 메타데이터를 사용할 수 있다.

5-2. 동적 메타데이터

개발자가 원하는 방식의 메타데이터 객체를 함수로 하는 것

import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata (
	{ params, searchParams }: Props,
    parent?: ResolvingMetadata
): Promise<Metadata> {

	const id = params.id
    const post = await fetch(`https:// .../${id}`).then((res) => res.json())
    const proviousImages = (await parent).openGraph?.images || []
    
    return {
    	title: post.titile,
        openGraph: {
        	images: ['/.....jpg', ...previousImages],
        },
    }
}

이 generateMetadata 함수를 호출하게 되면 return 안에 있는 객체로 전환되면서

이 객체를 통해 페이지를 정의할 수 있게 됩니다.

가령 어떤 페이스북 페이지를 공유하게 된다면 공유했을 때

페이지 별로 다른 공유페이지 사진, 설명이 나오는 경우에 활용할 수 있습니다.

next.js 정리 끝 ---------------------------------------------

[코딩온] 웹 풀스택 영등포 5기 과정_프로젝트 회고록

geograp — Sun, 31 Dec 2023 23:22:47 +0900

안녕하세요

3차 프로젝트를 끝내고 돌아왔습니다.

저희의 이번 프로젝트 포인트는 [ AI, Next.js ] 입니다.

제가 ai를 조금이라도 도입하길 원해서,,,쫄랐었구요 ㅎㅎ,,,,

그리고 next.js는 저희가 많은 인원에 페이지도 많지 않아서,

툴이 어렵더라도 도전해볼만 하지 않을까 싶어 겁없이 도전하였습니다.

Next.js는 SPA인 React와 다른 SSR이 있어서 이 부분을 살리기 위해 노력을 좀 하였습니다.

저희는 사용자에게 일기처럼 정보를 입력받아서 AI를 통해 결과를 내보이는 작업이

메인이기 때문에 사실 SSR과 완벽히 맞는 프로젝트는 아니었던 것 같습니다.

~~그래두,,, 해봤으니까 안맞구나 느낀 것이지 않을까,,,~~

제가 했던 작업페이지와 다사다난했던 트러블 슈팅까지 써보도록 하겠습니다.

0. 작업 페이지

1) my-shop 페이지

이 페이지는 사용자 별로 퍼스널한 물건을 추천하는 페이지입니다.

사용자별로 다르기때문에 profile 내의 간이 페이지처럼 있으며, Naver Shopping API를 사용하여 추천하고 있습니다.

1. profile 내 my-shop 상점 페이지

Naver 요청 날리는 코드

여러개의 Shopping API를 사용해보려고 검색을 많이 해봤는데, (쿠팡, 티몬 등)

저희 알고리즘을 고려하여 여러 페이지에서 검색해본 결과

검색 쿼리를 가장 유연하게 사용할 수 있는 쇼핑 페이지가 단연 네이버가 체감 1등이었습니다.

네이버 검색 쿼리를 사용자별로 다르게 하고 싶어서 나름 알고리즘(?)도 적용하였습니다.

이렇게 되면 회원가입 때 받았던 성별과 나이, 그리고 사용자의 최근 기분을 API로 받아와서

검색 쿼리를 사용자별로 다르게 생성합니다.

그리고 Naver Shopping API 검색 쿼리 옵션 중에

sort(정렬 기준) 쿼리와 start (검색 시작 위치)를 통해 같은 사용자의 상태값이더라도

시간이 다르다면 늘 새로운 옵션으로 업데이트한 효과를 볼 수 있었습니다.

2) account 페이지

회원 정보 수정 페이지입니다.

2. 회원정보 수정 페이지

회원가입 시 자동으로 부여되는 닉네임이랑 비밀번호는 변경하지 못하도록 하였습니다.

사용자의 아이디와 연령, 나이를 바꿀 수 있도록 하였습니다.

1. 트러블 슈팅

1) 새로고침 시 profile 페이지 내 메뉴바 유지 안됨

>>>> 메뉴바에서 useState로 초기값을 profile 페이지의 기본 페이지로 지정함

>>>> 새로고침할 시 사용자가 선택했던 profile 메뉴바의 선택값이 초기화 되어서 페이지와 일치하지 않음

>>>> 헤더처럼 상주하는 컴포넌트가 아니라, profile 페이지에서만 상주하는 특성 때문에 초기화되는 점이 불편했음

! How to fix

저희는 유저의 로그인 상태값을 Recoil과 Recoil persistAtom을 통해 관리를 하고 있었습니다.

Recoil에 사용자가 현재 프로필 페이지 내에서 몇 번째 메뉴바 아이콘을 선택했는지

저장하고 관리하도록 하였습니다.

그리고 프로필 페이지를 아예 벗어나서,

다른 페이지로 이동할 때 헤더에서 Recoil 상태를 초기화 하도록 하여

다시 프로필 페이지를 들어갔을 때 초기화된 프로필 페이지와 메뉴바를 만날 수 있도록 하였습니다.

문제의 영상

수정 후

2) Naver Shopping API Cors error

>>>> Naver Shopping API에서 request URL이 직접 호출되어 Cors error가 남

하,,,,,,404,,,,

! How to fix

Proxy라는 것을 난 생 처음 사용해보았는데요, Next.js의 14버전에서는

Cors error로 Proxy로 URL을 우회할 때 next.config.js에서 rewrite로 뚫었습니다!

next.config.js

source에 내가 우회해서 사용할 url을 작성하고 { :path* } 를 달면

destination을 통해 api 요청을 날리게 됩니다.

이렇게 사용하면 하위 path를 잘 달고 API 요청을 대신 날리게 됩니다.

3) 아이폰 safari에서 svg 깨짐 현상

아이폰에서 safari로 열게 되면 SVG가 픽셀이 깨지는 현상이 일어났습니다.....

찾아보니 오래전부터 있었던 iphone svg blurry 라는 오래묵은 이슈인 듯합니다.

수정 전 - error 페이지

! How to fix

일단, 도움이 되었는지 모르나, svg 내의 width와 height를 %로 변경하였다. viewport도 변경함

그리고 next.js 공식 문서에 webp확장자를 권한다고 되어있어서, svg를 webp확장자로 변경함

수정 후

끝 -----------------

[코딩온] 웹 풀스택 영등포 5기 과정_next.js(1)

geograp — Sun, 17 Dec 2023 23:08:46 +0900

안녕하세요

3차 프로젝트에 들어가서 요즘 조금 바쁜,,,,나날들입니다.

저희 3차 프로젝트로 next.js와 scss를 사용하기로 하였습니다.

제가 프로젝트로 next.js를 도입하면서 배웠던 몇 가지 내용을 정리해보려합니다!

0. Next.js 왜 탄생하게 되었는가?

2013년 React가 페이스북의 손을 타서 세상에 나오게 되었습니다.

당시 React는 정말 센세이션했고, 지금 10년 이상 React는 여전히 프론트엔드의 강자라고 불리죠.

다들 잘 아시겠지만, 단방향 데이터 흐름과 Virtual DOM이 큰 특징입니다.

그리고, next.js를 공부하기 전까지는 잘 와닿지 않았는데 'Client Side Rendering'을 합니다.

Client Side Rendering

일반적으로 SPA에서는 CSR(Client Side Rendering)을 하고 MPA에서는 SSR(Server Side Rendering)을 합니다.

SPA에서는 정적인 리소스를 한꺼번에 다운로드하고, 클라이언트의

동적인 새로운 요청이 왔을 때 그 부분만 변환하여 필요한 컴포넌트만 갱신하는 방식이기 때문에

CSR을 합니다!!

Server Side Rendering

MPA의 구조에서 Server Side 측에서 렌더링을 해두는 방식입니다.

CSR은 유저가 웹페이지를 방문하면 빈 HTML 뼈대를 보내고, 동적으로 DOM 요소를 그제서야 만들기 시작하기 때문에

초기 로딩 속도가 느린 대신에, 구동만 하면 그 다음부터는 빠르다는장점이 있습니다.

하지만 SSR은 빈 HTML이 아니라 이미 꽉 차있는, 그러니까 CSS까지 다 담긴 알찬 HTML을 미리 구동해두기 때문에

SEO에 유리합니다. 이는 곧 마케팅이죠 ㅎ

[참고한 블로그↓ ]

https://dev-ellachoi.tistory.com/28

CSR만 하다보니 SEO를 하기가 너무 힘들어져서, SSR을 구동하기로 합니다.

저에겐 좀 신박한 개념이었어요, 뭔가 유저가 초기 로딩만 기다리면 웹 페이지 이용이 수월하니

당연히 CSR 시대가 왔구나 싶었는데, SEO 때문에 서버 측에서 Hydration을 하는 것이

필요한 니즈가 생기게 된 것이죠.

1. app router

제가 Next.js를 배우면서 제일 신기하고, 편했던 기능은 단연 app router가 아닐까 싶습니다.

옛날 옛적에 찍은 유투브를 보면서 pages router와 헷갈려서 시간을 좀 날려먹었는데,

pages router에서 Next.js 13버전으로 승급하며 app router로 갈아치기 되었습니다.

next.js를 create app하게 되면, app이라는 폴더가 생성이됩니다.

저희 프로젝트 팀의 app 폴더 내 구조인데요, 보시면 app 폴더 내에 profile 폴더 내에 page.tsx 가 있습니다.

(맞습니다! TypeScript를 겁없게도 사용 하고 있죠 ㅋ)

이 때 파일 구조에 따라 router 명이 달라집니다.

무슨 말이냐면, app/ profile/ myShop/ page.tsx의 구조를 갖춘다면,

localhost:3000/profile/myShop에 page.tsx가 뜨게 된다는말입니다.

어떤 똑똑한 사람이 이런 개념을 만들었을 까요?!?!?!? 진짜,,,,너무 대단한 것같습니다.....

사용하는 입장에서,,,,너무 깔끔하고 좋아요

page.tsx를 만들면 정상 작동 되었을 때 그 page라는 이름을 가진 파일을 뱉어내고,

error.tsx를 만들면 에러가 났을 때 error 페이지를 뱉어내고

loading.tsx를 만들면 로딩 중일 때 loading 페이지를 뱉어냅니다.

이 라우터의 개념이 있는 app폴더는 가급적 깔끔하게 router의 역할로 두는 편이 낫다고 생각해서

저희는 오로지 페이지를 불러오는 개념으로 router 본연의 색깔을 해치지 않도록 노력하고 있습니다.

2. 기본 RSC

Next.js에서는 기본적으로 RSC( React Server Component)를 기본 컴포넌트 렌더링 방식으로 채택하고 있습니다.

RSC는 JS의 번들 크기를 줄일 수 있고,

Server 측이니까 데이터베이스와 가까운 곳에서 조회하기 때문에 빠르다는 장점이 있습니다.

그러나 특정 컴포넌트가 useState나, useEffect처럼 유저와 소통하는 CSR를 사용하려면'use client'를 컴포넌트 파일 상단에 선언해주면 됩니다.

저도 현재 열심히 만들고 있는 menu bar의 경우 서버단의 데이터베이스 조회보다는,user와의 상호작용이 많기 때문에 use client를 선언해주고 useState를 열심히 사용하고 있습니다.

그래서 사실, CSR을 사용할 때에는 DOM에서 제일 리프에 있는 컴포넌트들을 CSR하는 것이 이상적이라고 합니다.

3. Link 컴포넌트 사용 / 4. 데이터 페칭 / 5. 메타 데이터

이 부분은 2부에서 다루도록 하겠습니다!!

[SeSSAC] 웹 풀스택 영등포 5기 과정_SpringBoot_dto,vo,axios, API

geograp — Thu, 7 Dec 2023 01:02:43 +0900

안녕하세요
업보처럼 차곡차곡 수업 내용 복습을 미루다가 더 늦기전에 후다닥 하는 중입니다ㅠ

스프링 부트 설치는 그다지 어렵지 않고, 그 이후에 정확히 원리를 알고 이용하는 것이 중요하기 때문에
설치 후에 내용을 다뤄보도록 하겠습니다!

0. Spring Boot 설치 후 이 파일들 뭔데?

1) src/main/java
저희가 추후 작성할 대부분의 자바 파일들이 들어갈 공간입니다.

컨트롤러, DTO, 데이터 베이스 처리를 위한 엔티티, 서비스 파일 등 다양한 파일이 들어갑니다.

2) src/main/resource

여기는 자바 파일을 제외한 환경 설정 및 HTML, CSS, 정적 파일 등이 들어갈 공간입니다.

이 resource파일 내에 다양한 하위 디렉토리들이 또 있는데요,

static : 정적인 파일들이 들어갑니다. js,image, html, css 등이 들어갑니다!
templates: HTML 파일의 형태로 자바의 객체와 연동되는 파일이라고 합니다. 저희 수업에서는 thymeleaf(타임리프)라는 서버 사이드 템플릿 엔진을 사용하고 있습니다.
application.properties: 해당 애플리케이션의 설정을 정의하는데 사용되는 프로퍼티 파일입니다. 예시로는, 서버 포트를 설정하고, 데이터베이스 연결을 설정하거나 이름 설정 등 다양한 설정을 정의할 수 있습니다.

3) build.gradle

이 파일은 그레이들이라는 아이가 사용하는 환경 파일입니다.

(gradle은 Groovy 언어를 기반으로 한 빌드 도구로, 프로젝트를 구성하고 빌드 스크립트를 작성합니다!

Maven과 Ant 보다 좋다고 하네요)

대부분의 출저: https://wikidocs.net/160947

2-01 스프링부트 프로젝트의 구조

현재 SBB 프로젝트는 HelloController.java와 HelloLombok.java 파일만 생성한 상태다. 그런데 이보다 규모를 갖춘 프로젝트를 만들고자 한다면 프로젝트…

wikidocs.net

2. DTO, VO

자바를 배운지 얼마 되지 않았지만, REST API를 배우니 자주 사용하는 단어가 등장합니다.

DTO와 VO라는 단어입니다.

1) DTO

로직을 갖고 있지 않은 순수한 데이터 객체를 나타냅니다.

데이터 "전달"의 용도로 사용하기 때문에 getter와 setter를 제외한 타 로직은 들어가지 않습니다.

저는 밑에서 배우는 VO는 객체에 있는 데이터 그 자체를 갖고 가는 느낌이고,

DTO는 객체 상자여서 그걸 나를 수 있는 형태? 같은 느낌이었습니다.

(아닐수도,,,)

UserDTO 예시

깔끔하고 간단하쥬?

2) VO

DTO와 달리 값 오브젝트를 지닌 데이터 값 그 자체입니다.

VO는 setter가 없고, getter만 있기 때문에, 값 변경이 불가능하고 데이터 불변성을 보장한다고 합니다.

그래서 Read-Only 속성을 가지고 있습니다.

따라서, 값 자체가 의미가 있는 게 VO 이고, 이 전달될 데이터들이 잘 보존되는 걸 보장하는 게 DTO라고 하네요

이 DTO와 VO가 따로 뭐 모듈이나, 어떤 새로운 무언가인 줄 알았는데,

그저 이런 속성을 가진 데이터를 정의하고, 저희가 이걸 사회적으로 각각 DTO, VO라고 부르기로 한거라네요!

3) api를 해보자

수업 시간에 api를 배우면서 간단한 구조를 만들고, get, post 등을 mapping하는 것을 배웠었습니다.

폴더 구조를 본다면 java파일 안에 controller와 배웠던 dto, vo 패키지가 있습니다.

resources 패키지 안에는 static패키지와 templates패키지가 있습니다.

이 controller 중, HelloController를 보도록 하겠습니다.

@Controller
public class HelloController {
    @GetMapping("hi")
    public String getHi(Model model) {
        Hello hello = new Hello(99);
        int age = 17;
        List<String> names = Arrays.asList("Kim", "Lee", "Hong", "Park");
        model.addAttribute("hello", "Spring World");
        model.addAttribute("uText", "<onstrong>Hello</strg>");
        model.addAttribute("value", "이름을 입력하세요!");
        model.addAttribute("WithValue", "hello");
        model.addAttribute("link", "hi");
        model.addAttribute("imgSrc", "cutecat.jpg");
        model.addAttribute("userRole", "admin");
        model.addAttribute("isAdmin", false);
        model.addAttribute("names", names);
        model.addAttribute("classHello", hello);
        return  "hi";
    }

    class Hello {
        private int age;
        public Hello(int age) {this.age = age;}
        public int getAge() {return age;}
    }
}

@Controller 어노테이션: 해당 클래스가 컨트롤러임을 알려줌
@GetMapping("hi"): /hi 경로로 들어오는 GET 요청에 대한 처리를 담당하는 메소드
Model model: Thymeleaf 템플릿에 데이터를 전달하기 위한 모델 객체
Hello 클래스: 데이터 객체

이 Controller를 통해 이런 Thymeleaf로 view를 보여줄 수 있게 됩니다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!-- 타임리프 표현식과 문법 -->
    <p th:text="'안녕하세요. ' + ${hello}"></p>
    <p th:utext="${uText}"></p>
    <input type="text" th:value="${value}">
    <p th:with="temp=${withValue}" th:text="${temp}"></p>
    <a th:href="@{/{id}(id=${link})}">Link 1 (hi)</a> <br />
    <a th:href="@{/hi}">Link 2 (hi)</a> <br />
    <a th:href="@{https://www.google.com}">Google</a> <br />
    <img th:src="${imgSrc}">

    <div th:switch="${userRole}">
        <p th:case="'admin'">Hello, Admin</p>
        <p th:case="'user'">Hello, User</p>
        <p th:case="*">Hello, Unknown</p>
    </div>

    <div>
        <p th:if="${isAdmin}">Welcome, Admin</p>
        <p th:unless="${isAdmin}">Welcome, Admin</p>
    </div>
    <ul>
        <li th:each="name:${names}" th:text="${name}"></li>
    </ul>
    <div th:text="${classHello.getAge()}"></div>
</body>
</html>

보시면, 순서에 따라 제가 Controller에서 addAttribute한 name값과 일치한다면,

Thymeleaf에서 잘 표현되는 것을 볼 수 있습니다.

4) GetMapping을 다양하게 사용하는 법

아는 분들은 아시다시피, Get을 사용하는 것은 단순히 url에 따른 html을 로드하는 것도 있지만

url의 뒤에 query를 사용하여 사용자값에 따라 다른 url을 보여주기도 합니다.

하여, 알아보도록 하겠습니다!

    // case 1.
    @GetMapping("/get/response1")
    public String getResponse1(@RequestParam(value="name") String  name, @RequestParam(value="age") String age, Model model) {
       
        model.addAttribute("name", name);
        return "response";
    }

case1.

@RequestParam을 이용하여 value에는 key값을, 그 다음에는 value값을 받습니다.

이 경우에는, required=true가 디폴트로 되어있어,

만약의 뒤에 값이 없다면 이 controller를 찾지 못해서 400 error가 뜨게 됩니다.

   // case 2.
    @GetMapping("/get/response2")
    public String getResponse2(@RequestParam(value="name", required = false) String  name, Model model) {
        model.addAttribute("name", name);
        return "response";
    }

case2.

이 경우는 case1과 같지만, 이번에는 required=false를 설정하여

뒤의 값이 없어도 400에러가 뜨지 않습니다.

    // case 3.
    @GetMapping("/get/response3/{name}/{age}")
    public String getResponse3(@PathVariable(value="name") String n, 
                               @PathVariable String age, Model model) {
        model.addAttribute("name", n);
        model.addAttribute("age", "13");
        return "response";
    }

case3.

이 경우는 url에 RequestParam대신에 @PathVariable을 사용하여

url에 있는 여러개의 변수를 받아올 수 있습니다.

name에는 asdf가, age에는 33을 입력하니, 잘 반영이 되는 것을 볼 수 있습니다.

    // case 4.
    @GetMapping({"/get/response4/{name}", "/get/response4/{name}/{age}"})
    public String getResponse4(@PathVariable(value="name") String n,
                               @PathVariable(required = false) String age, Model model) {
        model.addAttribute("name", n);
        model.addAttribute("age", age);
        return "response";
    }

case4.

여러개의 url패턴을 하나의 메소드에서 처리할 수 있는 경우입니다.

age값이 false라서, name값이 있는 url과 name값과 age값 전부 있는 url을 유연하게 처리할 수 있습니다.

age가 파라미터에 붙지 않아도 ok

age가 뒤에 붙어도 ok

5) Post도 알아보자

    // case 1.
	@PostMapping("/post/response1")
        public String postResponse1(@RequestParam(value="name") String name, Model model) {
            model.addAttribute("name", name);
            return "response";
    }

case 1.

Post 전송은 @PostMapping 어노테이션을 활용하며, 전달되는 값은 @RequestParam을 사용해서 전달합니다.

HTML 폼으로 POST 요청을 보낼 때는 @RequestParam을 사용하여 쿼리 파라미터를 읽어올 수 있습니다.

name이라는 key값이 담아서 name이라는 value로 전달하며, response라는 html을 반환하는 것입니다.

    // case 2.
    @PostMapping("/post/response2")
        public String postResponse2(@RequestParam(value="name", required = false) String name, Model model) {
            model.addAttribute("name", name);
            return "response";
    }

case 2.

이 케이스는 1과 동일한데, name값에 required = false가 추가 되었습니다.

name값에 해당하는 키가 없어도 실행은 된다~ 이 말입니다.

    // case 3.
    @PostMapping("/post/response3")
    @ResponseBody
    public String postResponse3(@RequestParam(value="name", required = false) String name, Model model) {
        model.addAttribute("name", name);
        return name;
    }

case 3.

저희가 앞선 모든 케이스에서는 return을 template 내 html파일로 진행했었는데요,

post로 리턴하는 문자열의 그대로 값을 전달할 수 있습니다.

@ResponseBody 어노테이션을 사용한다면 html파일을 불러오지 않고, 값을 send할 수 있습니다!

5) post의 값을 객체로 전달할 때

저희가 post의 값을 받아올 때 늘 하나하나 받아오면 좋겠지만,

그걸 객체로 처리해야할 때가 있잖아요?

그 경우입니다.

    @GetMapping("/dto/response1")
    @ResponseBody
    public String dtoResponse1(@ModelAttribute UserDTO userDTO) {
        String msg = "이름 : " + userDTO.getName() + ", 나이 : " + userDTO.getAge();
        return msg;
    }

@ModelAttribute로 이 들어오는 데이터가 UserDTO라는 객체인 것을 알려주고 매핑해줍니다!

그래서 이 userDTO의 getter로 데이터에 접근할 수 있습니다.

그리고 이 @ModelAttribute는 생략이 가능합니다.

    @PostMapping("/dto/response3")
    @ResponseBody
    public String dtoResponse3(@RequestBody UserDTO userDTO) {
        String msg = "이름 : " + userDTO.getName() + ", 나이 : " + userDTO.getAge();
        return msg;
    }

이 코드는 위에서 @ModelAttribute를 사용했느냐 @RequestBody를 사용했느냐의 차이인데요,

제가 값을 입력한 곳은 일반 폼 전송으로, www-x-form-urlencoded의 형태로 데이터를 전송하는데

이 형태로는 RequestBody를 받을 수 없습니다.

오로지 json형태와 xml 형태로 데이터가 들어와야만 RequestBody 어노테이션을 사용할 수 있습니다.

6) axios와 DTO, VO를 사용할 때

기나긴 여정이 될 것입니다..

DTO를 axios와 쓸 때 5가지 경우를 보겠습니다.

1. Get + DTO

function dtoResponse1() {
        var form = document.getElementById('form_dto1');
        axios.get(`/axios/response1?name=${form.name.value}&age=${form.age.value}`)
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse1 : ', res.data );
            });
    }
    
    function dtoResponse2() {
        var form = document.getElementById('form_dto1');
        axios.get(`/axios/response2?name=${form.name.value}&age=${form.age.value}`)
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse2 : ', res.data );
            });
    }

    @GetMapping("/axios/response1") // 정상
    @ResponseBody
    public String axiosAPI1(@RequestParam(value = "name") String name, @RequestParam(value = "age") String age){
        String msg = "이름 : " + name + "\n나이 :" + age;
        return msg;
    }
    
    @GetMapping("/axios/response2") // 정상
    @ResponseBody
    public String axiosAPI2(UserDTO userDTO){
            String msg = "이름 : " + userDTO.getName() + "\n나이 :" + userDTO.getAge();
        return msg;
    }

데이터가 URL에 노출되어 전송되기 때문에 일반적인 GET 요청에 사용 가능합니다.
@RequestParam은 각각의 파라미터를 직접 받아옵니다.

2. POST + DTO

   function dtoResponse3() {
        var form = document.getElementById('form_dto2');
        axios.post(`/axios/response3`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse3 : ', res.data );
            });
    }
    
    
    function dtoResponse4() {
        var form = document.getElementById('form_dto2');
        axios.post(`/axios/response4`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse4 : ', res.data );
            });
    }
    
    
    function dtoResponse5() {
        var form = document.getElementById('form_dto2');
        axios.post(`/axios/response5`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse5 : ', res.data );
            });
    }

   // case 1.
   @PostMapping("/axios/response3") // error
    @ResponseBody
    public String axiosAPI3(@RequestParam(value = "name", required = false) String name, @RequestParam(value = "age", required = false) String age){
        String msg = "이름 : " + name + "\n나이 :" + age;
        return msg;
    }
    
    // case 2.
    @PostMapping("/axios/response4") // null
    @ResponseBody
    public String axiosAPI4(UserDTO userDTO){
        String msg = "이름 : " + userDTO.getName() + "\n나이 :" + userDTO.getAge();
        return msg;
    }
    
    // case 3.
    @PostMapping("/axios/response5") // 정상
    @ResponseBody
    public String axiosAPI5(@RequestBody UserDTO userDTO){
        String msg = "이름 : " + userDTO.getName() + "\n나이 :" + userDTO.getAge();
        return msg;
    }

post는 get보다 약간 더 까다롭습니다.

case1: @RequestParam은 주로 URL의 쿼리 파라미터를 받아오는 데 사용되므로, POST 요청의 본문에 담긴 데이터는 읽을 수 없습니다.
case2: @ModelAttribute는 주로 HTML 폼 데이터를 받아오는 데 사용되지만, JSON 형식의 데이터를 처리하기 어렵습니다.
case3: @RequestBody는 POST 요청의 본문(body)에 담긴 데이터를 읽어와 객체로 변환합니다.
JSON 형식의 데이터를 처리할 때 주로 사용되며, 이 경우에는 axios.post 메소드로 JSON 데이터를 전송하고, 서버에서 @RequestBody로 받아 처리합니다
결론: POST + DTO에는 @RequestBody를 사용하여 데이트를 받아와야한다!!!!!!!!!!!!!

3. GET + VO

   function voResponse1() {
        var form = document.getElementById('form_vo1');
        axios.get(`/axios/vo/response1?name=${form.name.value}&age=${form.age.value}`)
            .then((res)=>{
                console.log( res );
                console.log( 'dtoResponse1 : ', res.data );
            });
    }
    
    
    function voResponse2() {
        var form = document.getElementById('form_vo1');
        axios.get(`/axios/vo/response2?name=${form.name.value}&age=${form.age.value}`)
            .then((res)=>{
                console.log( res );
                console.log( 'voResponse2 : ', res.data );
            });
    }

    // case 1.
    @GetMapping("/axios/vo/response1")
    @ResponseBody
    public String axiosVOAPI1(@RequestParam(value = "name") String name, @RequestParam(value = "age") String age){
        String msg = "이름 : " + name + "\n나이 :" + age;
        return msg;
    }
    
    // case 2.
    @GetMapping("/axios/vo/response2")
    @ResponseBody
    public String axiosVOAPI2(UserVo userVO){
        String msg = "이름 : " + userVO.getName() + "\n나이 :" + userVO.getAge();
        return msg;
    }

보이는 두가지의 경우 전부 잘 되고 가능합니다.
@RequestParam으로 받아올 수도 있고 @ModelAttribute에서 UserVo에 mapping하여 받아오기도 가능합니다.

4. POST + VO

   function voResponse3() {
        var form = document.getElementById('form_vo2');
        axios.post(`/axios/vo/response3`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'voResponse3 : ', res.data );
            });
    }
    
    
    function voResponse4() {
        var form = document.getElementById('form_vo2');
        axios.post(`/axios/vo/response4`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'voResponse4 : ', res.data );
            });
    }
    
    
    function voResponse5() {
        var form = document.getElementById('form_vo2');
        axios.post(`/axios/vo/response5`, {name: form.name.value, age: form.age.value})
            .then((res)=>{
                console.log( res );
                console.log( 'voResponse5 : ', res.data  );
            });
    }

    // case 1.
    @PostMapping("/axios/vo/response3")
    @ResponseBody
    public String axiosVOAPI3(
    			@RequestParam(value = "name", required = false) String name, 
                @RequestParam(value = "age", required = false) String age){
        String msg = "이름 : " + name + "\n나이 :" + age;
        return msg;
    }
    
    // case 2.
    @PostMapping("/axios/vo/response4")
    @ResponseBody
    public String axiosVOAPI4(UserVo userVO){
        String msg = "이름 : " + userVO.getName() + "\n나이 :" + userVO.getAge();
        return msg;
    }
    
    // case 3.
    @PostMapping("/axios/vo/response5")
    @ResponseBody
    public String axiosVOAPI5(@RequestBody UserVo userVO){
        String msg = "이름 : " + userVO.getName() + "\n나이 :" + userVO.getAge();
        return msg;
    }

case1: @RequestParam을 사용하여 POST 요청의 본문(body)에서 데이터를 읽어오는 방식입니다. 하지만 이 방식은 일반적으로 HTML 폼 데이터를 처리할 때 사용되므로, JSON 형식의 데이터를 처리하기 어렵습니다.
case2: UserVo 클래스를 사용하여 객체로 바로 매핑하는 방식입니다. 하지만 @ModelAttribute는 JSON 형식의 데이터를 처리하기 어렵습니다.
case3: @RequestBody를 사용하여 JSON 형식의 데이터를 읽어오는 방식입니다. Axios에서 POST 요청을 보낼 때 JSON 형식의 데이터를 본문에 담아 전송하고, 서버에서는 @RequestBody를 통해 해당 데이터를 UserVo 객체로 변환하여 사용합니다.
결론: POST+ VO에서는 (폼 데이터가 아니라면) RequestBody로 보낸다!!!!!!!!!!!!!

[SeSSAC] 웹 풀스택 영등포 5기 과정_Java(Class)

geograp — Sat, 25 Nov 2023 17:46:39 +0900

자바 강국이라고 불리는 한국에서 개발자로서 취업을 하고자 한다면,,

자바를 빼놓을 수 없죠!

드디어 자바를 배우게 되었습니다.

기초적인 문법을 배웠고, 아직 기초적인 문법을 진행 중이지만 수업 포인트 위주로 정리하겠습니다.

그럼 start!

0.클래스와 객체, 인스턴스

클래스:

클래스는 사용자가 정의하는 자료형이자, 객체를 만들기 위한 하나의 "틀"이라고 저는 기억에 저장이 되었습니다.

객체:

클래스로 부터 생성된 무언가(?)

인스턴스:

객체가 메모리 할당이 되어 저장된 것(new 사용)

1. 메소드의 접근 제어자(Access Modifier)

자바에서는 클래스를 저장하는 묶음을 패키지(package)라고 하는데요,

이 패키지와 클래스의 저장 구조를 통해 외부에서 클래스의 접근을 보호할 수 있습니다.

자바 접근 제어자 범위 표

2. Static

정적변수는 클래스가 선되는 순간에 Method Area라는 어떤 영역에 메모리 할당을 받습니다.

하여 정적변수가 불필요한 상황에서도 프로그램이 종료가 될 때까지 가비지 컬렉터로도 회수가 되지 않습니다.

(non-static 변수는 메모리 중 heap에 할당이 됩니다.)

그럼에도, static을 사용하는 이유는, 중복되는 변수 및 메소드의 선언을 줄일 수 있어

잘 사용한다면 가독성도 좋아지고, 전체적인 메모리 효율성도 증대되기 때문입니다.

public class Constants {
    public static final double PI = 3.14159;
    public static final int MAX_VALUE = 100;

    public static void main(String[] args) {
        System.out.println("The value of PI: " + Constants.PI);
        System.out.println("Maximum allowed value: " + Constants.MAX_VALUE);
    }
}

static이라는 변수 두개를 만들면, 이 정적변수는 객체가 아닌 클래스에 종속되기 때문에

[ 클래스명 + dot 연산자 + static 변수명 ] 으로 바로 접근이 가능하며,

해당 값이 바뀐다면 바뀐 값을 전체적으로 공유할 수 있습니다.

3. final

static은 전역적으로 공용하는 변수 느낌이라면, 이번엔 변수의 값 변경을 금지하는 필드가 있습니다.

final은 값 변경을 막고 오로지 읽기만 허용합니다.

그래서 static + final 을 같이 선언하게 된다면,

메모리 할당을 하여 공용적으로 쓸 수 있으나 값을 변경할 순 없습니다.

최초의 한 번 초기화된 값 이후로 값을 바꿀 수 없죠!

4. 메소드 오버라이딩와 메소드 오버로딩

이 개념은 저도,,,, 둘의 개념은 알겠는데, 이름이 너무 헷갈렸던 개념입니다.

*메소드 오버라이딩

: 상위 클래스에서 이미 정의된 메소드를 하위 클래스에서 동일한 시그니처로 다시 정의하는 것

class Animal {
    void makeSound() {
        System.out.println("동물 소리");
    }
}

class Dog extends Animal {
    // 메소드 오버라이딩
    @Override
    void makeSound() {
        System.out.println("왈왈!");
    }
}

class Cat extends Animal {
    // 메소드 오버라이딩
    @Override
    void makeSound() {
        System.out.println("야옹~");
    }
}

public class AnimalTest {
    public static void main(String[] args) {
        Animal dog = new Dog();
        Animal cat = new Cat();

        dog.makeSound(); // 왈왈! 출력
        cat.makeSound(); // 야옹~ 출력
    }
}

* 메소드 오버로딩

동일한 메소드 이름을 가진 여러 메소드를 정의하는 것

public class Calculator {
    public int add(int a, int b) {
        return a + b;
    }

    public double add(double a, double b) {
        return a + b;
    }

    public String concatenate(String str1, String str2) {
        return str1 + str2;
    }

    public static void main(String[] args) {
        Calculator calculator = new Calculator();
        
        int sumInt = calculator.add(3, 4);
        System.out.println("Sum of integers: " + sumInt);

        double sumDouble = calculator.add(2.5, 3.7);
        System.out.println("Sum of doubles: " + sumDouble);

        String result = calculator.concatenate("Hello, ", "World!");
        System.out.println("Concatenated String: " + result);
    }
}

[SeSSAC] 웹 풀스택 영등포 5기 과정_socket

geograp — Fri, 17 Nov 2023 14:22:49 +0900

이제 프로젝트가 끝남과 동시에 또 수업을 시작하였습니다.

숨 돌릴 틈이 진짜 없는 느낌 ㅠㅡㅠ,,,

이번 시간에는 소켓에 대해 배웠습니다.

0. 소켓(socket)이란?

웹소켓은 HTTP와 달리 양방향 실시간 데이터 소통을 하기 위해 생겨난 기술입니다.

TCP/IP의 위에서 동작하는 HTTP와 달리 조금 더 밑에서 동작한다고 합니다.

소켓은 떨어져 있는 두 호스트를 연결해 주는 도구로써 인터페이스 역할을 한다고 합니다.

소켓을 통해 데이터를 주고 받는 것은 양방향 데이터 통신 채널을 만드는 것 같습니다.

- 소켓 통신 흐름도

소켓 통신의 흐름

하기의 블로그에 꽤나 쉽고 자세하게 나와있어서 읽어보시는 것을 추천드립니다.

https://helloworld-88.tistory.com/215

[기본] 소켓(SOCKET)통신 이란?

소켓통신 소켓(SOCKET)이란?소켓(Socket)은 프로세스가 드넓은 네트워크 세계로 데이터를 내보내거나 혹은 그 세계로부터 데이터를 받기 위한 실제적인 창구 역할을 한다. 그러므로 프로세스가 데

helloworld-88.tistory.com

1. web socket

웹 소켓 (줄여서 ws라고 부르는 듯) 은 앞서 알아본 소켓과는 다른 개념입니다.

저는 그거나 그거나인 줄 알았는데 아니더라고요,,,

소켓은 앞서 알아보았듯이 어떠한 두 개의 호스트를 연결하고 데이터를 주고받는

네트워크 프로그래밍의 일반적인 용어입니다.

반면 웹 소켓은 HTML5에서 도입된 웹의 표준 기술입니다.

웹 브라우저와 웹 서버가 실시간 양방향 통신 (핸드셰이크)를 통신 위한 특별한 프로토콜이라고 합니다.

빠르게 작동하고, 통신할 때 아주 적은 데이터를 이용하는 것이 장점입니다.

- 웹 소캣 이벤트

웹 소켓의 이벤트가 4가지 있습니다.

1-1. OPEN

socket.addEventListener('open', function (event) {
  console.log('웹 소켓이 열렸습니다.');
});

클라이언트가 웹 소켓 서버에 성공적으로 연결되어 열렸을 때 발생하는 이벤트입니다.

1-2. MESSAGE

socket.addEventListener('message', function (event) {
  console.log('서버에서 메시지 수신:', event.data);
});

서버에서 클라이언트로 메시지를 보낼 때 발생하는 이벤트입니다,

1-3. ERROR

socket.addEventListener('error', function (event) {
  console.error('웹 소켓 오류 발생:', event);
});

웹 소켓 연결 중 오류가 있을 대 발생하는 이벤트입니다.

1-4. CLOSE

socket.addEventListener('close', function (event) {
  console.log('웹 소켓이 닫혔습니다.');
});

웹 소켓 연결이 종료되었을 때 발생하는 이벤트입니다.

반면에, 웹 소켓 서버에서도 웹 소켓과 연결해서 이벤트를 처리해야 하는데

서버는 아무런 준비 없이 웹 소켓을 실행할 수 없습니다.

그래서 WS라는 모듈을 설치해서 클라이언트와 웹 소켓으로 주고받을 수 있습니다.

npm install ws

그리고 이벤트를 등록하고 처리하는 함수인 on을 통해 클라이언트와 소켓을 연결할 수 있습니다.

const ws = require('ws');

const server = app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
})

const wsServer = new ws.Server({server}); // 웹 소켓 서버 접속

const sockets= []; // 빈 배열

//  on : 이벤트 등록 함수
wsServer.on('connection', (socket) => {
    sockets.push(socket); // 배열에 접속한 클라이언트 객체 추가

    // 클라이언트 메세지 수신
    socket.on('message', (message) => {
      console.log(`클라이언트로 부터 받은 메세지 :: ${message}`);

      // 웹 소켓 서버에 접속한 모든 클라이언트(브라우저 탭)에게 메세지 전송
      // = 브로드캐스팅(여러 컴퓨터한테 데이터 전송)
        sockets.forEach((socket) => {
          socket.send(`${message}`);        
        });
    });

    socket.on('close', () => {
      console.log('[클라이언트 연결 종료]')
    })
})

2. socket.io

socket.io는 자바스크립트의 라이브러리로 기본적으로 웹 소켓을 위해 구축되었습니다.

저희 같은 개발자가 웹 소켓을 좀 더 쉽고 간편하게 쓰도록 도와주는 라이브러리입니다.

여기에도 웹 소켓과 같은 기본 이벤트가 있습니다.

1-1. CONNECTION

io.on('connection', function (socket) {
  console.log('새로운 클라이언트가 연결되었습니다.');
});

클라이언트가 서버에 연결되었을 때 발생하는 이벤트입니다.

1-2. DISCONNECT

socket.on('disconnect', function () {
  console.log('클라이언트가 연결을 종료했습니다.');
});

클라이언트가 소켓에 대한 연결을 해제했을 때 발생하는 이벤트입니다.

1-3. ERROR

socket.on('error', function (error) {
  console.error('에러 발생:', error);
});

연결 중 오류가 발생했을 때 발생하는 이벤트입니다.

1-4. CUSTOM

// 서버에서 사용자 정의 이벤트 발생
socket.emit('customEvent', { message: '사용자 정의 이벤트 발생' });

// 클라이언트에서 사용자 정의 이벤트 수신
socket.on('customEvent', function (data) {
  console.log('사용자 정의 이벤트 수신:', data.message);
});

저희가 원하는 이벤트 이름으로 설정하고 사용할 수 있습니다.

여기서 헷갈렸던 건데, emit이 보내는 쪽이고 on이 받는 쪽입니다!!!

저희는 이러한 내용을 바탕으로 간단한 단체 채팅방을 구현했었는데요

먼저, 카카오톡처럼 단체 채팅에서 입장과 퇴장을 나타내는 소켓을 구현해 보겠습니다.

입장 후

client 측 코드

// 입장할 때 !!
    <div class="entry-box">
        <input
            type="text"
            id="nickname"
            placeholder="닉네임"
            autofocus
            onkeypress="if(window.event.keyCode==13){join()}"
            />
        <button type="button" onclick="join();">입장</button>
    </div><br />
    
    <script>
    // 채팅방 입장 시 setNick을 통해 닉네임을 서버측에 보냄 (닉네임 중복 검사를 위해)
        function join() {
                socket.emit('setNick', document.querySelector('#nickname').value); }
        
        socket.on('notice', (msg) => {
            document.querySelector('.chat-list').insertAdjacentHTML('beforeend', 
            `<div style="justify-items: center; text-align: center; text-color: gray; font-size: 10px;">${msg}</div>`)
        });
    </script>

첫 번째 입장 창을 거쳐 join 함수를 통해 서버 소켓으로 'setNick'이라는 커스텀이벤트로 전달하고 있습니다.

server 측 코드

 socket.on('setNick', (nick) => {
        console.log(`닉네임 설정 완료 :: ${nick}님 입장`);
        console.log('접속 유저 목록 :: ', nickArray);
        
        // 프론트에서 입력한 nick이 nickObs 객체에 존재하는지 검사
        // 이미 존재: error 이벤트 + '이미 존재하는 닉네임 입니다'
        // 새 닉네임: notice 이벤트 + '00님이 입장하셨습니다.'
        if (Object.values(nickArray).indexOf(nick) > -1 ) {
            socket.emit('error', `이미 존재하는 닉네임입니다.`);
        } else {
            // 새로운 닉네임
            nickArray[socket.id] = nick;
            socket.emit('entrySuccess', nick); // 해당 소켓 데이터 전송
            io.emit('notice', `${nick}님이 입장하셨습니다.`);
            io.emit('updateNicks', nickArray); // 전체 사용자 닉네임 모음 객체 전달
            updateList();
        }
    })

server에서는 setNick을 받고 있고 콜백함수로 nick을 받아서

이미 존재하는 닉네임인지 확인하고, 만약 새로운 닉네임이라면

입장해서 'notice'라는 커스텀 이벤트로 메시지와 함께 클라이언트로 보내고 있습니다.

client 측 코드

socket.on('notice', (msg) => {
    document.querySelector('.chat-list').insertAdjacentHTML('beforeend', 
    `<div 
    	style="justify-items: center; text-align: center; 
        text-color: gray; font-size: 10px;">
        	${msg}
     </div>`)
});

그럼 socket.on의 'notice'를 통해서 chat-list에 div를 삽입해서 '${nick}님이 입장하셨습니다.'라는

문구가 사용자에게 보이게 됩니다.

퇴장도 마찬가지로 client 측의 notice를 이용하여 msg만 바꿔서 이용합니다.

이번엔 custom 이벤트가 아니라 socket.io의 기본 이벤트인

disconnect 이벤트를 사용해서 퇴장을 공지합니다.

server 측 코드

    socket.on('disconnect', () => {
        console.log(`접속 끊김 :: ${socket.id}`);
        io.emit('notice', `${nickArray[socket.id]}님이 퇴장하셨습니다.`);
    })

이제 메시지 기능을 어떻게 구현할 수 있는지 알아보겠습니다.

저는 html에서 my msg라는 부분과 other msg라는 부분이 나눠져 있습니다.

my msg는 내가 보내서 채팅이 오른쪽에 있고, other msg는 남이 보낸 메시지로 채팅이 왼쪽에 위치합니다.

채팅방 구현

client 측 코드

        function send() {
            socket.emit('send', {
                nick: myNick, 
                msg: document.querySelector('.input-msg').value});
            document.querySelector('.input-msg').value = '';
        }

    
    socket.on('sendMsg', (data) => {
            if (data.nick === myNick){
                document.querySelector('.chat-list').insertAdjacentHTML('beforeend',
                    `<div class="my-chat">
                    <div class="my-chat-msg">${data.msg}</div>
                    <div class="my-pic">${data.nick}</div>
                </div>`);
            } else {
                document.querySelector('.chat-list').insertAdjacentHTML('beforeend',
                    `<div class="other-chat">
                        <div class="other-pic">${data.nick}</div>
                    <div class="other-chat-msg"> ${data.msg}</div>
                    </div>`);
            }
    })

chat-list라는 div가 있어서, 만약 내 닉네임과 일치한다면,

my-chat이라는 div를 추가해서 오른쪽에 div를 생성해서 붙이는 방식을 사용합니다.

반대로 만약 내 닉네임과 일치하지 않는다면

other-chat이라는 div를 추가해서 왼쪽에 생성하여 붙이는 방식을 사용합니다.

server 측 코드

    socket.on('send', (data) => {
        io.emit('sendMsg', data);
    })

저희는 단체메시지 방이고, 개인 DM 기능은 하지 않아서 socket의 send로 닉네임과 메시지를 받은 다음

io (전체에 소켓을 보냄)으로 emit을 통해 client 측에 보냅니다.

그럼 my 메시지인지 other 메세지인지 판별해서 메세지가 잘 뜨고

메세지 도중에 입장하거나 퇴장한 사람이 있다면 계속 div를 붙이는 방식이기 때문에

잘 나오게 됩니다.

이제 귓속말 기능도 넣고, css 도 디벨롭 해 볼 예정입니다 :)

감사합니다.

SeSSAC 웹 풀스텍 과정 회고록[SeSSAC] 웹 풀스택 영등포 5기 과정_2차 프로젝트 회고록

geograp — Tue, 14 Nov 2023 02:27:51 +0900

전 과정 중 2차 프로젝트가 끝이 났습니다!! 룰루 ˞♡ฅ(ᐤ꒳ᐤฅ) ‹3

이번 프로젝트에서 저는 [ 프론트 개발, 팀장 ]을 맡았습니다.

이번 프로젝트가 1차보다 조금 더 길어서 그런지 조금,,,,,,,더,,,,,,,,,,,기가 빨린 느낌,,,,,,,,,,,,,,,,,,

그래도 디벨롭하는 현재까지도 잘 진행이 되고 있어 마무리가 괜찮은 것 같습니다.

~~발표할 때 웹 배포가 제대로 안되가지고,,,,얼마나 좌절했는지,, 다들 양해해 주셔서 감사해요~~

나의 미친 깃 컨트리뷰터

예 제가 이번 플젝에서 난생 처음 프론트를 하면서 3만에 육박하는 코드를 작성하였어요.

저도 제 컨트리뷰터 보고 감작 놀랬어요 ㅎ..................

진짜 폭풍 코딩 하느라 바빠서 팀원들을 제대로 못챙긴것같아 미안합니다..................

역시 프론트는 빡세

서론은 그만하고

저희 웹사이트를 만들면서, 제가 도전했던 것에 대해 적어보도록 하겠습니다.

1. 웹사이트 간단 설명

저희는 [ Wait Mate ]라는 웨이팅 구인 구직 플랫폼을 만들었습니다.

그래서 돈을 지불하고 웨이팅을 부탁할 사람(별칭: 웨이트메이트)과,

돈을 받고 웨이팅을 해줄 사람(별칭: 프록시)을 구하는 플랫폼을 기획하고 만들었습니다.

2. 디자인적 요소

정말 정말 고민을 많이 했는데, 귀여운 캐릭터와 어울리는 웹페이지 테마를 만들고

둥글둥글한 요소를 많이 넣었어요. 색감 팔레트도 최종 발탁된 보라색과 함께 넣었습니다.

참고한 색상 및 테마

그리고 제일 고민하던 메인페이지는 크몽에 맡기고, 그 해당하는 메인페이지 느낌을 살려서

나머지 페이지 디자인을 하였습니다.

그리고, 디자인 및 기획 소통은 figma로 진행하였습니다!!!

난생처음 해보는 figma였는데, ppt와 포토샵의 중간 같아서 재밌었어요

figma 일부 발췌

3. 프론트에 사용한 기술 스택

- 리액트 (React)

저희가 수업시간에 배웠던 리액트를 활용하였습니다.

- 테일윈드 (tailwind)

파일을 따로 만들지 않고, 트렌디하며 저희처럼 간소한 페이지에 제격인 테일윈드를 사용하였습니다.

- Scss

테일윈드로 보완되지 않는 css를 위해 보조 개념으로 Scss를 사용하였습니다.

- JavaScript

저희가 수업시간에 이틀에 걸쳐 TypeScript를 배웠으나, 부족하며 단기간 완성해야 하는 프로젝트에는

빠른 코딩이 불가하다고 판단하에 협의하여 TypeScript를 도입하지 않기로 하였습니다.

4. 내가 도전한 것들

4-1. 반응형에 대한 고민

일단 첫 프론트 도전인 만큼, 반응형에 대해 고민이 많았습니다.

다들 반응형 뒤늦게 하려고 하면 너무 힘들다고 해서 처음부터 반응형을 많이 고려하고 싶었기 때문이죠.

일단 저희 웹 사이트는 헤더와 사이드바로 구성되어 있었습니다.

위-헤더 / 왼쪽 - 사이드바

이렇게 구성하다 보니 세로로 긴 모바일에서는

많은 부분이 가려지고, 옆 방향 스크롤이 생기고, 튕겨 나와서 보이지 않으며

무엇보다 사용감이 좋지 않아 고민을 한 결과,

웹 사이즈에서 보이는 사이드바와 모바일에서 보이는 사이드바 컴포넌트를 따로 작성하기로 하였습니다.

mobile전용 사이드바 적용한 모습

저희 웹사이트는 헤더와 사이드바, 풋터가 반복되고, 이를 제외한 나머지 영역의 컴포넌트만 바뀌면 되기 때문에

Templete이라는 파일이 있어, 그 안에 컴포넌트를 넣어서 보여주는 방식이었습니다.

Templete.js 내부

여기서 사이드 바를 보여줄 때 Mobile크기라면 (700px 이하라면)

MobileSidebar 컴포넌트가 보이고, 웹 크기라면 (700px 이상이라면) 그냥 Sidebar 컴포넌트가 보이게 되는 것이죠.

이렇게 왼쪽에 구성되어 있던 사이드바를 모바일에선 위로 올려, 모바일에서도 예쁜 모양을 유지할 수 있었습니다.

그리고, 이 사이드바뿐만 아니라 다른 페이지 들도 반응형을 위해 노력했습니다.

반응형에 대처하는 방법은 여러 가지가 있지만,

저는 컴포넌트마다 700px이하 이었는지 아닌지 상태를 관리하는 변수를 넣어서 실시간으로 감지하도록 하였습니다.

그리하여, 아래에선 이 변수를 삼항연산자로 이용해 flex 방향을 바꾸기도 하고, Text 크기도 바꾸기도 하였습니다.

이렇게 삼항연산자로 사용하니, 테일윈드의 장점도 부각되고 단점도 부각되어

다음에는 조금 더 가독성이 좋은 방법을 물색하는 것이 목표입니다.

4-2. KAKAO 우편번호 API 사용

저희 사이트는 유저가 웨이팅 장소를 등록하고, 이 장소를 map에 띄워주는 서비스가 있습니다.

한국 지리에도 잘 맞고, 유저가 등록한 우편번호를 좌표로 변경하여 map에 띄워줄 수 있다는 점에서

KAKAO API를 적극 활용하기로 하였습니다.

register의 주소 검색 항목

이 우편번호 API를 이용해서 주소 검색을 띄우는 것은 어렵지 않았으나

여기서 사용자가 검색을 완료해서 적용하는 부분이 어려웠습니다.

그러니까, 사용자가 주소 검색을 완료한 후에 저 form의 주소 필드에 그 값을 넣는 것이 어려웠습니다.

그 값이 form의 input 태그에 열심히 넣어줘도 정작 form 내 data에는 그 input값이 먹지 않았습니다.

결국 우편주소의 api와 react-hook-form의 Controller가 컴플릭트가 난다고 판단하고,

모달을 띄우는 컴포넌트를 따로 분리하여 해결하였습니다.

AddressSearchModal로 컴포넌트 분리

원인을 아주 정확히 찾지는 못하겠으나, 놀랍게도 컴포넌트를 분리하여 처리 과정을 따로 만들고

세터 함수를 프롭으로 넘겨주어 세팅하니 잘 작동이 되었습니다.

그리고 이 address 정보를 map에 띄우기 위하여 좌표를 가져와야 했는데요,

안타깝게 이 우편주소 API으 기본 기능에 해당 주소의 좌표는 없었습니다....

그래서 인터넷을 뒤졌지만, 생각보다 자료가 없고 찾아도 잘 먹히지 않아서 공식문서를 샅샅이 뒤졌습니다.

일단 config를 통해 headers에 인증키와 Content-Type을 공식 문서에 나와있는 대로 넣었습니다.

참고로 여기서 이 apiKey는 KAKAO DEVELOPER에서 발급받은 제 REST API KEY입니다.

(다른 키 아니고 무조건 REST API KEY)이어야 합니다...... 다시 말합니다 무조건 REST API KEY)

https://developers.kakao.com/

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

그리하여 이 url을 세팅하여 axios 요청을 날리면 result에 데이터를 받아서

카카오 공식문서에 있는 대로 result.data.documents[0]에 각각의 x와 y 좌표가 있습니다.

그리하여 x와 y변수에 해당하는 좌표값을 넣어주었습니다.

생각보다 간단하면서 시간도 많이 들였고, 공식 문서의 위대함을 알 수 있었던 부분이었습니다.

~~(워낙 바닥이라 성장할 일 밖에 없지만 성장한 듯,,,)~~

4-3. 사용자 경험을 위한 쿠키 사용

저는 사실 지난번에는 백을 담당했었기 때문에, 프론트의 기본인 쿠키와 세션 사용을 몰라서

언젠가는 해야겠는데, 사용자 입장에서 쿠키가 필요하면서 보안에 노출되어도 걱정 없는 파트가 무엇일까

생각을 했었습니다.

저희 웹사이트는 지역기반인 경우가 많습니다.

뭐 예를 들어, 웨이팅 장소뿐만 아니라 웨이팅을 대신해줄 사람(프록시)를 찾는 것도

다 시군구 단위의 지역을 기반으로 찾을 수 있습니다.

서울시 관악구를 검색한 프록시 list 페이지

그런데 여기서 만약 저 list 중 하나를 눌러 detail 페이지에 갔다가 다시 list로 나오게 된다면

검색했던 지역이 사라지고 다시 전체 리스트가 뜨게 됩니다.

사용자의 입장에서 분명 검색했던 리스트 그대로 보고 싶을 텐데 저조차도 매우 불편하더라고요.

그래서 지역 검색 기록을 쿠키로 사용하게 되었습니다.

물론 쿠키를 도입하기 전에 세션과 쿠키를 고민하였습니다.

일단 사용자가 창을 닫으면 사라진다는 점에서 세션을 사용해야 할 것 같았는데,

저는 작은 메모리지만, 서버와의 연결도 서버의 메모리 사용도 원하지 않고

그저 클라이언트 쪽에서 가볍게 사용하기를 원했습니다.

그래서 쿠키를 도입하기로 합니다.

일단 react-cookie npm을 사용하였습니다.

store 폴더 내 userCookie.js 파일 내부

말씀드렸듯이, 매우 가벼운 쿠키 사용을 원하여, set과 get만 해주었습니다.

select 박스의 default value로 cookies의 address의 value의 값이 있다면 찾아서 넣고,

애초에 cookies.address 내에 값이 없다면, cookie 내에 value가 없어서 에러가 뜨기 때문에

find 함수를 사용하였습니다.

그리고 cities의 리스트 내에서 만약 선택을 해서 onChange를 한다면 선택한 옵션에 따라

setCookies를 통해 address 쿠키 항목에 선택한 address의 value값을 넣어주고 600초 간 유지하도록 했습니다.

maxAge 같은 경우 조금 고민을 했지만, 일단 저희의 원활한 테스트를 위해서 600초로 제한하였습니다.

만약 진짜로 시중에 배포를 하게 된다면 이 maxAge를 적절한 시간으로 유저 데이터를 통해

제한할 것 같습니다.

4-4. react-select npm 사용

저는 사용자의 지역 기반 list를 구성할 때 어떻게 하면

사용자에게 시군구를 편리하게 제공할지 고민하였습니다.

앞서 사용한 KAKAO 우편번호 API를 사용하여 유저가 입력하게 할 수 있지만,

웨이팅을 부탁할 프록시를 찾는 것도, 내가 앞으로 웨이팅을 할 리스트를 찾는 일도

'시군구 단위'를 통해 선택하여 지정하는 것이 편리하다고 생각하였습니다.

그래서 select 박스를 선택하였고 list가 있는 페이지는 cities를 props로 넘겨

사용하였습니다.

cities 내 일부

하나 초장기 react 내 날 것의 select box는 사용자가 지역을 검색할 수 없었습니다.

구글링 하며 검색한 결과, react에 select box를 위한 npm이 있다는 것을 알게 되었고,

무엇보다 유저가 select box 내에서 지역을 직접 검색이 가능하다는 편리성을 위해 적용하였습니다.

select npm 도입하여 검색가능한 모습

앞서 쿠키를 보여드리며 설명드렸던 그 코드가 react select npm을 도입한 모습입니다.

이 select npm을 도입하는 것은 어렵지 않았지만, 의외로 작업이 좀 오래 걸렸던 것은

전국의 시군구 list가 있는 cities를 전면 개조하는 것이었습니다.

본래, select npm을 도입하기 전에는 label로 '시'와 '도'를 표현하고 그 아래에 군구 단위를

선택할 수 있도록 하였으나 select npm은 오로지 label과 value를 일대일 data 매칭으로 이루어져

있어서 저 cities를 싹 다 갈아엎는 작업이 오래 걸렸습니다.

4-5. react-hook-form npm 사용

저희는 웨이팅을 기다리고 돈을 버는 입장(프록시)이든,

웨이팅을 돈을 내고 부탁하는 입장(웨이트메이트)이든,

사용자가 정보를 등록해야 하는 구조를 가지고 있습니다.

하여 수업시간에도 배웠던 react-hook-form을 적극 사용하기로 하였습니다.

특히 wait mate의 register의 경우, 사용자에게 받는 정보가 워낙 많기에

이 npm을 도입하지 않을 이유가 없었습니다.

wait mate의 register form의 일부 Controller

이 react-hook-form을 통해 많은 옵션도 걸어주고, 유효성 검사와 그 결과에 따른

메시지도 다르게 보여줄 수 있었습니다.

여기서 register를 클릭하지 않아도 무조건 경고문이 뜨는 것을 방지하여

폼의 규칙을 반하여 register 버튼을 눌렀을 경우에만 해당하는 경고문들을 띄우도록

clickReigster라는 옵션을 넣음으로써 무조건 유저가 폼의 순서대로 입력하지 않아도

경고문이 뜨지 않도록 하였습니다!

(만약 title을 작성하지 않고 다른 항목으로 넘어갈 경우, title을 입력하라고 경고문이 나오게 되고

이는 유저의 반감을 살 수 있다고 판단하였습니다. register를 하려고 할 때 고쳐야 할 경우 나와야 하는 것이

UX 상 더욱 좋아 보였습니다)

5. 트러블 슈팅

협업 과정에서 트러블 슈팅도 있었지만, 개인적으로 고군분투했던 트러블 슈팅 위주로 적어보겠습니다.

5-1. 배열에서 함수 사용 시 배열이 있는지부터 체크해볼것

list 페이지 작업하면서 내 나름 트러블이 있었던 구간은

slice 함수가 적용되지 않는다는 빨간 에러가 뜨는 것이었다.

바로 이 에러!!!!!!!!!!!!!!!!!!

이게 저를 많이 많이 괴롭혔었는데, 아니 대체 잘 설정된 배열 타입에 slice라는 properies가 되지 않는다고

외치느냐 말이야ㅠㅠㅠ 하면서 옵셔널 체이닝도 적용해보고 배열타입이라고 지정도 해줬는데

해결이 되지 않았다...

=> 해결 방법은, server에서 데이터를 넘겨서 배열에 set해줄 때, 정확한 데이터로 set을 해줘야한다는 것이었다.

server에서 데이터를 받는 부분

여기서 오타가 나거나 구조분해로 가져오지 않는다면,

set 함수로 값을 지정해줄 때 제대로 된 배열이 먹히지 않으니 type도 바뀌어버려서

배열 관련된 메서드가 먹지 않는 것 같다.

5-2. 폼 데이터 유효성 검사

아직 해결을 제대로 못한 트러블 슈팅이긴한데, 너무 충격적이라 남겨본다...ㅋㅋ

마찬가지로 type 어쩌고가 절 많이 괴롭혔는데 (이래서 typescript 사용하나봐요,,,,,ㅠㅠ)

이 이슈가 생긴 폼은 유난히 유저에게 요구하는 정보가 많았던

웨이팅 메이트 등록 폼인데요, 유저가 정말 폼에 있는 순서 그대로 작성하면 상관이 없지만,

다음 API 우편주소 모달을 거친 부분에서 하나라도 뒤틀리게 된다면 바로 에러가 납니다.

다음 API 우편 주소 모달로 컴포넌트가 이동 될 때 자꾸 제 멋대로 register를 진행하더라구요.

(다른 필수값이 채워지지 않은채로 register가 진행됨)

그래서 form data를 server로 보내는 submit을 하기 전에 유효성을 한번 더 체크해줬어요!

이렇게 되면 alert가 뜨면서 register를 클릭했던 상태도 false로 바꿔주고 제출도 막아줄 수 있었습니다.

완전 유하게 UX를 만든 건 아니지만, 그래도 데이터 오류로 폼이 제출 되는 것보다는 한번 alert를 넣으니

server와의 동작에서는 예외처리를 할 수 있었습니다.

앞으로 사용자에게 정보를 받는 폼같은 경우는 버튼을 한번 누른다면 비활성화도 하고

여러번 등록하지 못하도록 하는 예외처리 같은게 중요하다고 느꼈습니다.

5-3. 로컬 스토리지로 유저 데이터 보관하기

자바스크립트는 다들 아시겠지만 비동기 언어라서, 때로 저희를 당혹스럽게 만들 때가 있습니다.

저희가 구현한 채팅방의 경우, 사용자의 id값을 확인해서

수신자와 발신자가 같은 사람의 채팅방이 생성되는 것을 방지하고,

이미 있는 채팅방의 경우에도 굳이 다른 채팅방을 만들 필요가 없다고 판단하여

채팅방이 새로 생성되는 것을 방지하였습니다.

저희가 로그인한 유저의 정보를 어떻게 관리할 것인지 여기저기 물어보았는데,

현재 압도적이라고 할 만한 방법은 없고

프로젝트의 특성에 잘 맞추어 반영을 해야한다는 답변만 들을 뿐이었습니다.

그러나 저희는 초보라서 어떤 프로젝트에 어떤 특성을 반영하기 보다는

가볍고 사용감이 당장 좋았던 zustand를 선택하여 사용하였으나,

이 zustand는 채팅방을 생성하기 전에 id값을 가져와서 예외처리들을 확인하기에는

가져오는 id값 속도가 굉장히 느린 친구였습니다.

하여 뒤늦게라도 리더님의 충고에 따라 Local Storage를 도입하였습니다.

(세션스토리지랑 고민하였으나, 탭을 닫아도 지속적으로 유지해야하는 채팅창의 속성을 따라서 로컬스토리지로 결정)

사용법은 굉장히 간단하였습니다.

로그인 시 로컬 스토리지에 원하는 값을 키 -값 쌍으로 삽입

그리하여 개발자 탭에서 손쉽게 로컬 스토리지의 값을 볼 수 있었습니다!

토큰과 같은 인증이 아닌 단순 id값이라서 암호화같은 건 도입하지 않았습니다 :)

이 간단한 것을 모르고 사용할 줄 몰랐다니,,,,,,,,,,,,,,, 진작에 도입하지 않아서

혼란을 초래한 시간들이 아깝습니다......

6. 아쉬웠던 점

개인적으로는, 리액트의 컴포넌트 성질을 많이 이용하려 노력하였으나 겹치는 비효율적인 코드가 많았던 것 같습니다.

이걸 줄이는 방안으로 3차를 진행하고, 추후에 2차를 디벨롭할 수 있도록 하겠습니다.

그리고, 제 파트도 너무 많아서 잘 참여하지 못했던 소캣 chatting 프론 부분도 아쉬워서

다음에는 이 부분도 많이 참여하고 싶다는 생각이 들었습니다 :)

[SeSSAC] 웹 풀스택 영등포 5기 과정_REACT(7)_Redux

geograp — Sun, 22 Oct 2023 00:49:24 +0900

안녕하세요

이번 시간에는 Redux에 대해 배웠습니다.

0. Redux란?

JavaScript의 상태 관리 라이브러리입니다.

주로 React와 함께 사용되지만, 다른 JavaScript의 프레임워크나 라이브러리에서 사용 가능합니다.

Redux의 목표는 애플리케이션의 상태를 예측 가능하고 효율적으로 관리하는 것입니다.

즉, 한마디로 props 지옥을 벗어나는 것입니다.

출처 https://www.slideshare.net/binhqdgmail/006-react-redux-framework

컴포넌트 수가 많아지는 대형 프로젝트에서는

왼쪽 그림처럼 state를 전해주기 위한 props를 엄청나게 많이 써야 하는 경우가 발생하죠.

Redux를 사용하게 된다면, *전역*으로 상태를 관리할 수 있어서,

store라는 곳에서 언제든 꺼내쓸 수가 있습니다. (오른쪽 그림과 같이)

1. Redux의 핵심 개념

1-1. Store (스토어)

Redux에서 상태를 관리하는 중심 역할을 하는 객체
애플리케이션의 모든 상태가 저장되는 저장소
getState, dispatch, subscribe과 같은 메서드를 제공함
한 개의 프로젝트에 하나의 스토어만 가질 수 있음
스토어에 있는 데이터는 컴포넌트에서 직접 조작하지 않고 리듀서 함수를 통해 간접적으로 사용

1-2. Action (액션)

상태 변경을 설명하는 일반적인 객체
반드시 type 필드를 가지고, 필요에 따라 추가 데이터를 포함(payload)할 수 있음
리듀서가 수행할 작업을 설명해 줌

1-3. Reducer (리듀서)

액션을 처리하고 새로운 상태를 반환하는 순수 함수
이전 상태와 액션을 인자로 받아 새로운 상태를 생성함
스토어가 리듀서를 통해 상태를 업데이트함
Http요청, 데이터 저장 같은 건 하면 안 됨

1-4. Dispatch (디스패치)

스토어를 통해 액션을 전달하는 메서드

이렇게 개념만 보면 섭섭하니까 실제 코드들을 가져와서 보도록 하겠습니다.

2. Redux 시작하기

Redux를 시작하려면 먼저 Redux 모듈을 설치해야 합니다.

npm install redux react-redux @reduxjs/toolkit

그리고 이 설치한 리덕스를 사용하기 위해 리액트에 적용해야 합니다.

index.js 내부

이 코드는 이 리액트의 모든 요소를 아우르는 index.js 파일에서 Redux를 적용하고 있는 모습입니다.

import 되는 함수들도 헷갈리니, 하나하나 정리해 보도록 하겠습니다.

import { Provider } from 'react-redux';

→ React에서 Redux 스토어(저장소)를 사용하려면 Provider 컴포넌트를 가져와야 합니다.

이 컴포넌트는 Redux 스토어를 애플리케이션에 제공하는 역할을 합니다.

import { configureStore } from '@reduxjs/toolkit';

→ Redux Toolkit에서 제공하는 configureStore 함수를 가져오고 있습니다.

이 configureStore함수는 Redux 스토어를 설정하는 데 사용합니다.

Redux Toolkit은 간단하고 효율적으로 Redux를 사용하도록 도와주는 도구 모음입니다.

import { composeWithDevTools } from 'redux-devtools-extension';

→ Redux DevTools확장을 사용하여 개발 중에 Redux 동작을 모니터링해 주는 도구입니다.

import rootReducer from './store';
import Practice from './Practice';

→ 각각의 파일에 있는 리듀서와 컴포넌트를 가져옵니다.

rootReducer는 제가 store파일에 만든 주요 리듀서이고, Practice는 제가 실습용으로 만든 컴포넌트입니다.

const root = ReactDOM.createRoot(document.getElementById('root'));

→React18 이후의 새로운 기능 중 하나입니다.

더 빠르고 반응적인 애플리케이션을 만들 수 있도록 도와주는 도구입니다.

사용자 경험을 향상하기 위해 병렬적으로 여러 작업을 처리하는 Concurrent Mode 기능이 있습니다.

이 Current Mode 내에서 createRoot 메서드를 사용한 것입니다.

createRoot 메서드는 애플리케이션의 루트를 생성하고 초기 렌더링을 시작하고 이후에도 업데이트를 지원합니다.

const store = configureStore({ reducer: rootReducer }, composeWithDevTools());

→ 이 코드는 Redux Toolkit을 사용하고 Redux의 스토어를 구체적으로 설정하는 부분입니다.

configureStore 함수는 초기 스토어 설정을 구성합니다.

여기서는 매개 객체로 { reducer: rootReducer }가 전달되어 스토어는 이 리듀서를 사용하여 액션을 처리합니다.

composeWithDevTools 함수는 개발 중에 Redux 스토어의 상태 및 액션을 쉽게 추적하도록 도와줍니다.

스토어의 동작을 모니터링하고 디버깅하기 위해 스토어를 확장하기도 합니다.

root.render(
    <Provider store={store}>
      <App4 />
      <hr />
      <Practice />
    </Provider>
);

→ 여기서 핵심은 App4나 Practice와 같은 컴포넌트들을 감싼<Provider></Provider>입니다.

여기서 Provider에 props로 store가 전달되어 모든 컴포넌트에서 store가 사용가능한 것입니다.

그리고 추가로, chrome에서 확장 프로그램으로

Redux DevTools를 설치해서 리액트 앱에 적용하면 Redux 스토어에 저장된 상태를

간편하게! 확인할 수 있습니다

Redux DevTools

// 리액트 앱에 적용하기
npm install redux-devtools-extension

3. Redux 사용하기

먼저, 현재 제가 소개해드릴 간단한 실습은,

Redux를 사용해서 input창에 숫자를 입력하고 입금 버튼을 선택한다면 통장잔액을 +로 변화시키고

출금 버튼을 선택한다면 통장잔액을 그만큼 -로 변화시키는 실습입니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

실습 메인 코드

먼저, 중심부가 되는 파일 먼저 살펴보도록 하겠습니다.

여기서 전에 공부했던 useState 훅을 input에 들어온 금액을 위해 사용하고 있고,

그 외 redux 관련 훅인 useSelector와 useDispatch를 사용하고 있습니다.

3-1. useSelector

Redux 스토어에서 상태값을 선택하는 데 사용되는 훅
Redux 스토어의 상태를 읽고 불러와서 컴포넌트에서 사용가능하게 함

 const money = useSelector((state) => state.money.money);

이 코드는 현재 store에 있는 money의 money항목을 불러오고 있습니다.

이 코드가 store에서 money항목을 찾아올 수 있는 이유도 알아보도록 하겠습니다.

저는 src 폴더 내 store 폴더를 만들고 그 폴더 내에서 moneyReducer.js라는 파일을

만들었고, 이 파일은 순전히 돈관리를 하는 store(reducer)를 담당하고 있습니다.

이 파일 내에서 전달하는 상태 값에 따라 입금인지 출금인지 구분하여 값을 변경하고 있습니다.

그래서 그 store의 money가 변경된 상태값을 money라는 변수에 넣어서 활용하고 있습니다.

3-2. useDispatch

Redux 스토어에 액션을 디스패치하기 위해 사용되는 훅

  const dispatch = useDispatch();

디스패치는 주로 이렇게 훅을 변수에 담아서 활용한다고 합니다.

const Deposit = (num) => ({type: 'DEPOSIT', payload: num});
const Withdrawal = (num) => ({type: 'WITHDRAWAL', payload: num});

<button onClick={() => {dispatch(Deposit(parseInt(inputNum)))}}>입금</button>
<button onClick={() => {dispatch(Withdrawal(parseInt(inputNum)))}}>출금</button>

이 실습에서는 입금이라는 버튼을 클릭했을 때 dispatch를 활용해서

type은 'DEPOSIT'이고 payload로 매개 변수 num을 전달하고 있습니다.

마찬가지로, 출금이라는 버튼을 클릭했을 때 dispatch를 활용해서

type은 'WITHDRAWAL'이고 payload로 매개변수 num을 전달하고 있습니다.

그렇게 된다면, dispatch함수를 통해 store로 type과 payload가 전달됩니다.

store내 moneyReducer

여기서 입금이 눌러졌다면 type을 통해 case 'DEPOSIT'이 들어가게 되어

moeny가 업데이트되는 것입니다!

여기서 저는 이 case 'DEPOSIT'을 어떻게 이 dispatch가 찾아가는지 신기할 따름이었는데요,

일반적으로 store 폴더 내에서는 index.js와 같은 하나의 대표 파일에

모든 Reducer와 변수를 넣어서 관리한다고 합니다.

store 폴더 내 index.js 파일

여기서 제일 중요한 개념은 combineReducers입니다.

3-3. combineReducers

여러 개의 리듀서들을 하나로 합칠 때 사용되는 함수
주어진 리듀서들을 모으고 조합하여 하나의 root리듀서를 생성함
이 리듀서들의 상태 트리를 통해 dispatch로 type이 들어오면 알맞은 리듀서로 연결해 주는 역할

이 루트리듀서를 통해 type에 알맞게 리듀서 처리를 해준다고 합니다.

해서, 만약 같은 store 폴더 내에서 같은 type의 이름을 갖게 된다면,

해당 이름의 type을 가진 모든 리듀서에게 전달하는 상황이 발생한다고 합니다.

이렇게 리액트의 Reducer의 개념과 전체적인 흐름을 알아보았습니다 :D