현재 프로젝트의 기술 스택은 https://github.com/wnsdudSoftkim/Tech_Blog 에서 확인 할 수 있습니다.
1. 참조할 만한 레이아웃 구글링
프론트 작업 중 생각보다 오래걸렸던 작업 중 하나는 레이아웃 구성입니다. 디자인 짜는 감각이 부족하고, 전공이 아니라면 오래 걸릴 수 밖에 없습니다. 디자인이 목적은 아니지만 적어도 보여지는 부분은 조금은 깔끔하게 짜야 한다고 생각하기에 velog, Medium, branch, tistory 등 깔끔하게 레이아웃 구성이 되어있는 웹들을 찾아봅니다.
저는 Post를 보여지는 레이아웃에는 Medium을 참조했고 Post가 작성되는 레이아웃에는 velog를 참조했습니다.
2. 글 작성 레이아웃
나만이 작성하는 블로그라도 글을 작성하는 구간과 내가 작성하는 글을 볼수있는 Preview 구간이 필요합니다. 그래야 깔끔하게 글을 짤 수 있기에.
예시로 Velog를 참조하겠습니다.
2-1 글작성, Preview 구간
예시 이미지 처럼 H1 H2 H3 등등은 나중에 작업할 구간이며 지금은 제목을 쓰는 Input 과 내용을 적을 Input , 현재 적는 Input을 바로 보여줄 Preview 구간을 먼저 작업해야 합니다. React 에서 Input을 써봤다면 같은 function 안에서 useState를 쓰고 Change가 됬을 때 e.target.value를 통해 state 값을 변화 시켰을 텐데. 에러가 납니다.
const [headerinput,SetHeaderInput] = useState({header:""})
const {header} = headerinput
const onChangeHeader = e => {
e.preventDefault()
SetHeaderInput({
header:e.target.value
})
} React는 Input값에 onChange 와 useState 이벤트를 걸어놓으면 함수 자체가 re-rendering 되는 특징이 존재합니다. 그러면 글자를 하나만 입력해도 함수가 re-rendering 되면서 input에 focus를 잃게 되겠죠. 그러면 클래스 기반으로 다시 react를 짜야 할까요?
저는 Input을 하는 구간을 함수 밖으로 내보내 주었습니다. 그래서 보는 바와 같이 Header는 제목 , Body는 글을 작성하는 구간입니다.(더 나은 방법이 있으면 알려주시면 감사합니다) Header만 다뤄보면 함수 안에는 useState를 통해 변화되는 Input 값들을 관리하고 있습니다. if 문에서 함수 밖에 있는 data 변수를 쓴 이유는 뭘까요?
이 data 변수는 통신을 보내주기 위한 변수입니다. 통신은 다른 function에서 작동하며 버튼을 누르게 되면 통신이 되는 식으로 작동이 되겠죠.
다음은 Preview를 알아보겠습니다.
