solar_system_11 solar_system_11

const d1 = new Date(2000, 2, 1); const d2 = new Date(2010, 4, 27); console.log(d1 > d2) // false console.log(d1 < d2) // true 기본적으로 위 식처럼 비교 연산자를 이용해 단순하게 Date를 비교할 수 있다. 그런데 저 식이 모두 false를 반환할 때가 있는데, 그건 두 Date의 형태가 달라서 발생한다. 나는 DB에 저장된 유효 기간과 현재 시간을 비교해서 해당 요청이 유효한지를 판단하는 코드를 작성해야 했는데, 이때 서버에서 받아 온 expiration 값(Date 형식)과 현재 시간을 반환하는 new Date()의 형태가 달라 앞서 언급한 문제가 발생하였다. 나는 아래와 같이 받아 온 값을 형태를 맞춰..

개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 Next.js documentation을 뜯어봤다. 여기서 Mux-video-api를 소개하고 있길래, 이걸로 비디오 넣는게 보편적인 방법이겠거니 싶어 해보았다. Optimizing: Videos | Next.js Recommendations and best practices for optimizing videos in your Next.js application. nextjs.org 위 사진처럼 굉장히 깔끔했다. (코드는 아래에 있음) next-video 패키지 설치 Embed a video player in your Next.js applications | Mux Quickly add video to your Next.js site using the..

포스팅을 너무 각 잡고 쓰려니까 오히려 안 쓰게 돼서, 아예 간단하게 작성하는 버그 해결 / 궁금한 점 해소 용 카테고리를 하나 팠다. 암튼 이 편한 카테고리의 첫 포스팅은 Swiper, 너로 정했다! 쓰고 보니 본 카테고리로 올려도 될 것 같아 격상시켰다. 렛츠고. 구현해야 하는 UI 사용자가 등록한 카드를 아래의 형태로 보여주고, 슬라이드 / 화살표 버튼을 이용하여 변경하는 UI를 작성하고자 한다. 이런 형태를 보통 Carousel Slider라고 하는데, 위의 키워드랑 Card list 등등의 키워드로 찾아본 라이브러리 중에서는 확장하기 편함 + 쓰기 쉬운 놈을 못 찾았다. React Swiper 처음부터 내 입맛대로 만드는 게 마음 편하긴 하지만, 내가 개발할 수 있는 시간은 한정되어 있어서 아래..

다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다.이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.js 프로젝트에 다중 언어 기능을 추가하는 방법을 다루고자 한다.나라마다 중요하게 받아들이는 정보가 다르고, 익숙한 디자인도 다르므로 사실 정확하게 현지화를 한다고 하면 국가별로 따로 웹 페이지를 만들어야 한다. 하지만, 우리는 개발 리소스가 한정되어 있고 언어만 바뀌면 웹 서비스를 사용할 수 있으니 이 방법으로도 충분하다. 사실 웹 개발이 어느 정도 진행된 지금, 초반에 추가한 Localization(Internationalization라고도 하지만 앞으로의 내용에서는 Localization으로 통일하겠다) ..

프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 ..

나는 맥북을 사용 중이라 MacOS 기준으로 작성하겠다. 윈도우에 개발환경을 세팅하는 방법도 크게 다르진 않음. 1. node.js 설치아래의 링크를 클릭한 후, 왼쪽의 LTS 버전을 눌러 다운로드 및 설치를 진행한다. Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. terminal 실행하여 npm 설치 확인 및 next.js 설치npm 설치 확인 (node.js 설치 패키지 안에 함께 내포됨)npm -vnext.js 설치npm install -g create-next-app// 에러 발생 시 아래의 코드처럼 앞에 sudo를 붙여 재실행// sudo npm install -g create..

(리서치한 내용 + 이미 알고 있던 내용) -> 제가 이해한대로 작성해서 틀린 부분이 있을 수도 있다는 점 유의해주세요..! 최근에는 웹 개발을 위한 다양한 프레임워크이 많아 복잡해보이지만, 결국 웹은 크게 3가지 부분으로 나눠진다. HTML 웹 페이지의 뼈대(구조)를 구성 JavaScript 페이지의 동작을 담당 CSS 페이지를 더 보기 좋도록 스타일을 추가 오랜만에 웹 개발 다시 시작해서 너무 설렌다! 가보자고~~ Basic 라이브러리 설치 npm js 라이브러리 관리를 도와주는 패키지 매니저로, 라이브러리의 설치나 수정, 삭제와 같은 관리가 쉬워진다. node.js 설치 시 함께 설치된다. // 패키지 설치 npm install 모시깽 // 패키지 수정 npm update 모시깽 // 패키지 삭제 ..

웹 개발의 가장 처음이 티스토리 관련이라니 살짝 아쉽긴 하지만, 개발 블로그로 거듭나기 위해서는 꼭 필요한 작업이었으므로.. 또 기존 방법이 가지고 있던 문제도 해결했으므로... 만족... 아래는 그 문제들로, 이것에 대한 해결 방법을 찾고 있는 분들은 바로 문제 해결 방법 쪽으로 넘어가셔도 좋습니다! '카테고리 글 더 보기' 플러그인 관련 문제 스크롤 전에 목차가 안 보이는 문제 왼쪽 표시바의 중앙이 안 맞는 문제(?) 첫 번째 콘텐츠 시작 전에 해당 목차에 있다고 표시되는 문제(?) 일단 내가 사용하는 Letter 스킨 기준이라 다른 스킨에서는 다르게 작동할 수 있는데, 그래도 위에서 언급한 네 가지 문제를 해결하는 데 조금이라도 도움이 될까 싶어 작성해봅니당 자동 목차 생성 사실 조금만 검색해보면 ..