전체 글 검색 결과

해당 글 191건

TIL-2022-05-09 Stacking Context와 Z-index 없이 Stacking

Stacking Context Stacking Context는 z-축으로 HTML 요소들이 쌓이는 개념을 의미한다. 쌓임 맥락은 - 문서의 root document() - position이 absolute, relative인 z-index가 auto가 아닌 요소 - position이 fixed, sticky인 요소 - z-index가 auto가 아닌 grid, flex 컨테이너의 자손 - opacity 오직 부모 컨테이너만 영향을 줌 각 쌓임 맥락은 독립적이라 쌓고 나서는 아예 부모 컨테이너에 넣어버림 모든 요소가 쌓임 맥락을 가지고 있는건 아니라 ..
TIL 2022. 5. 9. 23:57

TIL 2022-05-07 Factory Pattern

Factory Pattern 팩토리 패턴은 슈퍼클래스에서 객체를 작성하기 위한 인터페이스를 제공하지만, 하위 클래스에서 어떤 타입의 객체가 생성할지를 대체할수 있게 해주는 Creative 디자인 패턴임 Problem 처음에는 Truck이란 이동수단에 관한 앱이라 모든 것들이 Truck 베이스로 짜여있다가, 나중에 Taxi 등의 추가적인 이동수단이 추가되면 전체 코드를 수정해야하고, 또 새로운 운송수단이 들어오면 다시 코드를 수정해줘야함 Solution 이 패턴에서는 직접적인 객체 생성 호출(new 연산자)을 특수한 팩토리 메서드를 통한 호출로 바꾸는 것을 권장함. 여전히 new 를 통해서 생성되지만, 팩토리 메서드를 통해서 생성됨. 이 팩토리 메서드를 통해서 반환되는 객체를 product라고 함. 매 운..
TIL 2022. 5. 7. 23:22

TIL 2022-05-06 Design Pattern, Singleton Pattern

디자인 패턴 디자인 패턴은 소프트웨어 설계에서 발생하는 문제를 해결하기 위한 일반적인 해결책임. 알고리즘이랑 다른 점은 방법론적으론 제시하지만 실제 구현은 개발자에게 달려있다는 것. 디자인 패턴은 팀 공통적으로 소통할 수 있도록 도와주는 Common Language가 될 수 있음. 단점 패턴은 널리 사용되는 접근 방식을 시스템적으로 체계화한거라 프로젝트의 Context을 적용되는게 아니라 '요점'에 적용되어 비효율적인 해결책이 될 수 있음 이 디자인 패턴을 배워서 응용하려는 과정에서 불필요하게 적용할 수도 있음. 해머를 들면 모든게 박아야할 못처럼 보임! 구조 Creational patterns : 객체 생성 메커니즘에서 유연성과 코드 재사용성을 늘려주는 패턴 Structural patterns: 유연하..
TIL 2022. 5. 6. 22:42

TIL 2022-05-03 HTML Details, Summary Tag

Details + Summary 태그는 open State를 가진 숨겨진 요소를 보여주는 태그다. 말로 하면 엄청 이상한데 HTML 삽입 미리보기할 수 없는 소스 이거라고 보면 이해가 정말 쉽다! 토글 상태를 기존에는 자바스크립트로 관리하고 이에 따른 CSS 변경도 자바스크립트에서 내부적으로 해주던, class를 통해서 관리를 해주던.... 손이 가야했었는데 정말 쉽게 생성이 가능해진 것이다! 따라서 항상 손이 많이 갔던 드롭다운 메뉴는 물론, 모달까지 쉽게 만들수 있게 되었다. 이를 잘 사용하고 있는 것이 Github인데, Github에서는 모든 드롭다운 메뉴와 모달을 details 태그를 통해 해결하고 있다! .details-overlay[open]>summary::before { position: ..
TIL 2022. 5. 3. 22:21

TIL 2022-04-28 monorepo, global css Nextjs 문제

monorepo 레포지토리를 하나로 합침으로써 얻는 장점 -> 중복되는 CI/CD 설정, 코드 등을 쉽게 재사용 가능! -> 편의성이 좋음. 한 폴더 내에서 슉슉 찾기 가능! -> 중복되는 모듈 하나만 설치 가능! 가벼움! 단점 -> conflict에 아무래도 더 취약해짐, -> dependency 문제 해결해야함 그리고 pnp를 사용하는 yarn berry에서는 잘 지원을 하지 않는듯하다. 최근에 Turborepo에서 나오긴 했는데 바로 이슈 생긴거 보면 시기상조인거 같고.... node_modules를 사용할때 더 효과적인듯 yarn, npm에서 기본적으로 workspace라는 기능을 지원해서 이를 사용해 모노레포를 구성할수도 있다. 혹은 NX, Turborepo, lerna 등의 관리툴을 사용할 수..
TIL 2022. 4. 28. 22:18

TIL 2022-04-27 package-lock, package-manager

package-lock.json package-lock은 설치된 패키지들의 정확한 버젼들을 track 해서 동일하게 reproducible하게 되는 것이 목표 package.json에서는 ^0.13.0, ~0.13.0 등의 semver notation을 통해 버젼을 명시할 수 있음 ^0.13.0은 가장 왼쪽의 nonzero 값이 바뀌지 않는 수준에서 버젼을 업데이트하고, ~0.13.0은 patch release, 즉 0.13.1, 0.13.2 등은 가능하고 0.14.0은 불가능 대체로 node_modules 폴더를 git에 올리지 않기 떄문에 semver로 명시된 package들은 프로젝트마다 달라질 수 있다. patch release들이 breaking change를 가지고 있지는 않더라도, 소소한 버..
TIL 2022. 4. 27. 22:24