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

잡담웹사이트를 돌다 보면 경고메시지와 함께 다른 창을 건들 수 없는 순간이 옵니다. 해당 창을 모달 창이라고 하는데요 프로젝트를 진행하면서 경고메시지나 또는 새로운 창에서 작업 후 해당 값을 입력하게 하는(주소입력) 경우 모달창을 많이 사용했습니다. 오늘은 모달창에 대해서 알아보도록 하겠습니다. 모달(Modal) 창 이란?모달 창(modal window)은 웹 개발에서 사용자 인터페이스의 중요한 요소 중 하나로, 사용자의 주의를 특정 작업이나 메시지로 집중시키기 위해 사용됩니다.모달 창은 일반적으로 페이지의 나머지 부분과 상호작용할 수 없게 만들고, 사용자가 특정 작업을 완료하거나 창을 닫을 때까지 페이지의 나머지 부분이 비활성화됩니다. 이로 인해 중요한 정보 전달이나 사용자 입력을 강제하는 데 효과적입..

잡담이벤트 버블링(Event Bubbling)은 이벤트가 발생했을 때 그 이벤트가 해당 요소에서 시작하여 부모 요소들로 차례차례 전파되는 과정을 말합니다. 예를 들어, 요소를 클릭하면 해당 요소뿐만 아니라 그 부모 요소들도 같은 클릭 이벤트를 처리할 수 있습니다.  이벤트 버블링의 예아래 예제는 이벤트 버블링을 설명하는 간단한 HTML 및 JavaScript 코드를 보여줍니다. Grandparent Parent Child 예제 설명. child 요소를 클릭하면:. child 요소의 클릭 이벤트 리스너가 실행되어 alert('Child clicked!')가 ..

잡담오늘은 클래스 컴포넌트에 대해서 공부해 보도록 하겠습니다. 저번에도 언급했듯이 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를 활용해서 HTTP 호출을 해볼 예정입니다. DB는 MySQL을 사용할 예정이고 오늘도 POSTMAN을 이용해서 UI를 대신할 예정입니다. DB에 연결하게 되면 이제 값들을 저장할 수 있게 되고 해당 데이터들을 react나 html를 이용해서 view로 뿌려줄 수 있게 될 것입니다. 바쁘신분은 해당 링크 클릭하시면 됩니다.목차이동(클릭)ER_NOT_SUPPORTED_AUTH_MODE 오류처리 1. DB생성우선 첫번째로 연결시킬 DB를 생성하도록 하겠습니다. DB생성에는 MySQL Workbench를 이용해도 되지만 오늘은 커맨드연습도 할 겸 Command Line Client를 이용하도록 하겠습니다.Client를 실행시키면 처음에 'Enter pass..

잡담수업 정규과정이 거의 다 끝나갑니다. 이제 개인프로젝트나 팀프로젝트도 준비해야 되는데 아직도 모르는 게 산더미인데 과연 제가 해낼 수 있을까에 대한 고민을 많이 하고 있습니다. 오늘은 POST방식과 PUT / DELETE방식에 대해 공부하도록 하겠습니다.  2. POST방식Node.js의 Express 프레임워크에서 app.post() 메서드는 POST 요청을 처리하기 위한 라우팅을 설정하는 데 사용됩니다. 기본적인 app.post()의 구조는 다음과 같습니다:app.post('/경로', (req, res) => { // POST 요청을 처리하는 로직});여기서 각 부분의 역할은 다음과 같습니다:app: Express 애플리케이션의 인스턴스입니다. 이 인스턴스를 통해 Express의 메서드 및 ..

잡담저번시간에 공부했던 GET방식에 이어서 오늘은 GET방식을 응용하는 기본적인 방법에 대해서 공부할 예정입니다. 데이터 이동에 JSON방식을 많이 활용하기 때문에 JSON형식을 이용해서 요청하고 또 뒤에 나올 POST를 이용해서 데이터를 전달하는 방법에 대해 공부할까 합니다.1. GET방식 응용 JSON 형식 요청const express = require('express')const app = express()const port = 3000let movieList = [ { id: 1, title: '아바타 물의길', running: 130, rating: 9.5 }, { id: 2, title: '반지의 제왕', running: 125, rating: 8.2 }, ..