![]()
DB 연동하기 1. DB 연동하기 - Express.js에 sql로 데이터베이스를 연동해봅시다. - #1. SQLyog에 들어가서 먼저 다음과 같이 입력하여, 데이터베이스를 생성합니다. ※ SQL에 관한 공부는 여기로! CREATE DATABASE wise_saying; USE wise_saying; - #2. wise_saying라는 테이블을 생성하고 show tables를 입력하여 제대로 생성 되었는지 확인해봅시다. CREATE TABLE wise_saying ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, regDate DATETIME NOT NULL, content VARCHAR(200) NOT NULL, author VARCHAR(50) NOT ..
![]()
Express로 JSON 응답 받기 1. Express로 JSON 응답 받기 - Express.js를 통해 JSON을 응답받아 봅시다. - #1. app.js에 다음과 같이 입력합니다. import express from "express"; const app = express(); const port = 3000; const wiseSayings = [ { content: "나는 의적이다.", author: "홍길동", }, { content: "나는 도적이다.", author: "임꺽정", }, ] app.get("/wise-sayings", (req, res) => { res.json(wiseSayings); }); app.listen(port, () => { console.log(`Example a..
![]()
Express.js 설치 1. Express.js 설치 - Express.js를 설치해 봅시다. (자세한 내용은 Express 사이트를 참조.) - #1. 먼저 폴더를 생성한 뒤, VS Code로 들어가서 npm i express를 입력하여, express를 설치합니다. - #2. (선택) 파일들이 생성 되었으면, package.json에 들어가 "type" : "module"을 입력합니다. → 모듈을 가져올 때, import를 사용하기 위해 입력하였습니다. - #3. 생성했던 폴더에 app.js 파일을 생성한 뒤, 다음과 같이 입력합니다. import express from "express" const app = express() const port = 3000 app.get('/', (req, res..
![]()
Express.js 0. 공부하기 전 - Express.js를 공부하기 전에, Express.js가 어떤 것이고, 무슨 특징이 있는지 먼저 알아봅시다. 1. Express.js - Express.js는 Node.js 환경에서 웹 애플리케이션 및 API를 개발하기 위한 웹 프레임워크입니다. - Node.js의 기능을 확장하고, 웹 애플리케이션을 구축하고 관리하는 데 도움이 되는 다양한 기능을 제공합니다. 2. 특징 및 기능 - 라우팅(Routing) -URL 경로 및 HTTP 메소드를 기반으로 라우팅을 지원합니다. ※ 라우팅 : 웹 애플리케이션에서 클라이언트의 요청에 따라 어떤 코드가 실행되어야 하는지 결정하는 프로세스 - 이를 통해, 요청이 특정 엔드포인트로 전송되는 방식을 정의할 수 있습니다. - 미들..
![]()
사용자계정 생성 및 삭제 1. 사용자 계정 생성 및 삭제 - 예전에 만든 계정이 존재하여, 다시 공부할 겸, 확인한 후, 삭제하고 다시 생성해보겠습니다. - #1. xampp 프로그램에 들어간 후, shell을 클릭하여 접속합니다. - #2. shell에 mysql -u root -p를 입력하여 root로 접속합니다. (초기 비밀번호를 생성하지 않았다면, 엔터를 누릅니다.) → 그러면 Welcome to the monitor이라고 나옵니다. - #3. 여기서 use mysql; 입력 후, select host, user from user; 라고 입력합니다. → 그러면 예전에 생성했던 계정이 있습니다. - #4. DROP USER 유저명@서버명을 입력하여 계정을 삭제합니다. → 입력해보니 에러가 발생했네요..
![]()
동기와 비동기 1. 동기와 비동기 - 동기와 비동기 실행 방식은 코드의 동작 및 효율성을 제어하는 데 중요한 역할을 합니다. 2. 동기 (Synchronous) - 동기 코드 실행은 순차적으로 진행되는 것을 의미합니다. 한 작업을 완료한 후, 다음 작업이 실행됩니다. - 동기 코드 실행 방식은 코드 블록이 위에서 아래로 순차적으로 실행되는 것이 특징입니다. - 동기 코드 실행은 주로 함수 호출, 루프, 파일 처리 등에서 사용됩니다. - 하나의 작업이 지연되면, 모든 작업이 지연되는 단점이 있습니다. console.log("첫 번째 실행"); console.log("두 번째 실행"); console.log("세 번째 실행"); 3. 비동기 (Asynchronous) - 비동기 코드 실행은 순차적으로 진행되..
![]()
box-sizing 속성 1. box-sizing 속성 - 박스 모델에서 요소의 크기를 계산하는 방법을 제어하는 데 사용되는 속성입니다. 2. box-sizing의 주요 값 - content-box (기본값) - 요소의 크기를 요소의 콘텐츠 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠의 크기만을 고려하며, padding 및 border은 요소 크기에 추가됩니다. - border-box - 요소의 크기를 요소의 테두리(border)를 포함한 영역에 따라 계산합니다. - 요소의 width와 height는 콘텐츠와 padding, 그리고 border까지 고려한 크기가 됩니다. - initial - 기본값으로 설정합니다. - inherit - 부모 요소의 속성값을 상속받습니다. 3. 예..
![]()
HTML 규약 및 관례 1. HTML 규약 및 관례 - HTML에는 다양한 규약과 최선의 관례가 존재합니다. - 이는 웹 페이지의 명확한 구조 및 내용을 정의하고, 간편한 유지 보수가 가능하며, 웹 접근성 및 크로스 브라우징 문제를 최소화할 수 있습니다. 2. 문서 형식 선언 - HTML 문서의 시작 부분에 적절한 문서형식 선언을 추가해야 합니다. (HTML5 기준) 3. 문서 구조 - HTML 문서는 일반적으로 다음과 같은 구조를 따릅니다. 3. 유요한 HTML - HTML 문서는 유효한 마크업을 가져야 합니다. - W3C Markup Validation Service와 같은 도구를 사용하여, 문서를 유효성 검사할 수 있습니다. 4. 의미 있는 태그 사용 - HTML5에서는 의미 있는 태그를 사용하여,..
![]()
fetch 함수 1. fetch( ) 함수 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음 - 비동기적으로 작동하며, Promise를 반환함 2. 구문 - 각 매개변수와 메소드는 다음과 같음 - url : 요청을 보낼 URL 주소 - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택) - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리 - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오..
![]()
Callback 함수 1. Callback 함수 - 다른 함수 내에서 실행되는 함수를 뜻함 - 주로 비동기 코드에서 사용되며, 비동기 작업이 완료되면 실행되어야 하는 작업을 정의함 2. Callback 함수의 특징 - 함수 내에서 다른 함수의 인자로 전달될 수 있음 - 함수 내에서 다른 함수의 결과로 반환될 수 있음 - 함수를 비동기 작업의 완료 후, 실행되도록 스케줄링할 수 있음 3. 예시 - a 함수는 3초 후, 비동기 작업이 완료되고 그 작업이 완료된 후, b 콜백 함수가 실행됨 console.clear(); function a(callback) { setTimeout(function () { console.log("비동기 작업 완료"); callback(10); // callback 함수를 호출 ..
![]()
HTML SEO(검색 엔진 최적화) 기본사항 1. HTML SEO 기본사항 - HTML을 사용하여 웹 페이지를 작성할 때, SEO(검색 엔진 최적화)를 고려하는 것은 중요합니다. - 다음으로는 HTML을 사용한 웹 페이지의 SEO 기본사항입니다. 2. 의미있는 HTML 요소 사용 - 웹 페이지의 구조를 설명하기 위해서는 의미 있는 HTML 요소를 사용해야 합니다. - , , 등을 사용하여, 페이지의 구조를 검색 엔진에 명확하게 전달해야 합니다. 3. 제목 태그 사용 - 태그를 사용하여, 페이지의 제목을 정의해야 합니다. - 이 제목은 검색 결과에서 표시되며, 페이지의 주요 주제를 나타내야 합니다. 웹 페이지 제목 4. 메타 태그 활용 - 태그를 사용하여, 페이지의 메타 데이터를 제공해야 합니다. - de..
![]()
HTML 유효성 검사 1. HTML 유효성 검사 - HTML 문서의 유효성 검사는 문서가 웹 표준에 부합하는지 확인하는 과정임 - 다양한 온라인 도구 or 브라우저의 내장 도구를 사용하여, 유효성 검사를 수행할 수 있음 2. 유효성 검사의 목적 - 크로스 브라우징 지원 - 모든 브라우저에서 일관된 방식으로 페이지를 표시하려면, 표준을 준수해야 함 - 웹 접근성 - 장애인 or 특정 기기를 사용하는 사용자에게 웹 페이지를 쉽게 이해하고 사용할 수 있도록 지원하기 위해 웹 접근성 표준을 준수 - SEO (검색 엔진 최적화) - 검색 엔진은 웹 페이지를 크롤링하고 색인화할 때, 표준을 준수하는 페이지를 선호함 ※ 크롤링 : 웹 페이지에서 정보를 추출하는 프로세스 3. 유효성 검사 방법 - HTML 문서의 유표..
![]()
DNS (Domain Name System) 1. DNS (Domain Name System) - 컴퓨터 네트워크에서 사용되는 서비스 - 사람이 이해하기 쉬운 도메인 네임을 컴퓨터가 이해할 수 있는 IP주소로 변환하는 역할을 함 - 사용자가 웹 브라우저를 통해 도메인 네임 입력 시, 해당 도메인 네임에 연결된 IP 주소를 찾아 웹 서버에 연결함 2. DNS의 주요 구성 요소와 동작 방식 구성요소 설명 도메인 네임 (Domain Name) - 사용자가 기억하기 쉬운 형태의 문자열 (ex: www.example.com과 같은 형태) IP 주소 (Internet ProtocolAddress) - 네트워크 상에서 컴퓨터를 식별하기 위한 숫자로 된 주소 DNS 서버 - 도메인 네임을 IP주소로 변환하거나, 그 반..
![]()
NHN CSS 컨벤션 1. css 속성 선언 순서 (2012년 기준) - 속성 선언 시, 그 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 순서로 선언 - 관련 속성은 대표되는 속성 다음으로 선언하며, 다음과 같은 표에 표기된 의미 순서대로 선언 순서 의미 대표되는 속성 1 레이아웃 display visibility overflow float clear position top right bottom left z-index 2 BOX width height margin padding border 3 배경 background 4 폰트 font color letter-spacing text-align text-decoration text-indent vertical-align white-sp..
커밋 메시지 수정하기 1. 커밋이 아직 local에 있을 때 - commit --amend 입력 후, 수정 - git local 입력 후, 확인
