많고 많은 코딩블로그중 하나

잡담오늘은 클래스 컴포넌트에 대해서 공부해 보도록 하겠습니다. 저번에도 언급했듯이 React는 컴포넌트 기반의 아키텍처입니다. 애플리케이션을 여러 개의 조각(컴포넌트)으로 나누어서 컴포넌트마다 자체적으로 상태와 로직을 등을 변경해 줄 수 있었습니다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데 오늘은 클래스형 컴포넌트에 대해서 예제를 통해 알아보도록 하겠습니다. 1. 클래스 컴포넌트 주어진 코드는 React의 클래스 컴포넌트를 정의하는 예제입니다. 이 코드에서는 React의 Component 클래스를 상속받아 App이라는 클래스를 만들고 있습니다. 이를 통해 클래스형 컴포넌트를 생성하고, state와 props를 사용하여 애플리케이션의 상태와 속성을 관리할 수 있습니다.import { Com..

잡담오늘은 Node.js 설치방법에 대해서 알아보도록 하겠습니다. 요즘은 따로 Path설정을 안 해도 자동으로 설정되는 것들이 많이서 크게 설정할 게 없습니다. 설치하고 기본적인 코드 실행시키는 방법까지 진행해 보도록 하겠습니다. 1. Node.js 홈페이지https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org위에 있는 링크를 타고 Node.js 다운로드 홈페이지로 이동합니다.홈페이지에 들어가면 아래 Download Node.js(LTS) 를 클릭하여 다운로드를 합니다. 2. 설치 실행다운로드한 SETUP파일을 ..

잡담오늘은 React를 이용해서 간단한 컴포넌트를 생성해 보겠습니다. 해당내용은 React를 이용해서 웹디자인 기능사에서 가장 기초적인 부분을 코드로 작성하면서 컴포넌트의 개념을 익히는데 도움을 줄 수 있을 거 같습니다. 뒤에 가면 props를 통해서 데이터값도 출력하고 하지만 지금은 정말 기본적인 것만 해보도록 하겠습니다. 컴포넌트 기반 아키텍처(Component-Based Architecture):React는 애플리케이션을 여러 개의 작은, 독립적인 컴포넌트로 나눌 수 있게 합니다.각 컴포넌트는 자체적인 상태와 로직을 가지며, UI의 특정 부분을 담당합니다.컴포넌트를 재사용하고 조합하여 복잡한 사용자 인터페이스를 구성할 수 있습니다.1. App.js주어진 코드는 React 애플리케이션의 메인 컴포넌트..

잡담오늘은 페이스북에서 개발한 오픈소스인 React에 대해서 아주 기본적인 내용만 다뤄보려고 합니다. 저도 최근에 수업을 들으면서 정리하고 있는데 컴포넌트 기반 아키텍처를 제공해 유지보수하는데 쉽다고 말하는데 도대체가 아직 왜 쉬운지도 모르겠고 내용을 이해하는 데 있어서 어려움을 겪고 있습니다. 그래서 기본적인 코드를 사용해 가면서 개념을 익히는데 노력하고 있습니다. 아래의 내용은 정말 기본적인 React를 시작할 때 하는 작업인 프로젝트 생성부터 해보려 합니다. 1. 프로젝트 생성React의 프로젝트를 생성할 때는 홈페이지를 들어가서 다운로드하거나 하지 않아도 CMD창에 코드 몇 줄 적는 것으로 생성할 수 있습니다. 하지만 여기서 컴퓨터에 미리 설치해 둬야 환경이 있습니다. Node.js version..

잡담앞서서 node.js를 이용해서 GET / POST/ PUT / DELETE방식을 통해서 메모리에 데이터를 입력, 수정, 삭제하는 방법을 배웠는데요, 이번에는 DB에 연결해서 DB에서 값을 찾아오고, 수정하고, 삭제하는 코드를 배워보도록 하겠습니다. 기본적으로 Query문은 비슷하며 해당 쿼리에 들어가는 변수를 잘 지정해 주면 어려울 거 없이 DB와 연결하여 사용할 수 있습니다.1. 모듈 임포트 및 서버 설정const express = require('express')const app = express()const port = 3000const db = require('./config/db.js')express: Express 프레임워크를 임포트합니다. Express는 웹 애플리케이션과 API를 쉽게..

잡담게시판 미니프로젝트를 실행할 때 가장 먼저 구상한 것은 DB에 어떤 데이터를 담을 것인가입니다. 후에 제대로 된 프로젝트를 진행한다면 다양한 데이터를 담겠지만 지금은 기능을 구현하는데 집중하려고 했기 때문에 최대한 간단하게 구성하려고 하였습니다. 기본적으로 게시판에 들어가는 제목, 내용, 작성자, 작성날짜등이 들어가도록 구성하였습니다.  1. Boardpackage org.zerock.b01.domain;import jakarta.persistence.*;import lombok.*;@Entity@Getter@Builder@AllArgsConstructor@NoArgsConstructor@ToStringpublic class Board extends BaseEntity{ @Id @Gener..

1. 작업 환경IntelliJ IDEA 2024.1Springboot 3.2.5Oracle Open JDK 17.0.9queryDslVersion 5.0.0MariaDB 10.6 UTF-8Gradle  2. build.gradle웹 애플리케이션 개발 관련:implementation 'org.springframework.boot:spring-boot-starter-web': 스프링 부트에서 제공하는 웹 애플리케이션 개발을 위한 스타터 라이브러리입니다.DB 관련:implementation 'org.springframework.boot:spring-boot-starter-data-jpa': 스프링 부트에서 제공하는 JPA 데이터 지원을 위한 스타터 라이브러리입니다.runtimeOnly 'org.mariadb...

잡담이번에는 메모리상에 추가되어 있는 값들을 수정 삭제 출력 하는 방법에 대해서 알아보려고 합니다. Read.jsp안에 수정/삭제 기능을 구현할 생각이고 Read.jsp는 메인에서 해당 데이터를 클릭 시 해당 tno에 맞게 데이터를 불러와 출력하게 되고 불러온 데이터를 가지고 수정 /삭제가 진행되게 됩니다. 1. TodoReadController새 페이지를 열 때에는 주로 GET 방식을 사용하는 것이 일반적입니다. 이번에는 /todo/read라는 경로를 입력받으면 request에 담겨있는 tno값을 getParameter를 이용해 변수에 담고 해당 값을 TodoService에 있는 get 메서드를 통해 tno에 맞는 데이터를 출력할 수 있게 합니다. TodoDto로 만들어진 객체는 read.jsp에서 출..