Front-End95 선언적 프로그래밍 다시 생각해보기.. 선언적 프로그래밍으로 검색한 글들의 예시를 보다보면, '함수' 혹은 '(js) 내장 메서드'를 사용하는 것이 선언적으로 작성하게 되는 것 같은 생각이 들었음.아. 선언적 프로그래밍을 실제 코드에서 어떻게 나타낼 수 있지? 하는 생각에서, 나는 .. 선언적으로 작성하지 못하는 것 같은데. 선언적으로 작성하는 건 어떤걸까 하는 생각에서 시작함.왜냐면 반복문 for 를 사용하는 것을 지양하는 것 같은 내용으로 이해하게 되면서그러면 선언적 이라는 것은 쉽게말해 함수화 하는건가? 하는 생각이 드는데, (종종 조건절도 선언적으로 작성 한 것이라는 생각이 들기도 했는데..) 이것도 이상한 것이, 내장메서드를 쓴다고 해도 결국 어딘가에 구현체는 존재한다. filter를 써도 .. 마법이 아닌 이상 그 필터링하는 로직은.. 2026. 3. 24. 작업 하면서 SOLID를 떠올릴 수 있나? 작업할 때 기능 구현이 우선이었음을 돌아보며.이론적인 내용 외엔 잘 모르겠다.그냥 설명이 좋은 내용인 건 알겠다.그런데 적용을 못하겠다?사실 개념을 읊는 정도만 가능하다는 생각이 들어서, 도대체 단순하게 SOLID에서 WHAT WHY는 알겠는데.. HOW 는 뭘까.그래서 .. 나름대로 간단하게 결론을 냈음 (틀릴 수 있습니다. 언제든 말씀 부탁드립니다.)일단 SOLID에서 중요한 건"인터페이스", "추상화"그냥 이 2개를 중심으로 여러가지를 잘 사용하는 방법을 말하는 것 같다.개념/이론 대신에 현실적으로 코드 설계하는 방법 기준으로 정리해봤다.1. SRP (Single Responsibility Principle): 단일 책임 원칙"하나의 클래스는 하나의 책임만 가져야 한다"즉, 하나의 클래스는 하나의.. 2026. 3. 11. 동기/비동기 이해 (단어 뜻 풀이) 동기하나의 작업이 종료되는 시기에 맞춰서 다른 작업을 시작하는 것즉, 하나의 작업이 종료 되어야만 다른 작업을 시작할 수 있는 것예시릴레이 달리기 같은 것. 선두주자가 다 달리고 나에게 바통터치 할 때까지(제어권 넘기기) 나는 달릴수 없음.정리현재 작업이 종료되는 시점과 동시에 다른 작업이 시작함비동기작업이 진행중인 시간에 다른 작업도 진행 가능한 것하나의 작업이 종료되는 시기가 아니더라도 다른 작업을 시작하는 것예시집안일내가 세탁기에 빨래 넣고 세탁기 가동한 다음, 로봇청소기를 켜고, 요리를 시작함.하나의 일이 끝나지 않아도 다른 작업을 시작할 수 있음.동기 예를 같이 들어보면, 세탁기가 다 끝나야 그 옷들을 전부 건조기에 넣을 수 있음.하나의 일이 끝나야 다른 작업이 시작함.그 결과물이 다음 작업에 .. 2025. 5. 27. 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. 이전 1 2 3 4 ··· 11 다음
