믹아의 개발일기

programmers.co.kr/competitions/779/2021-kakaocommerce-fe-recruitment

얼마 전에 프로그래머스에서 있었던 카카오 커머스 프론트엔드 개발 챌린지.. 테스트가 끝났다.

1. 코딩 테스트

01.23 (토) 14시~16시30분

코딩 테스트는 Only 자바스크립트 언어로 진행하였고, 3개의 문제가 주어졌다. 저번에 카카오 블라인드 테스트는 정말 너무 어렵게 나와서 좀 긴장했었는데 생각보다 훨씬 쉬웠다.

1,2 번 문제는 거의 2~30분 정도 걸린 것 같다. 프로그래머스 레벨 기준으로 2..? 1.5 정도? 

3번째 문제는 레벨 3을 풀던 사람이라면 누구든지 풀 수 있을 정도.

근데 난 레벨 3 풀던 사람이 아니라서 문제 자체는 풀었는데 시간 초과가 나서 만점은 못 받았다.. ㅜ

그래서 별 기대는 안 하고 있었는데 합격했다고 메일이 오더라.

시험 중간에 서버가 터졌는지 30분 늘려줬다. 나는 딱히 서버 터진 거 못 느꼈음.

2. 과제 테스트

01.30 (토) 13시 10분~17시 10분

13시 시작이었는데 10분 연기되었다. 과제 테스트는 바닐라 자바스크립트로, 다른 모듈은 사용 불가다.

웹에 vscode 를 띄워서 거기서 코딩하고 실행하면 바로 웹에서 확인하는 방식으로 진행됐다. 신기하더라.

html, css, js 파일이 기본적으로 있었는데 js 파일을 열어보니 빈칸이더라.. 완전 처음부터 짜야할 줄이야..

처음 문제를 보자마자 딱 드는 생각은 "도대체 뭘 해야 하지?"라는 생각이었다...

진짜 한 20분 동안 문제만 읽은 것 같다. 

과제가 대충 쇼핑몰 비슷하게 만드는 과제였는데

급하게 아무 쇼핑몰 들어가서 물건 구매 방식이 어떻게 돌아가는지 확인하고 문제를 읽으니 그나마 좀 이해가 되더라.

주 내용은 api 콜 해서 데이터 받아와서 정보 뿌리고, 클래스끼리와의 데이터 전달이 주된 내용이었다.

그렇게 막 어려운 내용은 없었으나... 

일단 시간이 너무 부족했다. 진짜 너무 부족하더라.. 물론 내 실력의 문제겠지만 문제 읽는데 20분이나 날려버리니깐 마음이 더 급해져서 생각이 더 잘 안되니깐 구조를 어떻게 짜야할지 눈앞이 하얘지더라. 그래서 결국 필수 요구 사항들은 다 끝냈는데 가산점 문제 2~3개는 못했다 ㅜ

혹시 나올 에러 사항 대응하기. api 호출 시 값이 잘못 오거나 했을 때 try catch 등으로 에러를 잡아야 했을 듯한데.. 이런 건 하나도 못했다. 시간도 부족하고.. 최대한 에러가 안 나도록 짰기때문? ^^..ㅜ

api 호출 시 같은 api를 호출하면 이전 호출 중단하기. 가산점 문제 중 하나였는데 api 호출을

XMLHttpRequest 와 Promise 를 사용해서 구현했었다. 그래서 api 호출을 하면 해당 Promise 를 저장해놓고 해당 호출이 한번 더 들어오면 마지막 Promise 를 확인해서 아직 응답이 안온 상태라면 Promise 를 중단시키는 방식으로 하려고 했는데... Promise 의 현재 상태를 확인하는 방법 찾다가 시간이 부족해서 그냥 제출...

아무튼 시험 끝나고.. 당일 자는데 내가 부족했던 부분, 코드를 왜 그딴 식으로 짰을까 하는 후회... 많은 생각을 했다.

코딩, 과제 테스트 유출 금지라 최대한 조심해서 썼는데 이 정도는 괜찮겠지?

3. 결과

3월 2일 결과가 나왔다.

점수와 미리 공지된 코드리뷰.

역시나 걱정했던 error 처리가 아쉬운 점..

XMLHttpRequest 는 사실 내가 fetch 를 몰랐었다... 처음에 공부할때 저걸로 배우다가 axios 모듈을 알게되고 axios 만 쓰다보니 fetch도 듣기만 하고 axios 와 똑같이 모듈을 설치해야 하는 줄 알았다... ㅎ;;; 암튼 에러 처리하는 부분에 더 힘써봐야겠다.

Warning: A component is changing an uncontrolled input of type undefined to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

인풋창을 입력하는 순간 이런 에러가 뜨더라.. input value 로 undefined 가 들어가서 그런듯하다

const [ip, setip] = useState();
<input onChange={setip} value={ip} />

대략 내 상황..

const [ip, setip] = useState(''); // 해결방안 1 : 초기값을 '' 로 
<input onChange={setip} value={ip || ''} />  <!-- 해결방안 2 : 값이 undefined 일경우 value 를 ''로 --!>

이렇게 해결

const GetListFromDB = async () => {
    const scan = {
        TableName : config.aws_table_name
    }
    const ret = await dynamoDB.scan(scan).promise();
    console.log(ret);
}

{
  Items: [ { idx: 'List', datalist: [] } ],
  Count: 1,
  ScannedCount: 1
}

뒤에 promise() 를 붙여주니 바로 데이터를 가져올수 있더라

이번엔 AWS 의 DynamoDB를 한번 사용해보려고 한다.

일단 AWS의 사용자 키가 필요한데 없다면 mik-a.tistory.com/59 이 글을 보고 만들수있다.

1. 테이블 만들기

ap-northeast-2.console.aws.amazon.com/dynamodb/home?region=ap-northeast-2#

테이블을 만들었다.

nodejs 로 넘어가서,

npm install aws-sdk

aws sdk 를 사용하기위한 모듈을 설치해준다

테이블에 데이터를 넣어보자

const AWS = require('aws-sdk');

const tableName = 'Test';
const key = {
        accessKeyId : '<Access Key>', // 개인 Access key 를 넣어준다.
        secretAccessKey: '<Secret AccessKey>',
        region : 'ap-northeast-2'
    };

AWS.config.update(key);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

const put = {
    TableName : tableName,
    Item : {
        idx : 'idx001',
        data : 'data1',
        data2 : 'data2'
    }
}
dynamoDB.put(put, (e,d) => {
    console.log(e,d)
});

key 의 region 은

aws 의 지역을 보면 된다.

위의 코드를 실행하고, aws 의 dynamodb 테이블을 보자

데이터가 들어가있는걸 확인할수 있다.

추가로 2개의 데이터를 더 추가했다.

이제 하나의 데이터를 찾아보자

const AWS = require('aws-sdk');

const tableName = 'Test';
const key = {
        accessKeyId : '<Access Key>',
        secretAccessKey: '<Secret AccessKey>',
        region : 'ap-northeast-2'
    };

AWS.config.update(key);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

const query = {
    TableName : tableName,
    KeyConditionExpression : 'idx = :i',
    ExpressionAttributeValues : {
        ':i' : 'idx001'
    }
}
dynamoDB.query(query, (d) => {
    console.log(d);
})

{
  Items: [ { data2: 'data2', data1: 'data1', idx: 'idx001' } ],
  Count: 1,
  ScannedCount: 1
}

테이블의 모든 데이터를 가져와보자

const AWS = require('aws-sdk');

const tableName = 'Test';
const key = {
        accessKeyId : '<Access Key>',
        secretAccessKey: '<Secret AccessKey>',
        region : 'ap-northeast-2'
    };

AWS.config.update(key);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

const scan = {
    TableName : tableName,
}

dynamoDB.scan(scan, (e,d) => { 
    console.log(d);
})

{
  Items: [
    { data2: 'data2', data1: 'data1', idx: 'idx002' },
    { data2: 'data2', data1: 'data1', idx: 'idx003' },
    { data2: 'data2', data1: 'data1', idx: 'idx001' }
  ],
  Count: 3,
  ScannedCount: 3
}

테이블의 데이터중 하나를 수정(업데이트) 해보자

const AWS = require('aws-sdk');

const tableName = 'Test';
const key = {
        accessKeyId : '<Access Key>',
        secretAccessKey: '<Secret AccessKey>',
        region : 'ap-northeast-2'
    };

AWS.config.update(key);
const dynamoDB = new AWS.DynamoDB.DocumentClient();

const update = {
    TableName : tableName,
    Key : {idx : 'idx001'},
    UpdateExpression : 'set data1 = :d1, data2 = :d2',
    ExpressionAttributeValues:{
        ":d1": 'newdata1',
        ":d2": 'newdata2'
    },
}

dynamoDB.update(update, (e,d) => {
    console.log(e,d)
})

이렇게 간단하게 DynamoDB 를 사용해봤다.

지금까지 MongoDB만 사용하다가 DynamoDB를 처음써보니 아직 익숙하지가 않은데..

쓰다보면 익숙해지겠지 뭐..

AWS 의 서비스들을 사용하기위해 액세스 인증 키를 생성해보려고 한다.

https://console.aws.amazon.com/iam/home#/home

위의 주소로 들어간다.

여기서 얻은 키는 다시 볼수없으니 잘 저장해두자.

이제 여기의 Access key ID 와 Seceret access key 로 aws의 여러 서비스를 사용해보자