210210 Side Project Diary 3/4/5일차
Side Project Diary 3/4/5일차
오늘은 3,4,5일차에 진행되었던 Side Project의 진행 상황에 대해서 정리해보려고 한다. 우선 Side Project의 진척이 빠르게 진행되지 않는 이유는 단위테스트(Unit Test)를 같이 진행하기 위해서이다. Jest와 RTL(React-Testing-Libary)를 사용한 JavaScript 코드 및 React component, axios mockup 테스트 관련해서 별도의 공부가 필요하다고 생각되어, 우선적으로 테스트 관련해서 기본적으로 필요한 공부들을 했다.
공부한 내용과 연습용 Repository는 모두 정리해서 블로그에 올렸다.
Baekjoon Online Judge 1302번 베스트 샐러 문제
백준 저지 1302번 베스트 샐러 문제 Pseudo code + Python code
손 코딩을 한 코드에서 sorted로 정렬을 한 뒤에 list로 변환을 하였는데, dictionary type의 데이터를 items()로 하게 되면, 리스트 내에 튜플(key, value쌍)로 변환이 되기 때문에 그럴 필요가 없었다. 정렬된 튜플 데이터 리스트에서 첫번째 요소의 첫번째(book title-(key))를 추출하게 되면 가장 높은 판매 수를 기록한 책의 제목을 추출할 수 있다.
1 | n = int(input()) |
210210 Self Development TIL
Thought of the day
게으름은 즐겁지만 괴로운 상태다. 우리는 행복해지기 위해 무엇인가 하고 있어야 한다.
(Indolence is a delightful but distressing state; we must be doing something to be happy.)
마하트마 간디 / Mahatma Gandhi
DAILY RECORD
오늘은 지하철을 타고 오면서 간단한 알고리즘 한 문제를 풀었다. 생각보다 지하철에 사람이 없어서 쾌적하게 올 수 있었던 것 같다.
오늘도 의미있는 하루가 되기 위해 노력하는 내가 되자.
TO DO LIST
Side Project 시작
Side Project Diary 3/4/5일차 작성(완료
)- ReactJS project 프로젝트
- 프로젝트 진척
react-testing-library 공부(Mock module을 활용해서 Async API 코드를 unit test하는 방법)(완료
)
→ https://leehyungi0622.github.io/2021/02/09/202102/210209-React_testing_library_start/- Issue #8)Create header,router components and update app component (
예정
)
- 프로젝트 진척
210209 Python Assignment
과제1) 성수역 지하철 열차 시스템
지하철 노선 클래스
1 | # 2호선 내부순환선 (총 43개 역) 시청역 <->시청역 (내부순환) |
210209 Self Development TIL
Thought of the day
현명한 자라면 찾아낸 기회보다 더 많은 기회를 만들 것이다.
(A wise man will make more opportunities than he finds)
프랜시스 베이컨/Sir Francis Bacon
DAILY RECORD
오늘도 하루종일 자습을 하였다.
오전에는 Jest framework의 사용법에 대한 공부와 ReactJS side project를 진행하였다. 오후에는 Python 메인 강사님 과제와 ReactJS에서 Jest의 Mock module을 활용해서 Async API 코드를 unit test하는 방법에 대해서 정리를 해 볼 것이다.
TO DO LIST
210208 Jest의 다양한 matcher
Jest Matcher
이전에 사용했던 toBe() matcher는 숫자나 문자와 같은 기본 타입(Primitive Type)의 데이터를 비교할때 사용했다. 그럼 그 외에 다른 matcher에는 어떤 것들이 있는지 알아보고 실습을 해보도록 하겠다.
Jest의 다양한 matcher
toEqual() : primitive type의 변수나 객체를 비교할때 사용된다.
객체는 참조변수이기 때문에 값은 같더라도 참조하는 주소가 다르다.toStrictEqual() : 객체를 좀 더 엄격하게 검사할때 사용된다.
1
2
3
4
5
6
7
8
9// makeUser()를 toEqual()로 검사를 하게 되면 passed
// toStrictEqual()를 toEqual()로 검사를 하게 되면 failed
const fn = {
add: (a, b) => a + b,
makeUser: (name, age) => ({ name, age, gender: undefined }),
throwErr: () => {
throw new Error('xx');
}
};
210208 Self Development TIL
Thought of the day
좋아하는 직업으르 택하면 평생 하루도 일하지 않아도 될 것이니라.
(Choose a job you love, and you will never have to work a day in your life.)
공자/Confucius
DAILY RECORD
오늘은 하루종일 자습을 하였다.
자습의 시작은 JavaScript test framework인 Jest의 간단한 사용법과 실습한 내용을 정리하는 것으로 시작했다.
TO DO LIST
TypeScript 공부 (Understanding TypeScript - 2021 Edition)
- Section 1.8.Setting Up A Code Editor / IDE ~ (
예정
)
- Section 1.8.Setting Up A Code Editor / IDE ~ (
Side Project 시작
210208 Jest의 개념과 기본사용
Jest
Jest는 Facebook에 의해서 개발된 JavaScript 테스트 프레임워크이며, 대규모 Web application의 테스트를 좀 더 심플하게 할 수 있도록 도와준다.
Jest framework의 사용
간단한 JavaScript 코드를 Jest framework를 사용해서 테스트 해보도록 하자.
실습 내용
실습 Repository : https://github.com/LeeHyungi0622/javascript-jest-test-practice-repo
프로젝트의 branch 기본 구성은 master branch로 구성한다.
README.md 파일의 documentation작업을 제외한 모든 작업은 별도의 branch를 새로 끊어서 작업을 시작한다.
210207 API & Networking with Axios instance
본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.
Fetch API는 Request나 Response와 같은 HTTP Pipeline에 접근 및 조작을 하기 위한 JavaScript interface를 제공한다.
Network를 통해 비동기방식으로 resource를 fetch하기 위해서 사용된다고 이해하면 된다.
사용방법은 아래와 같이 fetch() method에 자원을 얻기 위한 path를 넣어주고 request, response에 접근하면 된다.
1 | // fetch의 기본적인 사용 |