Front-End94 component와 hook 에 적용한 SOLID - [hook 편] 목차SOLID 원칙 - FrontEnd에 적용이 가능할까?내 코드 의존성의 원인해결 방법 - component 또는 hook이 알아야 하는 정보 줄이기 (S: 단일 책임 원칙)잘못 설계하는 과정 (실제 예시) - 어떤 컴포넌트를 만드는지 알려줄 거에요.hook이 담당하는 데이터를 최소한 작게 분리해서 생각해보기 - 의미 덜어내기hook 분리의 장점 (O: 개방 폐쇄 원칙)컴포넌트와 컴포넌트 hook과 hook 간 최소한의 소통 통로 (I: 인터페이스 분리 원칙)수정된 설계 과정 (실제 예시) - 어떤 컴포넌트를 만드는지 안 알려줄 거에요.추가된 요구사항 (실제 예시)잠깐 component이야기를 해보자. 렌더링에서 예상치 못하게 의존성이 문제가 되는 지점 - map 메서드 고찰 (I: 인터페이스 분리 원.. 2024. 7. 21. 비동기와 이벤트 루프 이벤트 루프의 동작을 정리하고,비동기 코드의 동작 순서를 정리합니다. 🌸 잘못 이해하고 있는 내용이 있다면 알려주세요. 감사합니다 🌸 목차ko.javascript.info/event-loop 본문 예시 코드코드의 실행 순서 콜스택의 상태이벤트 루프와 마이크로 태스크 큐, 매크로 태스크 큐자바스크립트 튜토리얼 [이벤트 루프] 카테고리 이해하기'특정 태스크'란?렌더링 시점반복문 내의 DOM 조작은 렌더링과 관련이 있는 걸까? 들어가기 전에, 기억해야 할 내용입니다.콜스택이 비어야 태스크 큐의 작업이 콜스택으로 이동합니다.태스크 큐의 종류(1) 마이크로 태스크 큐 (빨리 처리되는 후속 작업. then, resolve 등)(2) 매크로 태스크 큐 (setTimeout 등) 1. ko.javascript.in.. 2024. 6. 6. git stash pop을 잘못 적용한 경우, 되돌리거나 checkout 하고 싶을 때 [상황] git stash pop을 했는데, 다른 브랜치에서 pop을 하게 됨 merge conflict 발생, git checkout 이 안되는 솽황 시간을~ 되돌리는~ 힘~ git stash pop을 하기 전으로 되돌아가고 싶은 경우 [해결] git reset --merge 참고 https://www.delftstack.com/ko/howto/git/undo-git-stash-pop/ 2024. 3. 11. PR 리뷰가 어렵다면, 해볼 수 있는 내용 웹접근성 https://accessibility.naver.com/accessibility div 대신 또는 Fragment 사용 SOLID 단일 책임 원칙 개방 폐쇄 원칙: 변경에 유용한가, 리스코프 치환 원칙 인터페이스 분리 원칙 의존성 역전 원칙 IoC DI 특히 설계는 너무 많은 것이 변경되지 않도록 처음부터 주의해서 설계해야 하는 것 같다. 하나가 변경된 경우 그것과 관련된 내용들이 같은 레벨, 또는 하위 레벨로 전파되어 수정 범위가 넓어지면 곤란한 상황이 생긴다. (API 명세가 바뀌었을 때, 함수의 매개번수 변경/추가 또는 컴포넌트 prop이 바뀐 경우도 있을 것 같다.) API 스펙이 바뀐 경우, 인터페이스가 있다면? 도메인 분류 네이밍과 관련된 부분일 수도 있는데, 주요 용어들은 통일하는.. 2024. 3. 9. 좋은 코드, 나쁜 코드 프로그래머의 코드 개선법 https://product.kyobobook.co.kr/detail/S000061353995 좋은 코드, 나쁜 코드 | 톰 롱 - 교보문고 좋은 코드, 나쁜 코드 | 이 책의 가장 큰 특징은 나쁜 코드가 왜 나쁜 코드인지 설명하고, 나쁜 코드를 좋은 코드로 바꿔가는 과정을 직접 보여주는 것이다. 이를 통해 독자는 좋은 코드와 나쁜 product.kyobobook.co.kr PR 리뷰를 하면서, 주관적이지 않은 지표가 있을까 고민하기 시작하게 되었다. 특히 설계에 관해서는 best practice가 있는지 궁금해서 책을 읽어보게 되었다. 책에서는 왜 좋은 코드를 작성해야 하는지를 먼저 설명한다. 당장은 개발하는 데만도 시간이 부족하더라도, 신경써서 작성하지 않으면 생산성이 떨어지기 때문이라고 강조를 하는.. 2024. 2. 17. FE 엔지니어의 Figma 사용법 (초급편) Figma에 적용 할 기본 내용 폰트 크기 정하기(기본 16px? 14px? 12px?) 색상 규칙 만들기(컬러 팔레트 설정, 정해진 컬러를 사용하기) 레이아웃 설정(group, auto layout으로 css flex 구성 만들기) 컴포넌트화(React처럼 하나의 컴포넌트를 만들고, 컴포넌트의 원형 수정시 모든 복사된 내용에 반영되도록 합니다. 일일히 수정할 필요가 없기 때문에 매우 편합니다.) 디자인에 감각이 없는 나! Figma로 어떤 걸 해볼 수 있을까? 일관된 디자인을 구성하기 위한 최소한의 숙지 사항 디자인에 감각이 없는 나! Figma로 어떤 걸 해볼 수 있을까? 디자인을 담당 해주실 분이 없다면 '누군가'가 와이어프레임을 설계해야 할 때가 있습니다. 바로바로 지금! "디자인에 소질이 없습니.. 2024. 2. 12. useEffect 의존성 제거 useEffect는 코드 흐름을 파악하기 어렵게 만든다는 생각이 들었다. 일단 렌더링 된 이후 useEffect가 실행되기 때문인데 만약 의존성 배열에도 여러 내용이 추가되면 ..? 리렌더링 되는 횟수를 줄이기 위한 방법이 있을지 생각하다가 공식 문서를 읽어보게 됨. https://ko.react.dev/learn/removing-effect-dependencies 가능하면 의존성을 줄이기 위한 방법들이 소개되어 있었고, 의외로 간단하게 해결할 수 있는 내용들이 있어서 간단하게 기록 useEffect 의존성 제거하기 1. 함수를 useEffect 내부에 작성 2. 객체를 포함해야 한다면? 구조분해 할당으로 원시값 추출하기 => 객체는 계속 참조값이 바뀌기 때문. const {id, name} = obj .. 2024. 1. 23. 포지션 11.3 오프셋 프로퍼티top bottom left right => 오프셋 50% 등 비율로도 설정 가능 음수값이면 밖으로 나가게 됨 패딩이 적용되면 컨텐츠 영역 + 패딩 영역이 적용됨 (원하지 않는다면 box-sizing을 border-box로 지정) auto ? 11.4 콘텐츠 오버플로(포지션인데 왜..?) visible : hidden | scroll | auto(-> 스크롤 바는 필요할 때만 사용) 요소의 크기 < 콘텐츠 크기 11.5 요소 가시성visibility(레이아웃에 영향이 있다) 보이지 않을 뿐 영역을 차지함 [ display : none은 문서에서 제거함 ] 11.6.1 포함하는 블록과 absolute 포지션이 지정된 요소 문서 흐름에서 완전히 제거된다. parent가 relative.. 2024. 1. 6. .eslintrc [파악하기 편] .eslintrc.json 또는 package.json .eslintrc.{js, yml, yaml, cjs} 등에서 규칙을 설정할 수 있다. 궁금한 것 rules plugins ?? extends ??? parser parserOptions ... root files ignorePatterns env plugin npm module `eslint-plugin-` 형식 .eslintrc에 추가되는 내용 plugins: [""] 그러나, plugins에 추가한다고 해서, 규칙이 자동으로 적용되는 것이 아님! 플러그인과 함께 사용하려는 규칙들을 "rules"에 개별적으로 추가해야 한다! 모든 규칙들을 작성해주는 건 불편한데...? 규칙 세트를 사용할 수 있다면 편하지 않을까? => 그게 바로~ config .. 2023. 12. 17. 이전 1 2 3 4 ··· 11 다음
