공식문서를 보고 그때그때 필요한 문법을 찾아 예제를 적으며 공부합니다. Globals · JestIn your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '@jest/globals'.jestjs.io expect()expect(값).toBe(비교할 값)Object.is(값, 비교할 값) 과 같다Object.is() 란? Object.is..
배경TDD로 개발하다가, 기능 단위 커밋을 할 때 해당 커밋의 기능이 테스트를 통과하는지 확실하게 검증하기 위해 커밋 이전에 테스트를 돌리고 통과 시에만 커밋을 할 수 있도록 하고 싶었다.또한 커밋 메시지 컨벤션을 따르기 위해 커밋 메시지 검증이 필요했다. 구현git hooks 설정하기외부 라이브러리를 사용할 수 없었기에, 평소 사용했던 husky로 설정은 불가능해서 .git/hooks에서 설정을 해주기로 했다.1. cd .git/hooks 해서 지원하는 훅 확인2. 해당 위치에서 필요한 훅의 .sample 확장자를 지운 이름의 파일을 만들기vi pre-commit3. 실행하고 싶은 명령어 작성# .git/hooks/pre-commitnpm test4. 권한부여chmod ug+x .git/hooks/*..
Vanilla JS로 컴포넌트 만들기배경리액트에서는 컴포넌트를 기반으로 코드를 작성할 수 있었기에, 반복되는 부분을 컴포넌트로 분리할 수 있었다.Vanilla JS로 구현한다면 반복되는 태그들을 어떻게 처리할 수 있을까?프로젝트에 필요한 커스텀 컴포넌트를 만들어 보기로 했다. 컴포넌트?컴포넌트가 갖춰야 할 것고유한 자바스크립트 클래스외부코드가 접근할 수 없으며 해당 클래스에서만 관리되는 DOM 구조 (캡슐화 원칙)구성요소에 적용되는 CSS 스타일다른 구성요소와 상호작용하기 위한 이벤트, 클래스, 메서드 등을 일컫는 API컴포넌트의 역할컴포넌트 구현을 위해, 익숙한 리액트의 컴포넌트 클래스를 참고했다.DOM Element를 출력할 수 있어야 함 (render)부모에게서 읽기 전용 데이터를 상속받을 수 있어..
나만의 ESLint 규칙 만들기결과물 eslint-config-ham-javascript개인프로젝트를 위한 커스텀 javascript eslint 설정입니다.. Latest version: 0.0.11, last published: 7 days ago. Start using eslint-config-ham-javascript in your project by running `npm i eslint-config-ham-javascript`. There are no other projwww.npmjs.com 배경ESLint는 문법적인 오류나 안티 패턴을 찾아주기 때문에, 코드의 품질을 향상시킬 수 있다.그러나 매번 작성하는 것은 번거롭다.그렇다고 eslint-config-airbnb 만을 도입하기엔 너무 규..
이번 학기는 편할 줄 알았는데... ㅎㅎ. CS 보완도 할 겸 하반기 취준을 위해서 다들 따는 자격증을 호다닥 준비했다!1. 정처기 필기기본 지식과 준비 기간컴퓨터공학과 복수전공을 하면서, 선택 과목이었던 DB, 4-2로 미룬 운체를 듣지 않았다. 들었다면 도움이 되었을 것 같다. 수강한 과목 중에는 객체+자구+컴네 정도가 준비에 도움이 되었다. 그리고 확실히 SQLD를 같이 준비하다 보니 3과목은 거의 투자를 안했음에도 괜찮은 점수를 받을 수 있었다. 시험 날짜를 잘못 잡아서 금-토 이어서 시험 두개를 몰아서 봤는데, 나쁘지 않은 선택이었다. 주변 전공자들한테 공부 기간을 물어보자 엄청난 기만이 돌아왔다 ㅠ 3일컷이다x2, 일주일컷이다, 너 그거 일주일 안에 못따면 바보야 등등........딱 평균 6..
리액트에서 "children"이란 무엇일까? children은 prop일 뿐이다. const Parent = ({ children }) => { return {children}; }; 즉 아래의 코드 (1), (2)는 같다. // (1) // (2) 그렇다면 Element를 prop으로 넘긴다는 것은 어떤 뜻일까? 아래의 두 코드는 같은 뜻이다. 모두 리액트 element를 생성, 할당하고 있다. const children = const children = React.createElement(Child, null, null); element가 변경되면 위와 같은 재생성 및 재할당과정이 일어난다. 그렇다면 리액트 element란 무엇인가? 바로 아래와 같은 객체일 뿐이다. { type: Child, pro..
3주차 주제 스터디를 진행하다가 이런 논란(?)이 있었다. 아래와 같은 코드에서, context가 바뀔 때 자식 컴포넌트가 모두 리렌더링 되는 것이 아니라, context가 쓰이는 컴포넌트만 리렌더링 되는 것이었다...! 그리고 정말 이상하게도 리렌더링 여부를 확인하기 위한 console.log()는 동작하지 않았지만, React devtools의 하이라이팅은 동작해서 혼란이 가중되었다. (리렌더링 된거다 vs 아니다) 스터디가 끝나고 이러한 현상(context가 쓰이는 컴포넌트만 리렌더링, but 하이라이팅은 모든 자식 컴포넌트)이 일어나는 이유를 이해하기 위해 아래 내용들을 다시 공부해 봐야겠다고 생각했다. 1. useContext 2. children Props 3. React devtools 이번..
문제 https://www.acmicpc.net/problem/1918 1918번: 후위 표기식 첫째 줄에 중위 표기식이 주어진다. 단 이 수식의 피연산자는 알파벳 대문자로 이루어지며 수식에서 한 번씩만 등장한다. 그리고 -A+B와 같이 -가 가장 앞에 오거나 AB와 같이 *가 생략되는 등의 www.acmicpc.net 풀이과정 💡 아이디어 ✅ 먼저 계산되어야 하는 부호가 앞에 나와야 한다. A*(B+C) ➡️ ABC+* ✅ 즉, 부호를 스택에 순서대로 담았다가, ✅ 스택의 가장 위 부호보다 나중에 계산되어야 하는 부호가 나오면 스택에 담긴 부호들을 처리한다. ✅ 이때 연산의 우선순위는, 괄호 > * / > + - > 앞에 온 부호 ✅ 앞에 온 부호가 항상 스택의 밑에 깔리므로(FILO), 우선순위를 무..
