UseEffect, useLayoutEffect useEffect layout, paint를 완료한 뒤 호출된다. 함수컴포넌트 호출 -> render문 반환 -> 배치 -> 그림 -> useEffect 호출 dep arr를 줬을 때 의존 상태의 변화가 있을 때마다 호출되므로 비동기요청에 대한 결과를 보여줄 때 깜빡 거림 3번째 항목인 깜빡거림을 경험하지 않도록 useLayoutEffect hook이 추가됨 이런거.. useLayoutEffect 그리기 이전에 func를 호출 함수컴포넌트 호출 -> render문 반환 -> 배치 -> useLayoutEffect 호출 -> 그림 effect와 문법도 같은데 생명주기에서 호출되는 시점에서 그리기 전(화면에 보이는 것)이냐, 보이고 나서 호출되냐의 차이점 필요..

settings about styled-component - styled-components storybook 사용은 npx로 설치하고 npm run 으로 돌리면 바로 수행되지만 styled-component의 props을 사용하려고 할 때 에러 발생 -> ThemeProvider를 감싸주는 데코레이터가 없기 때문 또한 엄청난 에러라인이 발생하는데 절대경로 설정해주지 않아서 나는거 임 "거의" 절대경로 //main.js const path = require("path"); module.exports = { stories: [ //.stories를 읽을 경로도 잘 지정해주어야 한다. default에 있는 폴더 외에 스토리를 작성할 때 변경 "../components/**/*.stories.mdx", "....

mirage js fake server 라이브러리 install npm i mirage example code for app 베이스서버 세팅 /// server.js import { createServer, Model } from "miragejs"; export function makeServer({ environment = "test" } = {}) { let server = createServer({ environment, models: { movie: Model, }, seeds(server) { server.create("movie", { name: "Inception", year: 2010 }); server.create("movie", { name: "Interstellar", year: 2..

Angular를 가볍게 쓰고 싶어 만든 Front-end Framework Angular의 데이터 바인딩 특성 + React의 가상DOM기반 렌더링 특징을 갖음 특징 Angular와 Vue는 데이터가 양방향 바인딩되어있어 컴포넌트끼리 데이터를 공유할 수 있음 Vue는 컴포넌트 간 단방향 데이터 흐름을 따른다. MVVM패턴을 따르는 UI 라이브러리 Model - View - View Model - Model로 구조화하여 개발하는 방식 화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리해 직관적, 유지보수가 편하게 할 수 있음 1. 데이터 바인딩 ? 데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리(js파일 내의 객체같은 값)을 일치시키는 것을 말한다. 1.1. 양방향 데이터 바인딩 화면에서 데이터..

LightHouse 과제를 수행하며 해결해나간 항목들을 정리해둔 것 웹 페이지 품질 개선할 수 있는 자동화도구 Chrome의 개발자도구 탭에서 사용가능 npm으로 설치해서 사용가능 Lighthouse에서 측정하는 지표는 실제 사용자의 사이트 경험을 이해하고 개선하는데에 중요하다. Lighthouse으로 미리 측정하여 확인하면 이런 해프닝을 방지할 수 있다. 다음은 Lighthouse에서 측정해주는 UX를 높이는데에 필요한 지표들을 알아보자. 성능측정 지표 Lighthouse는 Mertics(척도)로 다음 6가지를 측정한다. 이 성능값들은 절대적인 수치가 아니다. 컴퓨터의 퍼포먼스나 익스텐션들로 인한 네트워크 요청들, 바이러스 소프트웨어 등등에 의해 영향을 미칠 수 있다. 각 지표는 가중치를 매겨 전체 점..

문제출처 생각 0에 가까운 두 수의 합을 구해 각 수를 구하는 문제 주어진 리스트를 오름차순으로 정렬한 다음 양 끝에서 투포인터로 계산한다. 0에 가까운 값을 찾는 것이므로 두 수의 합을 절대값으로 변환하여 최소값을 찾는다. 코드 import sys N = int(input()) min_val = sys.maxsize lst = list(map(int, input().split())) lst.sort() start = 0 end = len(lst) - 1 al = 0 san = 0 while start < end: part_sum = lst[start] + lst[end] if abs(part_sum) < min_val: al = lst[start] san = lst[end] min_val = abs(p..

문제출처 생각 전형적인 투포인터 문제라고 한다. 투포인터란 N개의 리스트를 순회할 두개의 포인터위치를 기록하며 처리하는 알고리즘이다. 정렬되어있는 문제는 보통 이진탐색으로 답을 구하지만 투포인터로도 적용할 수 있다. 핵심은 다음과 같다. start, end의 포인터를 첫 시작점으로 잡아놓고 찾아야하는 기준점(부분합)을 계속 더해나간다. 만약 기준보다 더해진 값이 작다면 end를 오른쪽으로 이동시킨다. 기준보다 커지면 반복문을 탈출하고 찾아야하는 기준에 부합하는지 확인한다. 그리고 start를 오른쪽으로 한칸 옮기며 반복을 이어나간다. 시간복잡도는 start는 0 ~ N까지 순회하기에 O(N)이고 end도 마찬가지로 0 ~ N까지 돌기에 O(N)이다. 결론은 O(N)의 시간복잡도를 갖는다. 문제에서 부합하..

문제출처 생각 처음에 완전 복잡하게 생각했다. 상하좌우로 나누어서 각각 시작점, 끝점을 구해서 상, 하는 n크기로, 좌, 우는 m크기로 쪼개고 바뀔 2차원 배열의 전체를 갈아끼우는 방식으로 접근했는데 너무 복잡해지고 코드도 난해해졌다. 한칸씩 밀고 내리기만 하면 되므로 좌상단의 값을 기억해두었다가 왼쪽 열을 위로올리고 아랫 행을 왼쪽으로 당기고 우측 열을 아래로 내리고 마지막으로 최상단 행을 오른쪽으로 미는 식으로 구현하면 해결할 수 있었다. 코드 const makeMatrix = (rows, columns) => { let matrix = [] for (let i = 0; i < rows; i++){ matrix.push([]); } let num = 1; for (let i = 0; i < rows ..

문제출처 생각 장르당 최대 2개의 노래를 answer에 담아서 반환하는 문제 담길 조건은 첫째, 해당 특정 장르의 노래의 재생수가 가장 높은 장르의 노래를 두개 담음 둘째, 해당 장르에서도 먼저 높은 재생수의 노래가 먼저 담김 장르별 최대 두개까지만 담길 수 있음 먼저 최대재생수의 장르를 찾기위해 반복문을 통해 장르별 재생수를 구했고 그 다음 재생수를 기준으로 내림차 정렬했다. 이후, 장르별 재생수가 높은 순서대로 dic를 만들었다. 그러면 재생수가 높은 장르 순대로 반복을 시켜서 해당 장르에 해당하는 노래 index를 참조해 정답배열에 넣으면 된다. 장르별 노래의 최대 카운트가 2이므로 cnt를 두는 조건을 추가 풀이 def solution(genres, plays): answer = [] genre_..

문제출처 생각 input 숫자를 2진수로 변환해서 나온 1의 갯수와 input보다 큰 숫자의 1의갯수랑 같은 숫자를 찾으면 된다. reverse로 안해줘도 됐다. 풀이 코드 # 2진수 변환함수 def dec2bin(n): binary = "" while(n != 0): left = n % 2 n //= 2 binary += str(left) return binary def solution(n): bin_val = list(dec2bin(n)[::-1]) comp = n + 1 n_count = bin_val.count("1") while(list(dec2bin(comp)).count("1") != n_count): comp += 1 return comp