[취업준비일지] - 76 - 원티드 인턴십 5일차

이번에 진행될 과제는 트렐로 등의 이슈 트래킹 기능을 구현하는 것이었다.
각자 정해진 태그와 CRUD기능 및 담당자 목록 임의 구성 등의 조건이 있었다.

eslint, prettier 설정 후 styled-components, react-icons를 설치한 다음
이슈에 있는 체크리스트를 확인한 후
commit, push, merge를 처리했다.

레이아웃을 잡기 전 과제의 세부조건 및 태그명칭 등을 정리했다.
이슈의 상태는 “할 일”, “진행 중”, 완료”가 존재하며 
칸반보드와 같이 상태별로 분류되기 때문에 3개의 큰 칸이 필요했고
이를 통해 트렐로의 작은 컴포넌트보다는
깃허브 프로젝트의 칸반이 조금 더 적당한 구성이라고 생각했다.

Todo, In Progress, Done 3가지의 큰 칸과
내부적으로는 상태(대기,진행,종료)아이콘과 제목을 표기하면 될 것 같고
각 리스트를 클릭할 경우 모달창 팝업을 통해 
요구했던 고유번호, 제목, 내용, 마감일, 상태, 담당자가 표기되게 하면 될 것 같다.
또한 상세정보 내부에는 저장 버튼을 두고
저장 버튼을 클릭할 경우 반영되게 하며(edit, cancel/save 버튼 구현)
로딩 중 표기될 팝업이미지? UX 모달페이지 또한 구성해야 할 것 같다.

UI보다는 기능에 집중하기 위한 레이아웃..

전체적인 레이아웃을 구성한 다음 팝업을 만들려고 하는 도중
console.log를 사용해 데이터를 확인하려고 하는데
"Unexpected console statement no-console"과 같은 메세지를 볼 수 있었다.

처음에는 당황했지만 검색한 결과 ESLint와 관련있다는 사실을 알 수 있었고
"no-console": ["warn", { "allow": ["warn", "error", "info"] }]
부분을 잠시 주석처리하고 진행하는 것으로 문제를 해결할 수 있었다.

모달을 구현하는 것은 이전 북자국 프로젝트에서 동기님이 작성하신 모달을 재활용해서 구현했다.
내가 만들었던 모달들도 있지만 그 모달은 내부에서 닫을 수 없었는데
여기는 useRef를 통해 신기하게 작업을 해서 한번 해보고 싶었다.

하지만 useRef를 사용하지 않아도 어차피 외부 클릭에만 작동하게 하는 것은 
크게 어렵지는 않았기 때문에 생각과는 많이 차이점이 있었다.

 

 

1.써드 파티(3rd party)의 정의는 제 3자라는 뜻으로
아래와 같이 거리감을 나타낸다고도 볼 수 있다.

퍼스트 파티(1st party) - 직접적 연계
세컨드 파티(2nd party) - 간접적 연계
써드 파티(3rd party) - 비관련 연계

주로 라이브러리, 프레임워크 등 보조적 역할을 하는 툴 등을 써드 파티라고 부른다.

 

 

 

(1).백준 9550 아이들은 사탕을 좋아해는 
여러 종류의 사탕 중 같은 종류의 사탕을 k개씩 받고 싶어 하는 조건을 가지고
현재 가진 사탕들을 최대 몇명의 아이들에게 줄 수 있는지를
각각의 테스트케이스들마다 출력해주는 문제였다.

프로그래머스에서는 테스트케이스가 여럿인 문제가 없지만
백준에서는 자주 볼 수 있는데
이런 문제들을 통해서 input값을 다루는 연습이 더 되었던 것 같다.

let input = `2
3 2
4 5 7
3 8
4 5 7`.split('\n')

let result = []

for(let i = 1 ; i < input.length ; i+=2){
    let [candyTypes, eachNeedAmount] = input[i].split(' ').map(Number)
    let candyArr = input[i+1].split(' ').map(Number)
    let peopleCount = 0
    for(let j = 0 ; j < candyArr.length ; j++){
        peopleCount += Math.floor(candyArr[j]/eachNeedAmount)
    }
    result.push(peopleCount)
}

console.log(result.join('\n'))