조용하지않는개발Blog

지금까지 작업한 작업물을 실제 배포를 해봅시다. 다양한 방법으로 서버를 올릴 수 있는데 그중 저는 AWS에서 lightsail를 이용하였습니다. lightsail나 EC2나 똑같이 작업 시행해 본 결과 둘 다 잘되는 것을 확인했습니다. gcp는 확인하지 못하였지만 비슷하게 될 것 입니다. 또한 참고한 사이트들은 아래에 참고에 작성해 놓겠습니다. 2022.06.06 기준 인스턴스 생성하기 aws lightsail에 들어가서 Create instance를 클릭하기 리눅스에서 OS only에서 우분투 20.04를 설치합니다. 나머지는 건드리지 않아도 되고 마지막에 인스턴스 이름은 원하는 것으로 변경하면 됩니다. 생성을 누르면 첫 화면에서 위 그림처럼 생성이 되고 있을 겁니다. 조금만 기다리면 실행 중으로 바뀔..

https://nextjs.org/learn/basics/api-routes Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~ Next.js는 API Routes를 지원하므로 API 엔드포인트를 Node.js 서버리스 기능으로 쉽게 생성할 수 있습니다. 블로그 앱에서 꼭..

오랜만에 이어서 글을 작성하겠습니다. 여러가지로 바빠서 작성 못했지만 이제 꾸준히 작성하여 마무리 짓겠습니다! 이전에 이어서 아래 주소를 들어가면 시작하는 곳이 똑같을 거예요 https://nextjs.org/learn/basics/dynamic-routes/render-markdown Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 ..

이전 글에서 데이터를 채워 놓은 상태이지만 개별 블로그 페이지를 만들지 않은 상태입니다. 오늘은 그 개별 블로그 페이지를 만들어봅시다.! https://nextjs.org/learn/basics/dynamic-routes Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~..

저번 시간에 이어서 사전 렌더링과 데이터 가져오는 것에 대해서 이야기하겠습니다. https://nextjs.org/learn/basics/data-fetching/with-data Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~ 데이터가 있거나 없는 정적 생성하기 정적..

https://nextjs.org/learn/basics/data-fetching Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~ 우리는 블로그를 만들고 싶지만,아직 블로그에 사용할 콘텐츠를 추가하지 않았습니다. 이번 시간에는 외부 블로그 데이터를 앱으로 가져오는 방법..

오늘은 CSS부분을 다루면서 마무리 디자인 관련해서는 마무리 하겠습니다. https://nextjs.org/learn/basics/assets-metadata-css/css-styling Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~ CSS 스타일링 이제 CSS에 대..

저번 시간에 이어서 이번시간에는 디자인과 관련된 부분을 배워보겠습니다. https://nextjs.org/learn/basics/assets-metadata-css Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~ 현재까지 진행한 2번째 페이지에는 스타일 된게 없습니다...

저번 시간에 첫 앱을 만들어 보았습니다. 지금 앱은 페이지가 하나뿐입니다. 웹사이트와 웹 애플리케이션에는 일반적으로 다양한 페이지가 있습니다. 그렇기에 이번 시간에는 페이지 간 탐색에 대해 배워 보겠습니다. https://nextjs.org/learn/basics/navigate-between-pages Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작..

저번시간까지 기본을 배웠다면 이제 실제로 웹 페이지를 만들어볼까요?? 이 역시 next.js에서 기본적으로 사용방법을 알려주며 공부할 수 있게 되어 있답니다! 저역시 이것을 기본으로 Next.js에 접근하는게 좋겠다고 생각이 들었고 이렇게 글을 작성하게 되었습니다.! https://nextjs.org/learn/basics/create-nextjs-app Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org nextjs의 ..