조용하지않는개발Blog

뭔가 next.js를 배우기 전에 react를 많이 배우는 느낌이지만 기본적으로 알고있어야 next.js를 좀더 쉽게 이해하기 때문에 조금만 더 참고 공부해보아요! https://nextjs.org/learn/foundations/from-javascript-to-react/displaying-data-with-props 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 오늘의 분량은 이 사이트에 들어가보면 영어 원본이..

이전에 이어서 계속 진행해 보겠습니다. https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components 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 위 사이트에 이어서 진행하게 됩니다. 구성 요소로 UI 빌드 사용자 인터페이스는 구성 요소 라고 하는 더 작은 빌딩 블록으로 나눌 수 있습니다 . 구성 요소를 사용하면 자체..

저번에 이어서 기본을 배우기 위해 계속 진행하겠습니다. react 시작하기 프로젝트에서 React를 사용하려면 https://unpkg.com/ 라는 외부 웹사이트에서 2개의 React 스크립트를 로드할 수 있다. - react.development.js 는 핵심 React 라이브러리이다. - react-dom.development.js는 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공한다. 일반 JavaScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render()메서드를 사용하여 #app 요소 내에서 제목을 렌더링하도록 React에 지시할 수 있다. 그러나 브라우저에서 이 코드를 실행하려고 하면 구문 오류가 발생합니다. 이유는 ...이 유효하..

저건 블로그에 이어서 Next.js를 알아보기 전에 알아봐야할 javascript와 react에 대해 알아보고 넘어가야한다. 이 글은 next.js learn의 원본을 참고하여 한글로 작성해 보려고한다. https://nextjs.org/learn/foundations/from-javascript-to-react 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 사용자 인터페이스 렌더링 React가 어떻게 작동하는지 이..

회사에서 웹 개발을 react로 하며 nextjs를 접하게 되었는데 nextjs는 무엇인지 왜 사용하는지 기초부터 천천히 배우며 기록을하면 좋지 않을까 싶어서 처음을 시작하게 되었다. 모든지 기본은 각 프레임워크에서 제공하는 교육을 받는게 제일 베스트라고 생각이 든다. 이후에는 다양하게 활용을 하기위해 문서나 다른 사람들이 이미 짜놓은 코드리뷰를 하며 마지막으로는 내가 만들고 싶은 웹 페이지를 만들어 보는 것이다. 나 역시 재미있게 만들어볼 웹페이지를 몇개 구상중이기에 이를 nextjs로 만들어 볼 생각이다. 이를 위한 첫 걸음을 시작해 보려고한다. 이 글은 next.js learn의 원본을 참고하여 한글로 작성해 보려고한다. https://nextjs.org/learn/foundations/about-..

이전 게시글에서 튜토리얼로 간단하게 배우고 이어서 추가적으로 git을 배워봅시다. 이전 글: https://choyoungjang.tistory.com/15 git을 사용하여 버전관리를 해보자! 간단한 튜토리얼 -1 저번에 git이 무엇인지 소개하는 글을 작성하고 이번에는 어떻게 사용을 사용을 하는지 어떻게 이용하면 될지 작성을 해보려고합니다. 이전 git 설명: https://choyoungjang.tistory.com/11 git이란? 요즘 개 choyoungjang.tistory.com 이번에는 branch, checkout, merge에 대해 추가적으로 설명해 드리겠습니다. git branch & git checkout branch는 한글로 말하면 분기를 의미하며 작업을 진행할 때 분기를 나누어 ..

저번에 git이 무엇인지 소개하는 글을 작성하고 이번에는 어떻게 사용을 사용을 하는지 어떻게 이용하면 될지 작성을 해보려고합니다. 이전 git 설명: https://choyoungjang.tistory.com/11 git이란? 요즘 개발자라면 웬만해서는 git에 대해서 잘알고있고 포트폴리오에서 보여주기 때문에 다들 사용하고있습니다. 저 역시 코딩 테스트 기록용, 제가 했던 개발 코드 공유, 회사 프로젝트 관리용 choyoungjang.tistory.com 또한 튜토리얼 정도이기에 로컬환경에서 (github-원격환경) 사용하는 방법만을 소개하겠습니다. 먼저 깃이 설치 되었다는 가정하에 진행을 하겠습니다. 설치는 git 홈페이지에서 컴퓨터 os에 맞게 설치를 하는 부분이라 어렵지 않을겁니다. 또한 개발 에디..

요즘 개발자라면 웬만해서는 git에 대해서 잘알고있고 포트폴리오에서 보여주기 때문에 다들 사용하고있습니다. 저 역시 코딩 테스트 기록용, 제가 했던 개발 코드 공유, 회사 프로젝트 관리용으로 사용중에 있습니다. 그렇다면 깃은 왜 사용하게 되었을까요? 현재는 다양한 용도로 사용하지만 주된 용도로는 버전 관리를 위한 목적으로 사용되었습니다. 그 중에서도 분산형 버전관리 시스템이라고 보면 됩니다. 프로그램을 개발하는데 A버전에서 B버전으로 올리다가 문제가 발생하여 다시 A버전으로 돌아가고 싶은데 버전관리가 안되어있다면 다시 A버전에 맞춰서 코드를 짜야하는 시간과 노력이 드는 것을 git을 통해 A버전으로 변경하면 다시 코드가 이전으로 돌아가게 되는 겁니다. 이렇게 한다면 프로그램 관리에 유용하게 되겠죠? gi..

저번 글에서 로컬 서버에서 로그인/ 회원가입을 간단하게 만들었습니다. UI는 기본적으로 지원하는 것을 이용하여 만들었기 때문에 손쉽게 넘어갈수있었습니다. 이제 실제 이 로그인과 회원가입을 다른 사람들한테 이용하게 하려면 서버에 올려야합니다. git을 통해 push를 하고 자동으로 aws amplify에 연동이 되었지만 결과는? 빌드 실패! 왜 이런일이 일어날까요? 이것에 관해서 많은 정보들이 많고 다양하게 시도를 해야지만 결과를 찾을수있습니다. 많은 이유중에서 제가 확인한 결과 3가지 작업을 하면 이상없이 배포갑니다. 1. role(역할)을 설정하기 2. Amplify CLI 최신화 하기 3. frontend에 backend연동시키기 이 3가지 작업을하면 배포가 될것입니다. 1. role(역할)을 설정하..

저번 글에서는 amplify, cognito 연결까지 한상태입니다. 또 이상 없이 웹상에서 실행되는 것 까지 확인을 하였죠 근데 회원가입과 로그인 화면은 저희가 아직 안 만든 상태잖아요? 이제 이 부분을 이번 글에서 진행을 하려고 합니다. 이 역시 aws에서 기본으로 제공하는 글을 토대로 진행하겠습니다. https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/ https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/ docs.amplify.aws 이전 글에서 이상 없이 실행되는 상태에 이어서 진행을 하겠습니다. 로그인/회원가입 UI를 간단하게 빠르게 만들기 위해서는 aws에서 미리 구성된..