solar_system_11 solar_system_11

웹사이트를 구현할 때 popup modal을 query에 값을 확인해서 해당 값이 있으면 overlay로 현재 화면 위에 뜨는 방식으로 구현했다.그런데 이렇게 구현하다 보니 팝업을 띄우는 버튼을 눌렀을 때 router.push를 이용하는데,이게 쨌든 url을 바꾸다 보니까 계속 뒤에 있는 화면 스크롤이 처음으로 올라갔다. 근데 이게 굉장히 거슬린달까...팝업을 켰다가 끄면 응당 원래 화면 위치가 보일 것을 기대하는데, 갑자기 처음으로 올라가는 것이 부자연스러웠다. 이를 해결하기 위해 scroll restoration이라는 키워드로 검색을 해보았다.스크롤 유지 기능을 검색해보았을 때, 뒤로가기를 했을 때 전 페이지의 스크롤 유지하는 방법만 발견했다. (심지어 실험적인 기능)module.exports = {..

console.log일반적으로 JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용할 것이다.물론 콘솔 로그는 간편한 디버깅 도구이긴 하지만,보안 이슈가 발생할 우려가 있기에 실제로 배포되는 웹 어플리케이션에는 포함되지 않는 것이 좋다. ESLintESLint는 자바스크립트 코드에서 에러가 있는 부분에 표시를 해주는 정적 코드 분석 도구이다.일반적으로 Typescript, Prettier과 함께 웹 프로그래밍을 할 때 함께 설치되며, 코드의 퀄리티를 보장해준다.ESLint는 하나의 규칙으로 no-console 룰을 가지고 있는데,빌드(npm run build) 시 콘솔 로그가 포함되어 있을 경우 규칙 위반으로 처리하여 빌드가 정상적으로 완료되지 않는다. n..

// unscoped packagenpm uninstall // scoped packagenpm uninstall  더 자세한 내용은 아래의 공식 문서를 참고하자. Uninstalling packages and dependencies | npm DocsDocumentation for the npm registry, website, and command-line interfacedocs.npmjs.com 끗~

서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로..

개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 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..