odada

next.js로 CRUD API 서버 만들기my-next-server라는 이름으로 next.js 서버를 만들어보자.1. next.js 설치npx create-next-app ./- 파일 구조nextjs-server/├── app/│ ├── api/│ │ └── hello/│ │ └── route.ts # API Route 파일│ | └── posts/│ | └── route.ts # API Route 파일└── package.json3. Next.js에서 서버 기능 구현하기3-1. 간단한 서버 만들기브라우저에서 http://localhost:3000/api/hello로 접속했을 때, 안녕하세요!라는 메시지를 JSON 형식으로 응답하는 서버를 만들어봅시다...

ㅇㅇ

Express 모듈을 사용하여 서버 만들기1. Express 소개Express란?Node.js를 위한 가볍고 유연한 웹 애플리케이션 프레임워크.빠르고 간단하게 웹 서버와 API를 개발할 수 있는 도구.java의 Spring, Python의 Django와 같은 역할을 함.Express를 사용하는 이유간단하고 직관적인 API미들웨어를 통한 유연한 기능 확장강력한 라우팅 시스템큰 커뮤니티와 풍부한 생태계2. Express 서버 만들기- Express 설치# 프로젝트 초기화npm init -y# Express 설치npm install express- Express 서버 만들기get() 메서드: 해당 경로로 GET 요청이 오면 콜백 함수를 실행.send() 메서드: 클라이언트에 응답을 보냄.// index.jsc..

node.js로 서버 만들기1. 서버란?서버와 클라이언트서버는 요청을 받는 응답자이고, 클라이언트는 요청을 보내는 요청자입니다. 클라이언트: 웹 브라우저(Chrome, Safari).서버: 네이버, 구글 같은 웹사이트를 운영하는 컴퓨터.쉽게 서버의 동작 이해하기브라우저에서 "구글 검색"을 입력(요청)하면,구글의 서버가 요청을 받아서 검색 결과를 준비(처리)한 뒤,준비된 검색 결과를 브라우저로 보냄(응답).서버의 예웹 서버: 웹사이트를 보여주는 서버.예: 네이버, 구글, 유튜브.파일 서버: 파일을 저장하고 전송하는 서버.예: Google Drive, Dropbox.게임 서버: 온라인 게임에서 플레이어 간 연결을 관리하는 서버.예: LOL, PUBG.호스팅 서버: 웹사이트를 저장하고 관리하는 서버.예: A..

Node.js 기본 개념과 특징Node.js란?Node.js는 Chrome V8 JavaScript 엔진으로 구축된 JavaScript 런타임입니다. 이는 브라우저 밖에서도 JavaScript를 실행할 수 있게 해주는 환경입니다.주요 개념과 특징1. 모듈 시스템Node.js의 모듈 시스템은 필요한 기능을 "블록"처럼 가져다 사용하는 구조입니다.요리시 레시피를 가져와 사용하는 것과 같아요.필요한 재료를 가져와 사용하고, 요리를 시작합니다.// fs 모듈을 가져와 사용합니다// 재료를 가져옵니다 (require)const fs = require('fs');// 요리를 시작합니다 (파일 생성)fs.writeFileSync('example.txt', 'Hello, Node.js!');console.log('파일..

Next.js + TypeScript 핵심 가이드1. 기본 타입 정의와 인터페이스타입 정의의 기본type Todo = { id: number; text: string; done: boolean; createdAt: Date;}// 인터페이스 정의interface User { id: number; name: string; email: string; role: 'admin' | 'user'; // 리터럴 타입}2. 컴포넌트 Props 타입 지정// props 타입 정의interface ButtonProps { text: string; onClick: () => void; variant?: 'primary' | 'secondary';}// 컴포넌트에서 사용const Button: Reac..

대한민국 공공데이터 포털 사용 가이드목차회원가입 및 로그인API 키 발급데이터 검색활용신청인기 API 예시Next.js 활용 예시주의사항1. 회원가입 및 로그인https://www.data.go.kr 접속상단 회원가입 클릭일반회원 또는 기업회원으로 가입이메일 인증 완료2. API 키 발급로그인 후 마이페이지 접속"API 키 발급/관리" 메뉴 선택"일반 인증키" 또는 "서비스 인증키" 발급인증키 발급 후 활성화까지 1-2시간 소요될 수 있음3. 데이터 검색방법 1: 검색창 이용상단 검색창에 키워드 입력'OpenAPI' 항목 체크하여 검색필터 기능을 통해 원하는 조건으로 검색 가능방법 2: 카테고리 이용분류별 검색주제별, 기관별 등 원하는 카테고리 선택새로운 데이터 추천 서비스 활용4. 활용신청// 기본 A..

React Native 심화 📚1. 네비게이션Stack Navigation// 기본 스택 네비게이션 설정import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();function App() { return ( );}Tab Navigationimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';const Tab = createBott..

React Native 시작하기 📱목차React Native 소개개발 환경 설정기본 컴포넌트기본 기능 구현실습 예제다음 학습 주제학습 팁 💡공식 문서를 자주 참고하세요Expo Snack으로 코드를 실험해보세요작은 프로젝트부터 시작하세요컴포넌트를 재사용 가능하게 설계하세요스타일링에 시간을 투자하세요1. React Native란?https://reactnative.dev/https://expo.dev/React Native는 페이스북이 개발한 모바일 앱 개발 프레임워크입니다. React의 문법을 사용하여 iOS와 Android 앱을 동시에 개발할 수 있습니다.장점하나의 코드로 iOS/Android 개발 가능JavaScript/React 지식 활용 가능빠른 개발 속도와 실시간 미리보기 (Hot Reload..

React Recoil리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context API를 사용해서 컴포넌트 간에 데이터를 전달Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용Recoil이란Recoil은 React 상태 관리를 위한 라이브러리로, 전역 상태를 관리하기 위한 간단한 방법입니다.Recoil은 atom과 selector를 사용하여 상태를 관리합니다.Recoil 문법atom을 사용하여 상태를 생성합니다.useRecoilState를 사용하여 상태를 사용합니다.selector를 사용하여 파생된 상태를 생성합니다.Recoil 사용..