전체보기 (31) 썸네일형 리스트형 Next.js + MongoDB 이제 우리는 Next.js로 프로젝트를 시작합니다. 기획 중인 프로젝트는 코드드림의 어드민 서비스를 만들어볼 계획입니다. 본 포스팅에서는 Next.js 프로젝트에서 DB를 연동하는 과정을 소개합니다. DB는 MongoDB를 사용했으며 Mongoose라는 라이브러리를 사용했습니다. MongoDB와 Mongoose에 대해서는 메리님의 포스팅에서 확인하실 수 있습니다. 예제에 사용된 버전은 다음과 같습니다. Next.js 14 Mongoose 8.0.3 Typescript 5 1. MongoDB 설정 1-1) 프로젝트 생성 MongoDB 계정을 만들고 사이트에 접속해 프로젝트를 생성합니다. 1-2) Database 생성 생성된 프로젝트에서 Create를 통해 Database를 생성합니다. 1-3) Databa.. 자 이제 시작이야, Next 세계로 1. Next.js의 렌더링 방법 자, 이제 Next.js를 시작해볼까요? 먼저 신규 타입스크립트용 Next.js 프로젝트를 만들어 봅시다. // 터미널을 켜서 해당 명령어를 입력 $ npx create-next-app@latest --ts 프로젝트명 // @latest > 최신 버전을 의미함 // --ts > 타입스크립트를 의미함 저는 해당 설정으로 신규 프로젝트를 생성하였습니다. 그럼 아래 사진과 같은 파일구조로 프로젝트가 생성될 것입니다. 그럼 이제 생성된 프로젝트를 실행시켜 볼까요? $ cd next-sample $ npm run dev 로그의 내용을 보면 http://localhost:3000 에서 서버가 정상적으로 실행 된 것을 확인할 수 있습니다. 브라우저에 URL을 입력해보면 다음과 같은 .. React 맛보기 - React Hooks 지난 포스팅에서 리액트 컴포넌트에 대해서 공부해봤습니다. 이번 포스팅에서는 컴포넌트의 상태를 관리하는 리액트 훅에 대해서 알아보겠습니다. *이 포스팅 시리즈는 Next.js 공식 문서와 React 공식 문서, 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발을 참고하여 작성했습니다. 예제에 사용된 버전은 다음과 같습니다. npm 9.5.0 react 18.2.0 typescript 4.9.5 훅(React Hooks) React Hooks는 React 버전 16.8에서 소개되었습니다. 훅은 함수 컴포넌트 안의 상태(State)나 생명 주기(Lifecycle)를 다루기 위한 기능입니다. 훅을 공부하기 앞서 리액트에서 말하는 상태와 생명 주기에 대해 먼저 알아볼 필요가 있었습니다. 상.. Hello Typescript - part.2 이전 포스팅에서는 타입스크립트의 기본적인 사양에 대해 훑어보았다면, 이번 포스팅에서는 실제 개발에 도움이 되는 몇 가지 주제를 같이 살펴보도록 합시다. 1. 진짜 타입스크립트... 1. Enum 타입 enum을 사용하면 이름이 있는 상수들의 집합을 정의할 수 있습니다. 숫자와 문자, 두 가지 열거형을 지원합니다. 우선 숫자 열거형부터 살펴봅시다. // 숫자 열거형 enum Direction { Up = 1, Down, Left, Right, } let direction: Direction = Direction.Up directon = 'Up' // string을 넣으려 하면 에러 위의 코드에서 Up이 1로 초기화된 숫자 열거형으로 선언되었습니다. 그럼 뒤따르던 나머지는 자동으로 증가된 값을 갖게 됩니다... React 맛보기 - React Component Next.js는 React 기반의 프레임워크입니다. 본격적으로 개발에 들어가기에 앞서 React 기본이 되는 것들을 살펴보면 좋을 것 같아 이번 포스팅을 준비했습니다. *이 포스팅 시리즈는 Next.js 공식 문서와 React 공식 문서, 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발을 참고하여 작성했습니다. 본 포스팅에서는 React에서 빠질 수 없는 컴포넌트와 훅에 관해 알아보겠습니다. 예제에 사용된 버전은 다음과 같습니다. npm 9.5.0 react 18.2.0 typescript 4.9.5 리액트 프로젝트를 생성해보겠습니다. 타입스크립트를 사용하기 위해 패키지를 추가합니다. npx create-react-app@latest study-react --template ty.. Hello Typescript - part.1 0. 타입스크립트 왜 씀? 말만 탈만 타입스크립트를 공부하기 전에 우리는 이 귀찮고 번거로운 친구를 왜 배워야 하는지 알아둘 필요가 있습니다. 그래야 타입스크립트를 포기하지 않고 사용할 수 있기 때문이죠. 타입스크립트는 마이크로소프트에서 개발하고 있는 오픈소스기반의 언어입니다. 정적 타입, 상위 호환 두가지 키워드로 정의할 수 있을 것 같습니다. 웹 애플리케이션의 발전으로 자바스크립트는 폭발적인 인기를 끌었으나, JS는 아직 불안정하거나 미성숙한 부분이 많습니다. 때문에 표준화 단체인 ECMA에서 명세를 계속 개선하고 있기도 하고요. 그럼, "자바스크립트를 보다 안정적이고 보다 성숙하게 업데이트하면 되는 거 아니야?"라고 생각할 수 있을 것 같은데, 이 친구는 하위 호환을 중시하는 언어입니다. 그래서 사.. 우리가 Next.js를 공부하게 된 이유 올해 9월, 앱 런칭을 위해 우리 팀은 Flutter를 공부했고 정식 배포까지 마무리했습니다. 그리고 앱을 소개하기 위한 사이트를 React로 만들었고 Git Pages로 호스팅했습니다. 어느 날, 한 팀원을 통해 Next.js를 알게 됐습니다. 그리고 코드드림팀에서는 Next.js를 공부하기로 했는데요. 우리가 공부하게 된 이유와 과정을 포스팅을 통해 공유하려고 합니다. 이번 포스팅에서는 Next.js를 공부하게 된 이유를 소개합니다. *이 포스팅 시리즈는 Next.js 공식 문서와 React 공식 문서, 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발을 참고하여 작성했습니다. 1. 프론트엔드 개발 변천 jquery의 시작과 끝 프론트엔드는 어떻게 변화해왔을까요? 저는 6년차 .. 이전 1 2 3 4 다음
