전체 글 263

Next.js + TypeScript 핵심 예제

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..

Front/TypeScript 2024.11.26

대한민국 공공데이터 포털 사용 가이드

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

Front/Node.js 2024.11.20

React Native 시작하기

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..

Front/React 2024.11.02

React Recoil 로 todolist 제작하기

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

Front/React 2024.11.02

조건부 렌더링 (Conditional Rendering) - React 배우기

조건부 렌더링 (Conditional Rendering)조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.React에서는 삼항 연산자나 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.1. 삼항 연산자삼항 연산자는 조건에 따라 다른 값을 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; return {isLogin ? 로그인 중 : 로그인 해주세요};}export default App;2. && 연산자&& 연산자는 조건이 참일 때만 결과를 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; retur..

Front/React 2024.11.02

React의 핵심 개념

React의 핵심 개념React를 시작하는 개발자들을 위한 핵심 개념들을 정리해보았습니다. react의 핵심 개념을 이해하고, 실제 프로젝트에 적용해보면서 경험을 쌓는 것이 중요합니다.리액트 홈1. React란?https://odada.me/250React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.리액트는 하나의 html 페이지만 존재하는 웹사이트(웹애플리케이션)으로 다른 컨텐츠 페이지를 불러들어오는 구조입니다.이미지출처: 소플의 리액트- 설치node.js 설치 후, 터미널에서 아래 명령어로 설치합니다.npx create-react-app@latest ./- 실행npm start1. 컴포넌트 (Components)https://odada..

Front/React 2024.10.27

사전수업

웹사이트 제작 기본 프로세스https://odada.me/291퍼블리싱 기초https://odada.me/290부트스트랩으로 빠르게 포폴 만들기https://odada.me/350 https://www.w3schools.com/ W3Schools.comW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com https://developer.mozilla.org/ko/docs/Web ..

카테고리 없음 2024.08.27

부트스트랩으로 빠르게 포트폴리오 만들기

부트스트랩으로 빠르게 포트폴리오 만들기1. 포트폴리오란?포트폴리오는 자신의 업무 능력과 경험을 보여주는 문서입니다. 개인의 업무 능력과 경험을 보여주기 위해 만들어지는 것이기 때문에 자신의 업무 능력과 경험을 잘 보여줄 수 있어야 합니다.2. 부트스트랩이란?https://getbootstrap.kr/부트스트랩은 웹 개발을 위한 오픈 소스 프론트엔드 프레임워크입니다. 부트스트랩은 HTML, CSS, JavaScript를 사용하여 웹 페이지를 만들 때 사용할 수 있는 여러 가지 디자인 요소와 기능을 제공합니다.부트스트랩을 사용하면 웹 페이지를 쉽고 빠르게 만들 수 있습니다. 부트스트랩은 반응형 웹 디자인을 지원하기 때문에 모바일 환경에서도 웹 페이지가 잘 보이도록 만들 수 있습니다.

etc 2024.08.26
티스토리 친구하기