CRA 배포하듯이 Next.js 환경에서 배포할 수 있다면 얼마나 좋을까? 야심차게 배포한 프로젝트가 빈 화면만 나왔었다. 놀란 마음에 개발자 도구를 살펴보니 빌드된 프로젝트의 index.html에서 불러오는 js 파일이나 스타일시트, img 태그의 소스 등 많은 요소의 경로가 문제였다. 당연히 콘솔에선 404오류가 났었다, url 앞에 호스트 주소를 써주는 등의 prefix 작업을 해줘야하는 것. 열심히 구글링해보니 이런 문제는 context를 뿌려줘서 해결할 수 있었다. 1. Prefix 적용 📂 asset prefix 설정 next.config.js 파일에 assetPrefix 속성을 추가한다. 이 설정은 css 설정 중 경로와 관련된 속성값 앞에 해당 문자열을 붙여준다. /** @type {imp..

요즘 Next.js랑 three.js를 공부해보고 있는데, 대지를 그려주거나 할 때 window 객체에 접근할 일이 자주 있습니다. 하지만 Next.js는 SSR을 기본으로 하기 때문에 서버에서 렌더링 하는 시점에선 전역변수 window를 가져올 수 없습니다. 방법은 두 가지가 있습니다. 1. dynamic 사용 import styles from "../styles/Home.module.css"; import dynamic from "next/dynamic"; const ThreeJSSetting = dynamic(() => import("../components/Example"), {ssr: false}); export default function Home() { return ( HELLO THREE..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) 🎛️ TO-DO Apps 저번이랑 결과물은 같지만 내용은 아예 다르다. 결론적으로 말하면 React에서는 dispatch와 subscribe 함수를 props로 받아와야 한다는 것! TypeScript에서 쓸 생각하니까 벌써 막막하다🤣 👜 store.js 따로 만들어주기. React에서 ReactDOM으로 렌더링해주는 과정에서 최상단에서 store를 뿌려줘야한다. 결론적으로 파일을 따로 만들어줘야한단 소리! store.js import { legacy_createStore } from "redux"; const ADD = 0; con..

기본에 충실하게 dfs를 써봅시다! 문제 요약 한국중학교에 다니는 학생들은 각자 정수 번호를 갖고 있습니다. 이 학교 학생 3명의 정수 번호를 더했을 때 0이 되면 3명의 학생은 삼총사라고 합니다. 예를 들어, 5명의 학생이 있고, 각각의 정수 번호가 순서대로 -2, 3, 0, 2, -5일 때, 첫 번째, 세 번째, 네 번째 학생의 정수 번호를 더하면 0이므로 세 학생은 삼총사입니다. 또한, 두 번째, 네 번째, 다섯 번째 학생의 정수 번호를 더해도 0이므로 세 학생도 삼총사입니다. 따라서 이 경우 한국중학교에서는 두 가지 방법으로 삼총사를 만들 수 있습니다. 한국중학교 학생들의 번호를 나타내는 정수 배열 number가 매개변수로 주어질 때, 학생들 중 삼총사를 만들 수 있는 방법의 수를 return 하..

문제 요약 영재는 택배상자를 트럭에 싣는 일을 합니다. 영재가 실어야 하는 택배상자는 크기가 모두 같으며 1번 상자부터 n번 상자까지 번호가 증가하는 순서대로 컨테이너 벨트에 일렬로 놓여 영재에게 전달됩니다. 컨테이너 벨트는 한 방향으로만 진행이 가능해서 벨트에 놓인 순서대로(1번 상자부터) 상자를 내릴 수 있습니다. 하지만 컨테이너 벨트에 놓인 순서대로 택배상자를 내려 바로 트럭에 싣게 되면 택배 기사님이 배달하는 순서와 택배상자가 실려 있는 순서가 맞지 않아 배달에 차질이 생깁니다. 따라서 택배 기사님이 미리 알려준 순서에 맞게 영재가 택배상자를 실어야 합니다. 만약 컨테이너 벨트의 맨 앞에 놓인 상자가 현재 트럭에 실어야 하는 순서가 아니라면 그 상자를 트럭에 실을 순서가 될 때까지 잠시 다른 곳에..

이 시리즈는 노마드 코더님의 "초보자를 위한 리덕스 101"을 보고 배운 내용을 정리합니다. 비약이나 틀린 내용이 있다면 언제든 댓글로 알려주세요..! (매우 환영입니다😀) [시작하기 전에] 이번 2편은 React가 아니라 순수 JavaScript 환경에서 실습을 해봅니다. 이후에 React-Redux도 다루니 다른 편을 참고해주세요! 🎛️ TO-DO Apps with Redux 결과물 저번 클래스에서 간단한 redux의 사용법을 알아봤다. 1. store를 안에서 primitive type의 state를 관리해보고, 2. state를 관리하는 다양한 기능의 함수를 정의한 다음, 3. action을 넣은뒤 dispatch로 실행하고 subscribe를 리스너로 써 볼 수 있었다. 이번엔 primitive..