⏰ [Ver1] 30분 개발 및 회고 - FlexBox

✌🏻 회고

인프런 만우절 이벤트 덕분에 단돈 1,000원에 효빈님의 자바스크립트, 비트코인, 도커 등 다양한 강의를 쓸어 담았다.

덕분에 강의 리스트가 잔뜩 늘어났고, 복습도 할 겸 자바스크립트의 비동기 파트를 다시 듣고 있었는데…

 

문제는, 머릿속에 온종일 “오늘 30분 프로젝트는 뭘 하지?” 이 생각만 맴돌았다는 거다.

이제 막 시작했는데, 벌써부터 백엔드가 없어서 확장하기 막막하다는 생각이 들고,

‘혹시 작심삼일로 끝나는 거 아냐?’ 하는 불안함도 스쳤다.

 

그래도 마음을 다잡았다.

“사소한 거라도 해보자. 결국엔 나는 풀스택 개발자가 목표잖아”

그렇다면 백엔드도 언젠가는 부딪혀야 할 부분이다.

 

우선 머릿속을 스쳐 지나간 기능 아이디어 몇 가지가 있었다.

예를 들면, 소셜 로그인 기능, 사람들에게 피드백을 받을 수 있는 임시 방명록,

그리고 카드 형태의 섹션을 만들어서 데이터를 주고받고 렌더링하는 기능 같은 것들이다.

 

번외로, 요즘은 습관을 만들겠다는 마음으로

1일 1면접 질문 학습, 1일 1코딩테스트 문제 풀이 같은 걸 조금씩 추가해봤다.

솔직히 말하면… 할 게 너무 많아지는 느낌이 들긴 한다.

그래도 지금은 “일단 해보자”는 자세가 더 중요하니까, 무리하지 않는 선에서 도전해보기로 했다.

 

이 글을 쓰는 지금도, 한편으로는 “오늘은 그냥 스킵할까?” 하는 유혹이 살짝 스쳤다.

(작심이일은 안돼...)아직 프로젝트 초반이라는 걸 핑계 삼아서라도

“아주 사소한 거라도 해보자.”는 결론에 도달했다.

 

그래서 오늘의 30분 프로젝트는 방명록 만들기로 정했다.

거창한 기능은 아니지만, 임시로라도 프로젝트를 진행하면서 피드백을 받을 수 있는 창구가 필요하다고 생각했다.

 

“이런 기능 추가되면 좋겠어요.”

“이 기능 뭔가 버그가 있는 것 같아요.”

“이런 아이디어는 어떨까요?”

 

이런 메시지들을 가볍게 남길 수 있는 공간이 있다면,

기획?추가기능을 생각하는건 조금 덜 수 있지 않을까?

 

음… 그런데 문득 현실적인 문제가 하나 떠올랐다.

백엔드가 없는데, 사람들의 피드백 데이터를 도대체 어디에 저장하지?

 

찾아보니 Firebase, Supabase 같은 BaaS(Backend as a Service)를 활용하면 가능하다고 한다.

하지만 솔직히 말하면… 써본 적도 없고, 정확한 동작 원리도 아직 잘 모른다.

 

그래서 오늘은 욕심내지 않고 UI만 먼저 만들기로 했다.

내일은 Firebase와 Supabase 중 하나를 선택해서

공식 문서도 읽고, 간단한 연결부터 시도해볼 계획이다.

(그래도 오늘 UI 만든 거니까 프로젝트 한 거 맞음 ㅎ)

 

그런데 아무리 생각해도 회고 쓰는 데만 10분 이상은 걸리는 것 같다.

이런 회고 글뿐 아니라, 프로젝트에서 배운점도 정리 해야하니까..

 

“30분 프로젝트”를 “45분 프로젝트”로 승격(?)시켜야 하나...

---

📚 정리

Flexbox

• Flexbox는 CSS에서 1차원(가로 or 세로) 방향으로 아이템들을 정렬하고 배치하기 위한 레이아웃 시스템
• 기존의 float, position, inline-block 등으로는 해결하기 어렵던 정렬 문제를 간단하게 해결 가능

용어 정리

용어	설명
Main Axis	플렉스 아이템이 정렬되는 주 축 (row or column)
Cross Axis	주 축에 수직인 축 (row면 세로, column이면 가로)
Flex Container	display: flex가 적용된 부모 요소
Flex Items	컨테이너의 직계 자식 요소들

 

Flex Container 속성

1. display: flex / inline-flex

.container {
  display: flex;
  /* 또는 inline-flex */
}

• flex: 블록 요소처럼 동작
• inline-flex: 인라인 요소처럼 동작

 

2. flex-direction: 주 축 방향 설정

.container {
  flex-direction: row;
}

 

 

3. justify-content: Main Axis 정렬 (가로 정렬 or 세로 정렬)

값	정렬 방식
flex-start	시작점 정렬 (기본값)
flex-end	끝점 정렬
center	가운데 정렬
space-between	양 끝 정렬 + 사이 균등
space-around	양쪽 여백 + 사이 여백
space-evenly	여백을 완전히 균등 분배

.container {
  justify-content: space-between;
}

 

 

4. align-items: Cross Axis 정렬 (세로 정렬 or 가로 정렬)

값	설명
stretch	(기본값) 교차축 전체 늘리기
flex-start	교차축 시작점 정렬
flex-end	교차축 끝점 정렬
center	교차축 가운데 정렬
baseline	텍스트 기준선 정렬

 

 

5. align-content: 여러 줄의 교차축 정렬 (줄바꿈된 경우만 적용)

• align-items는 한 줄에 대해
• align-content는 여러 줄에 대해

 

6. flex-wrap: 넘칠 때 줄바꿈 여부

값	설명
nowrap	줄바꿈 안 함 (기본값)
wrap	넘치면 다음 줄로 감
wrap-reverse	다음 줄로 감되, 반대 방향으로

.container {
  flex-wrap: wrap;
}

 

 

7. gap: 아이템 간 간격

• gap은 Flexbox에서도 사용 가능 (Grid에서도!)

.container {
  display: flex;
  gap: 16px;
}

 

 

Flex Item 속성

1. flex-grow: 남은 공간의 비율

• 기본값: 0 (남은 공간 안 씀)
• flex-grow: 1 → 남는 공간을 채움
• 비율 단위 가능 (flex-grow: 2는 1의 2배)

2. flex-shrink: 공간 부족할 때 줄어드는 비율

• 기본값: 1 → 줄어듦
• 0 → 줄어들지 않음

3. flex-basis: 기본 크기 설정

• 기본값: auto (내용 기반)
• flex-basis: 200px → 기본적으로 200px 확보하려고 함

4. flex: shorthand 속성

.item {
  flex: 1 0 auto; /* grow shrink basis */
}

• flex: 1 → flex-grow: 1, flex-shrink: 1, flex-basis: 0
• 실무에서 가장 많이 쓰는 속성!

5. align-self: 개별 아이템의 교차축 정렬 설정

• align-items는 전체 아이템 정렬
• align-self는 해당 아이템만 정렬

.item {
  align-self: flex-end;
}

 

 

실무에서 많이 쓰는 패턴

1. 세로 중앙 정렬

.container {
  display: flex;
  align-items: center;
}

 

 

2. 가로 + 세로 완전 정중앙

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

 

3. 오른쪽 정렬 + 아래 정렬

.container {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

 

 

⚠️ Flexbox 주의할 점

상황	원인	해결
아이템이 넘치거나 깨짐	flex-wrap: nowrap (기본값) 때문	flex-wrap: wrap 추가
텍스트가 깨지거나 줄어듦	flex-shrink: 1로 인해 줄어듦	flex-shrink: 0 사용
아이템 간격 필요	margin 대신 gap 사용 고려	gap 사용 고려

 

정리

속성	설명
display: flex	플렉스 컨테이너 지정
flex-direction	주 축 방향 지정
justify-content	주 축 정렬
align-items	교차 축 정렬
flex-wrap	줄바꿈 여부 설정
gap	간격 설정
flex	grow/shrink/basis 한 번에 지정
align-self	개별 정렬

• Flexbox는 1차원 레이아웃(가로 or 세로)에 최적화된 도구
• 📦 컴포넌트 간 정렬, 버튼 배치, 카드 레이아웃, 로그인 폼 등
• 현업에서 Flexbox만으로도 대부분의 레이아웃을 해결