์๋
ํ์ธ์.
์คํํธ์
์์ 4๋
์ฐจ ํ๋ก ํธ์๋ ๋ฆฌ๋๋ก ์ผํ์ต๋๋ค.
React, Next.js, Vue.js, Nuxt.js, UI library ๋ฑ์ ๋ค๋ฃน๋๋ค.
Courses
Reviews
- Getting started with Next.js (feat. developing map services)
- Getting started with Next.js (feat. developing map services)
- Getting started with Next.js (feat. developing map services)
- Getting started with Next.js (feat. developing map services)
- Getting started with Next.js (feat. developing map services)
Posts
Q&A
next.js ๋ฉํฐํ ๋ฐํ์ ๊ด๋ จํด์ ์ง๋ฌธ ์ฌ๋ฆฝ๋๋ค..
์๋ ํ์ธ์. ๊ฐ์ธ ์ผ์ ์ผ๋ก ๋ต๋ณ์ด ๋ฆ์ด์ ธ์ ์ฃ์กํฉ๋๋คใ ใ ์ง๋ฌธํ์ ๋ด์ฉ์ ๋ํด ์ ์๋ ๊ฑด ์๋์ง๋ง, vercel github issue์์ ๊ด๋ จ๋ ๋ด์ฉ์ ์ฐพ์์ต๋๋ค.github issue: https://github.com/vercel/vercel/discussions/6197vercel.json: https://vercel.com/docs/projects/project-configuration#routesํ๋ก์ ํธ root์ /api ํด๋์ vercel.json ํ์ผ์ ๋ง๋ค๊ณ , vercel.json์ ํตํด config๋ฅผ ์กฐ์ํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๋ณด์ ๋๋ค. ์ง์ ํ ์คํธํด๋ณด์ง ๋ชปํ์ง๋ง ๋์์ด ๋์ จ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค!๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 217
Q&A
์์ฃผ ๊ธฐ์ด์ ์ธ ์ง๋ฌธ์ ๋๋ค.
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌ๋๋ฆฝ๋๋ค.๋ง์ํ์ ๋๋ก yarn start ๋ช ๋ น์ด๋ yarn build๋ก ๋น๋๋ ํ์ผ์ ์คํํ๋ ๋ช ๋ น์ด์ด๊ธฐ ๋๋ฌธ์, ์ฝ๋๊ฐ ๋ฐ๋์ด๋ ๋ฐ๋ก ๋ฆฌ๋ก๋ฉ๋์ง ์์ต๋๋ค. yarn dev๋ก ์คํํ ๊ฐ๋ฐ ํ๊ฒฝ์์๋ ์ฝ๋๋ฅผ ๋ฐ๊พธ๋ฉด ๋ฐ๋ก ํซ๋ฆฌ๋ก๋ฉ ๋ฉ๋๋ค! (https://nextjs.org/docs/getting-started/installation#manual-installation).๊ฐ์ฌํฉ๋๋ค :)
- 1
- 1
- 229
Q&A
์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ํ ๋, ์๋ฒ๋ ์ด๋์ ์๋ ๊ฑด๊ฐ์?
์๋ ํ์ธ์! ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค.์๋ฒ์ฌ์ด๋ ๋ ๋๋ง์ ํ ๋ ์๋ฒ์ ์์์ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ง์ต๋๋ค. ํ์ง๋ง ํ๋์ ์๋ฒ๋ง ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์๊ฐ ๋ง์์ง์ ๋ฐ๋ผ ๋ถํ๊ฐ ๋ฐ์ํ ์ ์์ต๋๋ค.๋ง์ํด์ฃผ์ ๋๋ก ๊ฐ์์์๋ Vercel์์ ์ ๊ณตํ๋ ์๋ฒ๋ฅผ ์ฌ์ฉํ๋๋ฐ, Vercel์ ์๋ฒ๋ ์ธ๊ณ ์ฌ๋ฌ ์ง์ญ์ ๋ถํฌํ๊ณ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ฌ์ฉ์์ ์์น์ ์๋ฒ ์ํฉ์ ๋ฐ๋ผ ์ ์ ํ ์๋ฒ์์ ๋น ๋ฅด๊ฒ ์๋ต๊ฐ์ ๋ด๋ ค์ค๋๋ค. ์ด์ ๊ด๋ จํ ๊ณต์๋ฌธ์ ๋งํฌ ์ฒจ๋ถํด๋๋ฆฝ๋๋ค! (https://vercel.com/docs/edge-network/regions)+์ค์ ๋ก ๊ฐ์ ์์ ์ค ๋คํธ์ํฌ ํญ์์ 'X-vercel-id'๋ฅผ ํ์ธํ๋ฉด 'icn1'(Seoul, South Korea) ์ ์์นํ ์๋ฒ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค. ํ์ง๋ง ์ ๋ ํ์ฌ ํด์ธ์ ์๊ธฐ ๋๋ฌธ์ ์ฌ์ดํธ์ ์ ์ํ์ฌ ๋คํธ์ํฌ ํญ์ ํ์ธํ๋ฉด(์ฌ์ง)์ด๋ ๊ฒ 'X-vercel-id'๊ฐ 'fra1'(Frankfurt, Germany) ๋ก ์๋ ์ค์ ๋ฉ๋๋ค.์๋ฒ๋ฆฌ์ค ๊ธฐ์ ์ด ๋ฐ์ ํจ์ ๋ฐ๋ผ ๊ฐ๋ฐ์๊ฐ ์ง์ ๋ฐฑ์๋๋ฅผ ๊ด๋ฆฌํ ํ์๊ฐ ์ ์ด์ง๊ณ ์๋ ๊ฒ ๊ฐ์ต๋๋ค. ํ์ง๋ง ๋ณด์ ๋ฑ์ ๋ฌธ์ ๋ก ์๋ฒ๋ฆฌ์ค๋ฅผ ๋์ ํ์ง ๋ชปํ๊ฑฐ๋ ์๋ฒ๋ฆฌ์ค๋ฅผ ์ฌ์ฉํ๋๋ผ๋ ํด๋น ์ธํ๋ผ๋ฅผ ํ์ตํ๊ณ ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉํ๋ ๊ฒ์ด ์ค์ํ๊ธฐ ๋๋ฌธ์ ๊พธ์คํ ๊ณต๋ถํด๋๊ฐ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค!
- 1
- 2
- 937
Q&A
์์ ์ ๋ฃ๋ค๊ฐ SSR์ ๊ดํ์ฌ..
์๋ ํ์ธ์ ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค. ํด์ธ์ ์์ด ๋ต๋ณ์ด ์กฐ๊ธ ๋ฆ์์ต๋๋คใ ใ ํ์ ๋ฆฌ์กํธ ๊ฐ๋ฐํ์๋ ๊ฒ๊ณผ ๋น์ทํ๊ฒ ๊ตฌํํ์๋ฉด ๋ฉ๋๋ค. (์ปดํฌ๋ํธ์์ ajax ํธ์ถ / react-query ์ฌ์ฉ ๋ฑ๋ฑ). ๋ค๋ง ๊ฐ์ฅ ์ต์ ์ Next.js ๋ฒ์ ์ ๊ฒฝ์ฐ Server Components ๋ผ๋ ์๋ก์ด ๊ธฐ๋ฅ์ ๋์ ํ์ฌ ๊ฐ์์์ ์ธ๊ธํ SSR์ ๋จ์ ์ ๋ณด์ํ๊ณ ์์ต๋๋ค. ๊ฐ์ ๋ฒ์ ๋ฐ์ ๋ด์ฉ์ด๋ผ ๊ด๋ จ ๋งํฌ๋ง ๋จ๊ฒจ๋๋ฆฌ์ง๋ง, ์ถํ์ ํ์ตํ๋ฉด ๋์์ด ๋์ค ๊ฒ ๊ฐ์ต๋๋ค! (https://nextjs.org/docs/app/building-your-application/rendering/server-components)ํ๋ก์ ํธ๋ง๋ค ์ฌ์ฉํด์ผํ๋ ๋ ๋๋ง ๋ฐฉ์์ด ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ ์ ํด์ง ๋ต์ ์์ง๋ง, ์ผ๋ฐ์ ์ธ ๊ฒฝ์ฐ๋ผ๋ฉด CSR ๋ฐฉ์์ด ๋ ํธํ ๊ฒ ๊ฐ์ต๋๋ค. SSR/SSG/CSR์ ๊ด๋ จ๋ ์์ ์ง๋ฌธ๋ค๋ ๋งํฌ ์ฒจ๋ถํฉ๋๋คใ ใ (https://www.inflearn.com/questions/947345/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EC%A7%80-%EA%B5%AC%ED%98%84%EC%8B%9C-csr-vs-ssrhttps://www.inflearn.com/questions/1028810/ssr-vs-ssg)๋ค! ๋ถ๋ถ์ ์ผ๋ก CSR์ ์ฌ์ฉํ๋ค๊ณ ํ๋๋ผ๋, ๋๋จธ์ง ๋ถ๋ถ์ SSG(or SSR)๋ก pre-rendering ํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค.๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 451
Q&A
interface ์ type
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!type์ type Lat = number; type Lng = number; export type Coordinates = [Lat, Lng];์ ๊ฐ์ด ๋ณ์นญ์ ๋ถ์ฌํ๋ ๋ฐ ์ฃผ๋ก ์ฐ๊ณ ์ ํ๊ณ , interface๋ ๋ง์ํ์ ๋๋ก props์ ๊ฐ์ ๊ฒฝ์ฐ์ ์ฐ๊ณ ์ ํ์ต๋๋ค.์ฝ๋๋ฅผ ํ์ธํด๋ณด๋ Props๋ type์ผ๋ก ์ง์ ํ ๊ฒฝ์ฐ๊ฐ ๋ช ๊ฐ์ง ๋ณด์ด๋๋ฐ, ํฐ ์ด์ ์์ด ์์ฑํ ๊ฒ์ด๋ interface๋ก ํต์ผํ์ ๋ ๋ ๊ฒ ๊ฐ์ต๋๋ค๐ ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 1
- 294
Q&A
์๋ฆฌ๋งจํธ๋ค์ ์์๊ด๊ณ๊ฐ ์ด๋ป๊ฒ ์ด๋ ๊ฒ ๋๋ ๊ถ๊ธํฉ๋๋ค.
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค!Marker ์ปดํฌ๋ํธ๊ฐ returnํ๋ ๋ถ๋ถ์ ๋ณด์๋ฉด return null; ์ด๋ผ๊ณ ๋์ด์์ ๊ฒ์ ๋๋ค. ์ฆ, ๋ง์ปค ์์ด์ฝ์ react์ ๋ ๋๋ง๋ถ์ ์ํด ๊ทธ๋ ค์ง๋ ๊ฒ์ด ์๋, Marker.tsx์ ์๋marker = new naver.maps.Marker({ map: map, position: new naver.maps.LatLng(...coordinates), icon, });์ฝ๋์ ์ํด ๊ทธ๋ ค์ง๋๋ค.๋ฐ๋ผ์ ๊ณผ ๊ฐ ๊ฒ์ผ๋ก๋ ๋ณ๋ ฌ ๊ตฌ์กฐ๋ก ๋ณด์ผ ์ ์์ง๋ง, ์ค์ ๋ก๋ naver map API์ ๋ฐฉ์๋๋ก ์๋ํ๊ฒ ๋ฉ๋๋ค. Marker API ๋ฌธ์๋ฅผ ํ์ด๋ณด์๋ฉด ์กฐ๊ธ ๋ ์ดํด๊ฐ ๋์ค ๊ฒ ๊ฐ์ต๋๋ค. ๊ด๋ จ ๋งํฌ ์ฒจ๋ถ๋๋ฆฝ๋๋คใ ใ (https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-marker-simple.example.htmlhttps://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html)๊ฐ์ฌํฉ๋๋ค :)
- 1
- 1
- 290
Q&A
onLoadํจ์ (scriptํ๊ทธ์ onLoad X)
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค.์ด์ด์ง๋ 3-3~3-5 ๊ฐ์์์ MapSection.tsx์ onLoad ํจ์๋ฅผ ์ถ๊ฐ๋ก ์์ฑํ๊ฒ ๋ฉ๋๋ค. ๊น๋ํ ์ฝ๋๋ฅผ ์ํด ๋ฏธ๋ฆฌ prop์ ๋ถ๋ฆฌํด๋์์ต๋๋คใ ใ ํด๋น ์ฝ๋๊ฐ naver map API์์ ์ง์ ํ ๋ฌธ๋ฒ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. naver map ๊ฐ์ฒด๋ฅผ ์์ฑํ ๋ naver.maps.Map ํด๋์ค๋ฅผ ์ฌ์ฉํ๊ณ , ์ฒซ๋ฒ์งธ ์ธ์๋ก ์ง๋๋ฅผ ์ฝ์ ํ HTML ์์ ํน์ id๋ฅผ ๋ฐ์ต๋๋ค. ์ดํด๋ฅผ ์ํด ํด๋น API ๋งํฌ ์ฒจ๋ถ๋๋ฆฝ๋๋ค! (https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html)+ํด๋น ๊ฐ์์ ์ค๋ช ๋์ ์๋ '๋ค์ด๋ฒ script load ์์ '๋ ๋ณด์๋ฉด ๋์์ด ๋ ๊ฒ ๊ฐ์ต๋๋ค.(์ฌ์ง)๊ฐ์ฌํฉ๋๋ค. :)
- 1
- 1
- 325
Q&A
dynamic์ ๋ํ ์ง๋ฌธ
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋คใ ใ ๊ฒฐ๋ก ๋ถํฐ ๋งํ์๋ฉด React์ ๋ฆฌ๋ ๋๋ง ์กฐ๊ฑด์ ์ํด ๋ฐ์ํ๋ ํ์์ ๋๋ค.const [data, setData] = useState(0); ... new Promise((resolve) => setTimeout(() => resolve(Math.random()), delayInSeconds * 1000) ).then((result) => setData(result)); ... ... ์์ ์ฝ๋๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋๋ค. setTimeout์์ ์ฃผ๊ธฐ์ ์ผ๋ก ์ปดํฌ๋ํธ์ ์ํ(data)๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค(์ฆ, ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง ๋จ). ๊ทธ๋ฆฌ๊ณ React๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ ๋๋ง๋๋ฉด ์์ ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋๋งํฉ๋๋ค. -> ์์ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๊ธฐ ๋๋ฌธ์ window.innerWidth๋ ๋ค์ ๊ณ์ฐ๋์ด ํ๋ฉด์ด ์ ๋ฐ์ดํธ๋ฉ๋๋ค.๊ฐ์ฌํฉ๋๋ค! :)
- 1
- 1
- 350
Q&A
SSR vs SSG
์๋ ํ์ธ์. ์ง๋ฌธ ๊ฐ์ฌํฉ๋๋ค.๋ค! ๋ณดํธ์ ์ธ ์น์๋น์ค๋ฅผ ๊ฐ๋ฐํ๋ค๋ฉด ์ค์๊ฐ์ฑ์ด ๊ทธ๋ ๊ฒ๊น์ง ํ์ํ ๊ฒฝ์ฐ๊ฐ ๋ง์ง ์๊ฒ ์ง๋ง, '๊ธ์ต(์ํ, ์ฃผ์)/๋ณ์/๋ ์จ' ๋ฑ ์ค์๊ฐ์ฑ์ด ์ค์ํ๊ณ + ์ค์๊ฐ์ด ์๋ ๊ฒฝ์ฐ ๋ฌธ์ ๊ฐ ์๊ธฐ๋ ํน์ํ ๋ถ์ผ์์๋ SSG๋ณด๋ค SSR(+ํ์์ ์น์์ผ๊ณผ ๊ฐ์ ๊ธฐ์ ๋ ํจ๊ป)์ ์ ํํด์ผํ ๊ฒ์ ๋๋ค.๊ทธ ์ธ์ ๊ฒฝ์ฐ์ ํ๋ก์ ํธ๋ง๋ค ์ํฉ์ด ๋ค ๋ฌ๋ผ์ ๊ทธ๋๋ง๋ค ์ ์ ํ ๋ ๋๋ง ๋ฐฉ์์ ์ ํํ๋ ๊ฒ์ด ์ข์๋ณด์ ๋๋คใ ใ ์ฆ๊ฑฐ์ด ์ฐํด ๋์๊ธธ ๋ฐ๋๋๋ค! :)
- 1
- 2
- 372
Q&A
NoSSR ๊ด๋ จํ ์ง๋ฌธ์ ๋๋ค:)
์๋ ํ์ธ์.๋ต๋ต ๋ง์ํ์ ๋๋ก ์ ๋๋คใ ใ ์ง๋ฌธ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 1
- 295