전체 글 44

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (5) - 방명록 (feat. Utterances)

블로그를 적으시는 분들이나 여기저기 찾아보면 깃허브와 연동하여 댓글 기능을 구현하는 모습들을 종종 볼 수 있다.아직 블로그 형식으로 제작하지는 않았지만, 방명록 형식을 통해 해당 기능을 추가해볼까 한다. Utterances를 이용하여 구현한다. 1. Github App에 설치한다. 2. 사용할 레파지토리를 설정한다.Utterances는 생성된 레파지토리에 이슈를 생성하여 해당 이슈에 댓글을 다는 형식으로 구성되어 있다. whosbax-dev-comment라는 새로운 레파지토리를 생성하여 설정했다. 3. [이름]/[레파지토리] 형식으로 작성한 후, 포스트랑 이슈 매핑, 라벨, 테마를 어떻게 할지 하단에서 선택한다.현재 내가 작성한 방명록의 pathname은 guestbook으로 지정해뒀다. 여기서 작성/선..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (4) - SEO

페이지의 구조가 완성되고 Netlify에 배포가 되었다면, 이제 SEO를 적용해보자. - Netlify는 SignUp 이후 깃 레파지토리만 연결하면 자동으로 main 브랜치로부터 push시 배포를 적용해준다- SEO는 Search Engine Optimization, 검색엔진 최적화의 줄임말로, 검색엔진이 콘텐츠를 이해하도록 돕고, 사용자가 사이트를 찾고, 검색엔진을 통해 사이트를 방문할지 여부를 결정하도록 돕는다.https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=ko\ SEO 기본 가이드: 기본사항 | Google 검색 센터  |  문서  |  Google for Developers검색엔진 최적화의 기본사항에 관한 지..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (3) - 페이지 및 폴더 구조

우선 개인적으로 Tailwind의 코드 형식을 썩 좋아하지 않는다. 가독성뿐만 아니라 인라인 스타일을 먹여 놓은 듯한 기분이 들어서 아직 어색한게 아닐까 하는 생각이 든다.가장 선호하는 방식은 기존 유명한 라이브러리(Bootstrap, Material UI, AntD 등)에 scss 형식으로 직접 수정하는 방식인데, 이왕 하는거 그냥 구조를 적절히 이해하면서 코드를 작성해보자- 라는 생각으로 scss로만 진행했다. (추후 NextUI 적용을 위해 Tailwind를 어쩔 수 없이 반영한다..ㅜ) src 폴더 안에 app 폴더와 model 폴더가 나누어져 있고, 모든 페이지는 app 폴더 내부에서 움직인다. 전체적인 css의 통일성을 위해서 globals.css에 내가 사용하려는 색상을 변수로 지정하여 사용..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (2)

어설프게 만들고 싶지 않다. 하지만 할 수 있는 부분의 한계는 명확했기에 할 수 있는 부분과 하지 않은 부분을 명확하게 구분할 필요가 있었다. 1. 어느 기능까지 구현/표현할 것인가?2. 디자인은 무엇을 참고할 것인가?3. 호스팅은 무엇을 이용할 것인가? '나를 소개하는 홈페이지를 만들기'를 주제로 나를 어디까지 소개할 것인가.빠른 시간 안에 홈페이지를 완성하고 싶기 때문에 우선은 노션에 적어뒀던 개인 이력서를 옮기는 방향으로 목표를 정했다. 추후 필요하다면 기능을 추가하는 방식으로 정해도 되니, 1차부터 마무리 짓기 위한 선택이다. 노션에 적어뒀던 이력서를 보니, 세부 페이지 없이 한 페이지에 진행했던 프로젝트와 그 내용을 적어뒀었다. 세부 페이지를 뜯어서 만드는 것이 좋을까 고민 끝에 메인 페이지(..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (1)

알다시피 근본은 공식문서. https://nextjs.org/docs Docs | Next.jsWelcome to the Next.js Documentation.nextjs.org node.js 18.17 버전 이상으로 지원한다. npx create-next-app@latest 따끈따끈한 신상으로 시작해보자. What is your project named? my-appWould you like to use TypeScript? No / YesWould you like to use ESLint? No / YesWould you like to use Tailwind CSS? No / YesWould you like to use `src/` directory? No / YesWould you like to ..

[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)

오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적여볼까한다. 대단한건 없으니 그냥 참고하시고, 이상한 점은 댓글로 무자비하게 피드백 주시면 적절히 수용하겠습니다. https://whosbax.netlify.app/ 꿈이 많은 어른 아이 : 박상호하고 싶은 것도 이루고 싶은 것도 너무나 많은, 어른이지만 아이처럼 - ${utils.title}whosbax.netlify.app

프랑켄슈타인 | 누가 괴물인가

'프랑켄슈타인'이라는 이름을 들으면 우리는 거대한 괴물의 모습을 생각하곤 한다. 하지만 빅터 프랑켄슈타인은 우리가 이야기하는 괴물을 만든 사람의 이름이지, 실제론 괴물의 이름은 없다. 그저 괴물이라고 불릴 뿐이다. 그(괴물이라는 단어를 사용하고 싶지 않아서 다음처럼 표기하려한다.)는 세상에 손 잡을 사람 하나 없이 시작한다. 자신을 창조한 아버지라는 사람은 자신의 모습을 보고 도망을 갔으며, 타인의 행복을 위해 뻗은 손을 본 다른 이들은 기겁을 하고 배척하기 급급하다. 그는 자신의 창조주인 빅터에게 자신과 같이 어울릴 신부를 만들어 달라고 요청하나, 결국 이는 성사되지 않는다. 빅터를 미워했지만, 사랑했으며 결국 그가 죽었을 때 가장 슬퍼한 사람이다. 본인을 이해하고, 인간을 이해할수록 그는 사랑을 갈구..

별 헤는 밤 - 심야 버스 안에서

나는 늦은 시간이면 되도록 버스를 타곤 한다. 창가 쪽에 앉아 밖을 내다보면 수많은 별들이 내게로 쏟아지는 기분을 느끼며, 조금은 차가워진 창문이 나를 기분 좋게 한다. 오늘은 옆자리에 아무도 앉지 않길 희망하며, 가방을 끌어 앉은 채 이어폰을 귀에 꽂는다. 매일 듣는 노래를 다시 재생하며 세상에서 나의 시간을 멈춘다. 첫 번째 별에는 도심의 오늘이 찬란하게 빛나고 있다. 강 아래의, 서울에서 가장 바쁜 지역의 꺼지지 않을 빛들과 하늘 높은 줄 모르는 건물들을 보면 영원한 찬란함을 약속하는 듯하다. 하지만 바쁜 발걸음 위에 회색에 가까운 그들의 표정은, 멀리서 보는 모습과는 거리가 멀어 보인다. 그들의 찬란함은 강 아래 빛나는 길거리가 아닌, 오늘 아침의 온기가 남아 있는 집 안에서 볼 수 있는 게 아닐..

일상 2024.03.28

데미안 | 진정한 나를 찾는 여정

직장인들은 늘 사직서를 마음에 품고 산다는 이야기가 있다. 이 책은 ‘사직서를 제출할 것이냐’는 갈림길에 서있던 시기에 만났다. ​ 동네에 꽤 큰 카페에서 사촌 누나와 만나기로 약속을 잡았다. 다른 별 고민과 의도 없이, 그저 가족이라는 단어로 만나 가벼운 일상 대화를 하기 위함이었다. 그러나 “요즘 문제없지?”라는 질문에, 머릿속에 쏟아지는 단어들을 누나에게 뱉어내면서 급격하게 무거워졌다. ​ 싱클레어는 데미안을 만나 크로머와 술로 피폐한 삶 등 다양한 어두운 모습의 세계에서 벗어날 수 있게 된다. 그때 데미안은 아브라삭스를 언급하면서, 하나의 편지를 쓴다. 새는 알에서 나오기 위해 투쟁한다. 알은 세계이다. 태어나려고 하는 자는 누구든 하나의 세계를 파괴하여야 한다. 새는 신을 향해 날아간다. 그 신..

탓 - 잔재

"오늘 점 뺄 수 있나요?" 간호사는 당일 예약은 힘들지만, 점을 몇 개나 뺄 생각이냐고 되물었다. 빼고 싶은 점은 수두룩 하지만 한 개만 이야기하니 빨리 와 달라는 대답으로 전화를 끊었다. 추리닝에 따뜻한 후리스를 하나 걸치고 빠르게 병원으로 향했다. 비가 올 것만 같은 우중충 날씨에 '우산을 갖고 올 걸'이라며 발걸음을 재촉했다. 간단히 인적사항과 점의 위치를 설명하니, 시술 방식을 안내하며 결제를 진행했다. 생각보다 비싼 가격에 흠칫 놀랬지만, 태연하게 안내문을 받아 들고 자리에 앉았다. 점이 깊어서 앞으로 추가 진료가 필요할 수 있다는 의사 선생님의 설명을 듣고 시술대에 누워 눈을 감았다. - 올해로 나는 아홉수를 맞이했다. 사주는 잘 모르지만, 사주상으로는 삼재의 마지막 해가 되어 각별히 조심하..

일상 2024.03.26