Engineering_S/W & H/W

 해당 스키마는 아래 글을 참고로 만들었습니다. 링크 : SQL 관계도 Many to Many(다대다 관계) 해당 링크의 스키마를 작성하기 위해서 아래와 갖이 코드를 작성합니다. // prisma/schema.prisma // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema generator client { provider = "prisma-client-js" } datasource db { provider = "postgresql" url = env ( "DATABASE_URL" ) } model users { id Int @default ( autoincrement ()) @id full_name String @unique created_at DateTime @default ( now ()) @db.Timestamptz ( 3 ) comments joinTable [] } model joinTable { users users @relation ( fields : [userId], references : [id] ) // users와joinTable은 1:N이다 userId Int comment comments @relation ( fields : [commentId], references : [id] ) // comments와 joinTable은 1:N이다. commentId Int @@id ( [userId, commentId] ) // userId, commentId는 Primary key이다 } model comments { id Int @default ( autoincrement ()) @id conten...

 안녕하세요. 알렉스 입니다. VIM을 사용할때 기본적인 커서 이동에 대해서 알아보도록 하겠습니다. 사진1) VIM 방향키 VIM은 마우스를 사용하지 않고 최소한의 수고로 문서를 작성하기 때문에 사진1과 같은 방향키가 따로 있습니다. 이 방향키는 normal mode에서 사용할수 있는 방향키 입니다. 설사 화살표 방향키가 동작되지 않더라도 모든 vim 에디터에서는 사진1의 방향키가 모두 통용됩니다. 1. Normal Mode Ctrl + f => 가장 바닥을 보여준다. Ctrl + b => 가장 위쪽을 보여준다. w => 소문자 : 단어별로 오른쪽 이동(':', ',' 등등도 단어로 인식) w의 반대는 b W => 대문자 : 단어별로 오른쪽 이동(space 기준으로 단어 인식) W의 반대는 B z + Enter => 커서를 위쪽으로 맞춤 0 => 숫자 0을 누르면 해당 줄의 첫칸으로 이동 Shift + 4 => $ : 해당줄의 가장 마지막 칸으로 이동 g + g => 해당 문건에서 가장 첫번째 칸으로 커서 이동 G + G => 해당 문건에서 가장 마지막으로 커서 이동 [line number] + g + g => 해당 line number줄의 가장 첫번째 칸으로 이동 ex) 10gg : 10번째 줄에서 가장 첫번째 칸 Ctrl + g => 문서명, 총 줄, 커서 위치 표시(자동 업데이트는 안됨) g + Ctrl + g => 위의 shortcut(Ctrl + g)보다 더 자세한 정보 표시 2. Command Mode :[number] => 해당 number줄로 이동 :$ => 문서의 가장 마지막 칸으로 이동 :set ruler => 오른쪽 아래에 커서의 문서 좌표 표시 :set nu => 문서 왼쪽에 숫자를 새긴다

 안녕하세요. 이번에는 CRUD를 코드로 작성하면서 동시에 Swagger를 적용해서 Swagger API문서를 작성하도록 하겠습니다. 일단 가장 기본적인 API문서를 만들어보겠습니다. nestjs을 설치시 자동으로 나오는 app모듈중 'app.controller.ts'에서 아래와 같이 코드를 수정합니다. import { Controller , Get } from '@nestjs/common' ; import { ApiResponse , ApiTags } from '@nestjs/swagger' ; import { AppService } from './app.service' ; // ApiTags는 해당 컨트롤러의 Root경로를 입력받습니다. @ ApiTags ( '/' ) @ Controller () export class AppController { constructor ( private readonly appService : AppService ) {} // ApiResponse는 해당 API가 응답 코드에 따른 설명을 작성합니다. @ ApiResponse ({ status : 200 , description : '정상적인 GET응답' , }) @ ApiResponse ({ status : 500 , description : '서버에러 발생시' , }) @ Get () getHello (): string { return this . appService . getHello (); } } ./src/app.controller.ts 웨 코드에서 'ApiTags', 'ApiResponse' 이 2개가 추가 됬다. 이 데코레이션은 해당 Document에 관련 API정보를 보내는 것이다. 그럼 실제 출력을 보자. 그림1) rootUrl:3...

 이제 본격적으로 Swagger를 이용하여 자동 API Document를 작성하도록 하겠습니다. 기본적으로 nestjs가 설치됬다는 가정하에 진행을 하도록 하겠습니다. 만약 설치방법이 궁금하시면 아래 링크를 참고해 주시기 바랍니다. 링크 : NestJS 설치법 먼저 npm모듈을 설치합니다. npm i @nestjs/swagger swagger-ui-express copy 위 두개의 모듈은 각각 nestjs 지원 및 프런트 화면구성을 위한 swagger모듈 입니다. import { NestFactory } from '@nestjs/core' ; import { DocumentBuilder } from '@nestjs/swagger' ; // DocumentBuilder import import { AppModule } from './app.module' ; async function bootstrap () { const app = await NestFactory . create ( AppModule ); // Swagger Document를 설정 const options = new DocumentBuilder () . setTitle ( 'nest API' ) . setVersion ( '1.0' ) . build (); await app . listen ( 3000 ); } bootstrap (); 위의 코드와 같이 main.ts파일을 수정합니다. 위 코드에서 추가된 것은 DocumentBuilder class이며 이는 API문서를 만들기 위한 준비사항 입니다. 해당 문서의 제목(setTitle), 버전(setVersion) 그리고 빌드(build)를 합니다. import { NestFactory } from '@nestjs/core' ; import { DocumentBuilder...

 안녕하세요. 알렉스 입니다. 이번에는 자동으로 문서를 생성해 주는 Swagger를 이용하여 API문서를 만들도록 하겠습니다.  백엔드에서 주요 업무중 하나는 API문서를 만드는 것입니다. 하지만 개발한 API를 다시 문서로 작성하기에는 상당히 많은 시간이 걸립니다. 또한 중간에 API가 변경이 되면 해당부분의 코드를 변경해야하지만 동시에 API문서를 최신화 해줘야 합니다.  위 그림과 같이 백엔드 개발자는 2가지 일을 갖이 처리하게 되는 일이 발생합니다. 그런데 API 개발을 하면서 동시에 문서작업도 가능한 npm모듈이 나오고나서 이러한 작업량이 상당히 줄었습니다.  코딩작업을 하면서 스웨거에 관련된 부분만 조금 추가를 하면 서버를 구동할때 따로 스웨거 API가 배정이 되서 열어볼수 있습니다.  이는 백엔드 개발자만 편한것이 아닌 API문서를 사용하는 모든 사람들한테 큰 도움이 됩니다. 항상 API문서를 최신으로 유지할수 있으며 API에 대해서 조건을 확인하기위해 매번 질문할 필요가 없게 됩니다.  이번은 자동 API 생성기의 필요성에 대해서 설명하고 다음부터 실제 NestJS을 이용하여 Swagger를 적용하도록 하겠습니다. (다음글)

 안녕하세요. 알렉스 입니다. 이번에는 class에 대해서 작성하도록 하겠습니다.  이전 글에서 class부분은 id였습니다. 이번에는 class문을 사용하기 위해서 변경하였습니다. 그리고 추가사항으로 <ul> tag가 2개가 있습니다.  실제 HTML을 크롬에서 열어보면 위와 같이 ul tag 2개가 표시되는 것을 알수 있습니다. id와 달리 class는 여러개를 지정할수가 있습니다.  'getElementsByClassName'에서 보면 마지막에 [0]이 있습니다. 이는 HTML문서 위쪽부터 시작해서 먼저 만나는 Class에 요소를 얻는 것입니다.  HTML에 CSS를 추가하여 디자인 또는 색을 변경할수 있습니다.  위 사진과 같이 HTML이 수정이 되었습니다. 하지만 'Alex'왼쪽의 점이 검정색이였으면 좋겠습니다. 이때 'li' tag에 동일한 'class'(name)를 부여해 줍니다.

 안녕하세요. 알렉스 입니다. 이번에는 HTML에서 많이 사용하는 id와 class에 대해서 설명할려고 합니다. 특히 이번 글은 id에 대해서 설명할려고 합니다. 'ul' tag에 'id = "test1"이라고 써져 있는것을 확인 할수 있습니다. id는 고유한 tag라고 말할수 있습니다. 해당하는 'html'문서에서 하나만 존재합니다. 그럼 이 id로 무엇을 할수 있을 까요?  일단 JS코드에서 'append'를 할수 있습니다. 위 그림처럼 id가 'test1'으로 된 tag를 listID에 변수로 지정하고 이후에 몇개의 리스트 들을 추가할수 있습니다.  위 사진은 실제 코드를 작성하고 크롬 콘솔창에서 동작할때의 모습 입니다. 처음 HTML문서는 비어 있지만 'appendEle()'를 수행하면 리스트가 생성됨을 알수 있습니다.   중요한 사실은 <ul> tag에 첨부(append)하기 전까지는 <li> tag가 HTML문서에 생성되지 않습니다. 마지막으로 <ul>에 tag하기 전 'addEventListener'을 추가하면 'Alex'이름을 클릭할때마다 콘솔창에 "Hello Alex"를  나타내는 코드도 추가 하겠습니다.

 안녕하세요. 알렉스 입니다. 저번에는 부모 엘리먼트(parent element)에 자식 엘리먼트(child element)를 추가하는 방법에 대해서 알았습니다. 이번에는 제거를 하는 방법에 대해서 알려 드리겠습니다. 이전 글의 코드를 바탕으로 짰으니 참고 부탁드립니다. appendChild를 이용하여 li 늘리기 1번 appendChild를 이용하여 li 늘리기 2번 이전 코드에서 test()함수 안에 2줄만 존재합니다. 엘리먼트를 가져오는 'listID'와 제거하기 위한 '.removeChild'입니다. 여기서 ( )안에 'listID.children[0]'이 있는데 '[0]'은 #List에 자식 엘리먼트 0번째 <li>를 말하는 것입니다.  이전에 작성한 HTML문서를 보면 '<li>List1</li>'부분이 첫번째 리스트 입니다. 따라서 버튼을 누르면 1개가 삭제가 되는데 리스트의 첫번째 부분이 삭제 된다는 이야기 입니다. 물론 인덱스를 이용하여 2번째 것도 제거할수 있습니다.

 안녕하세요. 알렉스 입니다. 저번에는 <li></li>리스트를 추가할때 가장 아래쪽부터 추가가 됬었습니다. 이번에는 앞쪽에서 부터 리스트를 넣도록 하겠습니다.   HTML파일은 저번에 작성한 글(링크) 과 동일합니다. 다만 전에는 <li>List2</li> 아래쪽에 생성이 됬다면 이번에는 <li>List1</li>와 <ul id = "List">사이에 생성하는 것입니다.  순서도는 이전 글과 같습니다. 다만 2개의 문장이 추가되고 1개의 문장(appendChild)은 삭제되어 있습니다.   추가된 'element'는 'list_temp'입니다. 다음 사진에서 'insertBefore'를 사용하기 위해 'child element'의 인덱스로 사용됩니다.  이제 insertBefore를 이용하여 'liElement'를 삽입합니다. 이때 'list_temp.childNode[0]'에서 '[0]'은 기존 <li>List1</li>를 말합니다. 이 위쪽에 <li>ABC</li>를 삽입하는 것입니다.  JavaScript 코드

 안녕하세요. 알렉스 입니다. 이번에는 html과 javascript를 이용하여 텍스트를 입력받아 'li' tag를 추가하도록 하겠습니다.  버튼을 'document'에 생성해 줍니다. 버튼에 표시할 문자열은 'Button'으로 합니다.  input text도 버튼 위쪽에 생성해 줍니다. 텍스트를 입력할 것이니 당연히 타입은 text로 합니다. 리스트를 작성하기 위해서 <ul></ul>을 버튼 아래쪽에 생성합니다. 현재 <ul>에는 아무것도 없기때문에 'document'에서는 빈공간 입니다. 참고 : <div> tag는 </div>를 만나기 전까지 속해있는 아이템(버튼, 텍스트 등등)에 대해서 같은 칸(한줄)에 존재하도록 합니다. 위치 확인을 위해 <ul>안에 <li>를 2개 추가하고 각각 'List1' , 'List2'로 텍스트를 작성합니다. 이제 텍스트 input, 버튼 그리고 리스트에 id를 생성해 줍니다. id는 나중에 JavaScript에서 코딩할때 해당 tag를 추적하고 속성값을 얻을수 있게 해줍니다. 이제 마지막으로 JavaScript 코드를 불러오는 부분을 추가합니다. <script src = [js파일 위치 정보 또는 제목(같은폴더 있을시)]> 이렇게 하면 HTML에 대한 부분을 완료가 되는 것입니다. 다음에는 JavaScript에서 코딩하여 입력받은 텍스트를 리스트에 추가하도록 하겠습니다. 감사합니다.

 안녕하세요. 이번에는 저번시간때 만들었던 html에다가 JavaScript코드를 추가할 것입니다.  위의 2개의 const는 선언을 하는것인데 아래에서 다시 설명드리도록 하겠습니다.  일단 JavaScript에 위와 같이 작성을 합니다. 버튼을 누를시 실제 동작하는 함수는 'test()'함수 입니다.   사용자가 실제로 버튼을 누를시 'btn00.onclick = test'부분이 동작합니다. 이때 'test()'함수를 찾게 됩니다. 만약 'btn00.onclick = test()'를 하게 되면 함수의 리턴값을 넣게 되기 때문에 에러가 발생합니다.    일단 함수를 만들것입니다. 위 순서도는 함수의 진행 순서도를 표현한 것이며 버튼을 클릭하기 전에 이미 'inputText'와 'btn00'이 선언 되어 있는것을 알수 있습니다. 'inputText'와 'btn00'는 'document.querySelector'를 통해서 해당(여기서 텍스트와 버튼) 아이콘에 대한 정보를 갖고 올수 있습니다. 이때 '#'은 아이디를 의미하며 HTML에서 선언한 id를 찾아갑니다. - listID는 'document'에서 Id가 'List'인 'element'를 넣는다.  먼저 초기값을 설정할때 기존에 존재하는 <ul id = "List">의 'element'를 listID의 변수로 저장을 합니다. (추후 listID에 <li>를 추가함).  getElementById 대신 querySelector를 사용할수 있다. - liElement는 'document'에 Tag 'li'가 있는 'element'를 생성한다.  이제 새로운 element를 생성(liElement)하여 'li'(<li...