전체 > 분류 전체보기 (68) 리액트 03: 리액트의 꽃 사용자정의 태그 안녕하세요, 각성한 데브키라입니다. 웹 개발을 하다 보면 코드의 가독성과 유지보수성이 중요하다는 것을 깨닫게 됩니다. 특히, React에서는 사용자 정의 태그를 활용하여 이를 효율적으로 개선할 수 있습니다.[핵심 요약정리]사용자 정의 태그는 html형태를 만들어서 리턴해줄 수 있습니다. 이런 방식으로 코드구성을 심플하고 가독성 있게 만들어줍니다.1. App.js 최상위 DIV의 내부를 하드코딩으로 구현 App.js - 모든 소스코드를 최상위 DIV에 기술하는 방식을 효율적이지 않습니다.import './App.css';function App() { return ( ALPHONSE react .. 리액트 02: 리액트 배포본 생성을 위한 npm run build 안녕하세요, 각성한 데브키라입니다. 오늘은 리액트(React) 앱을 빌드하고 서버에서 출력하는 방법을 소개합니다. 서버 중단 후, 'npm run build'로 배포본을 생성하는 과정을 다룰 예정입니다. 이를 통해 사용자가 앱을 접할 수 있게 합니다.[ 핵심 요약정리 ]※ VsCode의 bash터미널로 접속1. 프로젝트빌드 : npm run build 2. 웹서버인스톨 : npm install -g serve3. 서버실행 정지 서버시작: serve -s build 서버정지: Ctrl + C (Windows/Linux) 또는 Command + C (Mac)4. 접속 Local: http://localhost:3000Network: http://192.168.0.31:3000 1. 리액트 프로젝트 .. 리액트 01: React 설치와 초기화면 출력 안녕하세요, 각성한 데브키라입니다. 오늘은 사용자 인터페이스 구축에 필수인 리액트(React) 프로젝트 시작 방법을 소개합니다. 이 글은 Node.js와 Visual Studio Code 설치에서 리액트 앱 생성까지의 전 과정을 단계별로 안내합니다. 리액트는 선언적이고 효율적인 JavaScript 라이브러리로, 복잡한 UI와 데이터의 변화가 잦은 대규모 애플리케이션을 쉽게 다룰 수 있습니다. 시작해 볼까요?[ 핵심 요약정리 ]1. VsCode에서 프로젝트 디렉터리 생성2. 디렉터리에서 터미널 명령어 실행npx create-react-app . 3. 기존 샘플에 작성된 내용제거App.js, App.css4. 로컬서버 실행명령 npm start접속 url: localhost:30001. NodeJs v20... 리액트: 입문강좌 시리즈 안녕하세요, 각성한 데브키라입니다. 리액트 입문 강좌에 오신 것을 환영합니다. 이 강좌에서는 리액트의 기본에서부터 컴포넌트 활용, 데이터 관리까지 단계별로 배우며, 동적인 웹 애플리케이션 제작 방법을 익힐 것입니다.리액트(React)는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 리액트의 가장 큰 특징은 '컴포넌트'라는 개념입니다. 컴포넌트는 UI를 독립적이고 재사용 가능한 조각으로 나누어 관리할 수 있게 해주며, 각 컴포넌트는 자체적인 상태와 생명주기를 가질 수 있습니다. 이를 통해 복잡한 사용자 인터페이스를 보다 쉽게 구축하고 관리할 수 있습니다. 또한, 리액트는 '단방향 데이터 흐름'을 채택하고 있습니다. 이는 데이터가 한 방향으로만.. NextJs 13: env파일을 활용한 환경변수 설정 안녕하세요, 각성한 데브키라입니다. .env 파일을 사용하면 프로젝트에서 필요한 전역 설정을 한 곳에 모아 관리할 수 있습니다. 이는 데이터베이스 정보, 도메인 경로 등의 중요한 정보들을 편리하게 관리할 수 있게 해주며, 개발 환경의 유연성을 높여주고 보안 측면에서도 중요한 역할을 합니다.1. env파일의 사용환경 변수를 .env 파일에 저장함으로써, 개발자는 개발, 테스트, 프로덕션 등 다양한 환경에 맞는 설정을 쉽게 전환할 수 있습니다. 이는 로컬 개발 환경에서 사용하는 데이터베이스 서버 주소가 프로덕션 환경에서 사용하는 주소와 다를 경우와 같이, 환경에 따른 설정의 차이를 쉽게 관리할 수 있게 해줍니다.2. gitHub업로드대부분의 경우, .env 파일은 중요한 설정 정보를 포함하고 있기 때문에 .. NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드 안녕하세요, 각성한 데브키라입니다. 글 삭제 기능이 비교적 단순하기 때문에, 별도의 모듈로 분리할 필요 없이 'Link' 태그 내에서 'onClick' 이벤트를 직접 지정하여 구현하기로 결정했습니다. 이 방식을 통해 코드의 복잡성을 줄이고, 기능의 구현을 더욱 직관적으로 만들 수 있습니다.글삭제 소스코드page.js"use client"import Link from 'next/link';import { useParams, useRouter } from 'next/navigation';export function ButtonControl() { const params = useParams(); const router = useRouter(); // 수정됨: useRouter Hook을 사용 cons.. NextJs 11: next.js글수정 useEffect 안녕하세요, 각성한 데브키라입니다. 웹 애플리케이션 개발 과정에서 사용자의 편의를 위해 글 수정 기능을 추가하는 것은 매우 중요한 과정 중 하나입니다. 이를 위해 구조적인 준비와 코드의 정확한 구현이 필수적입니다. 본 문서에서는 글 수정 기능을 추가하기 위한 폴더 구조 설정과 필수 소스코드 구현에 대해 다루고자 합니다.1. 글수정을 위해 추가된 구조"update" 폴더를 생성하고 그 안에 "[id]"라는 이름의 디렉터리를 만들었습니다. 이 "[id]" 디렉터리는 특별한 기능을 가지고 있으며, 사용자로부터 입력 받은 id 파라미터를 "page.js" 파일로 전달하는 역할을 합니다.2. 글수정 소스코드입력 필드에 문자를 입력해도 반영되지 않는 문제를 방지하려면, onChange={(e)=>setTitle(.. NextJs 10: 버튼 컴포넌트를 별도 파일로 분리 후 활성 비활성화 처리 안녕하세요. 각성한 데브키라입니다. 이번 포스팅에서는 좌측 목록을 클릭했을 때 해당 목록의 ID가 존재할 경우에만 활성화되는 기능을 탑제한 버튼 영역을 별도의 클라이언트 컴포넌트 파일로 분리하는 작업을 진행하겠습니다. 목록 ID가 생성되지 않았을 때는 버튼이 비활성화되도록 처리할 것입니다.1. 버튼 영역을 별도의 컴포넌트로 분리2. 별도의 파일로 컴포넌트 분리좌측 목록을 클릭했을 때 전달되는 파라미터 값을 효율적으로 사용하기 위해서는 해당 부분을 클라이언트 컴포넌트로 정의해야 합니다. 그러나 특정 부분에만 "use client"를 적용할 수 없기 때문에, 이를 별도의 파일로 분리할 계획입니다.해당 컴포넌트 함수 상단에 위치한 전구 모양 아이콘을 클릭하면, 컴포넌트를 쉽게 별도의 파일로 분리할 수 있는 메.. 이전 1 2 3 4 5 6 7 8 9 다음
