Schema와 Database의 정의

MySQL에서의 Schema와 Database

Reference

Codesign: 양자컴퓨터 개발의 최신 트렌드

Quantum computer와 Classical Computer의 근본적인 차이

Quantum Computing != Parallel Computing

BQP Problems

Quantum Computer의 Challenges

Controlability

High fidelity operation이 가능한가

Scalability

Qubit을 얼마까지 늘릴 수 있을까

Neutral Atom을 이용한 Quantum Computer

왜 좋은가

한계점

소프트웨어 엔지니어들은 왜 양자컴퓨터에 관심을 가져야 하는가

https://tech.kakao.com/posts/351

https://jojoldu.tistory.com/481

https://leedo1982.github.io/wiki/Mysql_6_3_mysql_main_process/

'정렬'은 많은 연산을 필요로 하는 작업일 수 있다. MySQL를 간단하게 공부해보면서, ORDER BY 쿼리를 실행할 때 어떠한 방식으로 정렬이 이뤄지는지 궁금했다. 이에 대해서 간단하게 알아보았다.

파이프라인의 큰 흐름

출처: https://velog.io/@soom/Browser-Rendering-Process#7-painting

1. HTML과 CSS Parsing

우선, HTML 파일은 바이너리 코드로 서버로부터 온다. 그리고는 이 파일을 string으로 바꾼다. 그 다음에 아주 중요한 단계가 나오는데, 렌더링 엔진은 이 문자열로 이루어진 HTML 파일을 parsing 한다.

HTML 파일을 parsing 하여 DOM tree로 만든다.

2. Render tree

3. Painting

4. Compositing

5. +) DOM이란?

• Github Repo
• 팀 노션

1. 🍹 프로젝트에 대한 간단한 설명

여태까지 배운 EJS, ExpressJS, MySQL 등만을 이용하여 CRUD 시스템이 적용되는 "하이볼 레시피 공유 플랫폼" 을 만들었다. 기본적으로 하이볼 레시피를 작성(Create), 수정(Update), 삭제(Delete), 조회(Read) 을 할 수 있도록 했다. 또한, 유저가 회원가입(Create), 수정(Update), 탈퇴(Delete), 조회(Read) 할 수 있도록 구현했다. 페이지는 총 6개다. (레시피 조회 / 레시피 작성 / 레시피 수정 / 레시피 / 회원가입 / 마이페이지)

2. 🙋🏻 내가 담당한 부분

1) 사용한 기술

• Front : EJS, Tailwind CSS, Axios
• Back : Sequelize, Express.js, MySQL

2) 구현한 부분들

내가 담당한 부분은 다음과 같다. 결과적으로, 프론트엔드와 백엔드를 둘 다 담당하였다.

• 레시피 작성페이지, 수정페이지, 조회페이지의 프론트엔드 부분
• 마이페이지(회원정보 조회 및 수정페이지)의 프론트엔드와 백엔드 부분

3. 회고

1) ✏️ 배운점

1. 프론트엔드와 백엔드 구현을 동시에 하다보니 큰 숲을 보고 개발할 수 있는 감각이 중요하다는 것을 알게되었다.

   • 예시) 화면의 input을 구현할 때, 백엔드에 어떠한 타입으로 넘겨야하는지 DB 레벨에서 생각해봐야 한다
   • 즉, 프론트엔드만 하더라도 백엔드에 대해서 아는 것은 시야를 확장시켜준다 (결국엔 끊임없이 공부해야 한다)

2. Tailwind CSS 를 처음 사용해보았다.

3. 여러장의 이미지를 axios와 multer로 백으로 넘기는 과정에 대해서 많이 배웠다.

   • 이 부분이 가장 골치 아픈 부분이었는데, 결국에는 해결되었다.

4. 첫 팀 프로젝트이다보니, Git으로 협업하는 방법에 대해서 배웠다.

   • git convention, branch control 등에 대해서 알게 되었다.
   • 동시에 같은 코드를 수정하다보니 조심해야 한다 (pull request 중요!)

5. 구글링 실력이 늘었다

2) ⚠️ 미흡한 점

1. 버그를 너무 주먹구구식으로 발견했다

   • QA를 해야할 리스트를 개발을 시작하기 전에 미리 만들었다면, 버그를 더 효율적으로 발견 가능했을 것 같다.

2. 프론트와 백을 연결하는 과정에서 발생한 자잘한 버그들을 해결하는 데에 많은 시간을 소비했다.

   • UI/UX에 대한 부분을 소홀히 한점이 너무 아쉽다.
   • 프론트엔드를 담당하게 되면서 멋진 UI/UX 구현에 도전해보고 싶었는데 시간이 부족했다.
   • 특히, 레시피 조회페이지의 시각화 방법에 대해서 더 고민해보고 싶었는데, 이 부분이 유난히 아쉬웠다.

4. 🤔 느낀점

소통, 소통, 소통

개발 프로세스의 많은 부분이 소통이라는 점을 느끼게 되었다. 같은 팀원들끼리의 소통은...

1) 문제가 커지기 전에 미연에 방지해주고, 2) 일을 두번 하지 않게 한다.

이번 팀 프로젝트에서는 소통이 비교적 원활하게 된 것 같아서 다행이라는 생각이 든다.

• 간단명료하게 소통이 이뤄질 수 있게 미리 정할 수 있는 부분은 최대한 정하고 개발을 시작하는 것이 좋을 것 같다
• 너무 적은, 너무 많은 소통을 해도 문제이다 ➡️ 결국 가장 적당한 소통빈도 및 방법에 대해서도 고민 필요하다

명예팀원, GPT

이전에 프로그래밍과 관련해서 구글링만을 했었더라면, 요즘에는 GPT도 활발하게 사용하고 있다. 버그 수정에 생각보다 많은 시간을 써야했는데, GPT를 쓰면서 그 시간을 조금이나마 줄일 수 있었다. 더 적극적으로, 더 정교하게 프롬프트를 쓸 수만 있다면 강력한 툴이 될 수 있겠다는 느낌이 들었다.

이외에도, 서비스를 구축하면서 새로운 복잡한 로직을 짜는 것보다 구글링하여 기능을 찾아다 쓰는 것이 생각보다 많았다. 특히, GPT를 쓰면 복잡한 코드를 순식간에 작성해준다. (정확도는 장담할 수 없다) 예를 들어, ERD 사진을 input으로 넣어주면, 3초만에 sequelize 코드를 줄줄 뽑아낸다.

이런 점에서, LLM 서비스들은 개발자의 든든한 동료가 되는 동시에, 위협적인 존재가 될 수 있다는 생각이 들었다. 솔직히 회사 입장에서 1시간 걸려서 sequelize를 쓰는 개발자보다 3초만에 코드를 써주는 GPT를 채용하는 것이 더 이득이다.

따라서, GPT에게 대체되는 개발자가 되지 않기 위해서는 나름의 대비가 필요해보인다. OpenAI의 창립자인 Sam Altman은 AI의 위협에 대해서 '앞으로 위협은 커녕, 엄청난 기회의 확대가 있을 것' 이라고 이야기하였는데, 모두에게 적용될 수 있는 이야기는 아닌 것 같다. 적어도 지금의 나는 미래에 쉽게 대체될 것 같다.

기본적으로, 웹 엔지니어링에 대한 fundamental을 다지고, 큰 그림을 그릴 수 있도록 (궁극적으로, GPT에게 프롬프트를 써주는 사람이 되도록) 훈련해야겠다는 생각이 들었다.

• fundamental : JS의 깊은 부분 (비동기 등), 웹브라우저 렌더링, 데이터베이스, 컴퓨터 아케텍쳐 및 OS, 알고리즘(데이터 구조, 시간복잡도, 정렬) 등
• 개발 이외의 영역 : 기획, UI/UX 디자인, 소통 및 협업 능력 등

차이점 (require / import)

CommonJS / ES6

require는 CommonJS를 사용하는 node.js문이지만 import는 ES6에서만 사용한다.

CommonJS는 서버사이드 JS가 나온 후, 표준화를 위해 정립된 모듈 표준이다. ES6는 2016년에 정립된 최신의 문법 표준이며, ES modules이라는 모듈 표준을 사용한다.

동기 / 비동기

require는 동기로 실행된다. require가 선언되면 하드웨어나 네트워크를 통해 즉시 스크립트를 실행한다. 따라서, require는 파일 경로를 지정해야 호출할 수 있다. require는 프로그램의 어느 지점에서나 호출 할 수 있다.

import는 정적으로 호출하기 때문에, 비동기로 실행된다. 따라서, import는 파일의 시작 부분에서만 실행할 수 있다. 하지만, import도 import()를 사용하면 원하는 지점에서 호출할 수 있다. 자세한 내용은 MDN에 써져 있다.

기타 등등

• import를 선언하기 위해서는 파일이 런타임 내에 파일이 모듈로 읽어져야 된다. 따라서, HTML의 <script> tag안에 type="module"을 적어야 한다.

• 한 프로그램 안에 require와 import를 동시에 사용할 수 없다.

• require는 모듈을 전부 불러오는 반면에, import는 모듈의 필요한 부분만 로드할 수 있다. 따라서, import가 더 효율적이라고 할 수 있고, 점점 많은 라이브러리들이 CommonJS의 지원을 중단하고 ES modules로 넘어가는 추세라고 한다.

import의 사용예시

// getPrimes.js - import / [export]
//     - Returns a list of prime numbers that are smaller than `max`.
export function getPrimes(max) {
  const isPrime = Array.from({ length: max }, () => true);
  ...
  return [...isPrime.entries()]
    .filter(([, isPrime]) => isPrime)
    .map(([number]) => number);
}

// [import] / export
import { getPrimes } from "/modules/getPrimes.js";
console.log(getPrimes(10)); // [2, 3, 5, 7]

require 사용예시

// require / [exports]
module.exports = module;

// [require] / exports
const module = require("module");

Reference

• MDN - import
• Tistory Blog - require vs import 문법 비교 (CommonJS vs ES6)
• Github Blog - What is CommonJS

썸네일 이미지는 OpenAI의 DALL-E로 제작되었습니다.

본격적으로 웹 개발을 배우기 시작했고 그 시작은 HTML이다. 리더님께서 요즘은 html을 하드코딩 하지는 않는다고 하셨지만, 그럴수록 기초를 아는 것이 중요한 것 같다!

HTML

HTML이란?

HTML은 HyperText Markup Language이다. 이 단어에서 유추할 수 있는 것은 HTML은 서로 다른 text를 연결해주고 (HyperText) 프로그래밍 언어가 아니라는 것(Markup Language)이다.

HTML은 웹사이트의 구조와 내용을 담고 있다. 즉, 웹사이트의 뼈대를 만드는 것이다. HTML의 기본적인 구조는 아래와 같다. closing tag가 필요한 element의 경우 이를 빼먹지 않도록 조심해야 한다! 모든 html element가 content가 필요한 것은 아니다. content가 없는 element의 경우는 void element라고 한다.

source: Mozilla Developer Network source: Mozilla Developer Network

class가 attribute name이고 editor-note가 attribute value가 된다.

HTML에서 중요한 지점들

HTML에는 수많은 tag들이 있다. 이 모든 tag들을 하나하나 외우는 것은 그다지 현명한 전략은 아니다. 모르는 tag를 검색하거나 tag의 attribute를 찾고 싶을때는 Mozilla Developer Network (MDN)에서 검색하면 된다. 혹은, 구글에 "tag mdn"이라고 검색하면 된다.

inline / block

모든 html element에는 기본적으로 설정되어 있는 display value가 있다. 많은 display value들이 있는데, 가장 대표적인 것이 inline과 block이다.

Inline source:w3schools.com

Block source:w3schools.com

사진에서 볼 수 있듯이, inline과 block의 차이는 명확하다. block의 경우 줄바꿈을 하는 것을 볼 수 있다. inline의 경우 줄바꿈을 하지 않는다. 그렇기 때문에, inline에 width와 height를 주는 것은 의미가 없다. block은 화면 전체를 width로 갖지만 height를 줄 수 있다.

대표적으로, inline에는 <span>이 있고 block에는 <p>가 있다. 하지만 모든 tag에 대해서 inline/block을 외우는 것은 비효율적이다. 많이 접하면서 자연스럽게 익히는 것이 더 효율적이다.

form tag / input tag

form element의 경우, user로부터 데이터를 받는 element를 감싸는 element이다. form tag의 경우 화면에 드러나지 않는 추상적인 tag이다. form tag에는 input, textarea, select 등이 들어간다.

input의 type attribute에는 다양한 value가 가능하다. 너무나 많기에 자세한 종류는 MDN: input element에서 확인하면 된다. 하나만 짚고 넘어가자면, user로부터 항목을 입력 받을 때, checkbox와 radio를 사용할 수 있다. checkbox는 중복입력이 가능하고 radio는 하나만 입력할 수 있다.

<h5>Your Hobbies</h5>
        <input type="checkbox" name="interest" id="" value="book">Book
        <input type="checkbox" name="interest" id="" value="cinema" checked>Cinema
        <input type="checkbox" name="interest" id="" value="sleep">Sleep

        <h5>Your Gender</h5>
        <input type="radio" name="gender" value="female" id="female"><label for="female">Female</label>
        <input type="radio" name="gender" valeu="Male" id="male"><label for="male">Male</label>

위의 코드처럼, 같은 입력항목들끼리는 같은 name으로 카테고리화 해줘야 한다. 또한, value 값을 쓰는 것도 잊지 말아야 한다.

웹 접근성 (Web Accessibility)

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

• Tim Berners-Lee

기술 문명의 혜택을 인류 보편에게 확대하는 것이 공학의 주요 목표임을 상기해보자면, 인종-장애-나이 등에 상관없이 모든 사람이 웹에 접근할 수 있도록 하는 것은 매우 중요하다고 할 수 있다.

웹 접근성을 향상시킬 수 있는 방법은 많다. 지금까지 배운 html 레벨에서도 웹 접근성을 높일 수도 있다.

1. <img> tag에서 alt attribute value 입력하기
   • 시각장애인이 이미지를 인식하는 데 도움을 준다.
     
2. <label> tag 사용하기
   • <label>의 for의 attribute value와 <input>의 id의 attribute value 일치시키기

Semantic Tags

Semantic tags를 사용하여 웹 접근성을 높일 수도 있다.

Semantics Tags란?

아무런 의미를 지니지 않는 <div>나 <span>과는 달리, semantic tags는 해당 내용의 의미를 담고 있다. 대표적으로, <header>, <article>, <footer> 등이 있다.

웹 페이지를 <div> 범벅으로 만드는 것보다 semantic tag를 활용하여 작성하는 것이 바람직하다.

source: CodingOn

왜 사용해야 하는가?

• SEO (Search Engine Optimization)

  • 크롤러가 웹 페이지의 키워드들을 쉽게 인식할 수 있어 검색 노출을 높일 수 있다.

• 웹 접근성 향상

  • 시각장애인들이 스크린리더를 활용하여 쉽게 웹사이트 내의 내용들을 탐색할 수 있다.

• 유지보수

  • <div>만으로 html을 작성한다면 가독성이 매우 떨어지기 때문에 유지보수에 불리하다.

Troubleshooting

이번 강의에서는 별다른 Troubleshooting이 없었다. 하지만 HTML을 작성할 때 조심한 점은, 브라우저는 html을 그대로 해석하기만 한다는 것이다. 즉, 개발자가 오타를 내도 브라우저는 별다른 오류메세지를 출력하지 않고 받은대로 그린다. 이를 최소화하기 위해서는 emmet 등을 이용하는 것도 하나의 해결방법인 것 같다.

Reference

• Mozilla Developer Network web docs
• CodingOn 교육자료

새싹 부트캠프의 첫 수업으로 Git과 Github에 대한 간단한 개요를 배웠다. 향후 프로젝트를 수행할 때 중요하게 쓰일 것이기에 기본적인 개념과 구조는 확실히 아는 것이 좋을 것 같다.

Git과 Github

Git이란

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. source: git-scm.com

Git은 코드의 변경 사항을 관리해주는 버전 관리 시스템 (Version Control System, 이하 VCS)이다. VCS는 코드의 변경 이력을 기록 및 관리하는 시스템이다. VCS에는 다양한 종류가 있는데, Git은 그 중의 하나이고 Git의 특징은 분산형 VCS이라는 것이다. Github는 Git 시스템을 제공하는 플랫폼이다.

source: git-scm.com

Git은 아래처럼의 작업 계층 구조를 가지고 있다.

source: git-scm.com

아래의 도표는 Git의 전체적인 작동구조를 보여준다. 여기서 pull에 대한 내용이 빠졌는데, pull을 하게 되면 remote repository에서 working directory로 작업을 가져오게 된다.

git의 다양한 명령어들은 git-scm.com에 아주 자세하게 쓰여있다. 주로 아래의 명령어를 주로 사용한다.

# 모든 파일을 add
git add . 
# 특정 파일을 add
git add ./filename

# commit (staging area > local repository)
git commit -m "commit message"

# push (local > remote repository)
git push origin 'branch name' 

Git은 무슨 문제를 해결하는가

일반적으로, 프로젝트가 커질수록 소프트웨어를 수정하는 사람들이 그만큼 많아지게 되고 버전이 많아지게 된다. Git과 같은 VCS는 누가 어떤 내용을 작성했는지 기록하고 여러 버전들을 관리(branch)할 수 있게 해줘서 뱃사공이 많아도 배가 산으로 가지 못하게 도와준다.

또한, Git에서는 로컬 저장소(local repository)가 원격 저장소(remote repository)의 데이터를 받아서 사용한다. 즉, 백업본을 서버가 아닌 작업자의 개인도 가지고 있는 셈이기에 백업에 용이하다.

Troubleshooting

fatal: Authentication failed for ...

기존에는 local repository에서 remote repository로 push를 하게 될때, github의 id와 pw를 입력하면 되었다. 하지만, 강화된 보안조치에 의해서 github에서 personal access token을 발급받아야 한다. Personal access token은 Settings > Developer Settings (가장 아래에 있다) > Personal Access Tokens > Tokens(Classic) > Generate new token 을 통해 발급받을 수 있다.

Reference

• CodingOn 강의 자료
• git-scm.com

C++에서 정의되는 L-Value, R-Value는 다음과 같다.

• L-Value 구체적인 메모리 주소를 가리키는 값을 의미한다. Variable, Array element가 l-value에 해당한다. 표현식 이후에도 계속 살아있다.

• R-Value 구체적인 메모리 주소를 가지고 있지 않다. 상수 등이 r-value에 해당된다. 표현식 이후에는 없어진다.

아래와 같은 코드가 있다고 했을 때,

int a = 3;

a는 l-value이고, 3은 r-value이다.

l-value는 r-value가 될 수 있다. 하지만, r-value는 l-value가 될 수 없다. 아래의 예를 보자.

int a = 3;
int* b = &a;  // b : l-value

int x = 1;  // x : l-value
int y = 2;  // y : l-value
int z = x + y;  // x+y : r-value, z : l-value

++z;  // l-value
z++;  // r-value;

다음과 같은 경우에는 error가 발생한다.

int a;
3 = a;  // error

int* b = &3; // error

Move semantics나 R-Value reference와 같은 심화 개념은 추후 다룰 예정이다.

Reference

• https://www.internalpointers.com/post/understanding-meaning-lvalues-and-rvalues-c
• https://learn.microsoft.com/ko-kr/cpp/cpp/lvalues-and-rvalues-visual-cpp?view=msvc-170

C/C++ 프로그램이 실행되기 위해서는 우선, 메모리에 load가 되어야 한다. 운영체제는 메모리의 영역을 구분하여 할당해준다. 메모리는 크게 4가지의 영역으로 구분할 수 있다. 아래의 목록은 high memory - low memory 순서로 쓴 것이다.

• Stack
• Heap
• Data
• Text / Shared Libraries

Stack

Stack에는 주로 지역변수, 매개변수 등이 저장된다. 함수가 호출되면, stack도 운영체제로부터 할당된다.

Stack이 어디까지 사용되었는지는 stack pointer가 저장하고 있다. Stack pointer는 compiler가 관리한다. 사실, stack에는 stack pointer 외에 한개의 pointer가 더 있는데, frame pointer가 그것이다.

Frame pointer는 함수가 호출되기 직전의 stack pointer의 값이다. 함수 호출이 종료되면, frame pointer의 값을 기준으로 stack pointer를 재조정한다. 이 두개의 pointer를 구별하는 이유는, stack pointer가 runtime에서 값이 변하는 경우가 많아 function frame의 위치를 찾기 힘들기 때문이다. RISC-V의 경우, stack pointer는 x2 register에 저장되고, frame pointer는 x8 register에 저장된다.

Stack이 데이터를 저장하는 방식은 LIFO(Last In First Out)이다. 즉, 가장 마지막으로 저장된 데이터가 가장 먼저 나온다. Stack에 데이터를 넣는 것은 push, 빼는 것은 pop이라고 한다.

Heap

Heap에는 user가 자신이 원하는대로 할당할 수 있는 메모리 영역이다. User에 의해 동적(dynamically)으로 할당 및 해제할 수 있다. 다른 메모리 영역과는 다르게 runtime에서 그 크기가 정해지며, user가 heap 영역을 할당받는 것을 동적 할당(dynamic allocation)이라고 한다.

주로, C++에서는 malloc(), calloc(), new()를 통해 heap을 할당할 수 있다. User가 직접 할당하고 해제하는 만큼, heap 영역을 사용 할 때는 주의해야 한다. 예컨대, free()를 통해서 할당받은 heap 영역을 운영체제에게 꼭 반납해야 한다. 만약, 정신차리지 않고 무분별하게 heap에 계속 할당한다면, Memory leak가 발생할 수 있다. 이런 불상사가 일어나지 않도록 동적할당을 했다면 free() 등을 통해 다시 반납할 수 있도록 습관을 들여야 한다.

Data

Data에서는 전역변수(global variable)나 정적변수(static variable)이 저장된다. 이 영역의 경우, 프로그램이 시작되면 할당이 되고, 프로그램이 종료되면 해제되다.

Text / Shared Libraries

Text/Shared Libraries 영역(때로는 Code 영역이라고도 한다)에는 프로그램의 코드가 저장된다. CPU는 여기에 저장된 코드들을 한줄씩 불러와서 실행한다. 정확히 말하자면, Machine instruction으로 전환된 코드들이 저장된다.

Example

아래와 같은 임의의 C++ 코드가 있다고 해보자.

char big_array[1L<<24]; // 16MB
char huge_array[1L<<31];  // 2GB

int global = 0;
int useless() { return 0; }

int main() {
    void *p1, *p2, *p3, *p4;
    int local = 0;
    p1 = malloc(1L << 28);
    p2 = malloc(1L << 8);
    p3 = malloc(1L << 32);
    p4 = malloc(1L << 8);
    return 0;
}

여기서 어떻게 메모리가 할당되는지 살펴본다면, 아래의 표와 같다.

Reference

• Hanjun Kim, Data Structure and Algorithms Lecture Note, "04. A Tour of C++: Memory", Yonsei university, Spring 2023

• William J. Song, Computer Architecture Lecture Note, "2. Instructions", Yonsei universoty, Spring 2023