[미니 프로젝트] Jelog 만들기 #2

🔥 새 글 작성 페이지 만들기.

어제와 동일하게, 벨로그의 구조 분석부터 진행하고.. 최대한 비슷한 형태로 구조를 잡아봤다.
우선, 벨로그는 크게 좌측의 입력하는 부분, 우측의 미리보는 부분으로 나눠진다.
유저가 입력하는 글을 바로바로 포스트 형태로 미리 볼 수 있도록 하는 기능을 구현해보았다.

useRef() 함수를 사용하여 Ref 객체를 만들고, 이 객체를 필요한 DOM에 ref 값으로 설정해주면, 리액트 상에서 DOM에 접근할 수 있게된다.
벨로그의 제목 입력 부분을 살펴보면 자동 줄 바꿈과 입력 창의 크기가 자동으로 변경된다.

textarea 태그를 어떻게 하면 자동으로 줄 바꿈을 할 수 있을까 생각해보다.. 스크롤의 크기를 textarea의 height값으로 주면 될 것 같았다.(검색 해보니 대부분 이 방법을 사용하는 듯 하다.)

벨로그와 비슷한 형태로 CSS도 꾸며주면 맨 처음 첨부한 writePage가 완성된다.(velog 아니고 jelog 맞다..)

본문은 제목과 똑같이 코딩하면 된다!

🚧 전반적인 구조 변경

writePage로 이동하면 Header는 사라져야 하기 때문에, App.js 코드가 수정되었다.
Header는 각 페이지로 포함시켜버렸다.
그리고 생각해보니 포스트 리스트들 역시.. 두 개로 분리해서 관리하는 것이 아닌 것 같아서 수정했다.
최신 포스트 리스트는 게시 시점 기준으로 정렬하여 보여주면 되는 것이고, 트렌딩 포스트는 추천을 많이 받은 기준으로 정렬하여 보여주면 되는 것이다.

writePage에서 출간하기 버튼을 클릭하면

{ 
	title : String,
	content : String,
    date : String,
}

JSON 형태로 포스트 리스트에 추가된다.

아직은 제목과 본문만 추가하는 기능만 구현된 상태이다.
앞으로 이미지나, 태그, 여러 텍스트 기능들을 추가하려면... 🫠

🧐 2일차를 끝 마치면서..

사실 오늘은 알바 때문에 엄청 열심히 하지는 못했다.. 새 글 포스팅 하는 기능을 구현했으니 CRUD 중 C는 구현했다고 할 수 있을까...

다음은 포스팅을 클릭하면 해당 포스팅 페이지 보여주는 화면을 만들어야 할 것 같다.

오늘은 CSS에 너무 집중했던 것 같다.. 아무래도 바로바로 보여지니까 이 부분이 가장 재밌어서 그런 듯.

웹 개발 순서를 확실히 정해야겠다.
기능부터 할 것인지.. 한 페이지 한 페이지를 끝내고 다음 기능을 추가할 것 인지...

📚 Chat GPT 질문 내역

• width 와 height 에 최대값을 지정하는 방법

  max-width, max-height 속성을 추가한다.

• textarea를 객체로 가져오는 방법

  useRef를 사용하여 원하는 DOM에 ref 값을 추가한다.
  useRef를 사용하면 current 속성을 통해 실제 DOM 노드에 접근할 수 있다.