📚책 정보 - 좋은 코드, 나쁜 코드 (2022) - 톰 롱 (구글 소프트웨어 엔지니어) 지음 📝2장: 추상화 계층 1. null 값 및 의사코드 규약 2. 왜 추상화 계층을 만드는가? 3. 코드의 계층 4. 마이크로서비스는 어떤가? 📍상위 수준의 문제 ~ 하위 수준의 문제 어떤 디바이스에서 유저가 서버로 메시지를 보낼 수 있는 기능을 만든다고 가정할 때, 상위 수준의 문제 - HTTP를 통해 서버로 메시지 전송 (어떻게?) 알고 있어야 할 하위 문제 (상위 문제에서 도출됨) - HTTP 연결 열기 - 문자열 메시지 보내기 - HTTP 연결 닫기 알 필요 없는 하위 문제 (상위 문제에서 도출됨) - 전송할 수 있는 형식으로 보낼 메시지 문자열 직렬화 (파싱) - HTTP 프로토콜 조작 - TCP 연결 -..

📚책 정보 - 좋은 코드, 나쁜 코드 (2022) - 톰 롱 (구글 소프트웨어 엔지니어) 지음 📝1장: 코드 품질 1. 코드는 어떻게 소프트웨어가 되는가 2. 코드 품질의 목표 3. 코드 품질의 핵심 요소 4. 고품질 코드 작성은 일정을 지연시키는가? 📍주석의 역할 - 주석은 그 코드가 무슨 일을 하는지가 아니라, 그 코드가 왜 거기 있는지를 설명해야 한다 📍코드 퀄리티를 나누는 것은 - 객관적으로 코드의 품질을 평가하려면, 코드를 통해 달성하려는 것(본질적인 목표) 에 대해 생각해야 함 - 본질적인 목표에 도움이 되면 고품질의 코드, 방해가 되면 저품질의 코드 📍코드를 작성할 때 목표로 삼을 4가지 1. 기본적으로 코드가 잘 작동해야 함 2. 코드는 작동이 멈추면 안된다 - 현재는 잘 돌아가지만, 미래..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 값vs타입 - 원시 타입 📍값vs타입 값 공간과 타입 공간의 이름은 서로 충돌하지 않음 - 타입과 변수를 같은 이름으로 정의할 수 있음 (타입스크립트 type 문법은 컴파일 시 제거되기 때문) type Developer = { isWorking: true }; const Developer = { isTyping: true }; // OK ES6의 class 문법은 값과 타입으로서 동시에 사용됨 - 타입스크립트에서는 클래스를 타입 어노테이션으로 사용 가능 - 자바스크립트에서는 런타임에서 객체로 변환되어 자바스크립트의 값으로 사용됨 class Developer { name: string; do..

📚 책 정보 - 우아한 타입스크립트 with 리액트 (2023) - 우아한 형제들 웹프론트개발그룹 지음 📝 목차 - 구조적 타이핑 - 구조적 서브 타이핑 📍구조적 타이핑 아래 코드에서는 비슷하면서 서로 다른 타입이 호환된다. 타입스크립트는 구조로 타입을 구분하기 때문. (다른 언어였으면 타입 이름이 다르면 호환 불가) interface Dog { age: number; } interface Man { age: number; } let sundance = { age: 10 }; let kim = { age: 30 }; sundance = kim; // ok kim = sundance; // ok 📍구조적 서브타이핑 타입스크립트에서 타입은 집합의 개념이기 때문에, 특정 값이 string or number 타..

📍책 정보 제목 : 변신 작가 : 프란츠 카프카 (오스트리아-헝가리) 출간연도 : 1915 📍책 제목 '변신'이라는 소재가 여러 부분에서 등장하는 것 같다 1. 주인공 '잠자'의 변신 - 사람 -> 갑충으로 물리적 변신 - 그에 따라 자신감 있던 태도 -> 안절부절 못하고 가족들에게 쩔쩔매는 태도의 정서적 변신 2. 여동생의 변신 - 잠자가 갑충으로 변하고 난 후에도 여동생은 잠자에 대한 애정은 변치 않고 잘 돌봐줌 - 그런데, 잠자를 케어하는데 지쳐서 어느 순간 제거 대상으로 생각하며 태도를 바꿈 - 잠자는 여동생의 변심으로 더 이상 돌봄을 받지 못해 죽음에 이르게 됨 3. 가족들의 변신 3-1. 잠자에 대한 태도 변신 (잠자 죽음 이전) - 잠자가 갑충으로 변하기 전, 집안의 생계를 이끌고 있을 때에..

📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..

목표드래그로 엘리먼트 이동시키기 결과물https://codesandbox.io/s/drag-and-drop-ykyxgd?file=/src/Moving.tsx   조건1. pointer event 사용- mouse event 와 기능은 거의 동일하나, 모바일 디바이스에서 touch를 지원- 따라서 mouse event의 상위 호환 2. 마우스 커서의 속도에 맞춰서 따라와야 함- PointerEvent의 movementX, movementY 프로퍼티로 타겟 엘리먼트를 translate시키는 방식은 속도가 느려서 마우스 커서가 쉽게 엘리먼트 바깥으로 나가버리고, 드래그가 끊겨버림.. 그런데onMouseMove, onPoinerMove 는 onDragStart에 비해 속도가 느리다...참고)https://sta..

📍참고 https://www.react-hook-form.com/get-started 📍예시 코드 1 import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // input 밸류 이름을 watch 함수에 전달하여 값 확인 return ( /* handleSubmit은 onSubmit을 호출하기 전에 입력 유효성 검증 실행 */ {/* register함수를 호출하..