Category 페이지 관련

hjh02 commented 2 years ago

yuhodots 님 안녕하세요,

블로그 잘 보고 있습니다!

다름이 아니라, 블로그의 category 부분(특히 tag 을 누르면 tag 관련 포스팅 뜨게 하는 부분)을 제 Jekyll 블로그에 적용하려고 하는데, 어떻게 적용하면 되는지 접근방법을 여쭤보려고 합니다!

react 와 nodejs는 처음이라 추상적으로라도 말씀해주시면 감사하겠습니다 :)

감사합니다.

yuhodots commented 2 years ago

아하 안녕하세요! 블로그에 방문해주셔서 감사합니다 :)

저도 다른 분들의 블로그를 참고하면서 작업했던 내용이라 바로 생각나지는 않아서 조금 찾아봐야 할 것 같은데요, 주 중에는 일들이 조금 밀려있어서 이번 주말까지 찾아보고 답변 드리도록 하겠습니다!

yuhodots commented 2 years ago

아 그리고 제 블로그의 경우엔 gatsby를 기반으로 만들어져 있습니다. 아실 수도 있지만, 혹시 모르셨다면 참고하시면 좋을 것 같습니다!

hjh02 commented 2 years ago

넵넵 감사합니다!

yuhodots commented 2 years ago

제 깃헙 블로그는 gatsby 프레임워크 위에서 작동하고 gatsby에서는 React를 기반으로 블로그를 꾸밀 수 있습니다.

React는 '컴포넌트'라는 기본 단위로 이루어져있고, 이 컴포넌트들이 모여 전체 페이지를 구성합니다. 제 블로그의 경우에는 컴포넌트에 대한 코드가 develop branch의 src/components/ 디렉토리에 자리하고 있습니다.

블로그의 category 부분에 왼쪽 '카테고리 리스트'와 오른쪽 '선택된 카테고리에 따라 게시글이 표출되는 칸' 또한 각각 CategoryList.js와 SelectedList.js라는 이름의 컴포넌트로 구현되어 있어서 이 부분의 코드를 집중적으로 참고하시면 도움이 될 것 같습니다.

Category.js 컴포넌트의 코드를 살펴보시면 하위 컴포넌트인 CategoryList.js와 SelectedList.js가 모두 selectedCategory를 인자로 받는데, 이 정보는 templates/category.js 파일에 있는 graphql 코드에 의해서 생성되어 전달된 값입니다. 따라서 이 selectedCategory 값을 기반으로 어떤 카테고리에 속하는 게시글들을 화면에 띄울 것 인지 결정하게 됩니다.

전체적인 과정을 요약해보자면,

유저가 블로그의 category 메뉴에서 카테고리 선택
templates/category.js 파일의 graphql 코드가 실행되며, 리턴된 값들을 Category.js 컴포넌트로 전달
Category.js 컴포넌트가 전달받은 값을 전처리하고, selectedCategory 값을 CategoryList.js 와 SelectedList.js 컴포넌트로 전달
CategoryList.js와 SelectedList.js가 selectedCategory 값을 기반으로 선택된 카테고리의 게시글만 화면에 출력

도움이 되셨으면 좋겠습니다 :)

yuhodots commented 2 years ago

혹시 제 답변이 질문한 의도와 다르다면 다시 코멘트주시면 감사하겠습니다.

사실 전체 코드에서 핵심은 graphql 파트인데요, 이 부분은 제가 잘 모르기도 하고, 저 또한 여러 블로그의 설명이나 예시코드를 긁어와 사용하여서 큰 도움은 드리지 못할 것 같습니다...

hjh02 commented 2 years ago

먼저 답변 감사합니다!

CategoryList.js와 SelectedList.js를 집중적으로 살펴보도록 하겠습니다.

아하, graphql 을 바탕으로 쓰시는군요, 이 부분은 제가 찾아보겠습니다.

제가 추가적으로 문의드리고 싶은 점은, 코드를 develop branch 만 살펴봐도 되는지 입니다. 제가 잠시 살펴봤을 때 develop branch 가 자바스크립트로 쓰여진 것 같고, master branch 가 html, css 등으로 쓰여진 것을 감안할 때 어떤 메커니즘으로 develop branch 에서 master branch 로 번역되고, 결국 github pages 로 호스팅 되는 branch 는 master인 것 같습니다. 혹시 develop를 master로 자동으로 바꿔주는 어떤 걸 쓰시는 건지, 아니면 master branch 는 단순히 예전에 gatsby 를 쓰지 않으셨을 때 작성한 코드인지 여쭤봅니다.

감사합니다!

yuhodots commented 2 years ago

아하 제 블로그의 경우엔 처음부터 gatsby를 사용하여 개설하였습니다.

먼저 'develop branch 만 살펴봐도 되는지' 질문에 대한 답변부터 드리면 '그렇다'입니다. 그리고 말씀하신 대로 develop branch에서만 작업하면 이 내용이 master branch로 바뀌어 실제로는 master branch가 호스팅 됩니다.

gatsby 블로그 설정과 관련된 내용은 develop branch의 gatsby-config, gatsby-node.js, package.json 파일 위주로 보시면 되며, 이 중에서 branch->master 코드 변환에 관한 내용은 package.json 파일의 "scripts" key에 적혀있습니다.

"scripts" key에서 제일 마지막 칸에 "deploy"에 관한 내용을 보면 "npm run .... gh-pages -b master -d public"이라는 코드 라인이 존재하는데요, 만약에 develop branch 내에서 npm run deploy라는 명령어를 실행한다면 "deploy"에 적혀있는 코드들이 실행되면서 develop branch에서 작업한 내용들이 빌드되고, master에 올라가고, 깃헙 페이지에 호스팅 됩니다! (자동으로 변환되기 때문에 그냥 npm run deploy 명령어만 치면 끝입니다 ㅎㅎ)

이 외에도 gatsby 블로그를 개발할 때 쓰이는 명령어들이 (ex, gatsby develop) 존재하는데요 이 부분도 검색을 통해 찾아보시면 좀 더 개발하는데 도움이 되실 것 같습니다. 저도 처음에 블로그 만들 때 너무 고생을 많이 했는데...ㅠㅠ 화이팅입니다

hjh02 commented 2 years ago

넵 답변 감사합니다!

또 궁금한 점이 있다면 다른 이슈를 열게요!

다시 한번 감사합니다..!

yuhodots / yuhodots.github.io

Category 페이지 관련 #7