📖오늘 배운 것 문제 해결 패턴 빈도수 세기 패턴(FREQUENCY COUNTERS) : 자바스크립트의 객체를 사용해서 다양한 값과 빈도를 수집 예시) same 함수에게 2개의 배열을 전달하고, 두번째 배열의 값들이 첫 번재 배열의 제곱에 해당하는 값을 가지면 true를 반환. same([1, 2, 3], [4, 1, 9]) //true same([1, 2, 3], [1, 9])//false same([1, 2, 1], [4, 4, 1]) //false 중첩루프를 사용하는 경우 function same(arr1, arr2) { if(arr1.length !== arr2.length) return false; for(let i = 0; i < arr1.length; i++) { let correctInde..
총 2주 반 정도의 프로젝트 기간을 통해 '언성히어로'라는 서비스를 만들었다. 짧지만 기획부터 개발까지 진행하며 많은 것을 배울 수 있는 기간이었고 스스로에 대해서도 많이 깨달은 기간이었다. 그래서 프로젝트, 그리고 프로젝트 기간 동안 느낀 것들에 대해 간단히 정리하고자 한다. 서비스 소개 서비스 명: 언성히어로 해당 서비스는 '말 없는 아버지들의 고민 상담소' 라는 캐치프레이즈를 가지고, 많은 고민을 안고 살아가지만 쉽게 고민을 털어놓지 못하는 아버지들을 위한 자유로운 소통, 상담 그리고 위로받는 공간을 만들기 위해 기획하였다. 언성히어로는, 용기 있는 행동, 자기희생적 행동을 하여 훌륭한 업적을 달성했지만 유명하거나 알려지지 않은 사람’을 뜻하는 합성어 이런 뜻을 가지고 있다. 우리는 여기서 언제나 ..
📖오늘 배운 것 알고리즘이란? :특정 작업을 달성하기 위한 과정이나 일련의 단계 1. 문제를 이해하자 문제를 어떻게 접근해야할 지 모르겠는 경우, 스스로 질문을 던져보자. 문제를 나만의 방식대로 다시 생각할 수 있나? 질문을 그대로 받아들이는 것이 아니라 나만의 방식으로 바꿔서 질문의 무엇인지 실제로 이해해야 한다. 문제가 어떤 입력값을 담고 있는지 이해하자 입력값은 무엇인지, 어떤 형태인지 문제에 대한 해결책으로 나와야 할 결과는 무엇인지 이해하자. 출력값은 무엇인지, 어떤 형태인지 입력값만으로 출력값을 결정할 수 있는가? 문제를 해결할만한 충분한 정보가 주어졌는가? 문제의 일부분인 데이터의 중요한 부분에 어떻게 라벨을 지정할 수 있을까? 2. 문제에 대한 구체적인 예시에 대해 고민해보자 입력값과 출력..
📖오늘 배운 것 빅오 표기법 : 입력된 내용이 늘어날수록 알고리즘의 실행 시간이 어떻게 변하는지 설명하는 방식 -> 정확한 수치라기 보다 전반적인 추세애 대한 개념 -> 실행시간이 갖는 최대치를 의미한다. O(2n) → O(n) O(500) → O(1) O(13n^2) → O(n^2) 앞에 붙는 상수, 혹은 뒤에 붙는 상수는 없애서 단순화하여 표현한다. 수치가 커졌을 때 그래프 모양에서 차이가 크지 않기 때문이다. 1. 산수(나눗셈, 곱셈, 뺄셈, 덧셈...)은 상수시간이 거린다. 2. 변수 처리도 상수시간이 걸린다. 3. 배열에서 인덱스로 값을 찾는 것도 상수시간이 걸린다. 4. 루프가 있으면 루프의 길이x 루프 안에 있는 연산들 만큼의 시간이 걸리고 중첩루프가 있으면 n 제곱이 될 수 있다. 빅오를 ..
타입스크립트 함수 오버로드 함수의 매개변수가 여러 타입을 가져서 리턴 값의 타입이 하나로 정해져있지 않을 때 사용할 수 있다. interface User { name: string, age: number; } function join(name: string, age: string): string; function join(name: string, age: number): User; function join(name: string, age: number | string): User | string { if(typeof age === 'number') { return { name, age }; } else { return "나이는 숫자로 입력해주세요."; } } const sam: User = join("S..
📖오늘 배운 것 Redux :Prop Drolling을 해결하기 위한 라이브러리 리덕스에서 사용되는 키워드 액션 : 상태에 변화가 필요할 때 액션을 발생 액션 객체에는 type 필드가 필수적이다. 액션 생성함수 : 액션을 만드는 함수. 파라미터를 바아와서 액션 객체 형태로 만들어준다. export const addTask = (content: string): Action => { return { type: "ADD_TASK", payload: { id: v4(), content, complete: false, }, }; }; 리듀서 :변화를 일으키는 함수 현재 상태, 전달받은 액션 두 가지 파라미터를 받아서 새로운 상태를 만들어 반환한다. useReducer를 사용하는 것과 똑같은 형태를 가지고 있다. ..
📖오늘 배운 것 forwardRef :상위 컴포넌트에서 전달받은 ref를 하위 컴포넌트로 전달하는 역할 useImperativeHandle :함수형 컴포넌트에서 forwardRef와 함께 사용할 때 부모 컴포넌트에서 자식 컴포넌트 ref에 설정한 메서드를 사용할 수 있다. 부모 컴포넌트에서 ref를 설정해서 자식에게 보낸다. function Parent() { const inputRef = useRef(); return ( inputRef.current.focus()}>Focus inputRef.current.clear()}>Clear ); } 자식 컴포넌트에서 부모에서 내려받은 ref를 받아서 useImperativeHandle을 이용해서 메서드를 설정할 수 있다. 그러면 부모컴포넌트에서는 이 로직에 ..
📖오늘 배운 것 Portals : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 방법 첫 번째 인자는 렌더링 할 수 있는 React 자식을, 두번째 인자로는 자식을 렌더링할 DOM엘리먼트를 받는다. const el = useMemo(() => document.createElement("div"), []); useEffect(() => { document.body.appendChild(el); return () => { document.body.removeChild(el); }; }); return ReactDOM.createPortal( {children} ); useReducer : 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. reducer는 현재 ..
ResizeObserver :요소의 크기 변화를 감지하며 크기 변화가 일어날 때 발생할 수 있는 무한 콜백 루프와 순환 종속성을 방지한다. resize 이벤트와의 차이점은 resize는 브라우저의 크기를 기준으로 하는 반면 ResizeObserver의 경우 브라우저는 물론 특정 요소의 크기 변화를 감지할 수 있다. 또한 resize의 경우 변경도니 크기를 구하기 위해 getBoundingClintRect()메서드를 사용해야 했지만 ResizeObserver는 변경된 크기를 제공한다. new ResizeObserver로 생성하고 콜백함수로 크기가 변경됐을 때 실행할 함수를 넘겨준다. entry.contentRect : 요소의 크기, 위치 정보 등을 제공한다. ResizeObserver.observe() :..
📖오늘 배운 것 requestAnimationFrame() 애니메이션을 향상시킬 수 있는 방법 중 하나. 렌더링 최적화에도 사용될 수 있다. 특징 백그라운드 동작 및 비활성화시 중지 최대 1ms로 제한되며 1초에 60번 동작(프레임 비율을 모니터의 주사율에 맞추어서 실행) 다수의 애니메이션에도 각각 타이머 값을 상성 및 참조하지 않고 내부의 동일한 타이머 참조 이 함수는 스크롤 이벤트 최적화에 사용될 수 있는데 만약 스크롤 이벤트를 그냥 실행한다면 스크롤을 할 때마다 계속해서 이벤트가 실행될 수 있다. 이 때 최적화하는 방법으로는 쓰로틀링, 디바운스가 있고 그 외의 방법으로 requestAnimationFrame를 사용하는 방법이 있다. requestAnimationFrame 을 사용하면 브라우저가 렌더..
