FrontEnd

FrontEnd/프로그래머스
[JS] 순위
DFS + 그리디 알고리즘을 활용해서 해결해보았다. 우선 그래프 두개를 두고 a > b라면 winGraph와 loseGraph를 두고 이긴쪽,진쪽만 저장했다. 이후 n번째 노드가 들어왔다면 해당 노드를 이긴사람들을 차례로 탐색했다. 또 진쪽으로도 마찬가지로 한방향만을 탐색했다. 이렇게 한 이유는 순위를 정확히 매기려면 a>b>c ... 이렇게 한 방향이 고정적으로 되어있어야 하기 때문이다. ++ DP를 사용해서 저장한다면 조금 더 효율적인 코드를 짜는것도 가능할 듯 하다. function solution(n, results) { const winGraph = [...new Array(n+1)].map(_ => []) const loseGraph = [...new Array(n+1)].map(_ => []..
→2023.12.26
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(12) 서버사이드 렌더링(SSR)
과거 리액트 애플리케이션을 만들때는 CRA(create-react-app)이 각광받았지만 요즘은 서버사이드 렌더링을 지원하는 Next.js와 같은 프레임워크가 큰 인기를 끌고 있다. 싱글 페이지 애플리케이션 SPA(Single Page Application) 이란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 JS에 의존하는 방식을 의미한다. 최처에 첫 페이지에서 데이터를 모두 불러온 후 페이지 전환을 위한 모든 작업을 JS와 브라우저의 history.pushState와 history.replaceState로 이뤄진다. 이러한 작동방식은 최초 로딩해야할 JS리소스가 커진다는 단점이 존재하긴 하지만 로딩 이후 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 사용자에게 훌륭한 UI/UX를 제공한다는 ..
→2023.12.26
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(11) 사용자 정의 훅 & 고차 컴포넌트
중복 코드를 피해야 한다. 개발자라면 모두 공감하는 말이다. 중복코드는 당연히 존재만으로 비효율적일 뿐 아니라 유지보수도 어렵게 만든다. 고차 컴포넌트와 사용자 정의 훅을 사용하면 이런 문제를 해결할 수 있다. 사용자 정의 훅 HTTP요청을 하는 fetch를 기반으로한 사용자 정의 훅 예제를 보자. import React, { useEffect, useState } from "react"; function useFetch( url: string, { method, body }: { method: string; body?: XMLHttpRequestBodyInit } ) { const [result, setResult] = useState(); const [isLoading, setIsLoading] = ..
→2023.12.24
FrontEnd/프로그래머스
[JS] 자물쇠와 열쇠
배열을 다룰 줄알아야 하는 문제였다. 1. 배열을 회전시키며 4가지 경우를 검사한다. 2. 2 * key.length + lock.length - 2만큼의 배열을 만든다. 2번과 같은 확장배열을 만들어야 key를 움직여가며 자물쇠와 키를 맞춰놓는것이 편하다. 만약 예제라면 아래와 같은 7*7 확장배열을 만들고 lock의 정보를 저장한다. (빈칸은 0이라 생각하자. 1 1 1 1 1 1 1 아래처럼 자물쇠와 키를 순회하며 검사한다. 이때, key의값을 그냥 넣는것이 아닌 더해져서 넣어야 후에 돌기와 돌기가 만난것을 검사할 수 있다. 1 1 2 1 1 1 1 1 1 1 2 2 1 1 1 1 1 1 1 2 2 1 1 1 1 1 1 1 2 1 1 1 1 1 .... 반복 3. 자물쇠와 key가 일치하는 것은 가..
→2023.12.24
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(10) useContext,useReducer,기타 훅들
useContenxt 리액트의 Context에 뭔지 알아야 useContext에 대한 올바른 이해가 가능하다. 리액트 애플리케이션은 기본적으로 부모컴포넌트와 자식 컴포너트로 이뤄진 트리 구조를 가지고 있다. 따라서 부모가 가진 데이터를 자식에게 전해주고 싶으면 props를 통해서 데이터를 넘겨줘야 한느데 이 거리가 길어질수록 코드가 복잡해지게 된다. 이러한 prop 내려주기는 결국 복잡한 코드를 만들게 되고 특히 해당 값을 사용하지 않는 중간단계의 컴포넌트에서도 props가 열려있어야 한다. Context를 사용하면 이러한 명시적 props없이도 하위 컴포넌트 모두에서 원하는 값을 사용할 수 있다. import React, { createContext, useContext } from "react"; c..
→2023.12.23
FrontEnd/Deep Dive
[React] Deep Dive 모던 리액트(9) useMemo,useCallback,useRef
useMemo useMemo는 비용이 큰 연산에 대한 결과를 저장해두고 이 저장된 값을 반환하는 훅이다. import { useMemo } from 'react' const memoizedVAlue = useMemo(() => expensiveComputation(a,b),[a,b]) 첫번째 인수로는 어떤 값을 반환하는 생성함수를, 두번째 인수로는 해당 함수가 의존하는 값의 배열을 반환한다. useMemo는 의존성 배열의 값이 변경되지 않으면 함수를 재실행하지 않는다. 이런 메모이제이션은 값이 아니라 컴포넌트에 적용하는 것 또한 가능하다! import React, { useEffect, useMemo, useState } from "react"; function ExpensiveComponent({ va..
→2023.12.22

• 이전
• 1
• ···
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• ···
• 72
• 다음