🌤 11/02 내일배움캠프 React 3일차

목차

-미니프로젝트 진행

-오늘 배운 것

-오늘의 느낌

 

1. 미니프로젝트 진행 

팀원 소개 페이지를 만들기 시작한지 벌써 3일차이다.

어느정도 레이아웃을 잡았고, html,css 작업을 시작했다. 팀 특징 설명과 팀 약속이 들어가는 메인 페이지를 어느정도 만들었고, 각 팀원들을 소개하는 페이지를 만드는 중 통합된 페이지가 아닌 각각 자신의 소개 페이지를 만들어야 한다는 사실을 깨달았다.

팀원들과 회의 후 일단 되는대로 각자 만들어보고, 정 안되면 템플렛을 합치자는 의견이 나와 그렇게 진행하였다.

 

이전에 내가 디자인 했던 와이어프레임을 토대로 만들기 시작했다.

어디서부터 어떻게 잡아야 할 지 몰랐던 어제와는 달리 flex나 grid를 활용하면 되겠다는 생각까진 할 수 있었다.

그 다음 뭐부터 해야할 지 몰랐다.

무작정 구글링과 유튜브를 보며 grid사용법을 다시 공부했다.

어느정도 느낌이 왔을 때 그냥 바로 시작해 버렸다. 시작해놓고 오류를 만나보며 이 grid라는 친구와 친해지고 싶었다.

그렇게 여러 시행착오를 통해 어느정도의 레이아웃을 만들게 되었다. 

굉장히 간단하고, 별 기능은 없지만 이정도까지 만들었다는게 너무너무 뿌듯하고 재밌었다.

이 느낌을 잊지 않고 계속 즐기면서 공부하고 싶다. 

   

 

 

 

2. 오늘 배운 것

 

- 폰트적용

  : 구글폰트에서 가져온 웹폰트를 적용한 적은 있지만, 눈누 폰트를 가져온 적이 없어 잠깐 방황했다. 

기존 구글폰트 적용하는 것과 같이 웹폰트 주소를 복사하여 style값에 붙혀놓은 후 font-family값을 입력하는 아주 간단한 작업

 

- 폰트깨짐현상, 이미지링크 먹통

 : 처음에 vscode에서 작업하다 중간에 pycharm으로 editor를 옮겼을 때 생긴 오류

파일을 옮기며 한글을 읽지 못했고, utf-8값을 적용하여 오류 해결 / 이미지링크를 같은 폴더에 주지 않고 다른 곳에 주다보니 생긴 아주 기본적인 실수 -> 이미지를 URl값으로 변형하여 진행 

 

-grid-area / grid-row,column-end,start

 : grid-row-start/end 를 활용하여 분활한 grid에 얼마나 영역을 줄 건지 입력하는 언어

grid-area는 위 기능과 같은 기능이지만 조금 더 효율적이고, 깔끔하게 나타낼 수 있는 언어 

 

- grid : width/heigth 값 유연성 주기

: grid-area값을 주고 화면을 분활한 후 안에있는 Contents들의 크기를 조정할 때 px값으로 크기를 주니, 유연하게 움직이지 않아 %로 값을 줌

 

- jQuory를 활용한 방명록에 명령값 주기

:  방명록을 입력하고 버튼을 눌렀을 때 밑에 그 내용을 posting하기 위해 jQuory를 이용

function save_comment() {
      let post = $('#visitor').val()
      let temp_html = ` <div class="card">
          <div class="card-body">
            <blockquote class="blockquote mb-0">
              <footer class="blockquote-footer">${post}</footer>
            </blockquote>
          </div>
        </div>`

      $('#card-box').append(temp_html)
    }

 

 

3. 오늘의 느낌

 

코딩은 어렵고 힘들고 끊임없이 배우는 것이 필연적이다. 그래서 재밌다 

그걸 해결해 나가는 재미로 살아가면 살면서 무슨 일이 있어도 긍정적인 방향으로 생각하게 될 것같다.

아직 고쳐야 할 부분이 너무 많다. 브라우저 사이즈를 줄였을 때 나타나는 문제들과 아직 제대로 정돈되지 않은 grid들을 정리하고, db값을 어떻게 적용할 건지 다시 공부해보고 적용해야 한다.

아직 잘 못해도 기죽을 필요는 없다. 대신 그만큼 노력을 하지 않으면 그건 잘못된 것이다.