윈티드 프리온보딩 사전 과제중에서 3번째 과제가 가장 어려웠다. 처음으로 깃헙 레포지토리에 가서 확인을 하는데 처음 보니 뭐가 어떤 기능인지 감도 오지 않았다. 하지만 3번쨰 과제가 가장 크게 도움이 된다고 하여서 포기하지 않고 여러 문서와 GPT를 활용해 검색을 하면서 찾아 보았다.
../node_modules/next/dist/server/lib/start-server.js 해당 경로에 next.js 서버를 실행 해주는 파일로 판단되는 곳을 찾게 되었다.
let targetHost = hostname;
await new Promise((resolve)=>{
server.on("listening", ()=>{
const addr = server.address();
port = typeof addr === "object" ? (addr == null ? void 0 : addr.port) || port : port;
let host = !hostname || hostname === "0.0.0.0" ? "localhost" : hostname;
let normalizedHostname = hostname || "0.0.0.0";
if ((0, _net.isIPv6)(hostname)) {
host = host === "::" ? "[::1]" : `[${host}]`;
normalizedHostname = `[${hostname}]`;
}
targetHost = host;
const appUrl = `http://${host}:${port}`;
_log.ready(`started server on ${normalizedHostname}${(port + "").startsWith(":") ? "" : ":"}${port}, url: ${appUrl}`);
resolve();
});
server.listen(port, hostname);
});해당 코드가 npm start를 하게되면 시작 되는 코드 부분이다. 비동기로 server.on함수에 "listening" 을 넣어 서버가 켜는게 가능한지 확인 하는 작업을 한다. 이후 주소와 포트를 정하고 포트와 서버가 사용 가능하면 _log.ready()함수가 실행 되면서 터미널에
started server on 0.0.0.0:3000, url: http://localhost:3000 이라는 정보가 나오게 되면서 서버가 실행된다.
npm start 시 에러가 나면 해당 함수로 빠지게 되는걸로 확인된다. (에러마다 해당 에러로 이동 될수도 있다고 판단됨)
../node_modules/next/dist/server/next-server.js 해당 경로에 next.js 서버를 실행 해주는 파일로 판단되는 곳을 찾게 되었다.
getBuildId() {
const buildIdFile = (0, _path.join)(this.distDir, _constants.BUILD_ID_FILE);
try {
return _fs.default.readFileSync(buildIdFile, "utf8").trim();
} catch (err) {
if (!_fs.default.existsSync(buildIdFile)) {
throw new Error(`Could not find a production build in the '${this.distDir}' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id`);
}
throw err;
}
}
../node_modules/next/dist/server/base-server.js
해당 파일에 Server클래스가 있어서 서버에서 사용 되는 관련 코드들이 정리되어있다.
해당 코드는 양이 많아서 따로 추가는 하지 않았다.
마지막으로 next.js가 npm run dev를 해서 개발을 할때 바로바로 수정 되고 하는게 next.js에서 소켓을 열어서 hot reloading 기능을 사용하는것같다. 지금까지는 어떤 방법으로 되는지 몰랐는데 해당 코드를 보다 보니 조금씩 사이클이 눈에 들어오기 시작했다.
댓글