본문 바로가기

분류 전체보기

Context API vs Redux Context - Context 란, 모든 컴포넌트들끼리 props를 명시적으로 서로 전달하지 않고 (일반적으로 하향식: 부모 -> 자식), 서로 어디서든 동등 하게 context에 접근해서, 상태 값에 접근할 수 있는 방법을 제공한다. 1. Context는 실제로 어떠한 상태값도 관리 하지 않는다. 단순 값을 전달하는 파이프와 같다 할 수 있다. 2. Context 는 State Management를 위해 쓰이지 않는다. - Context는 props drilling 을 방지 하기 위해 쓰인다 3. Context 는 전달되는 값 ( 부모 -> 자식 (하향식) props 전달 )을 결정하는 역할을 한다 Redux - Redux 란, 기본적으로 해당 라이브러리에서 제공하는 패턴과 도구들을 사용하면 Comp.. 더보기
Search Input - Expanding Event CSS 서치 박스 구현 하기 HTML 삽입 미리보기할 수 없는 소스 코드 HTML CSS Before expanded .search { border: none; height: 36px; width: 36px; border-radius: 18px; /* half of 36, to make it circular */ padding-left: 36px; /* left position: 10px, bg size: 16px */ background: url(./Shape.svg) no-repeat 10px/16px, white; cursor: pointer; } After expanded .search { transition-property: width, border-radius, box-shadow; trans.. 더보기
Button - Hover Event HTML 삽입 미리보기할 수 없는 소스 코드 .btn { position: relative; background: none; border: solid 1px #121212; transition: color 200ms; } .btn:is(:hover,:focus) { color: white; } .btn::after { position: absolute; content: ''; inset: 0; z-index: -1; background-color: #121212; transform-origin: left; transform: scaleX(0); transition: transform 200ms; } .btn:is(:hover, :focus)::after { transform: scale(1); } 더보기
생년월일 Validation birth result ["1899-13-31", "19001231", "2001-09-04", "1900-02-29", "2021-5-31", "1950-11-30", "1996-02-29", "1999-11-31", "2000-02-29"] 4 ["-2019-12-29-", "1945--10-31", "----------", "20000-123-567"] 0 문제 설명 생년월일을 나타내는 문자열 배열 birth가 매개변수로 주어집니다. birth 내의 문자열들 중, 다음 4가지 조건들을 모두 만족하는 올바른 생년월일의 개수를 return 하도록 solution 함수를 완성해주세요. 1. 길이가 10인 "YYYY-MM-DD" 형식의 문자열이어야 합니다. 2. 1900 ≤ YYYY ≤ 2021 - YYY.. 더보기
파이프 공 문제 설명 왼쪽 또는 오른쪽으로만 빠져나갈 수 있는 원통형 파이프 안에 숫자가 쓰인 공이 일렬로 들어있습니다. 명령에 따라 공을 하나씩 뺄 때, 공이 빠져나오는 순서를 구하려고 합니다. 양방향 중 한 방향으로 공을 하나씩 뺄 수 있기 때문에, 명령받은 공이 다른 공 사이에 있어 바로 빠져나오지 못하는 경우도 있습니다. 양쪽 끝에 있는 두 개의 공만 명령에 따라 바로 뺄 수 있습니다. 명령을 받았지만 바로 뺄 수 없는 공은 보류 상태가 되며, 뺄 수 있는 조건이 되면 다음 명령보다 우선하여 빠져나오게 됩니다. 아래 그림은 파이프 안에 들어있는 공의 순서를 나타냅니다. 명령이 [6, 2, 5, 1, 4, 3]으로 주어진 경우, 다음과 같이 공이 빠져나오게 됩니다. 1. 6번 공은 오른쪽 끝에 있으므로 바로 .. 더보기
Design Pattern - Singleton 초간단 설명 싱글톤 이란 ? 싱글톤 패턴은 객체를 딱 하나만 생성하여 생성된 객체를 프로그램 어디에서나 접근하여 사용할 수 있도록 하는 패턴을 말합니다. 장점 메모리 낭비 방지 싱글톤으로 만들어진 Component 와 다른 Component 의 데이터 공유가 쉬움 인스턴스가 절대적으로 한개만 존재하는 것을 보증하기에 개발 시 실수를 줄일 수 있다. 단점 싱글톤의 역할이 커질수록 결합도가 높아져 객체 지향 설계 원칙에 어긋날 수 있다. 동시에 위험도 도 높아짐 ( 수정이 어려워 지고, 유지보수 하는게 어려워 질수 있음) 멀티쓰레드 환경에서 컨트롤이 힘듦 ( 동기화 처리 필수) 전역변수 보다 사용하기 불편 예시 적용 FancyLogger.js 생성 - singleton instance 생성 하는 class class F.. 더보기
스토리북 docs 에서 특정 component에 css 적용 내용 특정 component 가 docs 페이지에서 랜더 될 때, 해당 component만 css를 적용하고 싶을 때가 있다. 특정 컴포넌트. stories.tsx​ 파일에서 해당 컴포넌트 decorators에 위 사진과 같이 적용시키면 끝. - * 문제는 안에 존재하는 children elements에 특정 스타일 적용하고 싶을 때, 아직 해결 방법을 못 찾은 것 ㅜㅜ Ref https://storybook.js.org/docs/react/writing-stories/decorators 더보기
Immutable vs Mutable Immutable vs Mutable Mutable is a type of variable that can be changed. In JavaScript, only objects and arrays are mutable, not primitive values. A mutable object is an object whose state can be modified after it is created. Immutables are the objects whose state cannot be changed once the object is created. 요약 Mutable - 메모리 상에서 할당된 값을 변환할 수 있는 것 - 해당 데이터 주소를 찾아서 값을 반환 Immutable - 메모리에 할당된 값을 변환.. 더보기

티스토리툴바