오늘은 간단하게 코드를 작성하고 styled component를 만져봤다.
React
어려운점 / 궁금한점
1) 페이지 전환없이 여러페이지 다루기
react 의 특징이 페이지 전화없이 한페이지에서 변환을 할 수 있게한다. 그래서 마이페이지에서 버튼을 클릭하여 자기가 작성한 페이지의 종류를 나누려고 시도해 보았다.
예를들면 A라는 유저의 게시물중에 동행이라는 게시물이 4개 기록이라는 게시물이 10개면 마이페이지에서 동행과 게시물 버튼이있어서 동행또는 기록 버튼을 누르면 페이지가 전환되지않고 한 페이지에서
동행 또는 기록 게시물이 구분되어 렌더링되게 구현을 해보았는데 어떤방식으로 한페이지에 다른 페이지가 렌더링 해야하는지 헷갈렸다.
렌더링 될 각 페이지를 component 로 나누고
mypage 에 버튼이벤트가 발생할 경우 동행 또는 기록 component 가 렌더링되게 하는걸까?
2) 데이터 업데이트가 된후 데이터베이스에게 새로운 요청?
새 게시물을 작성하고 업로드 버튼을 누르면 데이터베이스로 새로운 게시물이 전송된다음 메인페이지로 돌아오게 되는데 메인페이지는 작성된 모든 게시물들이 렌더링 되어야한다. 새로운 게시물을 작성하면 처음 렌더링된 state에서 새로운 게시물만 추가하여 이전페이지로 돌아가게될때 데이터베이스에게 재요청을 하지않고 업데이트된 state를 렌더링을 하는걸까? 아니면 추가된 게시물까지 모두 렌더링하기 위해서 데이터베이스에 재요청을 해야하는 걸까?
Styled component
메인페이지에서 게시물을 클릭할때 열리는 페이지, 새로운 게시물을 작성하는 페이지, 나의 게시물을 확인할수있는 마이페이지, 마이페이지에있는 게시물을 클릭할때 열리는 나의 페이지로 총 4가지의 페이지 styled component를 작성해봤다.
배운점
1) letter-spacing: 0.01em;
line-height: 150%;
을 통하여 글 간격과 줄간격 css 로 컨트롤하는법.
2) 레이아웃을 연습과 flex박스와 div 컨트롤하는연습.
3) 이미지 자유자재로 올리고 버튼처럼 이용하는법.
4) 다양한 hover 를 경험해본점. (ex, transition: 0.2s ease-in-out; 를 사용하여 변경할때의 다양성을 경험해봄).
어려웠던점
1) 화면 사이즈마다 style 이 유지할 수 있도록 하는법.
2) 레이아웃을 만들고 구성하는법.
레이아웃은 좀더 많이 다뤄보면 쉽게 익힐것 같다.
