강의는 아래 참고 ,, Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

드디어 마지막 파트!! [지속적 코드 관리와 배포, CI/CD] 내가 담당한 파트는 보안 파트였다. 우선 강의를 보면서 실습하기 바빠 내용은 나중에 이해하게 되는 ,,
정리해볼게요 레츠고

보안 강화하기

AWS SSM : 우리가 이걸 왜 하냐면요

우선, AWS SSM은 GitHub Actions가 EC2 서버에 직접 SSH로 들어가지 않고, AWS를 통해 더 안전하게 명령을 대신 실행시키는 방식

결론적으로는 개발자가 코드를 main에 push하면, 사람이 EC2에 접속해서 일일이 docker pull, docker run 같은 걸 치지 않아도 자동으로 새 버전이 배포되게 하는 과정!

그래서 우리는 서버에 실제로 반영되게 만들어봐요.

• 간단한 흐름

  1단계: 개발자가 코드를 GitHub에 올림

  2단계: GitHub Actions가 자동으로 빌드함

  3단계: Docker 이미지로 만듦

  4단계: 그 이미지를 Docker Hub에 올림

  5단계: AWS 쪽에 “이 최신 이미지 받아서 서버 다시 실행해”라고 시킴

  6단계: EC2 서버에서 새 컨테이너가 뜸 = 배포 완료

&nbsp

SSH와 SSM

• SSH = 어떻게 원격 접속할까?에 대한 일반 기술/프로토콜
• SSM = AWS가 제공하는 서버 관리 서비스 = SSH 없이도 명령 실행, 접속, 세션 관리 등을 하게 해주는 AWS 도구

쉽게 비유하면,

• SSH는 “문 여는 방식”
• SSM은 AWS가 만든 “관리 시스템”

&nbsp

SSH 말고 왜 SSM을 써요?

우선, 우리는 SSH 방식을 쓰는 실습도 해보았어요. (EC2를 0.0.0.0.으로 설정해봤어요.)

GitHub Actions가 EC2에 직접 SSH 접속해서:

• 기존 컨테이너 stop/rm
• 최신 Docker 이미지 pull
• docker run

히지만, 이 방식은

1. GitHub Actions가 EC2에 직접 들어가야 하고
2. 보안그룹에서 22번 포트를 열어야 하고
3. 모든 IP에 대해 22번 포트를 허용

⇒ 위험해서 운영 서버에 권장하지 않는다!

비유를 해보자면,

• SSH 방식: 배달원이 우리 집 비밀번호를 가지고 직접 집 안에 들어가서 물건 놓고 감
• SSM 방식: 배달원이 관리사무소(AWS)에 맡기면, 관리사무소가 내부 직원(SSM Agent) 통해 집 안에 전달 &nbsp &nbsp

AWS SSM?

AWS가 서버를 원격 관리하게 해주는 서비스

: aws ssm send-command가 SSM 에이전트를 통해 EC2 인스턴스에서 명령을 실행 = ⭐ EC2 안에 SSM Agent가 있어야 함⭐

흐름도: GitHub Actions → AWS 인증 → AWS SSM → EC2 명령 실행

갑자기 등장하는 OIDC

예전 방식은 GitHub Secrets에 AWS Access Key / Secret Key를 오래 저장해두고 인증하는 경우가 많았다.

대신, OIDC를 써서 GitHub Actions가 AWS에 “나 진짜 이 저장소 워크플로우 맞아”라고 증명하고, AWS가 잠깐 쓸 수 있는 임시 자격증명(STS)을 발급해주는 구조!

비유해보자면

• GitHub Actions: “나 이 저장소에서 돌아가는 공식 워크플로우야”
• AWS: “오케이, 그럼 잠깐 쓸 수 있는 출입증 줄게”
• 그 출입증으로 SSM 명령 실행

우리가 작성한 코드 최상단 permissions: id-token: write가 OIDC를 통해 AWS 인증을 받기 위해 필요한 부분

스프링 프로파일

환경마다 다른 설정을 나눠서 쓰기 위한 기능

ex. 아래의 3가지 환경이 있다고 하자!

• 개발 환경(dev)
• 테스트 환경(test)
• 운영 환경(prod)

각 환경에서 DB 주소, 로그 레벨, 시크릿 값, 외부 API 주소같은 것이 다를 수 있다.

그런데?! 한 파일에 왕창 넣어버리면 위 험 해

그래서?! 어느 환경에서 도는지에 따라 설정을 다르게 적용해보자!

왜 써요!를 정리해보자면

1. 개발/운영 설정 분리

: 개발할 때는 로컬 DB 쓰고, 운영할 때는 AWS RDS 사용 그러면 이렇게 두 개로 나눠야 한다!

• dev: localhost DB
• prod: RDS DB

2. 보안 문제

: 운영용 비밀번호, 운영 DB 주소를 개발 설정이랑 섞어두면 위험하다. 특히 GitHub에 잘못 올리면 큰일!!!!!!

3. 배포 자동화에 유리

: Docker나 EC2에서 실행할 때 prod 프로파일로 띄우면 운영용 설정이 자동으로 적용

즉, 같은 코드인데 실행 환경에 따라 다르게 동작하게 만들 수 있다! &nbsp &nbsp

마무리

4주만에 완강을 했다 😎 역시 스터디같은 강제성이 없으면 힘든 것 같다 ,, 그래도 이렇게 긴 강의를 끝낼 수 있어서 뿌듯하다 ! 중간고사 끝나면 전체적으로 한 번 훑는 시간을 가져야겠다. 시간에 쫓겨 공부한 부분이 있어 살짝 아쉽 ! 직접 해보면서 배우는 게 베스트라지만 프로젝트 시작할 생각에 걱정이 저어어어엉말 많다 ,, 우선 다음주에 있을 미니프로젝트부터 힘내보자 껄껄

강의는 아래 참고 ,, Spring Boot, AWS로 백엔드 서비스 한 사이클 완성하기

강의가 실습 위주인 것 같아 좀 더 궁금한 부분을 찾아보았다! 2주차 스터디는 Docker와 AWS ! 우선 왜 하지?를 이해하지 못하면 살짝 . . 엥? 싶어져서 이번 스터디는 Why???? 위주로 찾아보았다.

내가 맡은 부분은 AWS였고, 가장 먼저 왜 백엔드가 AWS를 공부해야 되는지에 대해 의문을 품게 되었다.

🤔 백엔드가 왜 AWS를 공부해야 하나요

1. AWS를 사용해 백엔드 개발자는 서버 구매, 유지 관리의 필요성 없이 애플리케이션을 신속하게 배포하고 관리할 수 있다!

   ⇒ 빠른 확장성, 높은 가용성, 보안 등 제공

2. 무중단 배포와 확장성 확보를 위한 전략 수립

   ⇒ 가용성과 성능 향상

ex. AWS ELB Auto Scaling 기능 : 트래픽의 변동에 따라 자동으로 서버 인스턴스의 수를 조절, 균형있게 트래픽을 분산 시킴

ex. AWS CodeDeploy 서비스 : 코드 변경 사항을 자동으로 배포할 수 있음 → 코드 업데이트 과정에서 다운타임 없이 애플리케이션 최신 상태 유지

결론 : 비즈니스 요구사항에 다라 애플리케이션의 규모를 탄력적으로 조절 & 지속적인 배포 프로세스 구축 가능

&nbsp &nbsp

_참고자료 _ https://f-lab.kr/insight/aws-usage-guide-for-backend-developers

그리고 두 번째, AWS의 구조 및 구성요소에 대해 알아보았다! 무작정 코드를 치는 것보단 이렇게 이해하고 넘어가고 싶은 마음 ,, 😎

AWS 기본 구조

배포

다른 사용자들이 인터넷을 통해서 사용할 수 있게 만드는 것 ex. 사용자 → 인터넷 → 서버

• 자신 컴퓨터: localhost 로 테스트 개발 → 다른 컴퓨터에서 접근이 불가
• 배포 시: 고유의 주소 부여를 받게 됨 → 다른 컴퓨터에서 그 주소로 접속할 수 있다!

Amazon EC2

컴퓨터를 빌려서 원격으로 접속해 사용하는 서비스 = 하나의 컴퓨터

1. 왜 배워요?

내 컴퓨터로 서버를 배포하면 24시간동안 컴퓨터를 켜놔야 함, 보안 위험 존재

⇒ 내 컴퓨터가 아닌 AWS EC2라는 컴퓨터를 빌려서 사용하자!

2. 현업에서 써요?

실제 서버 배포 시 사용, 백엔드 서버 배포 시 EC2에 서버 배포해 사용

cf. 프론트엔드 배포는 vercel, netlify, AWS S3 주로 사용!

• 클라우드 = 빌려 쓰기
• 클라우드 컴퓨팅 = 컴퓨팅 빌려 쓰기
• EC2 = 컴퓨팅을 빌려 쓰는 서비스

⭐ AWS에서 제일 중요한 서비스!

리전(Region)

인프라를 지리적으로 나누어 배포한 각각의 데이터 센터

ex. EC2를 통해서 빌려 쓸 수 있는 컴퓨터들이 위치한 곳

애플리케이션의 주된 사용자들의 위치와 지리적으로 가까운 리전을 선택하는 것이 포인트! ex. 한국 유저들이 주로 사용 → 아시아 태평양(서울) 선택

IP & Port

IP

네트워크 상에서의 특정 컴퓨터를 가리키는 주소 13.250.15.032

Port

한 컴퓨터 내에서 실행되고 있는 특정 프로그램의 주소 13.250.15.032:3030 → :3000

+) 브라우저 창에 포트 번호를 입력하지 않는 이유?

ex. naver.com:3030이라고 쓰지 않고 naver.com이라고만 써도 이동됨

⇒ 브라우저는 기본적으로 80번 포트로 통신 설정하기 때문! &nbsp &nbsp

+) 잘 알려진 포트(well-known Port)

• 0~65,535번까지 사용
• 0~1,023번까지는 주요 통신을 위한 규약에 따라 이미 정해져있다!
• 아래는 정해져있는 포트 중 중요한 것
  • 22번(SSH): 원격 접속을 위한 포트 번호 → EC2 인스턴스 연결 시
  • 80번(HTTP) : HTTP로 통신을 할 때 사용
  • 443(HTTPS) : HTTP로 통신을 할 때 사용

⇒ but, 강제는 아니다!

AWS IAM

AWS 서비스와 서비스 리소스에 대한 액세스를 안전하게 관리해주는 서비스 AWS의 보안과 관리를 담당!

VPC

가상으로 존재하는 데이터 센터 → 원하는대로 사설망 구축 가능!

EC2 등이 실제로 실행되는 부분

AMAZON S3

객체 스토리지 서비스(파일 보관만 가능)

• 강력한 내구성
• 대규모 데이터 저장하고 관리하는 데 이상적

AMAZON RDS

관계형 데이터베이스를 서비스화 시킨 서비스 ⇒ MySQL, MariaDB 등 여러 관계형 데이터베이스 서비스를 AWS로부터 비려서 사용하는 형태

Q. 왜 사용하나요?

로컬 환경에서 개발할 때는 로컬 환경에 설치된 MySQL같은 DB를 연결해서 사용 ⇒ but, 서버 배포 후 서버가 내 컴퓨터에 설치된 MySQL과 연결할 수 없음! ⇒ DB도 외부 인터넷에서 접근할 수 있게 같이 배포해야 됨

= AWS RDS라는 데이터베이스를 빌려서 사용

&nbsp &nbsp

참고 영상: https://youtu.be/LU8x1UEcPFA?si=2qatHX1FJ40SpFMD

마무리

솔직히 인프라 공부 하는 것도 아니고 AWS를 왜 배우지..? 에 대한 의문이 가장 컸는데 어느정도 이해가 되었다. 근데 AWS 세팅 너무 어려워 스터디원 중에 원인도 모른 채 과금되고 있다는 안타까운 소식도 들어 (..) 더욱 조심히 다뤄야겠다는 생각이 들었다. 그럼 어렵게라도 만들지 말던가!!! 화는 그만 내고 이제 3주차 스터디를 준비하러 가야겠다!

그래서 시작한 학교 공지사항 내 특정 단어가 들어간 게시물이 있을 때 나에게 카톡을 보내는 기능이었다. 일단 내가 [사이트 크롤링해서 갖고 와] -> [그게 나한테 카톡으로 와] -> *헐 흥미돋아 *

참고로 리액트로 개발을 해봤다지만 그냥.. 감자세요? 파이썬? 그건 더 뭐예요?

카카오 API를 처음 써보는 사람이었다는 점도 참고해주세요 제미나이랑 1시간동안 싸웠지만 결국 날 해결해준 건 구글링 (제미나이야 분발하렴 ^^?) 이었다는 허무한 소식

해결방법 들어갑니다! 저의 삽질기같은 거 안 궁금하신 분은 3. 해결 방법으로 바로 넘어가시면 됨

1. 문제 상황

당연히 이렇게 뜨고 있을 것이다. 카카오 공식 문서에도 당당하게 올라와있는 미등록 IP 주소 요청 시 발생하는 에러 .. ip mismatched!가 뭔데??????????

2. ip를 허용해보자 (전 안 됐어요 ..)

일단 제미나이가 첫 번째로 제안한 건 이거였어요 [고급] - [허용 IP 주소] 들어가기

근데? 나는? 고급 들어가면 아무것도 안 뜬다고 말이 되는 소리를 하라고

뭐 스크롤 내려라 화면 축소해봐라 이러는데 그냥 하다가 현타와서 다음 방법을 찾으러 가봅니다.

두 번째로는 내가 생성한 앱에 들어가서 [앱] - [어드민 키]에 들어가서

1. ip를 300번정도 쓰고 지우고 난리 치고
2. 시크릿 모드에서 앱 새로 만들어서 토큰 발급하고 다시 넣어봄

하지만 해결되지 않고 그냥 1시간을 넘게 버린 사람됨 ...

결국 ip mismatched 해결방법 .. 검색햇어 . 그리고 바로 원인을 찾앗어 .

3. 해결 방법

아래글 참고했고요 https://www.inflearn.com/community/questions/95313/msg-ip-mismatched-%EC%96%B4%EC%A9%8C%EA%B5%AC-%EC%A0%80%EC%A9%8C%EA%B5%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95?srsltid=AfmBOorkUHsAPfZY_v0MYDIi6dRhOCPgO7izxPzKx7sQxL7ClnpcbfEC

생각해보니까 토큰 발급 받았을 때 계속 흐린눈 하던 저것. 이걸 바꿀 수 있었던 것임 나는 그니까 계속 샘플용 토큰을 무한정으로 받고 있었던 거임

이게 아니라

이렇게 내가 발급 받을 앱으로 바꾸고 토큰을 받았어야 됐어요 [앱] - [어드민 키]는 건들지 않고 이렇게 하니까 바로 끝나더라구요?

이름 보이세요 저 지금 과제하는 사람처럼 진짜최종_최종의최종 이러고 있어요

&nbsp &nbsp

아 그리고 다시 발급 받을 때 이렇게 범위 모조리 다 비활성화 돼있으면 이렇게 하면 바로 해결돼요!

&nbsp

솔직히 아니 이딴 걸 놓친다고..? 싶을수도 있어요 말햇죠, 저 감자라고. 말햇죠, 저 카카오 API 처음 써본다고,

귀엽게 봐주세요

어찌됐든 이렇게 해서 !!!!!!!!! 다시 토큰을 발급 받았고요

제 코드에 다시 아름답게 넣었고

드디어 -401 에러를 탈출해서 "전송 성공"을 보았어요 짠 이렇게 처음으로 크롤링을 성공했어요 ^^! 카톡도 보내봤어요 칭찬해주세요

오늘의 교훈

1. 제미나이가 텔레그램으로 하라고 추천해준 거 꾸역꾸역 붙잡고 있으니까 결국 해결했다 이런 성취감 .. 좋아 .. 앞으로도 꾸역꾸역 잡고 있을테야 근데 나 개발 잘 맞는 걸까?

2. 제미나이 지피티 다 좋지만 구글링도 잊지 말자 ,,

이상 3-2 겨울방학을 지나고 있는 감자 1일차 일지 끝 2일차 언제 나올진 모르겠지만 또 찾아올게요

이게 개발 블로그야 내 일상 블로그야 ,

어제 연결 세션을 하다보니 백엔드를 너무 모르는 것도 안 될 것 같다라는 생각이 들었다. 기초지식 함양 레츠고

어제 보았다 CORS 에러 로그

CORS가 뭐예요?

Cross Origin Resource Sharing 의 줄임말 해석해보면 교차 출처(다른 출처) 리소스 공유 !

&nbsp

먼저 출처(Origin)에 대해 알아보자

Origin = url 주소 상에서 프로토콜 + Domain 이름 + 포트

참고로 포트번호는 생략 가능하다. http, https 프로토콜의 기본 포트번호가 정해져 있기 때문! 명시적으로 표기된 게 아니라면 http는 80번 https는 443번 포트가 디폴트 값이다.

같은 출처(same origin) vs 다른 출처(cross origin)

그러니까 CORS에러는 다른 출처일 때 나타나는 것이다! &nbsp

CORS 에러

same origin 상에서는 요청 오는 곳 = 처리하는 곳! ➡️ 특별히 보안상 처리를 해줄 필요가 없다.

하지만 cross origin에서 오는 요청이라면 내가 요청으로 받아온 결과를 믿을만한지 검증하는 과정이 필요하다. 왜냐하면 브라우저는 기본적으로 다른 서버를 신뢰하지 않아서 다른 서버에 요청을 보내거나 응답 받는 걸 차단하기 때문이다. (참고로 이런 브라우저 정책을 SOP라고 한다.)

&nbsp

해결 방법

1) 서버에서 cors 헤더 설정하기

가장 일반적인 방법으로 서버 측에서 cors 헤더를 설정하여 도메인에서 오는 요청을 허용한다. 아래는 허용하는 도메인을 정의하는 코드 !

// 모든 도메인의 요청을 허용하는 경우
Access-Control-Allow-Origin: *

// 특정 도메인(https://example.com)의 요청만 허용하는 경우
Access-Control-Allow-Origin: https://example.com

아래는 특정한 요청 메서드 또는 커스텀 된 헤더를 허용하도록 정의하는 코드

// 허용되는 메서드를 설정하는 경우
Access-Control-Allow-Methods: GET, POST, PUT, DELETE

// 허용되는 헤더를 설정하는 경우
Access-Control-Allow-Headers: Content-Type, Authorization
// +) 브라우저가 인증 정보가 포함된 요청을 보내는 경우
Access-Control-Allow-Credentials: true

2) 프록시 서버 사용하기

cors 에러를 우회하는 방법이다. 프록시 서버는 클라이언트와 타깃 서버 사이에 위치하며 모든 출처에 대한 요청 및 응답을 허용한다. 따라서 클라이언트가 보내는 요청을 프록시 서버가 대신 타겟 서버에게 전달해주고, 받은 응답을 다시 클라이언트에 반환해준다!

마무리

상세하게까지 작성하진 않았지만 우선 CORS 에러에 대한 기초 개념은 알게 된 것 같다 (?) 연결 할 때 이제 CORS 얘기 나오면 괜히 아는 척 할 수 있을 듯 죄송합니다

출처 https://docs.tosspayments.com/blog/payment-window-cors-error https://velog.io/@jh100m1/posts https://selfish-developer.com/

지금까지 프론트 공부하면서 매 시간마다 본

서버 vs 클라이언트 구조

⬇️ 얘는 SEO 관련 세미나 준비 때 봤던 거 같고 - Server Side Rendering (SSR) vs Client Side Rendering (CSR)

⬇️ 얘는 오늘 next.js 공식문서에서 처음 봤다 - Server Component vs Client Component

&nbsp &nbsp 둘이 똑같은 건 줄 알았는데 조금은 차이점이 있다고 한다? (참고1 : https://f-lab.kr/insight/react-server-components-vs-ssr?gad_source=1&gclid=Cj0KCQjwsaqzBhDdARIsAK2gqnemvky3_9cOzvW3gRByc0bTPskIFKZnUPazRkcX6YrI5_zmkk-HOpgaAqLIEALw_wcB)

(참고2 :https://amaran-th.github.io/React/[Next.js]%20Server%20Component/)

SEO 관련 세미나에서 SSR은 다뤘기 때문에 이번에는 컴포넌트에 대해 다뤄볼 예정이다! *시작 - *

Next.js의 Server Component, Client Component

Next.js 13부터 App Router가 등장하면서 pages/ 라우터보다 강력한 기능이 생겼는데 여기서 핵심적인 개념이 바로 Server Client, Client Component이다!

1. 기본 개념 - 서버가 기본, 클라이언트는 예외

우선 Next.js의 기본은 Server Component이다. 즉, 아무 설정을 안 하면 다 서버에서 렌더링 됨!

Server Component란?

• 서버에서 렌더링
• 결과물(HTML + React 구조 데이터)을 클라이언트로 보내주는 컴포넌트
• 브라우저에서는 상태(useState), 이벤트(onClick)가 없음
• 대신 서버 가까이에서 데이터를 바로 불러올 수 있다!

  // 기본값: Server Component
  import { getPost } from '@/lib/data'
  

export default async function Page() { const post = await getPost(1) return

{post.title}

=> DB나 API를 호출해도 API 키가 외부로 새지 않고, 불필요한 자바스크립트도 브라우저로 가지 않아 성능이 훨씬 좋음 !

### Client Component란?
서버 컴포넌트 안에서는 이벤트 핸들러를 직접 쓸 수 없기 때문에 
브라우저에서 동작해야 하는 부분만 따로 분리해서 `use client`를 선언해준다! 

'use client'

import { useState } from 'react'

export default function LikeButton() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>❤️ {count} }

=> 브라우저 JS 번들에 포함되고 유저가 클릭하면 실시간으로 상태가 바뀌는 부분이다 ! 



## 2. 서버 + 클라이언트 조합 
실제 프로젝트에서는 무조건!! 둘을 섞어서 쓸 수밖에 없는 일이 생긴다.
> ex. 서버에서 글 데이터 불러오기 + 클라이언트에서 좋아요 버튼만 반응형으로 생성

// app/post/[id]/page.tsx (Server Component)

import LikeButton from '@/app/ui/LikeButton' import { getPost } from '@/lib/data'

export default async function Page({ params }) { const post = await getPost(params.id) return (

=> `LikeButton`은 데이터를 받아 **브라우저 쪽에서만** 상태를 관리


## 3. `use client` 남용 금지
`use client`를 적는 순간, 그 파일 이하로 import된 모든 코드가 브라우저 번들에 포함된다.

즉, 
- `layout.tsx`에 `use client`를 넣으면 -> 네비게이션, 푸터, 페이지 전부 클라로 넘어감 
- **이벤트가 필요한 컴포넌트만 따로 분리** -> 성능 good, JS 번들도 훨씬 작아진다.

**좋은 예시** 

// app/layout.tsx (Server) import Logo from './Logo' import Search from './Search'

export default function Layout({ children }) { return (

// app/Search.tsx (Client) 'use client' export default function Search() { /* input, useState 등 */ }

-> 이렇게 **Search만 Client로 작성**하는 것이 좋다. (Logo는 client 사용할 필요가 없으니까!)
&nbsp
&nbsp


**나쁜 예시** 

// layout.tsx 'use client'

-> 이렇게 되면 **전체가 클라이언트로 변해**서 번들 사이즈가 어어엄청나게 커지게 된다.

## 그래서 적절하게 사용하는 방법이 뭔데! 
: 데이터를 서버에서 미리 준비해두고, 클라이언트는 필요한 상태만 넘기는 구조로 만들자! 
> **DB -> Server Component -> Client Component **

예를 들어 API 키가 필요한 데이터 호출은 서버에서 해야만 안전하다.

// lib/data.ts import 'server-only'

export async function getSecretData() { const res = await fetch('https://api.com', { headers: { authorization: process.env.API_KEY }, }) return res.json() }

`import 'server-only'`를 추가해두면 클라이언트에서 잘못 import 할 경우 **빌드 에러로 막아줄 수 있다!**

# 결론 

⭐⭐⭐ 모든 걸 클라로 돌리는 게 아니라 **정적/데이터는 서버, 상호작용은 클라**로 진행하면 된다 ⭐⭐⭐

---


공부를 하다가 알게 된 건데 원래 리액트는 애플리케이션을 렌더링 하는 주체가 client였다고 한다.  **그런데 갑자기?** ![](https://velog.velcdn.com/images/yj_y/post/3e2772f7-ff97-4c0d-b833-ed60ac751c84/image.png)
next13부터는 app 디렉토리가 도입됨에 따라 **Server / Client component 개념**이 추가되었다고 한다. 
그러니까 **pages -> app으로 바뀜**으로써 (근데 이것도 너무 큰 변화 아닌가? 사실 알못이어서 체감은 잘 못하겠다) 또 공부해야 될 게 생긴 거 아니야 .. ?
next에 대해 이야기(~~악플~~)했던 리드님의 세미나가 불현듯 뇌리를 스쳤다.
나 프론트.. 하는 게 맞는 걸까? 이대로 영원히 도태되는 것 아닐까..? 라는 걱정이 앞섰다.
현업에 계신 프론트 개발자분들은 정말 대단하다! 트렌디한 삶을 살아야 해 . .



걱정과 함께 마칩니다.

Styled Component

CSS-in-JS 라이브러리 중 하나로, JavaScript 파일 내에서 CSS를 작성할 수 있게 해주며 각 컴포넌트에 고유한 클래스를 자동으로 생성해 스타일 충돌을 방지한다.

특징

- 쉬운 모듈화 : 스타일을 컴포넌트 단위로 모듈화 할 수 있어 재사용성과 유지 보수성이 크게 향상된다. Button Component의 CSS를 styled-components를 사용하여 JS 내에서 정의 ** ➡️ 오른쪽 코드처럼 프로젝트 내 **어디서든 동일한 스타일로 사용될 수 있다! &nbsp &nbsp

- 편한 동적 스타일링 : 스타일을 동적으로 변경할 수 있어 조건부 스타일링이나 테마 변경이 용이해진다. ➡️ primary prop에 따라 버튼의 배경색이 동적으로 변경, 유연하고 강력한 스타일링을 구현할 수 있다.

&nbsp &nbsp

장점

- 컴포넌트 단위의 유지보수 : Javascript 파일에 CSS를 같이 사용해 컴포넌트의 스타일링과 로직을 한 파일에서 관리할 수 있다. ➡️ 한 파일에서 직관적으로 컴포넌트를 관리할 수 있다.

- 학습 용이성 : 기존 CSS 지식을 바탕으로 쉽게 사용할 수 있다. &nbsp &nbsp

단점

*- Javascript 파일 증가 * : 대규모 프로젝트에서 번들 크기 증가 -> 초기 웹 페이지 로딩 속도가 느려짐

*- 런타임 성능 저하 가능성 * : 스타일을 컴포넌트 렌더링 시점에 생성 -> 렌더링 성능 저하 📌 웹페이지 사용자의 경험을 떨어뜨리고, 예매 사이트와 같이 성능에 민감한 애플리케이션에서는 큰 문제가 된다.

결론

CSS와 JavaScript 파일을 통합하여 코드의 재사용과 유지 보수가 용이하다는 특징 때문에 컴포넌트 단위의 점진적인 스타일링할 때 적합하다

&nbsp

Tailwind CSS

유틸리티 퍼스트(Utility-First) CSS 프레임워크로 미리 정의된 클래스를 사용하기 때문에 클래스 충돌 문제를 방지할 수 있다.

➡️ TailwindCSS는 하나의 클래스가 하나의 속성을 나타냄

ex. p-5 = padding: 20px : 이는 코드 작성 속도를 크게 높여주며 스타일을 빠르게 적용할 수 있도록 도와준다.

특징

- 일관성 유지 : 미리 정의된 유틸리티 클래스들은 일관된 스타일 가이드를 제공, 팀 내 모든 개발자가 동일한 스타일링 규칙을 따르게 된다.

➡️ tailwind.config.js 파일에서 디자인 시스템에 맞는 유틸리티 클래스를 정의한다.

&nbsp - 편한 반응형 디자인 : 미디어 쿼리를 사용하지 않고, 다양한 화면 크기에 맞춰 스타일을 적용할 수 있는 유틸리티 클래스 제공 ➡️ 화면 크기에 따라 자동으로 조정됨

장점

- 빠른 스티일링 적용 : 미리 정의된 유틸리티 클래스 사용하여 신속하게 스타일을 적용할 수 있다. ➡️ 프로토타입이나 빠른 반복 개발에 유리

- 심플해진 프로그래밍 : HTML + CSS / JavaScript로 나뉘며 로직과 스타일링 두 가지로 명확하게 분리될 수 있다.

단점

- 긴 클래스명으로 인한 HTML 가독성 저하 : 여러 유틸리티를 조합하다보면 가독성이 떨어져 유지 보수가 어려워진다.

- 학습의 어려움 : 처음에 유틸리티 클래스의 개념과 사용법을 이해하는 데 시간이 걸리며, 기본적인 스타일 구성에 필요한 클래스를 암기하는 것이 어렵다.

&nbsp

언제, 어떤 기준으로 선택해야 할까?

Styled Component

⭐ 몇 가지의 컴포넌트가 반복적으로 많이 쓰이는 상황 ** -> Styled Component의 **모듈화를 통해 해결하자!

tailwindcss

⭐ 빠른 개발 속도가 필요하거나 웹 사이트의 크기, 성능이 중요한 작업, 일관된 디자인 시스템 속에서 개발 되어야 할 때

npm 다운로드 수

Styled Components와 Tailwind CSS의 npm 다운로드 수를 나타낸 그래프 2023년을 기점으로 tailwind CSS가 더 많이 사용되는 것을 알 수 있다!

결론

물론 실제 선택은 둘 중 한 가지만 선택해서 사용하는 것이 아닌 두 기술을 혼용하여 사용하는 것도 가능하다. 여러가지 상황을 고려해서 선택하면 좋을 것 같다!

참고 https://www.elancer.co.kr/blog/detail/290 https://x2bee.tistory.com/105

프로젝트 회고를 위해 마지막 글을 작성해보자!

Liked - 좋았던 점

프로젝트 트랙에서 성공적으로 진행됐던 부분이나 스스로 칭찬할 점 등을 적어주세요.

1. 프론트 - 백 API 연결

커뮤니티를 만들어야 되는 특성상 프론트와 백 연결이 필수적이었는데 오랜 시간이 걸렸지만 완성했다!

2. 매주 오프라인 코어타임 진행

온라인 코어타임을 최대한 지양하고 오프라인으로 만나 개선점, 진행상황을 공유하며 집중하는 시간을 가졌다!

3. (일부 기능들을 생략했지만) 구현한 부분은 완성도 있게 마무리

우리팀의 최고 장점 : 쳐낼 수 있는 부분을 과감하게 쳐냈다 (?) 매칭 및 채팅 기능을 구현해내지 못한 부분은 아쉽지만 사전에 개발 범위를 줄임으로써 오히려 완성도 있게 만들어낸 거 같다.

Learned - 배운 점

새로 익힌 기술, 개념뿐만 아니라 팀원들과의 협업에서 배운 점도 적어주세요.

1. 백엔드와의 협업 방법

프론트엔드 혼자 눈에 보이는 UI 만들기는 이제 너무 쉬운 시대(?가 왔으나 여전히 백엔드와의 협업은 쉽지 않은 것 같다. 하지만 이번 API 연결을 진행하면서 백엔드와의 협업 방식에 대해 알게 되었다!

2. 의사소통 방식

의사소통의 중요성을 또 한 번 깨달았다! 다인원이 진행하는 프로젝트다보니 사전에 완벽하게 협의되지 않으면 시간을 버린다는 사실 을 또 한 번 깨닫게 되었다!

Lacked - 부족했던 점

기술적인 부족함, 협업에서의 어려움, 시간 관리 실패 등 아쉬웠던 점이 있다면 적어주세요.

1. 우선순위 정하기

외국인을 대상으로 하는 프로젝트인만큼 번역기능의 중요도가 높았는데 다른 기능에 좀 더 초점을 맞춰서 개발을 진행했던 것 같다. 그와중에 완벽하게 진행된 로그인 회원가입 아이디 비밀번호 찾기 ㅎㅎ

2. 최종 배포 미진행

시간상 최종 배포를 하지 못했는데 이 점이 참 아쉽다..!! 하지만 한 번 모여서 배포해보기로 했는데 팀원분들 잊지 않았죠 저 진심이었어요

Longed for - 바라는 점

미래에 개선되었으면 하는 부분, 더 성장하고 싶은 부분과 그에 따른 앞으로의 목표를 작성해주세요.

1. 보다 완성도 있는 프로젝트 만들기

지금은 찍먹 수준의 프로젝트였지만 다음에 진행하게 될 프로젝트는 보다 퀄리티 있는 프로젝트를 만들어보고 싶다. 거의 뭐 런칭해버리기 (?)

2. 백엔드 + 프론트엔드 공부

프로젝트를 해보니 깨달았다. 백엔드라고 해도 프론트를 모르고 프론트라고 해도 백엔드를 모르면 서로 의사소통이 어렵다는 걸 ..!! 그런 의미에서 이번 2학기는 백엔드 공부에 좀 더 비중을 둬보고 싶다.

프로젝트 관련 이미지도 쓰면서 플젝 얘기 하고싶은데 모바일 작성 이슈 … 추후에 여러가지 추가해서 써봐야겠다! 두 달간의 프로젝트가 끝나니 후련하다!!!! 그리고 맞이한 개강 다들 2학기도 파이팅팅

내가 담당한 건 *총 3가지 *

1. 마이 프로필 (+ 비밀번호 수정)
2. 게시판 메인 화면
3. 작성 글 리스트

마이 프로필, 비밀번호 수정 화면을 만들 때 공통 섹션인 Header 영역을 재사용하기로 하였고, 이론으로만 배웠던 리액트의 재사용의 용이성을 실감하게 되었다.

가장 기본은 아래의 [비밀번호 변경] 처럼 로고 + 타이틀만 있는 헤더

1. Header.jsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import koundaryLogo from '../../assets/images/koundary_logo.png';

const Header = ({ title = '내 프로필' }) => {
  const navigate = useNavigate();

  const handleLogout = () => {
    localStorage.clear();
    navigate('/login');
  };

  return (
    <header className="border-b py-4">
      <div className="max-w-screen-lg mx-auto px-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <img src={koundaryLogo} alt="Koundary Logo" className="h-8 object-contain" />
          <span className="text-xl font-semibold">{title}</span>
        </div>

        <button
          onClick={handleLogout}
          className="px-4 py-1 border rounded hover:bg-gray-100"
        >
          로그아웃
        </button>
      </div>
    </header>
  );
};

export default Header;

-> 기본값은 "내 프로필"로 유지하고, 필요하면 override할 수 있도록 만듦!

그렇다면 다른 페이지에서는 어떻게 재사용하나?

2. MyProfile.jsx에서는 그대로 사용하면 된다.

<Header />

3. ChangePassword.jsx에서는 이렇게 변경

<Header title="비밀번호 변경" />

이렇게 사용하니 하나의 Header.jsx 컴포넌트를 계속 재사용하면서

페이지마다 내 프로필, 비밀번호 변경, 회원가입 등 원하는 텍스트로 유연하게 표시가 가능했다. 정말 재사용하기 편한 구조였다..! 또한 코드에 대한 직관적인 이해도도 상승하는 느낌이었다.

하지만, 초기 와이어프레임에는 헤더의 또 다른 기능이 있었는데 아래의 사진 처럼 일부 페이지에는 [내 프로필], [로그아웃] 버튼이 필요했다.

그냥 Header2를 만드는 게 더 편할수도 있겠지만, 보다 쉬운 파일 관리를 위해 (파일 많으면 머리 아프다 🥹) 위의 Header.jsx 파일을 재사용하기로 마음먹었다.

그래서 아래의 코드를 상단에 추가했고, 필요할 때마다 SHOW_BUTTONS_PATHS에 경로를 추가하면 해당 페이지에는 두 개의 버튼이 출력되게 된다.

const BRAND = '#2e8ada';

// 버튼을 노출할 경로 prefix 목록 (필요에 맞게 수정)
const SHOW_BUTTONS_PATHS = ['/main', '/posts'];

const Header = ({ title = '' /* 필요 없으면 '' */ , showActions /* 강제 표시/숨김용 선택 프롭 */ }) => {
  const navigate = useNavigate();
  const location = useLocation();

  // 경로 기반 자동표시: /main, /board, /board/123 ... 에서 true
  const routeWantsButtons = SHOW_BUTTONS_PATHS.some(p =>
    location.pathname.startsWith(p)
  );

  // showActions 프롭이 있으면 우선, 없으면 경로 규칙 사용
  const shouldShowActions = typeof showActions === 'boolean' ? showActions : routeWantsButtons;

추가로 유용한 방식을 알게되었다!

이전까지는 백엔드와의 연결 전 UI 확인을 위해 더미 데이터를 하드코딩 했었다. 하지만, 연결 할 때는 하드코딩한 부분을 다 지우고 변수와 함수 등을 다시 짜서 넣어 일을 2번 하였는데!

1. .env 파일에 코드 작성
2. axiosInstance.jsx 파일과 해당 기능을 사용하는 파일의 코드를 일부 수정

=> 간편하게 목업 데이터 + 스위치 기능이 추가!

&nbsp &nbsp

상세한 코드는 아래에서 👇👇

1. 루트에 .env 생성

VITE_API_BASE_URL= http://111.11.11.1.11
VITE_USE_MOCK=true

• VITE_API_BASE_URL → 백엔드 주소
• VITE_USE_MOCK → true면 더미 데이터로 동작, false면 실제 서버로 호출

⭐ 주의: 저장 후 서버를 재시작해야 반영됨 → npm run dev 다시 실행

2. src/api/axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // .env에서 읽음
  headers: { 'Content-Type': 'application/json' },
  timeout: 10000,
});

3. src/api/board.js (목업/실서버 자동 전환)

import axiosInstance from './axiosInstance';

const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true';
const wait = (ms) => new Promise(r => setTimeout(r, ms));

export const getBoardList = async ({ category, page = 1, size = 20 }) => {
  if (USE_MOCK) {
    // --- 목업 데이터 ---
    await wait(300); // 로딩감 주기
    const total = 83;
    const start = (page - 1) * size;

    const items = Array.from({ length: size }).map((_, i) => {
      const n = start + i + 1;
      return {
        id: n,
        title: `[${category}] 더미 글 제목 ${n}`,
        author: n % 3 === 0 ? '길동' : '홍길동',
        createdAt: '2025.07.01',
      };
    });

    return { items, total, page, size };
  }

  // --- 실서버 호출 ---
  const { data } = await axiosInstance.get('/boards', {
    params: { category, page, size },
  });
  return data; // 서버 응답 형식에 맞게 그대로 반환
};

이렇게 하면 아래와 같이 더미 데이터가 생성되며 .env 파일에 작성한 true 부분을 false로 변경한다면 더미 데이터가 사라진다!

느낀 점

로그인, 회원가입 이외에 다른 기능을 만들어보니 이론으로 배웠던 구조나 특징들이 직관적으로 이해되는 기분이었다. 나름 성장하고 있는 거겠지. . (아마) 벌써 2주밖에 안 남은 게 거짓말 같지만 남은 2주 알차게 써서 프로젝트 기분좋게 마무리하고 싶당 다들 파이팅입니닷 💪💪

황급히 복기해서 써보는 글이다 아주 허접할 듯 하다 🥹

로그인 UI까지 완성했고 이제는 백엔드와의 연결을 남겨둔 상태

첫 번째로 axiosInstance 만들기

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://실제 백엔드 주소',
  headers: {
    'Content-Type': 'application/json',
  },
});

export default axiosInstance;

API 모듈 분리: auth.js

import axiosInstance from './axiosInstance';  // axiosInstance.js 파일에서 axios 인스턴스를 import

export const login = async (loginId, password) => {
  try {
    const response = await axiosInstance.post('백엔드 경로', {
      loginId,
      password
    });
    return response.data;  // 서버에서 받은 데이터 반환
  } catch (error) {
    throw error.response?.data || error;  // 에러 처리
  }
}

*두 번째: LoginForm.jsx 파일에 유효성 검사 코드 추가 *

 if (isEmpty(loginId) || isEmpty(password)) {
      alert('회원정보를 모두 입력해주세요.');
      return;
    }

    try {
      const result = await login(loginId, password);  
      console.log('로그인 성공', result);

      // 토큰 저장 (예: localStorage)
      localStorage.setItem('accessToken', result.accessToken);
      localStorage.setItem('refreshToken', result.refreshToken);

      // 페이지 이동
      window.location.href = '/main';
    } catch (err) {
      console.error('Error:', err);  // 에러 메시지 출력
      if (err.response) {
        alert(err.response.data || '로그인에 실패했습니다.');
      } else {
        alert('서버 연결에 실패했습니다.');
      }
    }

까지 완성해놓은 상태로 어제 API 연결을 진행했다. 회원가입을 담당한 프론트와 머지 후 발생한 충돌을 가까스로 정리하고 드디어 백엔드와의 연결을 진행했는데...!

역시나 한 번에 되진 않았다. 가장 큰 문제는 계속해서 "서버 연결에 실패했습니다" 팝업이 뜨는 것 ! 콘솔 로그에는 404 에러가 뜨기 시작했다. 밈으로만 쓰던 404 에러를 직접 보게 되다니 웃겼음

이 팝업이 계속해서 떴는데 첫 번째 이유로는 실제 백엔드 API 경로를 작성하지 않아서였다.

백엔드 실제 경로를 작성한 뒤에 해결되는가 싶었더니 동일한 팝업이 뜨기 시작했고, 콘솔 로그를 확인해보니 400 에러가 뜨기 시작했다.

&nbsp 우선 문법 오류라고 하니 맞는지는 모르겠지만 함수에서 보내는 데이터에 문제가 있다고 판단하였고, 백엔드와 이야기를 해보았는데

유저 ID의 변수명이 상이했던 것이다.

• 프론트: ID

• 백: userID

이를 알게되고 프론트에서 ID를 사용한 변수를 모두 userID로 변경하게 되니.....!!! 해결된 듯 싶었으나 500 에러가 발생했다. 그래서 저는 쉬고 백엔드가 조금 더 고생했어요

화질이 좀 눈물나지만 연결 성공한 거 자랑하고 갈게요 내일 있을 중간 발표 때도 동일한 얘기를 할 것 같지만 개인 기록용으로 여기도 첨부 ✏️

어찌됐든 로그인 연결은 끝났다!

이제 게시판 같은 굵직한 애들이 남아있으니 남은 한 달은 얘네 완성 시키기에 몰두해보아야겠다 💪

느낀 점

이번 과정에서 느낀 점은 간단하다. 개발 전 과정이 참 중요하구나... 사실 로그인 하면서 발생한 이슈들 모두 사전에 정의되고 정리됐다면 굳이? 싶은 이슈들인 것 같다. *API 경로 공유, 변수명 통일 *이런 거 다 미리 진행해야 되는 거잖아!!! 하지만.. 아는 게 없는 초보들은 어쩔 수 없다 하핫 어찌됐든 직접 맞으면서 배우는 개발 나쁘지 않다고 생각한다 다음에는 말하고 생각했나요?가 아니라 생각하고 말했나요? 느낌으로 할 수 있겠지!

가비지 컬렉터란?

자바의 메모리 관리 방법 중의 하나로 JVM(자바 가상 머신)의 Heap 영역에서 동적으로 할당했던 메모리 중 필요 없게 된 메모리 객체(Garbage)를 모아 주기적으로 제거하는 프로세스 줄여서 GC라고도 한다.

C, C++ 등의 프로그래밍 언어는 가비지 컬렉터가 존재하지 않아 프로그래머가 free()와 같은 함수를 사용해서 수동으로 메모리 할당과 해제를 일일이 진행했어야 했다.

#include <stdio.h>
#include <stdlib.h>

int main() {
    int* ptr = (int*)malloc(sizeof(int)); // 동적 메모리 할당
    if (ptr == NULL) return 1;

    *ptr = 100;
    printf("값: %d\n", *ptr);

    free(ptr); // 메모리 해제
    return 0;
}

이런식으로 malloc으로 메모리를 할당한 후 free로 수동 해제가 필요했다.

&nbsp &nbsp

하지만 Java, C# 등의 언어는 처음부터 가비지 컬렉터가 존재하여 프로그래머가 동적으로 할당한 메모리 영역의 전체를 완벽하게 관리할 필요가 없어졌다. 이로 인해 버그를 줄이거나 막을 수 있음!

장점

• 관리되는 힙에 효율적으로 개체를 할당한다.

• 더 이상 사용되지 않는 개체를 회수하고 이러한 개체의 메모리를 비워 이후 할당에서 이 메모리를 사용할 수 있도록 한다. 관리되는 개체는 자동으로 시작을 위한 정리된 콘텐츠를 받으므로 개체의 생성자가 모든 데이터 필드를 초기화할 필요가 없다.

• 개체가 다른 개체에 할당된 메모리를 자체적으로 사용할 수 없도록 하여 메모리 안전성을 제공한다.

하지만 단점도 존재한다.

단점

• 개발자는 메모리가 언제 해제되었는지 정확하게 알 수 없다.
• GC가 동작하는 동안 다른 동작을 멈추기 때문에 오버헤드가 발생한다.
• 너무 자주 동작한다면 소프트웨어 성능 하락의 문제가 발생할 수도 있다.

GC 대상

가비지 컬렉션은 특정 객체가 garbage인지 아닌지 판단하기 위해서 도달성, 도달능력이라는 개념을 적용한다. 어떠한 변수에도 참조(reference)되지 않는 객체는 GC의 대상인데, 이를 도달할 수 없는 객체(Unreachable Object)라고 한다.

public class Test {
    public static void main(String[] args) {
        String a = new String("hello");
        a = null;  // "hello"는 이제 누구도 참조하지 않음 → GC 대상
    }
}

GC 동작 원리

1. Mark and Sweep 알고리즘

: 사용 중인 객체를 표시(mark)한 후 사용하지 않는 객체는 제거(sweep) &nbsp &nbsp

** 1) Mark (표시 단계)**

• 루트(Root) 객체부터 시작해서 살아있는 객체를 전부 따라가며 표시한다.
• 루트란 스택에 있는 지역변수, static 변수, 레지스터 등을 말한다.

&nbsp 2) Sweep(제거 단계)

• 표시되지 않은 객체(Unreachable)는 메모리에서 제거한다. &nbsp &nbsp

  2. Stop-The-World (STW)

  : GC가 작동할 때 JVM이 모든 실행을 멈추고 메모리 정리를 시작
  • 서비스 이용에 차질이 생길 수 있기 때문에 이 시간을 최소화 시키는 것이 쟁점이다.

하지만, GC가 너무 자주 실행되면 소프트웨어 성능 하락의 문제가 발생한다. 따라서 사용성을 유지하면서 효율적이게 GC를 실행하는 최적화 작업이 필요한데 이러한 최적화 작업을 GC 튜닝이라고 한다. &nbsp &nbsp

3. 세대(Generation) 개념

: JVM은 객체의 생명주기를 기반으로 메모리를 세대별로 나눠서 GC 효율을 높임

1) Young Generation

• 새로 생성된 객체가 저장
• 대부분의 객체가 금방 Unreachable 상태가 되기 떄문에, 많은 객체가 Young 영역에 생성되었다가 사라짐
• Young 영역에 대한 가비지 컬렉션을 Minor GC라고도 한다. &nbsp

2) Old (Tenured) Generation

• Young Generation에서 Reachable 상태를 유지하여 살아남은 객체가 복사되는 영역
• Young 영역보다 크게 할당, 크기가 큰 만큼 가비지는 적게 발생
• Old 영역에 대한 가비지 컬렉션을 Major GC or Full GC라고도 한다.

&nbsp

&nbsp 힙 영역은 더욱 효율적인 GC를 위해 Young 영역을 3가지 영역 (Eden, survivor 0, survivor 1)으로 나눈다.

** 1) Eden**

• new를 통해 새로 생성된 객체가 위치함
• 정기적인 쓰레기 수집 후 살아남은 객체들은 survivor 영역으로 보냄

2) survivor 0 / survivor 1

• 최소 1번의 GC 이상 살아남은 객체가 존재하는 영역
• survivor 0 또는 survivor 1 둘 중 하나는 꼭 비어 있어야 한다는 규칙 존재

출처: https://inpa.tistory.com/entry/JAVA-%E2%98%95-%EA%B0%80%EB%B9%84%EC%A7%80-%EC%BB%AC%EB%A0%89%EC%85%98GC-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%F0%9F%92%AF-%EC%B4%9D%EC%A0%95%EB%A6%AC

브랜치 전략

main, dev, feature/ 브랜치를 생성하여 각 기능별로 세세하게 브랜치를 나눠서 작업하기로 결정했다.

main ← 배포용 (최종 완성본) └─ dev ← 개발 통합 브랜치 (여기서 작업 브랜치 파생됨) ├─ feature/login └─ feature/signup . . .

우선 현재 깃허브에 세팅한 브랜치는 아래와 같이 구성되어있다. 차차 추가될 예정!

폴더 구조

우선 큼지막한 프론트 폴더 구조는 아래와 같이 정했다.

가장 먼저 로그인과 회원가입을 진행하기로 결정했고, 로그인을 담당하게 되어 우선 조그만 컴포넌트들로 쪼개서 진행하였다.

✏️ 로그인 화면 진행 과정

1. ** 로그인 폼 **구현

아래와 같이 LoginForm.jsx 파일과 Login.jsx 파일을 생성하여 진행하였다.

src/
├── assets/           
├── components/
│   └── auth/
│       └── LoginForm.jsx        ← 로그인 input + 버튼
├── pages/
│   └── Login/
│       └── Login.jsx         ← 전체 레이아웃 

또한 처음으로 기능 추가 커밋을 진행했다.

커밋 메시지는 아래의 블로그를 참고해서 작성! https://duektmf34.tistory.com/206

2. ** 상단 로고 영역 **

LoginLogo.jsx와 Koundarytext.jsx, 로고 이미지 등을 폴더에 추가해서 작업하였다.

src/
├── assets/           ← 이미지, 폰트 등 정적인 리소스
│   └── logo.jpg
│   └── Koundary_text.png
│
├── components/
│   └── auth/
│       └── LoginForm.jsx     ← 로그인 input + 버튼
│       └── Koundarytext.jsx     ← "Koundary" 로고 컴포넌트
│       └── LoginLogo.jsx    ← 위쪽 회색 이미지(로고) 컴포넌트
│
├── pages/
│   └── Login/
│       └── Login.jsx         ← 전체 레이아웃 (Form + Logo + Image 조합)

3. ** 언어 선택 드롭다운 **

LanguageSelector.jsx 파일을 추가하여 작업하였다.

src/
├── components/
│   └── auth/
│       ├── LoginForm.jsx
│       ├── LoginLogo.jsx
│       ├── LoginImage.jsx
│       └── LanguageSelector.jsx   ← 드롭다운+지구아이콘

코드는 아래와 같은데 특이점은 지구 아이콘을 외부에서 저장해 가지고 오는 형식이 아닌 react-icons를 설치해 진행하였다. &nbsp

react-icons 사용법

1. 아래의 명령어를 이용해 설치

npm install react-icons

2. LanguageSelector.jsx 파일 최상단에 아래의 명령어 작성 : { } 안의 코드는 아이콘마다 상이하니 검색해볼 것!

import { FaGlobe } from 'react-icons/fa'

&nbsp &nbsp &nbsp

최종 로그인 화면

로그인 화면 와이어프레임은 아래와 같다.

최대한 비슷하게 해보려고 노력했다 😹 무조건적인 칭찬과 박수갈채 부탁드립니다 👏👏👏

보완해야 될 점

1. 이번에도 역시나 무작정 개발 시작!

: 혼자 개발하는 것이 아니기 때문에 좀 더 세세하게 공통 컴포넌트나 개발 규칙 등을 정했어야 됐는데.. 현생이 바쁘다, 귀찮다라는 여러가지 핑계로 냅다 그냥 시작해버린 것 같다. 뭔가 지금까지 스무스하게 진행되는 것이 불안한 ;; dev 브랜치로 합칠 때 어떤 문제가 발생할지 벌써 두렵다. 하지만 미래의 일이니 어떻게든 되겠지.. 라는 마인드로 만들고 있다.

2. 이제서야 슬슬 이해되는 react 구조

: 프론트 스터디에서 공식 문서를 정리해서 발표하는 시간을 매주 가지고 있어 안일하게 react 강의를 듣지 않았다. 동현오빠한테 왜 물어봤지 어차피 안 할 거 미안합니다 그랬더니 역시 처음에는 내맘대로 복사하고 붙여넣고 삭제하고 다시 넣고.. 이랬더니 슬슬 이해되기 시작했다. 개발할 때 당연히 지피티 도움을 받았지만 보다 중요한 건 코드와 구조를 정확히 이해하는 것!이라고 생각한다. 그래서 우선 로그인 화면을 표면상?으로는 만들었으니, 내일 하루는 코드를 이해하고 tailwindcss를 학습하는 데 시간을 할애할 예정이다.

3. 여전히 부족한 tailwindcss 사용법

: 모른다. 정말 모른다! 아직도 지피티한테 "버튼 모양 바꿔줘", "아 글씨가 좀 이상한데?" 이러고 있다. 빠른 진행을 위해 관련 코드들을 숙지하고 있어야겠다는 생각을 했다.

4. 백엔드와의 연결을 위한 학습 필요

: 로그인 화면만 만들었다고 끝난 것이 아니고, 로그인 프로세스를 위한 백엔드와의 연결 과정이 필요할 텐데 프로젝트 트랙 미션 코스 마지막주에 굉장한 고생을 한 게 생각났다. 이를 위한 학습이 필요할 것 같다. 이게 최종보스일 듯 😨

&nbsp &nbsp

다음 블로그는 코드 리뷰 위주로 작성해야지 2주차도 힘내보자 ✏️✏️

아무것도 모르는 상태에서 킥오프를 진행하고, 어색한 상태에서 팀원들과 모여서 아이디어를 던져보고, 끊임없이 아이디어를 던지고 구체화하는 과정이 제일 재밌었던 것 같다. (괜히 뭔가 된 것 같은 느낌)

1주차 때 내가 냈던 의견은 AI를 이용한 여행 경로 추천 사이트였다. 괜히 있어보이게 플로우차트도 만들어봤다. 정말 코딱지만한 기능만 존재한데 실제 서비스 중인 사이트들을 보니 훨씬 유용한 기능들과 깔끔한 UI들에 감탄했다 🥹

현실적으로 단 두 달만에 초심자들이 AI를 이용한 개발은 불가능하다고 판단하여 다른 팀원의 아이디어인 외국인 유학생을 위한 커뮤니티를 선정했다.

기획 코스를 회고해보자면

현실적으로 구현 가능한 범위

우선 회의 중에 가장 힘들었던 부분은 현실과의 타협이었다. "우리가.. 이걸 구현할 수 있을까?"라는 생각과 함께 겁이 났다. 넣고 싶은 기능들에 대해 생각해보고, 현실적으로 구현 가능한지 판단해보고, 선택했다. 그리고 어느순간부터는 과감하게 생략을 해버렸던 것 같다 (사실 대부분 생략한 것 같기도)

중구난방 얼렁뚱땅 기획

되돌아보면 정말 얼렁뚱땅 기획을 했던 것 같다. 좀 더 체계적이었으면 좋았을 텐데..! 어제 개발 블로그 쓰다가 알게 된 개발 전후 프로세스를 따라간다던가..? 우리는 우선 플로우차트 만들고 UI 시각화부터 바로 시작.

단점으로는 여러 케이스를 생각하지 못해 시각화 중간에 "근데 이런 케이스도 있지 않을까요?" 하면 즉각적으로 추가해서 회의하고 있었다. 하지만 또 이를 극복하기 위해 마무리 후 유저 플로우대로 진행해보며 추가 케이스를 만들고, 이에 대한 보완을 해나갔다. 사실 개발 중간중간에도 계속 기획이 보완되어야 될 것 같다는 생각이 들지만.. 결과만 좋으면 됐지 뭐

개발 작업을 위한 추가 회의 & 문서화

API나 기술 명세서 같은 작업은 아직 안 ㅎ.. 진짜 해야한다 프론트엔드 스터디 하면서 협업에 필요한 여러가지 규칙이 필요하다는 것! 만 알고 있지 딱히 실천은 안 하고 있는 듯 반성하자..

그리고 온라인 회의나 피그마에 대강 적어놔서 문서화 되지 않은 여러가지 항목들을 얼른 정리해서 노션에 남겨놔야겠다는 생각을 했다. 쩝 언제 다하지 &nbsp &nbsp

최종적으로 우리 팀의 최종 기획을 아주 조금 설명해보고 마무리

✏️ 외국인 유학생 커뮤니티 - Koundary

주제 선정 배경

• 유학생들을 위한 커뮤니티 서비스가 존재하지 않음
• 유학생들에게 한국인을 통한 문화 교류 기회 제공

서비스 타겟

• 외국인과 문화 교류를 하고 싶은 유학생, 한국인
• 외국인 전용 커뮤니티를 활용하고 싶은 유학생들

*주요 기능 *

• 에브리타임과 같은 유학생 전용 커뮤니티 활성화
• 유학생:한국인 1:1로 한국에 대해 도움을 받고 싶은 유학생, 대화를 통해 언어 스킬을 늘리고 싶은 한국인 2명이 winwin하는 1:1 매칭 시스템 => 사실 1:1 매칭이나 채팅 기능은 커뮤니티 기능 구현 여부에 따라 결정될 것 같다. 현실적으로 조금 어려울 것 같기도 함 😭

&nbsp 뭔가 더 쓸 말이 많았던 거 같은데 모두 휘발 완 💪 다음 회고록은 쓸 만한 것들 미리 적어놓고 임시저장 해놓자 맨날 후회의 연속 개발기간도 모두모두 파이팅 ,, ~

참고로 개발 프로세스는 아래와 같다고 한다!

그 중 프레임워크와 라이브러리에 대한 개념이 생소해 이에 대해 조사해보았다 ✏️ &nbsp &nbsp &nbsp &nbsp

프레임워크 vs 라이브러리❓

• 프레임워크 = 뼈대 + 규칙 있는 건축 설계도 &nbsp
  • 라이브러리 = 부품 모음집 (필요할 때 가져다 쓰는 도구)

라고 요약할 수 있다. &nbsp &nbsp

프레임워크란?

규칙이 정해져 있는 개발 뼈대

1. 코드를 프레임워크 안에 끼워 넣는 구조

2. 개발자가 규칙을 따르며 만들어야 함

3. 무언가 만들기 위한 전체 구조를 미리 세팅해야 함 &nbsp &nbsp

예시

• 웹 백엔드 → Django, Spring, Express

• 프론트엔드 → React, Vue, Angular

• *모바일 앱 *→ Flutter, React Native, SwiftUI

▶️ Django

• 쉽고 빠르게 웹사이트를 개발할 수 있도록 돕는 파이썬으로 만들어진 무료 오픈소스 프레임워크
• 회원가입, 로그인, 로그아웃과 같이 사용자 인증을 다루는 방법이나 웹사이트의 관리자 패널, 폼, 파일 업로드와 같은 것들의 요소 모음 (로그인/DB연결/페이지 라우팅 등 기본 기능 모두 제공)

참고 링크: https://tutorial.djangogirls.org/ko/django/ &nbsp &nbsp

라이브러리란?

특정 기능을 쉽게 도와주는 코드 조각들

1. 내가 원할 때 가져다 써서 조립

2. 자유도가 높고, 필요한 기능만 골라서 씀 &nbsp &nbsp

   예시

• 날짜 처리 → moment.js, date-fns

• HTTP 요청 → axios, fetch

• 차트 → chart.js, d3.js

▶️ moment.js

https://momentjs.com/

• JavaScript에서 가장 많이 사용되어 온 날짜 라이브러리
• 현재 날짜를 가져오거나, 특정 날짜의 년/월/일만을 가져오거나, 내가 원하는 날짜 포맷으로 형식을 변경해 주거나, 특정 날짜와 비교해 주는 등 날짜 관련해서 다양한 처리가 필요할 때 사용

사용 방법 참고 링크: https://velog.io/@dojunggeun/JavaScript-Moment.js%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-Date-Time-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 &nbsp &nbsp

☑️최신 웹개발 스택 트렌드

https://twentytwentyone.tistory.com/248

• 이 부분이 다음주부터 진행될 프로젝트 개발 기간에 참고하면 좋을 것 같아서 캡처해왔다!

코딩 컨벤션을 정리하게 된 계기 👇 : 첫 번째 스터디 변수 챕터 내 관련 내용이 있다는 것이..! 뇌리를 스쳤다

1. 코딩 컨벤션이란 무엇이고 왜 중요할까?

코드를 작성할 때 지켜야 할 일종의 스타일 가이드

• 가독성 향상: 누가 봐도 한눈에 이해하기 쉬움.

• 협업 효율성: 여러 명이 작성해도 하나의 코드처럼 보이게 함.

• 유지보수 용이: 시간이 지나도 고치거나 이해하기 쉬움.

✏️ 이러한 이유로 코드 컨벤션은 꽤나 중요하다!

2. 코딩 컨벤션의 대표적인 항목

-** 들여쓰기 (Indentation)**

• 보통 2칸 또는 4칸. 팀 규칙에 따름.

-** 변수명 / 함수 스타일 **

• camelCase, snake_case, PascalCase ex. userName, get_user_data(), UserProfile

-** 줄바꿈 / 공백**

• 연산자 앞뒤, 함수 인자 간격, 블록 간 공백 등 ex. if (a == b) vs if(a==b)

-** 주석 스타일 **

• 한 줄 주석, 블록 주석 사용 기준 ex. 너무 많은 주석 vs 의미 있는 주석

-** 파일 / 클래스 / 함수 구조 **

• 한 파일에 클래스 하나만, 짧은 함수 단위로 쪼개기 등

이전 발표 때 snake_case에 대해 잘 알지 못하여서 이번에는 snake_case에 대해 보충 설명을 해볼 예정 !

2-1. snake_case란?

: 주로 파이썬(Python)에서 많이 쓰이는 이름 규칙

소문자 단어들을 언더스코어(_)로 구분하는 표기법

• 함수명, 변수명에 사용

  def get_user_info():
    user_name = "YJ"
    return user_name
  

-  모듈명, 파일명에 사용

파일 이름 예시

user_controller.py data_loader.py

❌ **단, 클래스명에는 사용하지 않음! ** 
- 클래스명은 **PascalCase**를 사용

class UserProfile:

```

• 다른 언어에서는?
  • Java, JavaScript, C# 등은 대부분 camelCase 선호
  • 하지만 상수(const)는 대문자 snake_case 사용

    const MAX_VALUE = 100;
    

&nbsp

3. 코딩 컨벤션을 도와주는 도구들

: 아래 블로그에 도구들이 잘 모아져있어 링크로 첨부한다!

https://blog.naver.com/rinjyu/222458111066

&nbsp

• 화살표 > 버튼과 함께 슬라이드 기능 추가 &nbsp &nbsp

*1. 화살표 > 버튼 UI 추가 코드 *

<button
  className="absolute top-1/2 right-2 -translate-y-1/2 bg-white text-gray-700 shadow-md rounded-full w-10 h-10 flex items-center justify-center hover:bg-gray-100"
>
  <span className="text-2xl">›</span>
</button>

&nbsp

✅ 카드 리스트(div)와 화살표 버튼 >을 같은 relative 안에 넣어주기

&nbsp

2. 클릭 시 슬라이드 기능 추가(scrollBy, ref 이용)

• useRef로 카드 리스트 DOM 제어 : 파일 상단 아래 코드 추가

import { useRef } from 'react'

• RecommendSection 함수 안에 아래 코드 넣기

  const scrollRef = useRef(null);
  

const handleScrollRight = () => { scrollRef.current.scrollBy({ left: 300, behavior: 'smooth', }); };

&nbsp
&nbsp
### **3. 스크롤 대상 div에 ref={scrollRef} 추가**

(이걸 안 해줘서 첫 시도에 슬라이드가 넘어가지 않는 오류가 발생했다 😅) 

&nbsp


#### **아래는 결과물** 👇👇
![](https://velog.velcdn.com/images/yj_y/post/50aee609-40bd-4b1a-8fdf-8593c87241ce/image.png)![](https://velog.velcdn.com/images/yj_y/post/4bcfb63b-8ed4-46b4-b0d2-dc8bdb2826fb/image.png)
슬라이드까지 구현 완! 


이번 주차는 기말고사로 인해 4주차 미션을 진행하지 못했지만 꼭 종강 후에 시도해보아야겠다는 다짐을 💪💪 !! 



&nbsp
&nbsp
&nbsp

미션 진행 중 발생했던 오류를 리마인드 해보려 한다. &nbsp &nbsp &nbsp &nbsp

1. tailwindcss 코드를 작성했으나 적용 되지 않음

➡️신규 미션용 폴더를 만들었으나 tailwindcss를 설치하지 않았다. &nbsp &nbsp &nbsp

매일 잊어버려 복기해보는

tailwindcss 세팅 방법

(1) 프로젝트 생성

pnpm create vite@latest 프로젝트명 -- --template react
cd 프로젝트명
pnpm install

(2) TailwindCSS 3.x 설치

pnpm add -D tailwindcss@3 postcss autoprefixer

*설치 완료 후 *

npx tailwindcss init -p

(3) tailwind.config.js 수정

/* @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

(4) CSS 설정

: src/index.css 파일에 다음 내용 추가

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

(5) main.jsx 수정

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css' // ← TailwindCSS 스타일을 포함한 CSS

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

&nbsp &nbsp &nbsp

하지만 또 다른 문제에 봉착하였다.

*2. tailwindcss를 적용했으나 가운데 정렬이 되지 않음 *

➡️index.css 내 css 코드가 tailwindcss 코드를 덮어쓰고 있어 안 보이는 것처럼 보였던 것이다.

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

.
.
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.
.

1) 심플하게 css 코드를 삭제했다.

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

➡️ 가운데 정렬은 되나 Main Page** / **UseEffect Page 버튼 UI가 사라짐

2) 그치만 가운데 정렬을 포기할 수 없어 css 코드에 의존하고 있던 버튼들을 tailwindcss로 변경하기로 했다.

- 변경 전 코드

<button onClick={() => navigate("/")}>Main Page</button>

*- 변경 후 코드 ⭐⭐ *

<button
 className="rounded-lg border border-transparent px-4 py-2 text-base font-medium bg-gray-200 hover:border-gray-400 transition" onClick={() => navigate("/")}>Main Page</button>

*해결 완료! *🥳🥳

&nbsp &nbsp &nbsp

+) GitHub 근황 제출

*지난주 강제 push 이후로 산산조각이 되었던 기록들이 여러가지 조작을 통하여 복구됨 *

• 몇 시간의 삽질이 도움이 되었는지 적응되어 나름 commit 메시지 형식도 맞추고 깔끔하게 진행해보려고 노력 중이다.

• 1-2주차까지는 커밋 메시지도 뒤죽박죽,,

• 이제 미션 코스는 마지막이지만 종강하고 진행될 프로젝트에서는 협업하기 좋은 방향으로 개선해보도록..!!

&nbsp

&nbsp &nbsp

발단: 세상에서 가장 바보같은 일을 저질렀다.

: PR 시 node_modules 같은 폴더가 함께 올라가 100K개의 파일이 업로드 되었다는 것이었다. &nbsp &nbsp

+) 추가로 이 문제를 해결하다가 더 황당한 실수 발견 : 동일한 이름의 폴더를 두 가지 경로에 저장해놓은 것이다. 이걸 2주차 1번 미션 완료 후 push된 코드를 검토해보았을 때 깨닫게 됨 😭 분명,, 코드를 적었는데 왜 커밋이 안 됐지? 왜 이러지? 사실은 동일한 폴더가 두 개 있다는 것도 이땐 알지 못했다.

전개: 대체 무엇이 문제지?

우선 100K의 파일이 업로드 된 게 가장 문제였고, 오후에 디스코드에서 동일한 질문이 오간 것을 보았다.

=> 링크를 참고해서 진행 해보았으나 해결되지 않았다 😭 &nbsp &nbsp &nbsp

🤔 그래서 같이 미션 프로젝트를 하는 친구에게 질문을 했고, 유사한 문제를 해결했을 때 참고했던 링크를 보내주었다.

그 블로그에선 아래의 명령어를 알려주었는데 . .

여기서부터 공포 시작

git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch ./node_modules -r option' --prune-empty --tag-name-filter cat -- --all


git push --force --all

바로 이 명령어였다. 나는 마음이 급한 나머지 이 명령어가 무엇을 뜻하는지 알지 못하고 무작정 복사+붙여넣기 진행

그리고 결과는 바로바로‼️‼️ &nbsp &nbsp &nbsp

위기&절정: 네? 제 레포가 다 날라갔다고요?

그래서 또 다른 나의 친구에게 원인을 물어보았음 ( GPT야 도와줘,, )

네....?

진짜 거짓말이겠지, "전부 날아감"이라는 문장에 꽂혀 정상적인 사고가 불가능했다. 그래서 미션2로 회피를 함 &nbsp &nbsp &nbsp

결말: 나름의 해피엔딩

카페에서 탈출하여 집으로 되돌아온 후 차근차근 문제의 원인부터 찾기 시작했다.

아래는 GPT의 답변 👇

Pull Request가 병합(Merged)되었거나, 관련 브랜치가 삭제된 경우 아래 중 하나라도 해당되면 Reopen 버튼이 사라집니다:

• PR이 이미 merged 된 경우 → 되돌릴 수는 있지만 reopen은 불가

• PR의 소스 브랜치가 삭제된 경우 → PR을 reopen할 수 없습니다

📌 이 경우에는:

브랜치를 다시 만든 뒤, 새 Pull Request를 생성해야 합니다. (실제로 모든 일을 마무리하고 다시 확인해보니 아래 이런 코멘트가 있었다) &nbsp &nbsp &nbsp

git checkout -b YJ-Y
git push origin YJ-Y

그리고 GitHub에서 새 PR을 열면 됩니다.

*=> 결국 새로운 PR을 생성하기로 결심 *

&nbsp &nbsp

이후에는 아래의 방식으로 fix 버전의 브랜치와 함께 PR을 다시 한 번 생성했다.

1. 원격 저장소의 main 브랜치 최신 상태 가져오기

git fetch origin

2. main 브랜치로 이동하고 최신화

git checkout main
git pull origin main

3. 새 브랜치 만들기 (예: YJ-Y-fix)

git checkout -b YJ-Y-fix

이러한 과정으로 진행하니 중간중간 에러코드가 뜨지 않고 스무스하게 진행되어 약간의 기대감이 생겼고, 결과는

1주차 미션 기록은 살렸다 ! !

솔직히 아직까지 맞는 건가? 싶긴 하지만 어찌됐든 무언가 다시 복구돼서 내 눈앞에 보이는 게 어딘가 ㅠ.ㅠ 2주차 미션은 복구되지 않아 다시 처음부터 해야되지만 이것도 감사했다. 정말 롤러코스터 탄 것 같은 몇 시간이었다. &nbsp&nbsp &nbsp &nbsp

📌 느낀 점

명령어는 잘 알아보고 쓰자 ‼️ : 성급하게 복사 붙여넣기 금지

GitHub에 대해 한 발짝 더 가까워진 느낌 (?) : 솔직히 지금까진 Commit / PR만 썼던 것 같은데 branch도 다시 만들어보고 변경도 해보고,, 깃허브가 어떤 식의 명령어로 구성되고 어떻게 굴러가는지 직접 경험해보았다.

📌 궁금한 점

그럼 원래 쓰던 YJ-Y 브랜치는 사용이 불가한 것인가?

GitHub 사용 시 보다 안전하게 백업할 수 있는 방법이 있을까?

다시는 이런 실수를 하지 않도록 GitHub 사용법을 익히고 안전하게 파일을 관리해야겠다는 생각이 들었다 ,, 이 글을 보는 여러분들은 본인 손으로 이런 일을 저지르지 마세요 🥹

** +) 25.05.21 ** 또 한 번 node_modules이 npm_mission 폴더에 잡혀 커밋할 파일 개수가 10,000개가 넘어갔고 이에 대한 해결책을 찾았다.

: 전역 폴더에 .gitignore 파일 생성 > node_modules 한 줄 써주면 commit 할 때 함께 잡히지 않음 !!

HTML과 같은 문서를 전송하기 위한 프로토콜 즉, 웹 서버와 클라이언트 간의 데이터를 주고받기 위해 만들어놓은 통신 규약

☑️ 추가 개념: HTTPS란?

암호화되지 않은 HTTP 프로토콜에 암호화 프로토콜의 사용하여 통신을 암호화한 HTTP의 보안 버전 로그인 자격 증명이 필요한 웹사이트는 HTTPS 사용이 필요하다. 📌 브라우저 주소창에서 🔒 자물쇠 모양이 보이면 HTTPS!

출처: https://yozm.wishket.com/magazine/detail/1852/

&nbsp &nbsp &nbsp

2. HTTP 동작 원리 - Request & Response

: HTTP의 핵심은 아주 간단하다!

요청(Request) -> 응답(Response)

예를 들어 브라우저에 https://www.naver.com 을 입력하게 되면

1. 브라우저가 서버에게 요청(Request) : 페이지 좀 보여줘!

2. 서버가 응답(Response) : HTML 파일, 이미지, 스타일 등을 보여줌

3. *브라우저는 받은 걸 화면에 그려줌 *

&nbsp &nbsp &nbsp

3. 요청은 어떻게 생겼을까❓

GET /index.html HTTP/1.1
Host: example.com

• GET: 요청 방식

• /index.html: 어떤 리소스를 요청하는지
• Host: 어디서 요청하는지

&nbsp &nbsp &nbsp

4. HTTP 요청 방식

: 어떻게 요청할지 말해주는 것! 이걸 Method(메소드)라고 한다.

• GET: 정보 주세요 (가장 흔함)

• POST: 데이터 보낼테니 처리해주세요 (ex. 로그인, 폼 제출 등)
• PUT: 기존 데이터를 완히 바꿀래요
• DELETE: 특정 데이터를 지워주세요

&nbsp &nbsp &nbsp

5. 요청을 받은 서버는 어떻게 응답할까❓

HTTP/1.1 200 OK
Content-Type: text/html

<html>...</html>

• 200 OK: 잘 처리했어요!

• *그 뒤에 HTML, JSON, 이미지 등 리소스가 따라옴 *

☑️** 상태 코드**

1. *1XX 정보 제공 *

2. 2XX 성공 Ex. 리소스가 성공적으로 생성되었을 시, 201 Created

3. *3XX 리디렉션 * Ex. URL이 바뀌었을 때 자동 이동시킬 때, 301 Moved Pemanently / 302 Found

4. *4XX 클라이언트 오류 * Ex. URL 오타 시, 404 NOT FOUND 요청 자체가 잘못되었을 시(형식 오류 등), 400 Bad Request

5. *5XX 서버 오류 * Ex. 서버 내부 문제, 500 Internal Server Error

&nbsp

🤔 상태 코드를 직접 확인하는 방법?

: 브라우저 F12 > 네트워크 탭에서 요청 하나 클릭 -> status code 바로 확인 가능

6. HTTP는 상태를 기억하지 못함!

☑️ HTTP는 한 번 요청하고 응답하면 잊어버리며, 이걸 무상태(stateless)라고 한다.

➡️로그인 정보를 유지하려면 쿠키, 세션, 토큰 같은 것을 따로 써야 한다!

&nbsp &nbsp &nbsp

🫡 결론

HTTP는

• 브라우저와 서버가 통신하는 약속이고

• 요청 → 응답의 구조로 작동하며

• GET, POST 같은 방식으로 동작하고

• 상태를 기억하지 않는 구조다!

: pnpm and vite https://youtu.be/ZkqT3JnOUOE?si=rO3iAu8GWgoMBvtE    

*# 생성 파일 접근 방법 *

1. 명령 프롬포트
2. cd 폴더명
3. pnpm run dev
4. localhost 주소 출력

*# 실수 *

*1. 맨처음 html과 css를 inline 방식으로 한 번에 작성 * -> 과제의도와 다르다는 걸 깨닫고 분리 방식을 찾아봄

참고 링크) < css > https://developer.mozilla.org/ko/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content **< javascript > ** https://opentutorials.org/course/1375/6620

*2. GitHub Commit, Push, Pull Request(PR) *

• Commit: 로컬에서 변경한 코드를 Git에 저장소에 저장
• Push: commit을 GitHub 서버에 업로드
• Pull Request(PR): 특정 브랜치의 변경 내용을 main 같은 기준 브랜치에 합치자고 요청

현재 상태: Push가 되지 않고 있는 상태 *참고 링크) * https://velog.io/@hill0ne/git-push-%EC%98%A4%EB%A5%98-Updates-were-rejected-because-the-tip-of-your-current-branch-is-behind

요 링크를 참고해서 하나씩 해보고 있는데 아직도 되지 않고 있다 ........ 일요일에 했던 push는 어떻게 한 걸까 의문이다.

#1.4 웹 페이지 기본 태그

• link tag : 외부 리소스와의 연게 정보 표시, HTML과 외부 CSS 파일 연계

  <link rel="stylesheet" href="style.css">

• script tag : client-side JavaScript 정의

  <script>
      document.addEventListener('click', function () {
        alert('Clicked!');
      });
    </script>

#1.7 표 형식 표현을 위한 태그

• table: 표를 감싸는 태그
• tr: 표 내부 행(table row)
• th: 행 내부 제목 셀(table heading)
• td: 행 내부 일반 셀 (table data)

#1.8 폼 태그

기능이 정말 많음.. 과제 하면서 차차 뽀개보자 참고) https://poiemaweb.com/html5-tag-forms

CSS

#1.4 박스 모델

• content: 실제 내용이 위치하는 영역, width, height 프로퍼티를 가짐
• padding: 테두리 안쪽에 위치하는 내부 여백
• border: 테두리 영역
• margin: 테두리 바깥에 위치하는 외부 여백

#1.10 우선순위

• Cascading (캐스캐이딩) : CSS 적용 우선 순위
  1. 중요도: CSS가 어디에 선언 되었는지에 따라 우선순위가 달라짐
  2. 명시도: 대상을 명확하게 특정할수록 우선순위 높아짐
  3. 선언순서: 선언된 순서에 따라 우선 순위가 적용, 나중에 선언된 스타일이 우선 적용

JavaScript는 파트 스터디에서 다루기 때문에 생략 ,,