개발 기록17 좌충우돌 블로그 Next.js로 마이그레이션하기 저는 지금 이 글이 올라온 티스토리 블로그 외에도, 바닥부터 만드는 블로그 개발기에서 만들었던 블로그를 함께 사용하고 있습니다. 개인적인 이야기들을 많이 적는 용도로 사용해서 크게 신경쓰고 있지는 않았지만, 블로그에게는 치명적인 문제점이 하나 있었습니다. 바로 SEO가 제대로 적용되지 않는다는 점이었는데요. 실제로 블로그 글을 트위터나 카카오톡과 같은 메신저에 공유하게되면 기본적으로 설정된 메타 데이터만 표시될뿐, 포스트의 정확한 정보나 설명이 전혀 보이지 않았습니다. SSR을 적용하면 쉽게 해결할 수 있는 문제이지만 아직까지 사용해본적이 없어서 미루고만 있었던 문제였습니다. 그러던중 이번에 Next.js의 13 버전이 어느정도 안정화가 되었다는 소식을 듣고, 내친김에 블로그에 SSR 방식을 적용해보기로.. 2023. 7. 28. 썸네일 생성기를 리뉴얼 했어요 지금으로부터 약 1년 전, 블로그 포스팅에 사용하기 위해 썸네일을 생성해주는 프로그램을 만들었습니다. 이때 만든 프로그램을 지금까지도 만족스럽게 쭉 써오고 있었는데, 몇 가지 불편한 점이 있었으나 기술적인 역량이 부족하여 손대지 못하고 있었습니다. 🚩 이전에 만들었던 썸네일 생성기 제작기 썸네일 생성기를 만들었어요 (Thumbnail generator) 이번에 우아한테크코스를 진행하며 생각해오던 목표 중 하나가 기술적으로 성장해서 이전에 진행했던 프로젝트들을 리팩토링 하는 것이었습니다. 현재까지 가장 많이 사용했었고, 앞으로도 계속 사용할 예정이며 직접 사용하며 느꼈던 불편점들이 명확했던 썸네일 생성기가 첫 번째 대상이 되었습니다. 현재 프로젝트의 문제점 우선 기술스택부터 점검하였습니다. 기존의 썸네일 .. 2022. 12. 12. 모임 서비스를 개발하며 (모두 모여라 개발기) 2022 . 06 . 22 ~ 2022 . 10 . 22 우아한테크코스 레벨 3 ~ 4에 거쳐 진행된 팀 프로젝트가 21일 데모데이를 끝으로 마무리 되었습니다. 제가 참여한 팀에서는 "모두 모여라"라는 모임 생성 & 참여 서비스를 개발하게 되었는데, 지난 네 달간의 개발 과정을 정리해보는 시간을 가지려고 합니다. 팀 규칙 정하기 모두 모여라(이하 모모) 팀은 백엔드 크루 4명과 프론트엔드 크루 2명, 총 6명으로 구성된 팀입니다. 여러 명이 함께 개발을 해야하다보니 앞으로의 원활한 진행을 위해 일관성 있는 규칙이 필요했습니다. 간단한 시간 약속부터 회의나 코드 리뷰 방식까지 공통적인 팀 규칙을 정하고, 각 분야별로 구체적으로 필요한 규칙이 있으면 정하였습니다. 정했던 규칙들 중 4번 나만 알지 않기, 나.. 2022. 10. 23. 바닥부터 만드는 블로그 개발기 드디어 미루고 미루던 블로그 프로젝트의 첫 삽을 떴습니다. 그동안 "직접 만든 블로그 하나쯤은 있어야지!" 라고 막연히 생각만 하고 있었는데, 이런 저런 핑계만 대고 있으면 평생 시작도 못할 것 같아서 일단 무작정 시작해보기로 했습니다. 마침 감정 회고나 특별한 이벤트가 없는 근황을 원래 사용하던 이 기술 블로그에 그대로 싣기에는 좀 부끄러워서 새로운 공간이 하나 필요하다 느꼈던 차여서, 이번에 만들 블로그를 그러한 글들을 기록하는 목적의 공간으로 사용해보기로 했습니다. 무작정 레포지토리부터 만들고 있으려니 어떤 분께서 DDD(도메인 주도 개발) 를 "일단 도메인을 사면 개발하게 된다" 로 해석하신 글이 문득 생각났는데, 나중에 재미 붙여서 새벽 시간 쪼개가며 개발하던 걸 보면 정말 시작이 중요한 것 같.. 2022. 10. 2. 썸네일 생성기를 만들었어요 (Thumbnail generator) 오랜만의 토이 프로젝트입니다. 그동안 블로그 포스트를 작성하며 매번 썸네일을 직접 만들었는데, 대단한 퀄리티는 아니었지만 매번 이미지 편집 프로그램을 이용하는 과정이 조금 번거로웠습니다. 이 정도의 간단한 이미지 정도라면 프로그램으로 만들어 사용하는게 낫지 않을까? 라는 생각이 들어 썸네일을 생성해주는 프로젝트를 진행해보기로 하였습니다. 구상 가장 익숙한 기술 스택인 자바스크립트와 노드를 이용하여 제작할 예정이었으니, 어떤 방식으로 작동할지 먼저 구상하고 그에 맞는 라이브러리를 찾기로 계획했습니다. 먼저 우리가 만들 썸네일 생성기는 이미지를 배경으로 하고, 가운데의 대제목과 그 밑에 조그만한 부제목으로 이루어진 간단한 형태의 썸네일을 만들어주는 방식으로 작동할것입니다. 그렇다면 먼저 css를 사용해 원하.. 2021. 7. 10. A Line Translate : 한줄 번역기를 만들었어요. (크롬 확장 프로그램 개발 과정, Chrome extensions) #3 A Line Translate : 한줄 번역기를 만들었어요. #2 에 이어지는 포스팅입니다. 마지막으로 사용자들이 번역 된 결과를 확인할 수 있도록 하는 기능들을 만들어봅시다. 우선 지난시간에 호스팅 했던 api 서버를 그냥 사용하게 되면, 정상적으로 작동하지 않습니다. 그 이유는 연결을 요청하는 위치와 데이터를 공급해주는 주소가 다르기 때문인데요, 이를 CORS (Cross-origin resource sharing) 에러라고 합니다. 간단히 말하면, 서버의 입장에서 불쑥 낯선 사람이 찾아와 데이터를 달라고 요청한 것과 같습니다. 이때 함부로 데이터를 제공하게되면 어떤 보안상의 문제가 발생할지 모르기 때문에 서버가 데이터를 주고받는 범위는 오직 본인의 영역에서만 이루어져야 안전하다고 할 수 있습니다. .. 2021. 1. 2. 이전 1 2 3 다음
