beyond_developer.log

괄호를 Tab으로 건너뛰고 싶을 때 - VScode Tabout 익스텐션

Thu, 17 Oct 2024 11:39:47 GMT

VScode는 ( { [ 등의 여는 브라켓이나 ' " 등의 따옴표를 입력하면 친절하게 닫는 기호를 자동으로 입력해준다.

하지만 몇몇 IDE에서 제공하는 편의기능이 기본적으로 없는데, 바로 Tab 키로 괄호 밖으로 커서를 옮기는 것이다.

나는 Tab키로 괄호 밖으로 이동하는 데 익숙해져 위 영상과 같은 실수를 하며 살짝 짜증을 낸다.

타이핑에 바쁜 우리의 손가락을 방향키나 마우스에 쓰기는 안타깝다.

이 때 우리에게 유용한 확장프로그램이 있다.

VScode Extension해서 Install 하면 별 다른 설정 없이 적용되고,

일반적인 상황에서는 Tab키가 Tab 공백으로 작동하면서, 브라켓이나 따옴표 기호에 사용했을 때, 커서가 다음으로 이동하는 기능이 추가된다.

기호 내부에 내용을 작성한 경우 통째로 건너뛰기가 되며, 기호에 맞닿아 있지 않은 공간에 커서를 두고 Tab키를 누르면 역시 일반적인 Tab 공백을 추가한다.!

[데브코스 풀스택과정] 11-12월 회고

Sun, 31 Dec 2023 14:40:48 GMT

풀스택 데브코스 과정에 참여한 지 벌써 2달차, 연말을 맞아 그간의 회고를 작성해보고자 한다.

지난 7주 동안 Git, HTML/CSS, Express, MariaDB의 문을 열어보았다.

온라인 강의와 실습으로 진행되는 데브코스의 과정을 짧게 돌아보며 개인적으로 느낀 소감들을 짚어보겠다.

좋았던 점

일정을 유연하게 조절할 수 있다.
비실시간 온라인 위주의 강의를 수강하기 때문에, 특별한 일이 있는 경우 스케쥴을 유연하게 조율할 수 있다는 점이 좋았다.
필요한 강의를 다시 볼 수 있다.
벌써 7주동안 큰 테마들로의 입문을 경험했는데, 한 번 강의로 학습한 내용이 충분히 헷갈리기 마련인데, 이를 원할 때 다시 돌려볼 수 있도록 되어있기 때문에 좋았다.
대면이 없는 온라인의 제한점을 보완할 수 있는 이벤트가 있다.
일주일에 한 번 팀 복습발표 시간과 멘토링을 진행하여, 같이 학습하고 있다는 소속감을 불어넣고, 동료학습을 지향하는 문화를 만들고자 한다.

아쉬운 점

아쉬운 점은 사실 개인적인 문제이다.

온라인 강의의 장점 때문에 나태해지는 상황
12월에 많은 일들이 있었다는 핑계로 학습과 TIL 작성에 소홀했다. 강의를 언제든 돌려볼 수 있기 때문이라는 이유로 강의만 시청하고 이후 학습에 시간 투자가 많이 적어졌다.
집에만 너무 있게 된다.
지난 기간동안 업무/학습 공간과 생활공간을 분리하는 것이 나의 생활 패턴에 맞다는 생각이 들었다. 데스크탑을 두고 집에서 학습하니 생활 패턴을 지키기가 힘들고, 처음으로 집에서 일주일 내내 있는 생활을 해 보게 되었다. 나의 체질에는 이런 패턴이 건강하지 않다는 것을 알게 되었다.

개선할 점

TIL 작성을 꾸준히 하자!
처음부터 TIL작성을 매일 수행하다 어느 시점에서 끊어지게 되었는데, 1월부터 다시 TIL작성을 성실히 수행할 것이다.
학습 공간을 분리하자!
1월부터는 공유오피스를 끊어 매일 출근하며 학습공간과 생활공간을 분리하고, 조금 더 효율적인 학습시간 관리와 질을 찾기 위해서 노력할 것이다.

아직 많이 부족한 부분이 많은 것 같다. 신년 맞이와 함께 새롭게 시작해보자!

[데브코스 TIL] 4주차 Day 3 / Express.js - 웹 풀 사이클 데브코스 TIL

Wed, 06 Dec 2023 14:32:16 GMT

Express 모듈 입문!

'23.12.06(수) 웹 풀 사이클 데브코스 TIL

Express

Express.js 모듈은 http 모듈을 사용해 서버를 구성할 때 필요한 함수나 설정들을 미리 적용해 보다 간단하게 js로 서버를 만들고 관리할 수 있게 도움을 주는 모듈이다.

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

npm document에 적혀있는 예제이다.

함수(경로, 콜백함수) 의 구조로

app.get() app.post() app.put() app.delete()

의 기본적인 CRUD 기능을 사용할 수 있다.

http 모듈의 write 기능과 달리 express의 res.send() 는 argument의 타입을 자동으로 인식한다.

res.json() 처럼 json으로 확정하여 전송할 수 있는 메서드도 있으나, 성능 자체에 큰 차이가 있는 것은 아니다.

res.send()나 res.json() 모두 더 이상 응답이 없다면 자동으로 end 하기 때문에 http와 달리 end 메서드를 굳이 사용하지 않아도 된다.

JSON

JSON(JavaScript Object Notation)

JSON은 JavaScript 객체 리터럴, 배열, 스칼라 데이터를 표현하는 텍스트 기반의 방식이다.

JSON을 이용해 웹에서 데이터를 교환할 때, 한 번의 전송으로 동일한 범주나 다양한 데이터를 모아서 전송할 수 있다.

let person = {
    name : “Jinwhan”,
    age : 25
}

let book = {
    name : “Node.js를 공부해보자.”,
    price : 20000,
      description : "Node.js 학습으로 백엔드 개발자 되기" 
}

JS의 객체를 생성하는 방식으로 JSON 데이터를 만들 수 있다. 위 예시는 엄밀히 말하면 JS 객체다.

JS 객체와 JSON의 차이점

JS 객체는 JS 엔진 메모리 내에 있는 데이터 구조 이고, JSON은 객체의 내용을 기술하기 위한 텍스트 파일이다.

// people.json
{
    name : “Jinwhan”,
    age : 25
},
{
  name : "Gildong",
  age : 581
}

위처럼 json 데이터는 .json이라는 json 확장자의 텍스트 파일로 저장할 수 있고, 이를 불러와 데이터 연산에 사용할 수 있다.

데이터를 저장하는 구조는 JS 객체와 동일하지만 JS 프로그래밍의 데이터 타입이 아닌 별도의 데이터 묶음 정도로 생각할 수 있다.

회고

지난 시간에 이어 http와 express로 백엔드 개발의 입문을 학습했다. 앞으로 express를 더 학습하며 개발에 사용하게 되겠지만,

더 높은 수준의 모듈을 사용해 개발하는 만큼 근본적인 원리에 대해 학습하는 과정이 꼭 필요할 것 같다.

[데브코스 TIL] 4주차 Day 2 / Node.js와 NPM - 웹 풀 사이클 데브코스 TIL

Tue, 05 Dec 2023 07:35:20 GMT

'23.12.05(화) 웹 풀 사이클 데브코스 TIL

Node.js의 특징

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking) I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. - 위키백과

JS는 기존에 웹 브라우저에 의존하여 사용할 수 있는 웹을 위한 스크립트 언어였으나, Node.js 라는 플랫폼이 등장하면서 웹 브라우저 외 환경에서 JS를 실행할 수 있게 되었고, 독립적인 프로그래밍 언어의 입지를 가지게 되었다.

Node.js의 특징은 크게 3가지가 있다.

싱글스레드
CPU의 코어 당 하나의 순차적인 흐름으로 Task를 수행

음식점에 한 명의 요리사가 일을 함
주문이 들어오면 음식을 만들고, 다른 주문은 앞 주문이 끝날 때까지 대기
앞 주문이 끝나면 다음 주문을 처리하고 주문이 없으면 쉼

-> 한 명이 순차적으로만 작업을 처리한다면 비효율적일 것 -> 논블로킹 I/O 방식으로 보완

논블로킹I/O
I/O를 시작하자마자 함수를 리턴해 I/O작업 실행의 성공여부를 확인하고 다음 Task를 수행
라면과 볶음밥 주문이 들어왔을 때 라면 물을 끓이는 동안 밥을 볶아냄
앞 주문이 끝나는 것을 기다리지 않고 다음 작업을 실행해 비효율성을 극복
이벤트 기반
특정 이벤트가 발생할 때 지정해 둔 콜백 함수를 실행
볶음밥 주문이 들어오면 준비해둔 재료로 레시피에 맞게 조리

NPM

라이브러리 vs 프레임워크

라이브러리는 특정 기능 수행을 위해 만들어진 모듈을 말하며, 사용자가 직접 원하는 기능을 찾아 사용할 수 있다.

프레임워크는 개발자들이 소프트웨어를 개발하는 데 사용되는 구조를 제공한다. 특정 목적을 위해 여러 컴포넌트와 라이브러리를 제공하는 구조를 의미한다.

React.js 는 반응형 웹 FE 개발을 목적으로 개발을 위해 다양한 라이브러리와 환경을 제공하는 "구조"이고, React 내에 Router 기능을 위한 라이브러리를 사용할 수 있다.

라이브러리는 여러 개발자가 공유해 사용할 수 있는 코드 모음이고, 프레임워크는 개발환경을 만들기 위한 라이브러리들과 규칙들을 통해 만들어진 구조이다.

NPM

NPM(Node Package Manager)

JS 라이브러리를 포함한 패키지들을 관리하는 도구이다. https://www.npmjs.com/

NPM 웹 사이트에서 라이브러리들을 찾아볼 수 있으며, npm 명령어로 node 환경에서 라이브러리들을 프로젝트에 바로 적용할 수 있다.

회고

라이브러리, 모듈, 패키지, 프레임워크 등 비슷하지만 아리송했던 단어들의 의미관계를 알 수 있는 시간이었다.

NPM에 간단한 것부터 복잡한 다양한 라이브러리들이 있는데, 개발 커리어를 쌓으면서 직접 나만의 NPM 라이브러리를 만들어 공유해보고 싶다.

[데브코스 TIL] Day 12 / REST API - 웹 풀 사이클 데브코스 TIL

Sun, 03 Dec 2023 19:59:18 GMT

'23.12.04(월) 웹 풀 사이클 데브코스 TIL

REST API는 무엇인가?

API

API(Application Programming Interface)

응용 프로그램 프로그래밍 인터페이스

응용프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. - 위키백과

Interface 그럼 인터페이스란 무엇인가?

서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고받는 경우의 접점이나 경계면이다. 즉, 사용자가 기기를 쉽게 동작시키는데 도움을 주는 시스템을 의미한다. - 위키백과

Inter - "사이의", "상호 간의" face - "마주하다", "소통하다"

웹 개발의 면에서 생각하면

사용자와 프로그램, 두 가지 장치, 브라우저와 서버 등

데이터 연산을 요청하는 정보 요청 주체와 정보 전달 주체를 연결하는 매개체 역할을 의미한다.

위를 참고하면

API는 "응용프로그램에서 다양한 기능을 이용할 수 있게 해주는 매개체" 정도로 생각해 볼 수 있다.

일례로, 지하철 노선도 앱 개발자는, API를 통해 교통공사의 DB에 접근해 정보를 요청해 전달받아 화면에 보여준다.

REST API

지난 학습에서 HTTP에 대해 간단하게 배웠다.

HTTP는 웹 상에서 원활한 통신을 위해 정한 메시지의 규약으로

웹에서 사용할 수 있는 API는 HTTP를 따라 보내도록 발전하였고,

HTTP의 조건을 잘 따르는 REST API 라는 개념이 탄생했다.

REST(REpresentational State Transfer) API

REST라는 아키텍쳐를 사용하여 설계한 API 라는 뜻으로,

HTTP의 규약을 잘 따르는 것이 이에 해당한다고 볼 수 있다.

HTTP 프로토콜 템플릿 중 Body에 연산을 요청하려는 데이터와 목적을 담는다.

대문자 X, 소문자 O
언더바(_) X, 하이픈(-) O
마지막에 “/” 포함 X
✨ 행위 포함 X = 목적을 포함하지 않는다. → POST, GET 등의 목적은 이미 API에 정의되어있으므로 표기에포함하지 않는다.
파일 확장자 포함 X
복수형을 쓴다.

HTTP Method

URL주소를 통해 요청을 전송하려는 위치와 요청 내용을 담는다.

상품 전체 조회

“GET” + products

http://localhost:8888/products

상품 개별 조회

“GET” + product

http://localhost:8888/products/[상품id]

상품 개별 수정

“PUT” + product

http://localhost:8888/products/[상품id]

복수형 표현을 사용하는 이유 product/[상품id] 개별 상품이기 때문에 product라는 단수를 사용할 수도 있지만,

products라는 복수형 표현을 사용하여

products라는 단어는 "상품"에 대한 모든 요청을 담당한다는 통일성을 부여할 수 있다.

회고

REST, RESTful, API 등 이리저리 들어본 단어들의 머리 속의 모호한 정의들을 바로잡을 수 있는 시간이었다.

REST API에 대해 간단하게 이해할 수 있는 좋은 시간이었고, 얼른 직접 API를 만들면서 사용해보고 싶다!

[데브코스 TIL] Day 11 / 개발자 취업을 준비하는 자세 - 웹 풀 사이클 데브코스 TIL

Tue, 28 Nov 2023 14:59:23 GMT

'23.11.28(화) 웹 풀 사이클 데브코스 TIL

우리는 개발자 취업을 위해 무엇을 준비해야 하는가?

오늘부터는 TIL을 작성하는 방법을 바꾸려고 한다.

기존에는 그 날 배운 내용을 가능한 예쁘고 많이 담는 것에 집중했는데, 김송아 강사님의 조언에 따라

오늘부턴 배운 내용에 대한 요약(다시 본다면 기억이 날 만한 메모장 역할)과 학습 과정에 대한 회고를 쓰는 쪽으로 시도해 볼 것이다.

개발자 취업을 위한 팁

1. 블로그 작성

플랫폼은 자유. 다만 날짜가 로그로 남겨지는 곳에서 "꾸준히" 작성하기
개발과정에서 겪은 오류 경험을 공유하고, 어떻게 해결했는지 작성(Best) 👍🏻
TIL : 학습 내용에 대한 짧은 정리와 함께 잘한 점, 아쉬운 점, 개선점을 회고하기
공부한 내용을 내가 설명할 수 있는 방식으로 표현하기
결국 면접에서 대답할 수 있으려면 나의 언어로 이해할 수 있어야 한다.

개발에 대한 지속적인 열정을 보여주고, 다른 사람과 공유하는 자세를 보여주는 대목

2. 프로젝트 정리(포트폴리오)

포트폴리오는 PDF와 같은 문서로 정리할 수 있는 형식이 좋다.
인쇄할 경우 링크를 찾아봐야 하는 번거로움
사용된 기술과 구현한 내용이 한 눈에 들어오게 표현한다.
GenSong (X) / Node.js 기반의 웹 작곡 플랫폼 (O)
각 프로젝트가 끝날 때 그 프로젝트에서의 자신의 역할과 장점을 정리
자기소개는 프로젝트 경험을 근거로 진행되면 좋음
ex) 꼼꼼한 성격이 장점! => 예외 테스트 경험 제시

문서로 만든 포트폴리오의 한 예시

한 페이지 당 하나의 프로젝트를 제시
왼쪽엔 내가 작성한 한 눈에 기능이 이해되는 코드 제시
오른쪽엔 해당 프로젝트에서 왼쪽 코드의 설명과 함께 프로젝트 소개
포트폴리오는 한 페이지에 내용을 담아내는 것이 중요함.
화려한 디자인(기능)의 프로젝트 vs 기본에 충실한 프로젝트
어떤 쪽이 됐건 내가 구현한 내용의 원리를 정확하게 이해하고 있어야 함.
많은 라이브러리를 사용한 프로젝트일 수록 특히 주의

3. 이력서 vs 포트폴리오 vs 프로젝트 기술서 vs 자기소개서

- 이력서 영미권에서 주로 사용되는 Resume Template을 참고하여 간결하게 한 페이지로 작성한다. 자기소개, 프로젝트 구현 내용, 경력/학력을 보통 작성하며, 프로젝트 경험 위주로 작성한다.

- 포트폴리오 이미지, 설계서, 소스코드 등 프로젝트를 전반적으로 소개할 수 있는 공간

- 프로젝트 기술서 프로젝트 하나 당 워드 반 페이지 분량, 서술형으로 작성

프로젝트 진행 과정 중 겪었던 이슈와 해결 방법, 어려웠던 점, 좋았던 점, 개선점 등 작성

- 자기소개서 자신의 장점과 단점을 프로젝트 경험을 기반으로 준비

단점의 경우 어떻게 보완하기 위해 노력했는지까지 생각하기

최소 2개 이상을 준비하여 깊은 꼬리질문을 방지하기

회고

오늘은 김송아 강사님과 함께 라이브 세션에서 스프린트에 대한 피드백과, 개발자의 포트폴리오 준비에 대한 팁을 얻을 수 있었다.

최근 며칠 간 온라인 학습 시간보다 TIL 작성에 시간을 더 많이 들이게 됐는데, 그 내용이 기술에 대한 얕은 수준의 나열 정도여서 내가 맞게 작성하는지에 대한 의문을 가졌다.

오늘 좋은 기회에 질문을 드리면서 올바른 방향을 찾을 수 있었고,

앞으로 진행할 프로젝트와 함께 어떻게 블로그를 작성할 지, 포트폴리오를 준비할 지 머리속에 윤곽이 그려진 것 같다.

오늘도 멋진 풀스택 개발자가 되기 위한 큰 한 걸음을 딛었다. ✨

[데브코스 TIL] Day 10 - 스프린트 1 / 포트폴리오 페이지 구현 - 웹 풀 사이클 데브코스 TIL

Mon, 27 Nov 2023 12:52:35 GMT

'23.11.27(월) 웹 풀 사이클 데브코스 TIL

포트폴리오 웹 페이지 구현

오늘은 그간 배운내용 중 HTML/CSS 만을 사용하여 간단한 포트폴리오 웹 페이지를 만드는 시간을 가졌습니다.

저는 개인적으로 좋아하는 기타리스트 Mateus Asato의 간단한 프로필과 유튜브 영상을 DP해봤습니다.

구현 내용

메인 프로필과 컨텐츠 파트 분리
을 통한 유튜브 영상 import
SNS 링크 아이콘 배치
Github Pages 배포

데모 페이지 https://sodlfmag.github.io/

깃허브 repo https://github.com/sodlfmag/sodlfmag.github.io

스타일

배경 그라데이션
프로필 사진 border-radius 적용
프로필 사진 drop-shadow 적용
폰트 변경
요소 정렬
여백 설정

index.html과 style.css 두 파일로 나눠서 Github Pages 로 배포해 봤습니다.

다음에 다른 프로젝트를 진행한다면

의 중첩을 많이 사용하는 것보다 좀 더 간결하게 작성하고 grid 템플릿을 사용해 스타일을 효율적으로 적용해 보면 좋을 것 같습니다.






    
        
        
        
        
        Mateus Asato
    
    
         
            Mateus Asato
            
                
                
                     Mateus Asato is a Brazilian guitar player who has been considered to the media one of the "most influential guitar players" of this modern era. 

His name is included on 

 Guitar World Magazine’s list of 
the TOP 10 Guitarists of the Decade (2020), 
 #3 TOP Guitarist Right Now (via Total Guitar 2020), 

and his latest appearance was on Guitar World Magazine in 2022, being on number #14 of the list of ‘Hottest Guitar Players In The World’.

/* sytle.css */

@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

body{
    background-image : linear-gradient(to bottom, rgb(235, 235, 235) 20%, white 80%);
}
.mainName{
    font-family: 'Questrial', sans-serif;
    font-size: 50px;
}
.bodyContainer{
    padding-left: 15vw;
    padding-right: 15vw;
}

.mainImg{
    margin-left: 3vw;
    width: 400px;
    filter: drop-shadow(10px 6px 6px #c3c3c3);
    border-radius:15px;
}

.mainContainer{
    position : relative;
    display: flex;
}
.mainBio{
    margin-left: 10vw;
    font-family: 'Questrial', sans-serif;
    font-size:20px;
}

hr{
    margin-top: 40px;
    border: solid 1.5px rgb(215, 215, 215);

}
.socialLinks{
    display: flex;
    right: 10vw;
    position: absolute;
    bottom: 0;
    right: 20px;
}
.socialLink{
    width: 40px;
    margin-right: 20px;
}

iframe{
    margin-top: 30px;
}
.videoContainer{
    display: flex;
    flex-direction:column;
    align-items: center;

}

[데브코스 TIL] Day 9 - 데이터베이스 - 웹 풀 사이클 데브코스 TIL

Fri, 24 Nov 2023 10:14:49 GMT

'23.11.24(금) 웹 풀 사이클 데브코스 TIL

MariaDB와 데이터베이스 기초학습

데이터베이스

데이터베이스의 정의는

데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체이다. 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 빠른 데이터 연산을 가능하게 한다.

데이터를 구조적으로 저장해 조회,삽입,수정,삭제 등의 연산을 용이하게 하고 이를 별도의 플랫폼에서 관리하여 여러 서비스와 연결해 사용할 수 있다.

데이터베이스를 운영하고 관리하기 위해서 DBMS(DataBase Management System)의 개념을 이해할 필요가 있다.

DBMS 데이터베이스를 관리하고 운영하는 소프트웨어이다. 다양한 데이터가 저장되어있는 데이터베이스 여러 명의 사용자나 응용 프로그램과 공유하고 동시에 접근이 가능하게 한다.

대표적으로 Oracle, MySQL, MariaDB 등의 제품이 있으며, 이들은 모두 SQL 이라는 언어를 통해 이용할 수 있다.

SQL

SQL(Structured Query Language)은 뜻 그대로 하면 '구조화된 질의어'이다. DB는 데이터를 구조화하여 저장하므로, 이 데이터의 생성, 조회, 수정 삭제 등의 연산을 요청하기 위해 구조화된 요청을 보내는 역할을 한다.

앞서 언급한 대표적인 DBMS들이 SQL이라는 언어를 통해 연산을 처리하지만, 각각의 제품에 따라 세부적인 용법의 차이가 존재한다. 하지만 대표적인 연산을 수행하는 방식은 동일하다.

데이터 삽입 : INSERT
데이터 조회 : SELECT
데이터 수정 : UPDATE
데이터 삭제 : DELETE

위 질의어는 모두 동일하고, 구조나 용법에 있어 매치되는 개념이 많기 때문에, 한 제품의 질의어를 학습하면, 다른 제품의 것을 학습하는 데 어려움이 크지 않다고 한다.

우리는 MariaDB 라는 DBMS를 사용해 기초적인 연산을 수행해 볼 것이다.

필자는 Docker Container 환경으로 MariaDB를 설치해 사용했다.

DB는 기본적으로 데이터를 Table 형식으로 저장한다.

각 Column은 저장하려는 정보의 속성(분류) 각 Row 은 개별 데이터(레코드) 를 의미한다.

SHOW DATABASES; - 현재 저장된 모든 DB를 보여준다. CREATE DATABASE [DB이름]; - DB 공간을 생성한다. USE [DB이름]; - 작업공간을 해당 DB로 이동한다.

테이블 생성

처음 터미널에서 MariaDB 실행환경에 들어가면 커서가 (none)으로 아무 DB도 가리키지 않고 있는 상태이다.

CREATE DATABASE Tennis; USE Tennis

두 명령어를 사용해 Tennis라는 DB 공간을 만들어 작업공간을 이동해보자.

터미널의 커서가 Tennis를 가리키고 있다.

이제 이 예시와 같은 테이블을 만들어 보겠다.

CREATE TABLE member
(
    id INT,
    name VARCHAR(30),
    pwd VARCHAR(30),
);

위 명령어로 member라는 테이블을 만들어, 정수 타입의 id, 문자열 타입의 name, pwd 속성을 만들었다.

데이터 삽입

INSERT INTO [테이블명] VALUES ([각 속성에 대한 값들]); - 테이블에 데이터 한 행을 추가한다.

INSERT INTO member VALUES
(
    'gameMaker',
    'Gildong Hong',
    'newPass3@'
);

위 방식으로 내부 요소만 바꾸어 세 개의 데이터를 입력해보자.

데이터 조회

SELECT [컬럼명] FROM [테이블명]; 테이블 내 저장된 정보 중 지정된 컬럼의 정보를 나열한다.

SELECT id, name, pwd FROM member;

위에서 삽입한 데이터를 확인해보면 의도한 결과대로 출력된다.

데이터 수정

UPDATE [테이블명] SET [컬럼명] = [수정할 값] WHERE 조건;

UPDATE member SET pwd = 'ThisisPassword!@#' WHERE id = 'sodlfmag';

sodlfmag의 패스워드가 정상적으로 수정된 것을 확인할 수 있다.

[데브코스 TIL] Day 8 - Node.js로 만드는 웹 서버 - 웹 풀 사이클 데브코스 TIL

Thu, 23 Nov 2023 23:31:58 GMT

'23.11.23(목) 웹 풀 사이클 데브코스 TIL

Node.js로 백엔드 서버 구축하기

백엔드의 구조

백엔드(Backend)는 지난 TIL에서 소개한 것처럼 프론트엔드(Frontend)의 반대 개념으로 사용자에게 보이지 않는 서버측(Server-side) 개발 분야를 의미한다.

백엔드는 크게 웹서버, 웹 어플리케이션 서버, 데이터 베이스로 구성되고 Client 컴퓨터와 함께 통신하는 관계로 이루어진다.

웹 서버(Web Server) 웹 서버는 화면 내 내용이나 데이터의 변동이 없는 정적 페이지에 대응하는 역할을 한다.
웹 어플리케이션 서버(WAS) 웹 어플리케이션 서버는 데이터 처리/연산을 통해 화면의 내용이나 데이터가 변하는 동적 페이지를 처리한다.
데이터베이스(DB) 데이터베이스는 웹에서 사용될 데이터의 저장공간으로, 내일 학습에서 자세하게 다룰 예정이다.

Web Server와 WAS를 왜 분리하는가?

Web Server와 WAS를 하나로 합쳐서 정적인 페이지를 보여줌과 동시에 동적인 처리를 수행하면 안되는가? -> 가능하다.

그럼 왜 개념적으로 이를 분리할까?

기능 분리를 통해 서버의 부하를 줄인다.
다양한 요청을 처리하기 위해 WAS에는 이미 부하가 큰 상태이기 때문에, Web Server를 분리해 빠르게 정적인 콘텐츠를 제공할 수 있도록 한다.
물리적으로 분리하여 보안을 강화한다.
여러 대의 WAS를 연결해 로드 밸런싱을 이용할 수 있다.
오류가 발생하거나 큰 트래픽으로 인한 중단을 방지할 수 있다.
여러 언어의 웹 어플리케이션 서비스가 가능하다.
하나의 서버에서 다양한 웹 어플리케이션의 활용이 가능해진다.

Node.js

Node.js는 자바스크립트를 스크립트 언어를 넘어 프로그래밍이 가능하도록 지원하는 플랫폼이다.

Node.js로 Web Server와 WAS의 역할을 구현할 수 있고, 만든 WAS를 통해 DB와 통신하는 것도 가능하다.

즉, Node.js를 이용해 자바스크립트로 백엔드를 구현할 수 있다!

이제 *Node.js *를 통해 백엔드의 기본적인 구조와 동작을 실습해 보자.

Node.js 에서 사용되는 함수와 개념을 직접 코드를 통해 학습해 보겠다.

웹 서버 만들기

//server.js
let http = require('http');

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello Node.js')
    response.end();
}
http.createServer(onRequest).listen(8888);

require() - 모듈을 불러오는 함수
request - 클라이언트가 서버에게 전달하려는 정보나 메시지를 담는 객체
response - 서버에서 클라이언트로 응답 메시지를 전송 시켜주는 객체
writeHead() - http response의 header를 설정하기 위한 http 모듈의 함수
response.write() - 서버가 브라우저에 response 객체를 전송하는 함수
response.end() - 응답을 종료하는 함수
http.createServer() - 서버 인스턴스를 생성하는 함수
listen() - 서버 생성 후 접속 포트를 할당하는 함수

위 코드를 해석하면

node의 http 모듈을 require()함수를 통해 불러온다.
onRequest()라는 함수를 만들어 http 요청에 응답한다.

-> 정상적으로 접속된 http 200 인 경우 text/html 타입의 컨텐츠를 보낸다. -> 'Hello Node.js' 라는 컨텐츠(text/html 타입)를 담아 보낸다. -> 응답을 종료한다 3. createServer().listen(8888)을 통해 서버를 열어 8888번 포트와 연결하고, 응답을 위해 만든 onRequest함수를 콜백함수로 전달한다.

위 코드를 터미널에 node server.js를 통해 실행하면

성공적으로 접속해 응답으로 보낸 메시지를 확인할 수 있다.

server.js 모듈화하기

다른 코드에서 서버의 동작을 제어할 수 있도록 server.js를 모듈화 해보자.

//server.js
let http = require('http');

function start() {
    function onRequest(request, response){
        // request와 response의 값은 node가 알아서 넣어줌
        // reponse를 가지고
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }
    http.createServer(onRequest).listen(8888);
}
exports.openServer = start;

//index.js
let server = require('./server');

server.openServer();

exports.[객체 이름] = [모듈 이름] - 객체에 모듈을 담아 내보내는 함수

server.js 에서 onRequest()기능과 createServer() 기능을 합친start()라는 함수를 openServer이라는 이름에 담아 모듈로 내보낸다.

_-> 실습을 진행하면서 관계를 명확히 이해할 수 있도록 함수 이름과 저장할 객체 이름을 다르게 설정하였다. _ 같은 디렉토리에 위치한 index.js에서 방금 만든 server.js 파일을 import해 openServer 메서드를 실행할 수 있는 구조로 만들었다.

터미널에 node index.js를 입력하면 아까와 같은 페이지 결과가 나오지만,

index.js와 server.js를 분리할 수 있게 되었다.

Router 분리하기

Route는 경로라는 뜻이고, Router는 경로를 잡아주는 길잡이라는 뜻이다.

웹에서 라우팅(Routing)은 요청에 따라 정해진 경로, 즉 요청된 페이지로 안내하는 방법이다. 일반적으로 웹 페이지를 띄워주는 동작 자체를 라우팅이라고 표현하기도 한다.

//server.js
let http = require('http');
let url = require('url')

function start(route) {
    function onRequest(request, response){
        let pathname = url.parse(request.url).pathname;
        route(pathname)

        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello Node.js')
        response.end();
    }
    http.createServer(onRequest).listen(8888);
}

exports.openServer = start;

//router.js
function route(pathname) {
    console.log('pathname : ' + pathname);
}

exports.sendPathname = route;

//index.js
let server = require('./server');
let router = require('./router');

server.openServer(router.sendPathname);

routing 하는 로직을 분리해 router.js에 만들어보자 우선 지금은 보여줄 페이지가 하나 이므로 router에서 URL을 콘솔에 출력할 수 있도록 route()함수를 만들어 테스트 해 보았다.

router.js의 route() 함수를 sendPathname이라는 객체에 담아 export 한다.
index.js에서 openServer 객체에 sendPathname을 전달한다.
server.js에서 url.parse(request.url).pathname를 통해 url을 받아올 수 있게 설정한다.

node index.js를 입력한 뒤 주소창 URL 경로에 routeTest를 입력했을 때

입력한 /routeTest 경로가 콘솔창에 잘 출력됨을 확인할 수 있다.

요청에 따라 다른 페이지를 라우팅하기

이제 실제 상용되는 웹 페이지처럼 경로에 따라 다른 페이지를 라우팅 해보자.

//requestHandler.js
//url을 통해 접속이 되면 handle을 통해 main, login 함수가 호출되므로 response를 각 함수가 받도록 함
function main(response) {
    console.log('main');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Main Page')
    response.end();
}

function login(response) {
    console.log('login');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Login Page')
    response.end();
}

let handle = {}; // key: value
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

//server.js
let http = require('http');
let url = require('url')

function start(route, handle) {
    function onRequest(request, response){
        let pathname = url.parse(request.url).pathname;
        route(pathname, handle, response)
    }
    http.createServer(onRequest).listen(8888);
}

exports.openServer = start;

//router.js
function route(pathname, handle, response) {
    console.log('pathname : ' + pathname);

    if (typeof handle[pathname] == 'function') {
        handle[pathname](response);
      } else {
        response.writeHead(404, {'Content-Type' : 'text/html'});
        response.write('404 Not found')
        response.end();
      }
}

exports.sendPathname = route;

//index.js
let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler')

server.openServer(router.sendPathname, requestHandler.handle);

main과 login이라는 페이지 두 가지를 만들어 보자.

기존에 server.js의 onRequest() 함수 내에 있던 route 로직을 requestHandler.js라는 파일의 각 경로 별 라우팅 함수로 옮김
reuquestHandler.js의 handle이라는 딕셔너리에 경로가 키로 입력되면 각 라우팅 함수가 반환되도록 설정
router.js에서 HTTP status가 404인 경우 Not found 메시지를 응답함. '/' 경로를 입력하면 메인 페이지가 라우팅된다. '/login' 경로를 입력하면 로그인 페이지가 라우팅된다. handle 딕셔너리에 존재하지 않는(라우팅 목록에 없는) 경로를 입력한 경우 404 Not Found 페이지가 라우팅된다.

이제 비로소 요청에 따라 다른 웹 페이지를 띄워주는 백엔드의 기초적인 모습을 만들 수 있게 되었다.

[데브코스 TIL] Day 7 - CSS와 Javascript - 웹 풀 사이클 데브코스 TIL

Wed, 22 Nov 2023 11:15:00 GMT

'23.11.22(수) 웹 풀 사이클 데브코스 TIL

CSS와 JS의 시작

오늘은 웹을 예쁘게 꾸며주고 동작할 수 있게 하는 CSS와 JS 학습을 시작했다.

1. CSS

CSS는 Cascading Style Sheets의 약자로, 지난 시간에 배운 HTML을 꾸며주는 언어이다.

HTML의 요소(element) 단위로 하나하나 꾸며줄 수 있으며,

색을 바꾸고, 크기를 조정하고, 위치를 지정하는 등

웹 페이지를 보기 좋게 스타일링 하는 역할을 하고, 이는 웹 페이지를 방문할 사용자의 사용자경험에 큰 영향을 미친다.

이 CSS를 HTML에 적용하는 방식은 세 가지다.

인라인(inline): HTML 태그 안에 같이 작성
내부 스타일 시트(internal style sheet): HTML 문서 안에 같이 작성
외부 스타일 시트(external style sheet): HTML 문서 밖에 작성하고 연결

아래 예시들을 통해 어떻게 적용할 수 있는 지 알아보자.

_예시를 간결하게 표현하기 위해 실제로 스타일을 적용하는 부분 외 HTML이나 코드는 생략했다. _

1. 인라인

인라인 방식은 HTML 요소 내 style 속성을 통해 CSS를 적용하는 방식이다.

Login

이라는 HTML은

위와 같이 Login 이라는 h1 텍스트 요소이다. 이 Login이라는 텍스트를 인라인 방식으로 빨간색으로 바꾸고 싶다면

Login

h1 태그 내 style 속성에서 color 라는 CSS 옵션을 추가하여 적용할 수 있다.

2. 내부 스타일 시트

내부 스타일 시트는 현재 위치의 HTML에서 CSS를 분리하여 작성하는 방법이다. ...

`Login`


    Logout

내부 스타일 시트를 이용할 땐 ...

`Login`


    Logout

이제 id 속성을 통해 Logout을 파란색으로 만들어 보자. id는 HTML 태그의 id='[원하는 id]' 이라는 옵션으로 추가할 수 있다.

...

`Login`


    Logout

이제 Login과 Logout을 구분해 스타일을 적용할 수 있게 되었다.

3. 외부 스타일 시트

외부 스타일 시트는 CSS를 외부의 파일로 분리하여 적용하는 방식이다. [파일 이름].css 라는 css파일을 따로 만들어 태그를 통해 이를 불러와 적용할 수 있고, 내용은 내부 스타일 시트와 동일하게 작성할 수 있다.


    ...
    
    ...
    Login
    Logout

/*- style.css*/
        .loginText{
            color:red;
        }
        #logout_id{
            color:blue;
        }

이 방식으로 적용하면 내부 스타일 시트 예시와 동일하게 스타일을 적용할 수 있다.

파일을 분리하는 형태이기 때문에 가독성이 높아 업무에서 자주 사용하는 방식이다.

2. Javascript

Javascript는 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어로, 사용자와의 상호작용 및 동적인 웹사이트를 만들기 위해 도입되었다.

여기서 스크립트 언어란 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 (프로그램 내부의 구성 요소 중 하나로) 프로그램을 제어하는 스크립트 역할을 하는 언어로

뜻 그대로 프로그래밍이 아닌 HTML 요소에 동적인 기능을 부여하기 위해 사용되고,

현재는 Javascript가 발전하여 독립적인 프로그래밍 언어로 사용할 수 있게 되었다.

이제 JS의 변수, 함수, 조건문에 대해 아주 간단하게 살펴보자.

변수

JS에서 변수를 만드는 방법은 두 가지가 있다.

let [변수명];
const [변수명] = [값];

let 은 가변한 변수를 만들기 위해 사용되는 타입이고, const는 변하지 않는 변수를 만들기 위해 사용되는 타입이다.

let 변수는 선언 시 값을 초기화 하지 않아도 되지만, const 변수는 선언 시 반드시 초기화 해 주어야 한다.

함수

JS에서 함수를 만드는 기본적인 방법은 function [함수 이름] ([매개 변수(들)] { ... }) 이다.

[함수이름](값(필요 시)) -> getUserName(a) 의 형식으로 함수를 call 할 수 있다.

함수 이름은 이름을 보자마자 어떤 기능을 하는 지 알 수 있도록 작성하는 것이 좋다.

조건문

if([조건식]){
  ...
    }
else{
  ...
    }

if문의 조건식에서 조건식이 참인 경우 if블럭을, 거짓인 경우 else블럭을 실행한다. 조건문은 특정 조건에 대한 동작을 위해 조건문을 사용한다.

함수와 조건문을 만드는 다른 방법도 있지만, 해당 내용을 학습하는 TIL에서 추가하도록 하고, 기본적인 내용을 이용해 HTML 요소에 기능을 부여하는 방법을 중점으로 작성하도록 하겠다.

이제 JS를 HTML에 적용하는 방법을 살펴보자.

JS를 HTML에 적용하는 방법 역시 CSS와 동일하게 인라인, 내부 스타일 시트, 외부 스타일 시트 방식이 있다.

오늘은 메시지창을 띄우는 alert() 함수를 이용해 HTML에 기능을 부여해 보자.

1. 인라인

위의 페이지에서 버튼 타입의 input 태그의 onclick속성에 onclick="alert('너, 멋진 개발자가 될거야!')"

alert() 함수를 넣어 버튼을 클릭할 때 메시지창이 뜨도록 설정해 보았다.

드디어 웹 페이지에 기능을 추가할 수 있게 되었다.

2. 내부 스타일 시트

내부 스타일 시트는

makeMessage() 라는 함수를 만들어 input으로 들어온 사용자 입력을 받아 메시지를 띄웠다.

3. 외부 스타일 시트

위 내용을 CSS와 마찬가지로 외부 파일로 분리하여 만들 수 있다.

// makeMessage.js
function makeMessage() {
    let userName = document.getElementById('input_id').value
    alert(userName + ', 멋진 개발자가 될거야!')
}

HTML파일의 head 블럭 안에