먼저, welcome page 이후에 마주하는 main page는 크게 4개의 파트로 구성할 예정이다. 대충 jsx로 이런 느낌이다. export default function Home() { return ( ); } 오늘은 그 첫번째인 intro 파트를 어떻게 자연스럽게 welcome page와 연결시키는지이다. # Welcome to Intro Intro 파트는 앞서 가구현한 welcome page를 지나면 처음으로 마주하는 페이지이다. 그렇기 때문에 welcome page와 intro page가 연속성있게 연결되어 라우팅 과정이 자연스럽게 느껴지기를 원했다. 이를 위해서 내가 택한 방법은 1. welcome page에서 클릭하면 가속되는 것을 이용해 사용자가 클릭을 오래 하고 있게끔 유도한다. 2...
앞선 글에서도 말하였듯이 아래 코드펜 프로젝트를 기반으로 welcome page를 제작하였다. https://codepen.io/akm2/pen/RwQXLdP # 조금 더 구체적인 컨셉 그렇다고 저걸 그대로 가져다 쓰기에는 허전하다. 저 파티클은 우주 컨셉의 배경일 뿐, 주인공이 될 수는 없다. 그렇다면 메인 모델은 누가 되어야 할 것인가? 나는 주인공을 혜성으로 정했다. 우주를 자유로이 유영하는 아름다운 천체이자 미지의 세계로 두려움없이, 또 끊임없이 나아가는 낭만을 품은 천체이다. 또한 여러 공부를 하다보면 마주치는 'deep dive'란 용어에 가장 잘 어울리는 존재이며 아름다운 꼬리를 남기는 모습이 끊임없이 탐구하며 발자취를 남겨가는 모습과 닮았다고 느껴졌다. 그럼 이 각설하고, # 구현 코드펜 ..
# 시작하기에 앞서 Next.js로 뭘 만들까 하다가 아이디어가 없어 한동안 알고리즘 공부만 하고 있었는데, 가장 중요한걸 빠뜨리고 있었다. 프론트엔드 개발자라면 자기 페이지 하나 쯤은 있어야 하는데, 그게 없다...! 고로 만든다. (이걸 이제야 생각하는 나 자신 반성하자...) # 프로젝트 구상 크게 두 페이지로 구성할 계획이다. 1. Welcome page 뭐든지 첫 인상이 가장 중요하다고 하였다. 여러 프론트엔드 개발자 분들의 포트폴리오를 검색해봤고, 그 중 아래 페이지가 가장 인상깊었다 . http://parkjin.com/ 방문자와 상호작용할 수 있는 welcome page를 준비하고 해당 상호작용을 자연스레 자신의 스토리와 연결짓는 말 그대로 순식간에 방문자를 자신의 이야기 속으로 빨아들이는..
아래와 같은 결과물을 목표로 작업하였다. 구현 완료 후 최종 directory 구조는 아래와 같다. # Backend 먼저 mysql로 schema와 table을 생성하고 샘플 데이터를 추가하였다. 이제 Next.js에서 해당 DB를 조회하고 수정하는 기능을 구현하여야 한다. 앞선 글에서 언급했듯이 Next.js의 route handler 기능을 사용할 것이므로 app/api/todoList/ 폴더를 생성하고 그 내부에 route.ts 파일을 생성하였다. 이 route.ts 파일에 각 HTTP method를 처리할 api를 구현하면 front 단에서 http://localhost:3000/api/todoList에 요청을 보낼 수 있다. 먼저 DB 접속을 위한 api를 구성하자. app/api에 db.ts..
Next.js 공부도 할 겸 간단한 TODO list 앱을 만들며 CRUD 구현을 해보려 한다. # 요구 사항 원하는 앱의 동작은 다음과 같다. mysql DB에서 저장된 todo list를 불러와 보여준다. 새로운 todo를 추가하거나 기존 todo를 삭제, 수정하여 DB에 저장한다. todo list의 변경사항을 실시간으로 화면의 todo list에 보여준다. # 설계 - Frontend Next.js 13을 사용하는 만큼 server component로 프로젝트를 구성하고 싶었으나, 3번째 요구사항에서 걸려 client component를 사용하기로 하였다. server component를 사용하는 경우 todo list의 변경이 있을 때 server component를 새로 렌더링 할 수 없고, ..
구글 플레이 스토어에 등록하는 전체적인 과정은 아래 글을 참고하여 진행하였다. https://velog.io/@wisdom_lee/%ED%81%AC%EB%A1%AC-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8Chrome-extension-%EA%B0%9C%EB%B0%9C-%EA%B0%80%EC%9D%B4%EB%93%9C 크롬 확장 프로그램(Chrome extension) 개발 가이드 크롬 확장 프로그램을 개발하기 전에 기본적으로 알아두어야 하는 내용 velog.io 하지만 결과는... # 구글 크롬 익스텐션 제출 결과 스팸이라니 꽤나 당황스럽다. 심지어 따로 심사도 거치지 않고 자동으로 바로 거부되었다. 위반사항에 대한 글을 살펴보니 아래 조항이 문..
