leesche blog

처음으로 API를 mocking하여 단위 테스트를 작성했다. 지금껏 MSW(Mock Service Worker)를 이용해 API를 호출하고 반환하는 커스텀 훅에 대한 단위 테스트만 작성했다. 하지만 1)상대적으로 간단한 컴포넌트를 이렇게 테스트하면 코드가 많아지기에 피하고 싶었고 2)다른 방식으로 컴포넌트와 테스트를 작성해보고 싶었다. 그런 마음을 오래 먹고 조금씩 공부를 하고 있다가 처음으로 작성했다. 테스트 대상이었던 컴포넌트는 외부 API Client를 주입 받는다. 나는 이 컴포넌트의 단위 테스트를 작성할 때 그 외부 API Client를 테스트 대역으로 바꿔서 주입했다. API Client에는 수많은 메서드들이 있지만 해당 테스트에서 사용하는 메서드만 원하는 데이터를 반환하도록 구현했다. 이렇게..

강의 플렉스(flex)와 그리드(grid)를 중점으로 배운다. SASS/SCSS도 간단하게 소개해준다. 가격은 6만 원이다. 강의만 있다면 6만 원이 아깝다고 느껴질 수 있다. 하지만 이 강의의 가격의 비쌈은 이 강의를 수강함으로 참가할 수 있는 챌린지로 상쇄된다. 챌린지 이 강의의 강점 중 하나인 챌린지. 2주 동안 매일 (첫째주 일요일은 쉬고, 이따금 이틀짜리 과제가 주어진다) 과제가 주어진다. html, css로 요구사항에 맞춰 웹페이지를 구현하면 된다. 개발 환경은 repl.it 을 사용한다. 실제로는 어느정도 챌린지를 진행 하다보니 repl.it은 불편해서 VSCode에서 작업한 뒤 repl에 복사했다. 적절한 난이도의 과제가 출제된다. 챌린지 초반엔 과제 내용 자체가 낯설어서 시간이 오래 걸릴..

문자, 문자열 문자 집합과 문자 부호화 방식 문자란 인간이 '이것은 문자라고 부르자'고 정한 기호 집합에 불과하다. 이 기호 집합을 '문자 집합', '문자 세트' 등으로 부른다. 문자 집합은 나라나 문화에 따라 다르다. 한편, 이 문자 집합을 디지털 데이터로 표현하려면 어떻게 부호화할지 정할 필요가 있다. 부호화 방법도 사람이 '이렇게 합시다'라고 정한 규칙에 불과하다. 마음대로 정해버려도 상관없는 것이다. 문자 부호화 방법의 역사를 보면 '효율이나 개인적 필요를 위해 부호화 방법을 만들자'는 세력과 '그 방법은 상호간 작업 시에 불편하니 표준화하자'는 세력 간의 치열한 다툼이 있었다. 부호화의 역사 모스 부호 On, Off, 그것의 길이를 조합으로 문자를 표현한다. 보 코드 하나의 문자를 On/Off ..

더보기 바닐라코딩의 Prep 사전학습가이드에 나와 있는 '블로그 만들기' 글을 보고 나의 2021년 블로그 포스팅의 방향을 정립하고자 한다. 블로그를 하는 목적 내가 공부하고, 고민하고, 알아낸 것들을 기록하고 공유하기 위함이다. 공개된 곳에 게시함으로써 사람들에게 잘 읽힐 수 있는 글을 쓰도록 유도한다. 즉, 글 쓰기 실력을 키울 수 있다. 배운 것을 잘 읽히도록 정리함으로써 '아는 것을 더욱 공고히' 할 수 있다. 블로그 글 작성 요구사항 단순한 복사-붙여넣기는 지양한다. 예를 들어 책의 내용을 그대로 정리하더라도 나만의 코멘트를 달아 글을 게시한다. 출처를 반드시 밝힌다. 다른 사람들이 읽기 쉽도록 쉽고 간결하게 작성한다. 다른 사람들이 흥미를 갖도록 재미있게 작성하도록 노력한다.

자세 교정을 위한 앱을 만들기 위해 활용할 수 있는 API가 없나 탐색하던 중 카카오 포즈를 찾았다. 문서를 보고 실습해보기로 했다. 실시간으로 자세 교정을 할 수 있으면 좋겠지만 현재 영상 분석에 길이 제한이 있는 것으로 보아 고용량의 요청은 비용이 들 것이다. 따라서 현재 나의 목적인 '책상 앞에 있는 자세'를 교정하는 것이 목적이라면, 굳이 실시간으로 찍는 것이 아니라 5초, 10초 간격으로 사진을 찍어 분석하는 것도 충분하다고 생각됐다. 테스트 해보기 카카오 포즈 가이드 구현 예제를 통해 쉽게 실습해볼 수 있다. 카카오 포즈 가이드 구현 예제에 오타가 있다. 아마 그대로 실행하면 AttributeError: module 'cv2.cv2' has no attribute 'COLOR_BGR2RG' 에..

https://www.edwith.org/boostcourse-cs-050/lecture/119010/ [LECTURE] 6) 하드웨어의 한계 : edwith 들어가기 전에 컴퓨터는 우리가 작성한 프로그램을 구동하기 위해 다양한 물리적 장치를 사용합니다. 그 중 하나는 메모리로, 프로그램이 필요한 정보가 저장되는 곳입니다. 메모리의 용량... - www.edwith.org 컴퓨터는 RAM(랜덤 액세스 메모리)이라는 물리적 저장장치를 포함하고 있습니다. 우리가 작성한 프로그램은 구동 중에 RAM에 저장되는데요, RAM은 유한한 크기의 비트만 저장할 수 있기 때문에 때때로 부정확한 결과를 내기도 합니다. 예를 들어, 부동 소수점 부정확성과 정수 오버플로우가 있다. 생각해보기 -> Y2K와 보잉787과 같은 ..

보호되어 있는 글입니다.

애니메이션을 어떻게 멈춰야하는지 몰라서 공부해본 코드(출처: https://coderap.tistory.com/132#c ) state running paused 내가 문제를 해결한 방법 하고 싶었던 것: 배경이 흘러가고 특정 배경 시점에서 특정 버튼을 누르면 사라지는 같은 양식의 div 를 표시하고 싶다. (= 순차적으로 같은 위치에 내용이 다른 퀴즈가 팝업 되고 퀴즈의 정답을 클릭하면 퀴즈 화면이 사라지고 다시 일정 시간(거리) 뒤에 퀴즈가 출력됨) 내가 사용한 방법: 배경이 흐르다가 멈출 수 있도록 animation-play-state 별로 두 가지 클래스에 대한 css를 작성해놓는다. jQuery를 활용해 선택한 클래스를 변경하여 배경을 멈추거나 흐를 수 있도록 한다. 퀴즈 화면용 div를 여러 ..

cafe.naver.com/javachobostudy/83399 개발 5년차에서 느끼는 것들.. 대한민국 모임의 시작, 네이버 카페 cafe.naver.com https://qkqhxla1.tistory.com/990 취업을 위한 알고리즘 공부법. 자소서 : http://qkqhxla1.tistory.com/797 면접 후기 : http://qkqhxla1.tistory.com/799 내가 한 공부들과 방법 : http://qkqhxla1.tistory.com/802 취업을 위한 알고리즘 공부법 : http://qkqhxla1.tistory.. qkqhxla1.tistory.com https://okky.kr/article/680617 OKKY | 비전공자분들께 말씀드리는 제 경험과 조언 Okky라는 국..

게임을 만들어야 하는 과제를 위해 사람이 걷는 애니메이션을 만들어야 했다. 구글 이미지에서 괜찮은 스프라이트 파일을 구했지만 제대로 된 것이 아니었다. 내가 직접 그림을 자르고 간격을 맞춰서 거의 새로운 스프라이트 파일을 창조해야 했다. 그래서 3시간 정도의 시행착오 끝에 만들었다. 다음과 같은 과정을 걸쳐야 했다. 화질 좋은 '사람이 걷는 동작을 분할해놓은 그림'을 구글링해서 다운로드 받기 정확한 간격으로 그림을 잘라서 가로로 긴 형태의 스프라이트 파일 만들기 HTML/CSS로 애니메이션 구현하기. 그리고 2번이 문제였다. 처음에는 어떤 툴로 이 작업을 해야할지 모르겠어서 매우 당황했었다. 그림판, PPT, 포토샵, 일러스트레이터를 오가면서 어떻게 해야 할지 방황했었고, 결국 일러스트레이..