1차 면접 시작

1차 면접 때 라이브 코딩테스트를 완벽하게는 아니지만, 마지막 후처리가 조금 덜 완성 되었지만, 간단한 이야기를 나누고 긍정적인 표현을 하셨다.

1차 면접으로 코딩테스트 합격 메세지를 받게 되었고, 나는 약간의 들뜬마음과 함께 매우 긴장감을 가지게 되었다.

2차 면접 시작

그리고 시간이 흘러 2차 면접일이 왔고, 2차 면접에 앞서 나는 50분 정도 일찍 도착해서 긴장감을 풀기 위해 기다리고 있었다. 이사님과 대표님이 오셔서 간단하게 면접을 위한 준비를 하게 되었다.

손코딩

2차면접으로는 간단한 손코딩을 준비했다.

*손 코딩으로는 * 이런 비슷한 문제였다.

Given an integer array nums,
find the contiguous subarray (containing at least one number)
which has the largest sum and return its sum.

A subarray is a contiguous part of an array.

Input: nums = [-2,1,-3,4,-1,2,1,-5,4]
Output: 6
Explanation: [4,-1,2,1] has the largest sum = 6.

이 문제의 해석으로는

정수 배열 번호가 주어지면 합계가 가장 큰 연속된 하위 배열(하나 이상의 숫자 포함)을 찾고 합계를 반환합니다. 하위 배열은 배열의 연속된 부분입니다.

이라는 문제였다.

나는 손코딩을 처음해보았고, 문제를 풀려고 했는데

처음에 문제에 대해서는 연속된 숫자값이 있다면 그 합을 계산하고, length를 계산하라는 의미인줄 알았다.

30분동안 화이트보드 앞에서 손코딩 하고 있는데 코딩할때 이게 틀린지 아닌지를 좀 파악하기가 힘들었다.

그러나, 고차함수 메서드를 사용하면 좀더 쉽게 풀수 있었으나, 이것을 메서드를 사용하지 않고 풀려고 하였기 때문에 더 힘이 들었던거 같았다.

그리고 나서 이제 손코딩에 대한 설명을 하기 시작하는데 문제 의도와 내가 해석한 문제의도가 달라 많이 애먹었다.ㅋㅋㅋ

그리고 나서 설명을 해주시는데, 만약에 말로 의도한 문제에 대한 결과값을 얻기 위해서 어떻게 풀어 해쳐나가야 하는지 설명해달라고 해서 참 다행이였음.

손코딩을 보았고, 아 그냥 형식상으로 진행을 해보았다고 말씀해주셨다. 나도 이런 문제는 처음 보았고, 문제를 해결하려하는 모습과, 문법들을 어떻게 사용하는지를 확인하는게 아니였을까 생각했다.

본격 면접

그리고 나서 본격적인 면접에 도입했다.

면접 보러다니면서 면접에서 보통 어느것을 물어보던가요 ? 라는 말을 하면서 그냥 프로젝트 협업도 없는데 어떻게 잘 해나아갈수 있나요 ? 라던지, 회사가 어느 회사였는지 알수 있을까요 ? 이런것들을 물어보셨다. - si 수주회사

그리고 ... 으음 .. 원래 나를 뽑고 싶어하셨는지 처음부터 콕 집어놓으셨다고 1차 면접때 보고 나서 마음에 들어하셨던 모양이다. “저희랑 같이하시죠!!” 라는 멘트와 함께 내 입가에 입꼬리가 나이키가 되버렸다.

내가 회사에 궁금한걸 많이 물어보았다. Web3에 대한것을 중점으로 내가 많이 물어보았고, 이것저것 핑퐁 대화를 많이 하고, 좋은 분위기로 흘러갔음.

처음에 긴장을 한 탓에 말을 많이 못할줄 알았는데, 손코딩하면서 긴장감이 좀 많이 풀려서 더 원활하게 면접에 임했던거 같았다.

대표님이 말씀하시길, 여태 50~60명 면접 보았는데 이렇게 성장이 빠르고 회사와 잘 맞는것 같아 보였기에 같이 하자고 하셨다고 했다.

구직활동을 언제부터 진행을 했는지 ? 회사에 대한 궁금한 사항은 없는지 ? 여러가지 내가 코딩을 하게된 이유라던지, 이 코딩을 어떻게 접했는지, 추후에 어떤 개발자가 되고 싶어했는지 ?

나는 솔직히 JavaScript, React, CS 이런 질문을 하실줄 알았는데, 기본적인 질문보단 인성위주의 질문을 하셨기에 더욱더 회사가 좋은 회사라는것을 알게 되었다.

내가 코딩하면서 이렇게 열정있게하는 개발자는 처음보고, 국비학원듣고 이렇게 빨리 성장하는 분을 뵙게 되어서 좋다고 긍정적으로 남겨주셨다.

연봉도 내가 원했던 부분이라서 참 좋았고, 회사의 비전과 내가 필요로 하는 기술스택이 맞아서 나 또한 긍정적으로 생각하고 좋게 생각했다.

나 또한 면접을 보면서 같이하시자고 말을 하셨기에 이걸 거절하기에는 너무 어리석은 생각이기에 신입으로써 배운다는 점과 신입이기에 가능하다는 점을 생각하고 같이 하자는 의견을 표현했다.

당일 면접 합격 여부를 밝혀주셨고 나는 합격을 했다.

이 구구단 말고 ??

으음 .... 코데 과제가 가로정렬을 하는 구구단이 나왔다. 나는 그냥 ... 과제대로 했지만, 가로정렬을 하지 않았기에 false를 먹어버렸다.

자바스크립트에서 console.log로 가로출력을 하는 방법이 있나 ?? 생각하고 있었는데, 아쉽게도 이스케이프 문자를 활용하면 뛰어쓰기 및 줄바꿈이 된다더라. 이것 또한 과제 떨어지고 나서 검색해보니까 알게됨

그래서 너무 짜증나서 구현한 코드를 공개하려고 함.

let result = "";
for (let i = 1; i < 10; i++) {
  for (let j = 2; j < 6; j++) {
    result += j + " * " + i + " = " + j * i + "\t";
  }
  result += "\n";
}
result += "\n";
for (let k = 1; k < 10; k++) {
  for (let l = 6; l < 10; l++) {
    result += l + " * " + k + " = " + l * k + "\t";
  }
  result += "\n";
}
console.log(result);

코드 구현하고 실행하게 되면 이러한 결과를 얻을 수 있다.

참고하길 바란다 . 제군들

"\t" 를 사용함으로써 탭을 할 수 있고...

"\n" 을 이용해 줄바꿈을 할 수 있다라 ...

코드 적다보니까 생각되는건데, 런타임 엄청 심한듯. ..

?? 이게 무엇을 의미했는지 모르고 있었으나,

과제 시험 전형에서 데이터를 <span>불라불라</span> 이런식으로 html의 형식으로 가지고 오기에 많은 고민을 하게 되었다.

음 .. ?? 어떻게 하지 ??

검색을 하다보니 dangerouslySetInnerHTML 을 사용해서 javascript에서 innerHTML을 사용하는것처럼 사용할수 있었던 것이였다.

리액트 공식문서에 의하면,

dangerouslySetInnerHTML은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다. 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다. 아래는 예시입니다.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

나는 과제 구현에 있어 이렇게 코드 구현을 했음.

const termsTitle = `${data?.terms?.title}`;
const termsContent = `${data?.terms?.content}`;
const signTitle = `${data?.sign?.title}`;
const signContent = `${data?.sign?.content}`;
...

return 
...

<div dangerouslySetInnerHTML={{ __html: termsTitle }} />
<div dangerouslySetInnerHTML={{ __html: termsContent }} />

...

이렇게 보니 ... 좀 간편한거 같기도 하고 ???

만약에 이런식으로 온다고 하더라도 dangerouslySetInnerHTML 을 설정한 부분에서 className을 적어주게 된다면, 그 아래로 오는 태그들도 CSS는 정상으로 작동이 된다.

그러나 이름에 맞게 매우매우 댄저러스 하나보다 .

사이트 간 스크립팅 공격에 쉽게 노출이 되기 때문인가보다.

사이트 간 스크립팅 공격 과 크로스 사이트 스크립팅 (XSS, cross-site scripting)

• 웹 애플리케이션의 취약점 중 하나
• 관리자가 아닌 이가 페이지에 악성 스크립트를 삽입할 수 있는 취약점
• 악성 스크립트를 통해 사용자의 정보(쿠키, 세션등)를 탈취하거나 비정상적인 기능을 수행
• 주로 다른 웹 사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 함
• 취약점을 방지하기 위해서는 사용자의 입력 값을 검사하고 사용해야함

그 이유는 바로 ... 다운그레이를 해주면 됩니다. 최신버전인 8.0.23 버전을 사용하고 있었으나, 무슨이유인지는 몰라도 다운그레이를 하게 된다면 정삭적으로 작동이 된다는 분이 있어, 나또한 다운그레이를 하여 실행을 했더니 매우 정상적으로 실행이 되는것을 확인할 수 있었다.

...휴 - 이거 때문에 하루를 날렸네

mysql server status could not acquire management access for administration

뭐 환경변수 Path에 집어 넣어라 이런거 다 해봤어도 똑같이 안됨

Path 환경변수 설정법

그래도 혹시모르니 Path 환경변수 집어 넣는 방법을 알려주도록 하겠다. 내컴퓨터 오른쪽 마우스 클릭해서 속성 누른다음 . 고급 시스템 설정 버튼 클릭해서 "시스템속성"이라는 곳으로 이동

제일 밑에 환경변수 클릭해서 여기 Path에다가 더블클릭하면, 환경 변수를 편집할 수 있는 공간이 나오게 되는데. 필자는 bin폴더랑 8.0 폴더 둘다 넣어줬다. 이 문제 때문에 해결되는건 아닌듯하다.

뭔 짓거리 다해봐도 제일 좋은건 다 지우고 새로깔기

데이터 가져오기를 위한 React Hooks

SWR은 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략입니다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 됩니다. 그리고 UI는 항상 빠르고 반응적입니다.

데이터 가져오기를 위한 React Hooks - SWR

SWR 설치

npm i swr 또는
npm i swr --legacy-peer-deps

https://swr.vercel.app/ko/docs/getting-started

전체적으로 React Query가 더 좋지만 패키지 크기가 SWR의 3배가 넘기 때문에 간단한 어플리케이션 만들기에는 SWR가 좋고, 많은 커스텀 기능들이 필요하면 React Query가 사용하기 좋은거 같습니다

useSWR의 장점, 다른 페이지에서 작업중이여도, 다시 해당 페이지로 돌아오게 된다면,

데이터가 변경이 되어있던 것들을 자동으로 request해주어서 값들이 변경했던것들을 확인해준다.

간단하게 useSWR를 사용하는 방법을 알아보자면,

import useSWR from "swr";

const fetcher = (url: string) => fetch(url).then(response => response.json());
export default function useUser() {
  const { data, error } = useSWR("api/users/me", fetcher);

  return data;
}

useSWR은 인자를 2개를 받는다. 하나는 key 이자 하나는 fetcher

key = RESTful API 주소가 해당이 된다.

fetcher = fetch되어 나온 함수를 의미한다.

그러므로 2개의 인자를 적게되면, useSWR의 첫번째 인자로 들어있는 argument를 자동으로 fetcher에 인자로 넘어가 값을 넣어주기에 자동적으로 fetcher가 실행이 된다.

useSWR로 받을 수 있는 값들은 data, error, mutate가 있다.

Global Configuration

그러나 이 모든 파일에 useSWR의 key을 변경하기에는 매우 수고스러움이 있기에,

모든페이지에 적용되어 fetcher 같은 것의 기본값을 지정할수 있는 프로바이더를 설정해야한다.

그것은 Global Configuration 이다.

만약 이것을 사용한다면, react에서 index의 모든 전역에게 프로바이더를 설정했던거와 같이

Next의 _app에서 전역으로 프로바이더를 설정해주어야 한다.

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { SWRConfig } from "swr";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <SWRConfig value={{ fetcher: (url: string) => fetch(url).then(response => response.json()) }}>
      <div className="w-full max-w-xl mx-auto">
        <Component {...pageProps} />
      </div>
    </SWRConfig>
  );
}

export default MyApp;

mutate 활용

const { data, mutate } = useSWR(API키 , fetcher)

mutate를 불러올수 있다.

mutate란 ? API를 가지고서 RESTful API 상태관리를 해주는 함수이다.

mutate에는 2개의 인자를 받아오게 된다.

mutate({첫번째 오는 인자는 새로운 데이터가 된다.}, true)
그 후 첫번째 인자로 오는 데이터로 인해 컴포넌트의  UI는 새로고침이 된다.

mutate({ product: { name: "potato" } }, true);
예를 들어 이런식으로 name을 potato라고 적었다면,
data에는 potato라는 값으로 새로 바뀌게 된다.

두번째로 오는 true의 인자 같은 경우 SWR이 API로 가서 원래 했던,
요청을 다시 한번 재검증하는 요청이다.

이 글에서는 MySQL을 기준으로 사용하며, Prisma, Pscale을 다루게 된다.

그럼 왜 ? Prisma를 사용할까 ?

하나의 번역기 텍스트같은 역할을 해주기에 매우 편리하게 사용할 수 있다.

Prisma - Next-generation Node.js and TypeScript ORM for Databases

더 편리하게 데이터베이스를 관리하기 위한 하나의 방법이다.

node.js typescript를 이용하는 사용자에게 편리하게 제공을 해준다.

npm install -D prisma

vscode의 Extension 으로 prisma 도 설치 하길 권유한다.

npx prisma init
으로 초기 설정파일을 만들어주어야 한다.

초기 설정 후 메세지

1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver or mongodb (Preview).
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

1. 첫번째로 .env 파일에 있는 DATABASE_URL을 설정해주어야 한다.

2. schema.prisma 파일에서 datasoucre의 provider를 설정한다.

   

// 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 = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  phone     Int?     @unique
  email     String?  @unique
  name      String
  avatar    String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

// 해당 provider를 mysql로 사용한다는 의미이다. 
// 그 외로 postgresql, mysql, sqlite, sqlserver or mongodb 가 있다.

// model User 를 생성하여 간단한 테이블 표를 만들수 있다.

@autoincrement :
기본 DB 내에 정수 형태의 시퀀스를 만들고 시퀀스에 따라 생성된 레코드의
ID 값에 증가된 값을 할당한다.

@id : 모델에 단일 필드 id를 지정한다.

@updateAt : 레코드가 마지막으로 업데이트된 시간을 자동으로 저장한다.
시간을 직접 지정하지 않으면 Prisma Client는 이 속성이 있는 필드의 값을 자동으로 설정한다.

? 사용한 이유는 꼭 있어야 하나 그 차이일뿐. 필수 요소가 아닌 경우 붙여준다.

PlanetScale

MySQL 과 호환되는 serverless 데이터베이스 플랫폼

그러나 serverless 가 아닌이유는 Vitess라는 가장 스케일링이 뛰어난 오픈소스 데이터베이스 이기 때문이다.

이제 Pscale 이라는것을 설치해야한다.

Scoop

https://github.com/planetscale/cli

두개의 링크를 보고서 window PowerShell 버전으로 설치하면 끝

pscale 명령어를 입력하면 저러한 창이 떠야한다.

PlanetScale CLI

PlanetScale은 데이터베이스 이상이며 CLI는 복잡한 명령 이상입니다. pscale 커맨드 라인을 사용하면 branch, deploy 요청 및 기타 PlanetScale 개념을 손쉽게 사용할 수 있습니다.

pscale database create carrot-market --region ap-northeast

위의 명령어을 통해 pscale의 하나의 repo 같은 데이터베이스 저장소를 만들수 있게 된다.

CLI의 명령일뿐 pscale에서 직접적으로 생성도 가능하다.

db 데이터를 prisma에 전달방법

npx prisma db push

그전에 env 파일에서 DATABASE_URL="mysql://127.0.0.1:11873/carrot-market” 해당된

pscale connect carrot-market 으로 connect을 하였다면, 성공적으로 자신의 서버 주소가 나오는데 그것을 env 파일의 url에 적음으로써 성공적인 연결을 할 수 있게 만들어 놓는다.

이를 통해 prisma schema 에서는 성공적으로 테이블이 짜여져 있는 것을 확인 할 수 있다.

npx prisma studio

npx prisma studio

명렁어를 통해 해당된 데이터베이스 테이블표를 직접적으로 수정할 수 있는 페이지가 열린다.

npm install @prisma/client

npm install @prisma/client

// libs/client.ts
import { PrismaClient } from "@prisma/client";

export default new PrismaClient();

위 파일을 생성 후 npx prisma generate 명렁어 입력

api/clinet-test.jsx

// libs/client.ts

import { PrismaClient } from "@prisma/client";

export default new PrismaClient();

위와 같이 설정을 하고 난후 해당 api라는 서버를 수정할수 있게 할 수 있다.

이것은 NextJS의 기능이며, NextJS는 풀스택을 요구하는 하나의 프레임워크이다.

// api/clinet-test.jsx
import { NextApiRequest, NextApiResponse } from "next";
import clinet from "../../libs/client";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await clinet.user.create({
    data: {
      email: "hi",
      name: "hi",
    },
  });
  res.json({
    ok: true,
  });
}

http://localhost:3000/api/client-test 로 들어가게 된다면, 해당 json 파일을 확인할 수 있다.

또한, prisma studio 에서도 data의 파일이 추가된것을 확인할 수 있다.

ORM이란

Object Relational Mapping, 객체-관계 매핑

• 객체와 관계형 데이터베이스의 데이터를 자동으로 매핑(연결)해주는 것을 말한다.
• 객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용한다.
• 객체 모델과 관계형 모델 간에 불일치가 존재한다.
• ORM을 통해 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결한다.
• 데이터베이스 데이터 <—매핑—> Object 필드
• 객체를 통해 간접적으로 데이터베이스 데이터를 다룬다.
• Persistant API라고도 할 수 있다.

장점

• 객체 지향적인 코드로 인해 더 직관적이고 비즈니스 로직에 더 집중할 수 있게 도와준다.
• ORM을 이용하면 SQL Query가 아닌 직관적인 코드(메서드)로 데이터를 조작할 수 있어 개발자가 객체 모델로 프로그래밍하는 데 집중할 수 있도록 도와준다.
• 선언문, 할당, 종료 같은 부수적인 코드가 없거나 급격히 줄어든다.
• 각종 객체에 대한 코드를 별도로 작성하기 때문에 코드의 가독성을 올려준다.
• SQL의 절차적이고 순차적인 접근이 아닌 객체 지향적인 접근으로 인해 생산성이 증가한다.
• 재사용 및 유지보수의 편리성이 증가한다.
• ORM은 독립적으로 작성되어있고, 해당 객체들을 재활용 할 수 있다.
• 때문에 모델에서 가공된 데이터를 컨트롤러에 의해 뷰와 합쳐지는 형태로 디자인 패턴을 견고하게 다지는데 유리하다.
• 매핑정보가 명확하여, ERD를 보는 것에 대한 의존도를 낮출 수 있다.
• DBMS에 대한 종속성이 줄어든다.
• 객체 간의 관계를 바탕으로 SQL을 자동으로 생성하기 때문에 RDBMS의 데이터 구조와 Java의 - 객체지향 모델 사이의 간격을 좁힐 수 있다.
• 대부분 ORM 솔루션은 DB에 종속적이지 않다.
• 종속적이지 않다는것은 구현 방법 뿐만아니라 많은 솔루션에서 자료형 타입까지 유효하다.
• 프로그래머는 Object에 집중함으로 극단적으로 DBMS를 교체하는 거대한 작업에도 비교적 적은 리스크와 시간이 소요된다.
• 또한 자바에서 가공할경우 equals, hashCode의 오버라이드 같은 자바의 기능을 이용할 수 있고, 간결하고 빠른 가공이 가능하다.

단점

• 완벽한 ORM 으로만 서비스를 구현하기가 어렵다.
• 사용하기는 편하지만 설계는 매우 신중하게 해야한다.
• 프로젝트의 복잡성이 커질경우 난이도 또한 올라갈 수 있다.
• 잘못 구현된 경우에 속도 저하 및 심각할 경우 일관성이 무너지는 문제점이 생길 수 있다.
• 일부 자주 사용되는 대형 쿼리는 속도를 위해 SP를 쓰는등 별도의 튜닝이 필요한 경우가 있다.
• DBMS의 고유 기능을 이용하기 어렵다. (하지만 이건 단점으로만 볼 수 없다 : 특정 DBMS의 - 고유기능을 이용하면 이식성이 저하된다.)
• 프로시저가 많은 시스템에선 ORM의 객체 지향적인 장점을 활용하기 어렵다.
• 이미 프로시저가 많은 시스템에선 다시 객체로 바꿔야하며, 그 과정에서 생산성 저하나 리스크가 많이 발생할 수 있다.

[OEM 출처]https://gmlwjd9405.github.io/2019/02/01/orm.html