티스토리

블로그 홈

odada

구독자: 8

#프론트앤드 #Interactive Web #WebDesign #웹표준 # 웹접근성

구독하기 방명록

인기글

신사임당 쇼핑몰공감수0댓글수1조회 2
웹폰트 만들기공감수2댓글수0조회 2
Apple 제품 페이지 스크롤 애니메이션공감수2댓글수2조회 2

주요 글 목록

프론트엔드 개발 월별 계획글 내용
Phase 1: 프로젝트 초기 설정 (1월 3주차)1주차: 개발 환경 구성Next.js 프로젝트 생성 및 기본 설정TypeScript, ESLint, Prettier 설정shadcn/ui, Tailwind CSS 설정기본 디렉토리 구조 설정2주차: 기본 컴포넌트 및 상태관리 설정공통 컴포넌트 개발Layout (Header, Sidebar)Button, Input, Table 등 기본 UI 컴포넌트Form 컴포넌트Zustand 상태관리 설정인증 상태 관리UI 상태 관리기본 데이터 상태 관리Phase 2: 페이지 구현 (2월 ~ 4월)2월: 인증 및 기본 페이지로그인/회원가입 페이지대시보드 레이아웃My Page 구현메인 대시보드 UI3월: Order & RMA 페이지Order 관련 페이지제품 리스트 페이지주..
좋아요0
댓글0작성시간2025. 1. 15.
Next.js와 MongoDB 연동하여 CRUD API 만들기글 내용
0. 주요 변경사항 정리MongoDB 연결 설정 추가환경 변수 (MONGODB_URI) 설정데이터베이스 연결 유틸리티 생성Mongoose 모델 정의API 라우트 변경MongoDB CRUD 작업으로 변경클라이언트 컴포넌트 수정id 대신 _id 사용날짜 형식 처리 추가1. MongoDB 설정MongoDB Atlas 가입하기1-1. MongoDB Atlas 설정1. MongoDB Atlas에서 연결 문자열을 가져오는 방법:"Connect" 버튼을 클릭합니다"Connect your application"을 선택합니다Driver는 "Node.js"를 선택합니다거기서 보이는 연결 문자열을 복사합니다 (예: mongodb+srv://username:@cluster0...)2. 프로젝트에 환경 변수 설정:프로젝트 루트..
좋아요0
댓글0작성시간2024. 12. 26.
프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드글 내용
프론트엔드 개발자를 위한 MongoDB & Mongoose 가이드MongoDB 공식 문서: https://www.mongodb.com/docs/Mongoose 공식 문서: https://mongoosejs.com/docs/1. 데이터베이스가 뭔가요?프론트엔드에서 우리는 보통 이런 형태로 데이터를 다룹니다:const posts = [ { id: 1, title: "첫 번째 글", content: "내용입니다" }, { id: 2, title: "두 번째 글", content: "내용입니다" }];하지만 이렇게 하면 서버를 재시작할 때마다 데이터가 사라지죠. 이 데이터를 영구적으로 저장하고 관리하는 곳이 바로 '데이터베이스'입니다.2. MongoDB는 무엇인가요?Mon..
좋아요2
댓글0작성시간2024. 12. 26.
프론트엔드 개발자를 위한 데이터베이스 초보자 가이드글 내용
프론트엔드 개발자를 위한 데이터베이스 초보자 가이드1. 우리가 아는 것에서 시작하기프론트엔드에서 데이터를 다루는 법부터 시작해볼게요:1-1. React에서의 데이터 저장// React에서 게시글 목록 관리하기const [posts, setPosts] = useState([ { id: 1, title: "첫 번째 글", content: "안녕하세요" }, { id: 2, title: "두 번째 글", content: "반갑습니다" }]);1-2. 근데 여기에는 문제가 있어요새로고침하면 데이터가 사라져요다른 사용자와 데이터를 공유할 수 없어요데이터가 많아지면 관리가 어려워요이런 문제를 해결하기 위해 데이터베이스가 필요합니다!2. 데이터베이스의 두 가지 타입2-1. My..
좋아요1
댓글1작성시간2024. 12. 26.
Node.js 모듈과 객체글 내용
1. 모듈(Module)이란?프로그램을 기능별 단위로 분리한 코드 모음함수, 변수, 객체 등을 포함하나의 .js 파일이 하나의 모듈- 모듈의 장점재사용성: 한 번 만든 모듈을 여러 프로젝트에서 재사용유지보수: 기능별로 분리되어 있어 관리가 용이캡슐화: 관련 코드를 하나의 단위로 묶어서 관리의존성 관리: 필요한 기능만 선택적으로 가져와 사용- 대표적인 웹서비스 공통 모듈 예시회원가입 모듈로그인 모듈게시판 모듈댓글 모듈- 모듈 사용법모듈 내보내기 (Export)// module.jsconst greeting = 'Hello, Module!';const sayHi = () => console.log(greeting);// module.exports = { 내보낼 내용 }module.exports = { ..
좋아요0
댓글0작성시간2024. 12. 25.
자바스크립트 비동기 처리글 내용
콜 스택(Call Stack) & 이벤트 루프(Event Loop) & 콜백 큐(Callback Queue)콜 스택(Call Stack)자바스크립트는 싱글 스레드 언어이기 때문에, 콜 스택이 하나만 존재한다.콜 스택은 함수가 호출되면, 해당 함수를 콜 스택에 쌓아놓고 실행한다.함수가 실행이 끝나면, 콜 스택에서 해당 함수를 제거한다.function first() { console.log('첫번째 함수'); second();}function second() { console.log('두번째 함수');}first();// 실행 순서// 첫번째 함수// 두번째 함수이벤트 루프(Event Loop)자바스크립트는 이벤트 중심 언어이기 때문에, 이벤트 루프가 존재한다.이벤트 루프는 콜 스택과 콜백 큐를 감시하..
좋아요2
댓글2작성시간2024. 12. 25.
next.js로 CRUD API 서버 만들기글 내용
my-next-server라는 이름으로 next.js 서버를 만들어보자.github 주소 : https://github.com/odada-o/-template-next-js-crud1. Next.js 설치npx create-next-app ./2. 간단한 서버 만들기브라우저에서 http://localhost:3000/api/hello로 접속했을 때, 안녕하세요!라는 메시지를 JSON 형식으로 응답하는 서버를 만들어봅시다.API Route 파일 생성app/api/hello/route.ts 파일을 생성합니다.API Route 파일은 GET(), POST(), PUT(), DELETE() 함수를 내보내는 파일입니다.my-next-server/├── app/│ └── api/│ └── hello/..
좋아요1
댓글1작성시간2024. 12. 9.
node.js로 API 통신 구현하기글 내용
ㅇㅇ
좋아요0
댓글0작성시간2024. 12. 9.
Express 모듈을 사용하여 서버 만들기글 내용
Express 모듈을 사용하여 서버 만들기1. Express 란?http, url, fs 등 Node.js의 기본 모듈을 사용하여 서버를 만들 수 있지만, Express 모듈을 사용하면 더 쉽고 강력한 서버를 만들 수 있습니다.자바의 Spring, Python의 Django와 같이 Node.js의 대표적인 웹 프레임워크로 Request, Response 객체를 사용하여 HTTP 요청을 처리할 수 있습니다.- Express를 사용하는 이유간단하고 직관적인 API미들웨어를 통한 유연한 기능 확장강력한 라우팅 시스템큰 커뮤니티와 풍부한 생태계- 참조프레임워크란 개발자가 웹 개발에 필요한 기능을 미리 구현해 놓은 것으로, 개발자가 필요한 기능을 사용하기만 하면 되기 때문에 개발 시간을 단축할 수 있습니다. 웹을..
좋아요1
댓글1작성시간2024. 12. 9.
node.js로 서버 만들기글 내용
node.js로 서버 만들기 - node.js 배우기1. 서버란?서버와 클라이언트서버는 요청을 받는 응답자이고, 클라이언트는 요청을 보내는 요청자입니다. 클라이언트: 웹 브라우저(Chrome, Safari).서버: 네이버, 구글 같은 웹사이트를 운영하는 컴퓨터.쉽게 서버의 동작 이해하기브라우저에서 "구글 검색"을 입력(요청)하면,구글의 서버가 요청을 받아서 검색 결과를 준비(처리)한 뒤,준비된 검색 결과를 브라우저로 보냄(응답).서버의 예웹 서버: 웹사이트를 보여주는 서버.예: 네이버, 구글, 유튜브.파일 서버: 파일을 저장하고 전송하는 서버.예: Google Drive, Dropbox.게임 서버: 온라인 게임에서 플레이어 간 연결을 관리하는 서버.예: LOL, PUBG.호스팅 서버: 웹사이트를 저장하..
좋아요0
댓글0작성시간2024. 12. 9.
Node.js 기본 개념과 특징글 내용
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('파일..
좋아요0
댓글1작성시간2024. 12. 9.
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..
좋아요0
댓글0작성시간2024. 11. 26.
대한민국 공공데이터 포털 사용 가이드글 내용
대한민국 공공데이터 포털 사용 가이드목차회원가입 및 로그인API 키 발급데이터 검색활용신청인기 API 예시Next.js 활용 예시주의사항1. 회원가입 및 로그인https://www.data.go.kr 접속상단 회원가입 클릭일반회원 또는 기업회원으로 가입이메일 인증 완료2. API 키 발급로그인 후 마이페이지 접속"API 키 발급/관리" 메뉴 선택"일반 인증키" 또는 "서비스 인증키" 발급인증키 발급 후 활성화까지 1-2시간 소요될 수 있음3. 데이터 검색방법 1: 검색창 이용상단 검색창에 키워드 입력'OpenAPI' 항목 체크하여 검색필터 기능을 통해 원하는 조건으로 검색 가능방법 2: 카테고리 이용분류별 검색주제별, 기관별 등 원하는 카테고리 선택새로운 데이터 추천 서비스 활용4. 활용신청// 기본 A..
좋아요2
댓글1작성시간2024. 11. 20.
React Native 심화글 내용
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..
좋아요3
댓글1작성시간2024. 11. 2.
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..
좋아요1
댓글1작성시간2024. 11. 2.
React Recoil 로 todolist 제작하기글 내용
React Recoil리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context API를 사용해서 컴포넌트 간에 데이터를 전달Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용Recoil이란Recoil은 React 상태 관리를 위한 라이브러리로, 전역 상태를 관리하기 위한 간단한 방법입니다.Recoil은 atom과 selector를 사용하여 상태를 관리합니다.Recoil 문법atom을 사용하여 상태를 생성합니다.useRecoilState를 사용하여 상태를 사용합니다.selector를 사용하여 파생된 상태를 생성합니다.Recoil 사용..
좋아요3
댓글1작성시간2024. 11. 2.
조건부 렌더링 (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..
좋아요0
댓글0작성시간2024. 11. 2.
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..
좋아요2
댓글1작성시간2024. 10. 27.
github 협업하기글 내용
https://devfancy.github.io/Technology-GitHub-Branch-Protection-Rule/ GitHub에 올라간 Branch에 Protection Rule 적용하기Indexdevfancy.github.io 작성중...
좋아요0
댓글0작성시간2024. 10. 22.
사전수업글 내용
웹사이트 제작 기본 프로세스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 ..
좋아요0
댓글2작성시간2024. 8. 27.

문의안내

티스토리
로그인
고객센터