🧱 11/04 내일배움캠프 React 5일차

🏗 드디어 벽돌 한 칸 쌓았다!

---

☀️
오늘은 두근두근 프로젝트 발표날
전날까지 밤늦게까지 고생했던 팀원들과 긴장되는 아침을 보냈다.
점심식사 후 발표였지만 아직 하지 못한 것들이 많았다.

[ 하지 못한 것 list ]
- 시연 영상 작업
- 발표자료 준비
- 개인 자랑 코드 준비
- 발표를 위한 꽃단장 (결국못함 ㅎ)

굉장하게도 괴인의 힘으로 빠르게 합을 맞춰 시연영상 작업과 발표 자료들을 준비 했고, 개인적으로 자랑할 코드도 준비했다. (우리팀 아마 슬로우 스타터일지도..?)

팀 프로젝트 발표자료
https://www.notion.so/6-06ebb524b7584098891dc47d3d26da3f

6조 발표자료

개인 자랑 코드 ( display:grid; )
: 자랑할 수 있는 코드라...정말 고민을 많이 했다. 자랑[ 훌륭하거나 남에게 칭찬을 받을 만한 것임을 드러내어 말함]이라...많은 생각을 하다가 화려하고 눈에 잘띄는 코드보단 가장 기본적이고 필요하지만 내가 이해하고 언제든지 활용할 수 있을 정도로 고민했던 코드가 가장 뿌듯하고 자랑할만한 코드가 아닌가 싶어서 나는 css-layout의 grid를 소개했다.
grid : css-layout중 flex보다 2차원적으로 사용하기 용의함, flex보다 자유도는 떨어지지만 레이아웃을 grid형태로 잡는데에 유리함

내가 사용한 grid 코드이다.

    .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1, 1fr);
            grid-gap: 10px;
            grid-template-areas:
          'a b c'
          'a d d'
          'e e e'
          'f f f'
          'g g g'
          'h h h'
          'i i i';
            align-items: center;
 }

-> 전체적으로 통일할 수 있는 부분이 존재해 보이기에 추후 수정을 해봐야겠다.
기본적인 레이아웃을 먼저 정하지 않고 시작했더니 많은 부분에서 문제점을 만들었다.
grid를 이해하고 코드를 입력하기 전에 먼저 구체적으로 레이아웃을 잡고 grid-template-areas를 활용하여 대입하니 훨씬 쉽고 빠르게 문제를 해결할 수 있었다.
느낀점 : 처음에 시간이 조금 걸리더라도 구체적으로 초반기획 계획을 짜자. 결국 마지막에 뒤돌아보면 그게 훨씬 빠른길이다!!🔥

몰랐던 것
- EC2 서버 연결시 포트값 80번이 연결 안되는 이유
: 지금까지 맥북의 airplay기능이 먼저 포트값 5000번을 사용하고 있어서 4000번으로 우회하고 진행해 보았다.
그치만 포트기본값인 80번이 연결되지 않았다. 맥북이 그래서 그런건지 아직 문제점을 찾지 못하여 문제를 해결해야 한다.
-방명록에 수정,삭제 기능도 넣어보기
: Get, Post 활용하여 수정하기 function값으로 주기
- 스크롤 기능 넣어보기
- 다크모드 해보기
- ui,ux에 대해 고민해보기
- 포트값 설정에 대한 고민

S3와 EC2의 활용법

S3 : aws에서 제공하는 데이터 서비스 중 하나, 가격이 굉장히 저렴하다. 커다란 하드디스크라고 생각하면 될 것같다.