본문 바로가기

전체 글

8. 경계 ※ 해당 포스트는 책의 내용을 요약 / 정리 한 내용으로 내용이 생략되거나 추가됐을 수 있습니다. [소프트웨어의 경계] 소프트웨어의 경계란? 오픈 소스, 패키지 제공자로 부터 구입한 패키지 코드, 사내 다른 팀이 제공한 코드 등 외부 코드와 우리 코드가 만나는 영역(인터페이스) 패키지 제공자와 사용자 간의 문제 제공자: 더 많은 환경에서 패키지를 구동하기 위해 넓은 적용성의 인터페이스를 제공한다. 사용자: 자신의 요구(우리 코드에 필요한 만큼) 에 집중하는 인터페이스를 제공받기를 원한다. 문제의 해결법 - 외부 코드를 감싸는 코드를 만들고 우리 코드에 필요한 인터페이스만 제공한다. (Facade 패턴) - 공개해야 하는 API 의 인수/ 반환 값으로 외부 코드를 사용하지 않는다. [외부 패키지 익히기] .. Books/Clean Code 2022. 9. 6.
Typescript, MUI (Material UI v5), React hook form 함께 사용하기 (with Generic) (2/2) 이전 포스트 에서 만들었던 FormInput 컴포넌트의 두가지 문제점을 를 제네릭을 이용해서 개선해보도록 하겠습니다. [개선된 예제] types/props.d.ts import { ControllerRenderProps, FieldValues, UseControllerProps } from 'react-hook-form' type WithoutFormPropsComponent = Omit export type FormComponentProps = WithoutFormPropsComponent & UseControllerProps 여러가지 컴포넌트를 form 컴포넌트로 만드는 경우 중복되는 타입 선언을 없애.. FrontEnd/react 2022. 9. 4.
Typescript, MUI (Material UI v5), React hook form 함께 사용하기 (with Generic) (1/2) React Hook Form 의 useController hook은 Controller 를 사용하면 MUI 나 AntD 같은 외부 controlled 컴포넌트를 쉽게 제어할 수 있습니다. 해당 포스트에서는 MUI 컴포넌트를 useController 를 사용하여, form 에서 사용가능한 컴포넌트로 만들어보고, 몇가지 주의사항을 말씀드리겠습니다 (React-hook-form, MUI에 대한 기본적인 설명은 생략합니다.) MUI의 TextField를 useController hook을 사용해 form에서 사용가능한 FormInput 컴포넌트를 만들어보겠습니다. [예제] FormInput/FormInput.d.ts import { TextFieldProps } from '@mui/material' import.. FrontEnd/react 2022. 9. 3.
[Typescript] 구조적 타이핑 [구조적 타이핑] Typescript 의 타입 호환성은 구조적 타이핑을 지원합니다. 여기서 구조적 타이핑이란 X 와 Y 라는 타입이 '구조적' 으로 동일하다면 X 와 Y 는 호환 가능한 타입이 될 수 있다고 여길 수 있는 것을 의미합니다. interface A { id : number } interface B { id : number } let a : A; let b : B = { id: 5, } a = b //OK a는 A 타입 으로 선언되었지만 '구조적'으로 동일한 B 타입의 객체를 대입하더라도 에러를 내지 않습니다. interface A { id : number } interface B { id : number name : string } let a : A; let b : B = { id: 5, n.. Language/JS, TS 2022. 9. 1.
[lv 1] 여러 기준으로 정렬하기 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 해답 (mysql) SELECT ANIMAL_ID, NAME, DATETIME FROM ANIMAL_INS ORDER BY NAME ASC, DATETIME DESC NAME 컬럼에 대해서는 오름차순, DATETIME 컬럼에 대해서는 내림차순 정렬 후 조회하면 된다. Algorithm/Programmers 2022. 8. 31.
[Lv 1] 상위 n개 레코드 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 해답 1 : ORDER BY 로 정렬 후, limit 로 제한 된 개수의 행 데이터만 조회하는 방식 SELECT name FROM ANIMAL_INS ORDER BY DATETIME LIMIT 1 해답 2 : 서브 쿼리를 사용해 특정 컬럼의 최소 값을 가진 행 데이터 추출 후 조회 SELECT NAME FROM ANIMAL_INS WHERE DATETIME = (SELECT MIN(DATETIME) FROM ANIMAL_INS) Algorithm/Programmers 2022. 8. 30.
Commit message template 설정하기 일관성 있는 commit message convention 을 적용하기 위해 commit message template 을 사용해보자 (커밋 메세지 작성 규칙에 대해서는 다른 포스트를 작성하기로 하고 여기서는 template 설정법만 작성) commit message convention 적용의 이점 1. 더 좋은 커밋 로그 가독성 2. 더 나은 협업과 리뷰 프로세스 3. 더 쉬운 코드 유지보수 0. (optional) git commit message editor 변경 $ git config --global core.editor "editor name(ex. nano)" 1. commit message template 파일 생성 - 텍스트 파일에 아래의 내용을 작성하고 저장한다. #############.. Version Control/git 2022. 8. 9.
[Lv 1] 행렬의 덧셈 문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 해답 function solution(arr1, arr2){ const result = arr1.map((row, rIndex) => row.map((elem, cIndex) => elem + arr2[rIndex][cIndex])); return result; } 문제를 푸는 언어의 배열 관련 메서드를 잘 알고 있다면 어렵지 않게 풀 수 있는 문제이다. Algorithm/Programmers 2022. 8. 4.

티스토리툴바