본문 바로가기

분류 전체보기402

Pages Routing : 기본 세팅 (+쿼리 스트링, 동적 라우팅, 404) 페이지 라우터든 앱 라우터든 Next.js에서 프로젝트를 생성하고 나면 Next.js에서 기본적으로 작성해 놓은 페이지가 보이게 된다. 이것들을 먼저 제거해주는 것부터 시작해서 페이지 라우터 방식에서는 프로젝트 초기 세팅을 어떻게 하는지 살펴보겠다.index.tsx 내용 제거dev 명령어로 개발 서버를 실행시켜 보면 이러한 페이지가 나온다. 내가 만든 페이지가 아니므로 index.tsx 파일에서 제거해주겠다. 아래 사진에서는 import문을 지우지 않았는데 import문과 inter까지 전부 지워주면 된다.그러면 이렇게 된다.global.css 제거배경에 깔린 이상한 줄무늬가 맘에 들지 않는다. 이런 전역 스타일을 제거해준다.그러면 이렇게 된다.새로운 라우트(페이지) 만들기페이지 라우터 방식에서는 기본적.. Programing/Next.js 2024. 8. 28.
Next.js의 구 라우팅 방법, Pages Router Pages Router란?지금 Next.js에 입문하는 사람은 App Router 방식으로 라우팅을 처리하도록 배웠을 것이다. 그게 가장 최신버전의 방식이다.그러나 넥스트 13 버전 이전까지는 페이지 라우터 방식이 라우트를 만드는 방식이었다. 페이지 라우터 방식은 파일을 기반으로 라우트를 만드는 가장 직관적인 방식이다. 넥스트 13 버전부터 도입된 앱 라우터 방식은 디렉토리 기반으로 라우트를 만든다는 것과 큰 차이가 있다고 보면 된다.지금은 넥스트 15버전까지 나왔기 때문에 13버전 이전까지 메인으로 사용된 라우팅 방식이라고 설명하면 굉장히 레거시하고 오래된 방식이고 쓰면 안 될 것 같이 보이지만, 그렇진 않다. 넥스트의 버전업이 너무 빨라서 13, 14, 15까지 너무 많이 버전이 올라간 것처럼 보이지.. Programing/Next.js 2024. 8. 27.
Node.js로 구축한 백엔드 서버를 Supabase에 연결시키기 Supabase는 본 블로그에서 여러번 다룬 적이 있다.그러나 이런 방식은 혼자서 풀 스택 앱을 구축하는 방법이 아니라 현업 환경에서 이미 구축된 백엔드 서버와 연결하는 방식이니 실제 프로덕션 레벨에서의 작업을 이해하기 좋은 내용인 것 같다.Supabase 회원가입Supabase는 이제 웹 개발자라면 백엔드 개발자의 도움 없이도 서버를 구성할 수 있기 때문에 정말 많이 사용하는 것 같다.supabase에서 이메일로 회원가입도 가능하고, 무료 사용자에게는 프로젝트 2개를 만들 수 있게 해주고 사용량도 학습용으로는 충분하니 만들어보면 좋을 것 같다.다만 무료사용자는 일주일 이상 API 요청이 없으면 프로젝트가 pause 상태가 되고, 해제하는데 수십여 분이 걸리는 작업이므로 포트폴리오 같이 멈추면 안 되는 .. Programing/Server 2024. 8. 27.
개발자도구만으로 유튜브 자동자막 txt 파일로 스크래핑하기 여러 이유로 유튜브에서 몇 시간짜리 영상을 검토해야 하는 일이 올 수 있다.그런데 몇 십분이면 그걸 다 보고 있겠지만 십 수 시간이 되는 경우 영상을 다 보고 있는 것도 고통스럽지 않겠는가. Whisper AI나 vrew 같은 툴을 써서 보다 정확한 자막을 추출해낼 수 있지만, 복잡하고 또 돈이 들기 때문에그 정도는 아니고 대강 정도만 파악이 필요한 경우 웹 브라우저의 개발자 도구만으로도 자막과 타임스탬프를 추출할 수 있다. 단 유튜브에서 자동자막을 생성해준 경우만 가능하다.웬만하면 자동자막이 잘 생성이 되지만, 여러 언어가 섞여 있거나 음질이 좋지 않은 경우에는 자동자막이 생성되지 않는 것 같다.그런데 우리나라 영상에서는 그런 경우를 잘 못 봤고 인도인 유튜브에서 그런 현상이 많았던 것 같다. 유튜브 .. Programing/JavaScript 2024. 8. 26.
2024-08-25 비전공자 웹 개발 학습방법 추천 본인은 비전공자이며 30대가 넘는 나이에 웹 개발에 입문하였다. 시중에 널려있는 온라인 부트캠프에서 반년 간 학습을 하였는데, 과거로 돌아간다면 조금 더 효율적인 학습을 할 수 있었을텐데 하는 아쉬움은 어떤 일을 마무리하는 단계에서 매번 가지는 아쉬움인 것 같다.그런 의미에서 혹시나 비전공자로 웹 개발자에 입문하고자 하시는 분이 있다면 나의 조언이 어느정도 참고하실 만한 가치가 있길 바라본다. 시작하기 전고려해볼 점흥미가 있는가시작하기 전에 일단 나에게 먼저 이쪽 분야의 흥미가 있는지 확인을 해 보는 게 좋을 것 같다. 여러 가지 방법으로 알 수 있겠지만 일단 웹 개발이라고 한다면 자바스크립트 MDN 문서나 모던 자바스크립트 튜토리얼 등을 일주일간 하루에 네 시간씩 공부해보면서 이 내용이 흥미로운지 아니.. Programing/TIL 2024. 8. 25.

티스토리툴바