1. v-on 이벤트 처리`v-on` 의 핵심 개념v-on 디렉티브는 HTML 요소에 `이벤트 리스너`를 부착하는 역할 : 순수 JavaScript의 addEventListener 와 동일한 기능을 수행. 정식 문법 : v-on:click="myFurnction"단축 문법(Shorthand) : @click="myFunction" (실무에서는 단축 문법 사용) 특정 이벤트가 발생했을 때 methods에 정의된 함수를 호출 v-on : 메서드 호출, 이벤트 객체 전달, 이벤트 수식어 등 다양한 편의 기능 제공. `$event` : 매서드에 특별한 변수인 $event를 인자로 전달하면, 순수 JavaScript의 `event` 객체와 동일한 이벤트 객체를 받아 사용할 수 있음. event.preventDef..

초기에 설계했던 모든 기능을 구현하지는 못했지만, 이것이 이번 프로젝트의 최종 결과물이다.오전까지는 데이터베이스 접근이 불가능해 어려움을 겪었는데, 개발자 도구를 확인해보니 CORS 에러가 발생하고 있었다. 처음에는 어떻게 접근해야 할지 막막했지만, 의외로 해결 방법은 단순했다.// 서버 생성const server = http.createServer(async (req, res) => { //CORS 설정 res.setHeader("Access-Control-Allow-Origin", "*"); // 모든 도메인 허용 res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); res.setHeader("Acce..

vue.js 맛보기 (CDN 방식) 우리가 기존에 해오던 방식기능이 많아질수록 어떤 데이터가 어떤 화면 요소와 연결되어 있는지 파악하기 어려움.화면 업데이트 코드를 빼먹거나 잘못 작성하면, 데이터와 화면의 상태가 일치하지 않는 버그 발생.반복적인 DOM 조작 코드를 계속해서 작성해야함. vue.js는 사용자 인터페이스(UI) 제작을 위한 프로그레시브(Progressive) 자바스크립트 프레임워크. 반응성(Reactivity) : 선언 -> 자동으로 화면 업데이트 vue의 장점과 단점장점 : 배우기 쉽고, 진입 장벽이 낮음 작은 프로젝트 큰 프로젝트 모두 적합단점 : React에 비해 상대적으로 생태계(써드파티 라이브러리 등)의 규모가 작음. 프레임워크 종류React : Facebook이 개발, 가장 크..

css 심화 내용 1. 모던 CSS (Modern CSS) 현대 CSS의 주요 기능.CSS 변수 (Custom Properties) : --main-color: #3498ab; 와 같이 변수를 선언하고, var (--main-color) 로 재사용할 수 있음. 다크 모드 구현이나 전체적인 테마 변경이 매우 쉬워짐.Flexbox와 Grid : 복잡한 계산 없이도 유연하고 반응형인 레이아웃을 손쉽게 만들 수 있음. 트랜지션(Transition)과 애니메이션(@keyframes) : 요소의 상태 변화나 복잡한 움직임을 부드러운 애니메이션으로 구현.계산 함수 (`calc()`) : width: calc(100% - 80px); 처럼 서로 다른 단위(%, px, em 등)를 섞어서 동적으로 크기를 계산할 수 있어..

로그인 기능 구현 로그인 기능의 핵심: 데이터베이스 로그인 기능 동작 원리 사용자가 아이디와 비밀번호를 입력하고 `로그인` 버튼을 클릭. 서버는 사용자가 입력한 아이디를 데이터베이스에서 검색. 해당 아이디가 존재하면, 저장된 비밀번호와 사용자가 입력한 비밀번호가 일치하는지 비교. 모두 일치하면 `로그인 성공`, 그렇지 않으면 `로그인 실패`를 응답. 로그인 기능에는 사용자 정보를 저장하고 조회할 수 있는 데이터베이스가 반드시 필요함. 1. 사용자 테이블 구조 설계사용자 정보를 저장할 `users` 테이블을 설계. 로그인 기능에 필수적인 정보는 아이디와 비밀번호. 사용자를 구분할 고유 번호 (id)를 추가 -> 테이블 구성. `users` 테이블 구조칼럼 이름자료형제약 조건설명idINTEGERPRIMAR..

1. 데이터베이스 (Database) 데이터 베이스 (Database) 정의데이터베이스는 여러 사람이 공유하여 사용할 목적으로, 체계적으로 통합하여 관리하는 데이터의 집합. 단순히 데이터를 모아놓은 것을 넘어, 특정 규칙에 따라 구조화 되어 있어 데이터의 검색, 추가, 수정, 삭제가 용이. 데이터 베이스를 사용하는 이유?효율적인 데이터 접근 및 관리 : 특정 조건에 맞는 데이터만 빠르게 찾아오거나 수정할 수 있음. JSON 파일처럼 매번 전체 파일을 읽을 필요가 없음.데이터 무결성 보장 : "학번은 중복될 수 없다", "나이는 숫자여야 한다" 와 같은 규칙을 설정하여 데이터가 항상 정확하고 일관된 상태로 유지되도록 강제할 수 있음.동시성 제어 : 여러 사용자가 동시에 같은 데이터에 접근하여 수정하려고 할..

최종 구동 파일 1. 프로젝트 파일 구조simple-clock-app/├── index.html (페이지의 뼈대)├── style.css (페이지의 디자인)├── script.js (페이지의 기능, API 요청)└── server.js (파일 서빙 및 API 응답) 2. 백엔드 코드 : 'server.js'/ (루트 경로) 요청: 웹 페이지의 기본 뼈대인 `index.html` 파일을 전달./style.css 요청: `index.html`이 필요로 하는 `style.css` 파일을 전달./script.js 요청: `index.html`이 필요로 하는 `script.js` 파일을 전달./api/time 요청: 파일이 아닌, 현재 시간 정보가 담긴 JSON 데..

Back-End 환경 설정 node.js를 이용해 기존에 사용하던 live server(client-side)가 아닌 새로운 서버(server-side)를 만들어 보았다. Node.js는 언어나 프레임워크가 아닙니다.Node.js는 'JavaScript 실행 환경(Runtime Environment)'입니다. 크롬 브라우저가 웹 페이지를 실행해주는 환경인 것처럼, Node.js는 내 컴퓨터에서 JavaScript 파일을 실행해주는 환경 즉 node.js는 JavaScript라는 하나의 언어로 프론트엔드와 백엔드를 동시에 다룰 수 있게 해줌. 프레임워크는 도커에서 쓰던 이미지와 비슷한 설계도라고 할 수 있음.개발자가 반복적인 일을 피하고 핵심 기능에만 집중하도록 도와줌. node.js는 프레임워크가 아님..