분류 전체보기

npm link

2022.03.04 - [Node] - nestjs 코드레벨에서 까보기 에서 nest의 여러 패키지들을 까볼때 두가지 방법을 썼다 일단 둘다 무식하게 console.log를 하나씩 찍어봤다. nest는 추상화가 잘 되어있다고 코드를 읽으면서 느꼈다. 근데 2~3 depth 넘어가게 되면 계속 흐름을 놓쳤다. (아직 큰 흐름이 크게 안읽힌다... 정진하자) 1. nest 라이브러리를 clone 받고나서 npm link를 이용하였다. 2. node_modules 에 설치되어있는 코드에서 console.log를 하나씩 찍었다. 2번을 시도하기 전에 1번으로 계속 시도했었다. 1번의 효율이 너무 안좋아서 2번으로 우회하였다. 1번을 시도하면서 알게된 방법이 npm link이다. @nest-cli를 적용할때는 n..

React 피드백 내용 정리

2022.02.10 - [Frontend/React] - 넘블챌린지 [Square Select Game] 이때 피드백 받은 내용과 모범답안을 기반으로 현재의 코드를 리팩토링 해보았다. 그때 얻은 인사이트를 기록해보려 한다. 아쉬운 부분에 대한 의견을 들었을때 머리가 띵했다... 이제까지 이런식으로 작성했었고 나는 계속 이런식으로 봐왔으니까 가독성이 좋다고 생각했었다..... 완전히 우물안의 개구리 였던것..... 인수인계 했을때 읽히기 쉬운 코드를 작성하자는 신념이 있었는데 내 코딩 패턴은 전혀 그러지 못했었던 것..... 만약 프로젝트가 조금만 더 규모가 커졌었더라면 저 state와 handler를 정의하는 부분은 감당이 안되고 어디를 어떻게 바꾸어야 하는지를 도저히 알수가 없었을 것이다.... (쉽지..

계단 오르기 [백준 2579] - python

# 풀이 1번 import sys input = sys.stdin.readline def BOJ2579(): n = int(input()) stairs = [0 for _ in range(301)] for i in range(n): stairs[i] = int(input()) dp = [0 for _ in range(301)] dp[0] = stairs[0] dp[1] = stairs[0] + stairs[1] dp[2] = max(stairs[0] + stairs[2], stairs[1] + stairs[2]) # 마지막 칸은 꼭 밟아야 한다. 전칸을 밟을 경우와 밟지 않은경우가 있을것이다. for i in range(3, n) : dp[i] = max(dp[i-3] + stairs[i-1] + sta..

React useLayoutEffect

useEffect로 전달된 함수는 레이아웃 배치와 그리기를 완료한 후 발생합니다. 이렇게 지연시켜서 실행하는 이유는 useEffect에서 실행하는 동작으로 인해 브라우저에서 화면을 업데이트 하는것을 차단해서는 안되기 때문입니다. 그래서 아래와 같은 현상이 발생할 수도 있습니다. 발생할 수도 있다는 것은 고쳐야 할 때도 있다는 것을 의미한다고 생각합니다. 그래서 등장한 것이 useLayoutEffect 훅입니다. 위와 같은 사용자 경험이 발생하는 경우를 위하여 등장하였습니다. useLayoutEffect 훅은 dom이 화면에 그려지기 전에 업데이트를 해줍니다. 동작은 useEffect와 동일하다고 이해하고 동작하는 시점만 화면에 그리기전 useEffects는 dom 요소들이 화면에 그려지고 난후 반영된다고..

HTML 시맨틱 마크업

시맨틱 마크업은 뭐고 왜 필요할까???? 시맨틱(Semantic)은 아래와 같은 의미를 가진다. 시멘틱 뜻은 알겠고 그러면 시맨틱 마크업은 의미의 마크업 일까요???? 시맨틱 마크업은 마크업을 의미를 잘 전달할 수 있도록 작성하자 정도로 저는 이해하고 있습니다. html4 까지는 이러한 것들이 없어서 태그의 이름이 제각각 이었습니다. 각자의 기호에 맞게 사용했기 때문이죠 그래서 검색엔진은 웹페이지의 내용을 올바르게 식별할수가 없었습니다. (기준이 제각각이고 의미도 다 다르니까 우선순위의 설정도 힘들고 여러가지 애로사항이 있었지 않았을까 생각이 드네요) html5가 표준으로 체택되면서 이때 같이 등장한것이 , , , , , , 등등 태그가 의미를 나타낼 수 있는 태그들이 많이 추가되었어요. 이 태그들이 등..

Javascript script async vs defer

html에서는 script 태그를 이용하여 필요한 javascript를 load 할 수 있습니다. 브라우저에서는 html을 읽다가 태그를 만나게 되면 html을 읽는 것을 멈춥니다. 이렇게 멈추게 되면 사용자에게 페이지가 보여지는 시간이 늦어지기 때문에 좋지 않을 수 있습니다. 아래 이미지의 경우 검은 부분만큼 parsing이 이루어지지 못하므로 그만큼 화면에 노출되는 것이 지연될 것입니다. script 태그의 경우 body의 최하단에 주곤 합니다. 이렇게 하면 parsing에 문제는 없지만 fetching 하는 시간 동안에는 화면이 동작을 하지 않게 됩니다. script 태그에 옵션을 주어서 위와 같은 경우를 방지하고 다양한 방식으로 사용할 수 있습니다. async와 defer 옵션을 주어서 fetch..

제어 컴포넌트 vs 비제어 컴포넌트

react에서 제어 컴포넌트, 비제어 컴포넌트를 고려하여 form을 다루어야 하는 경우가 있었다. 제어 컴포넌트, 비제어 컴포넌트에 대한 개념이 없었고 이전에 formik을 다루었었던 경험이 있어서 습관적으로 제어 컴포넌트 형식으로 구현을 했었다. 그래서 제어, 비제어 컴포넌트에 대해 알아보려고 한다. 제어 컴포넌트 값이 바뀔때마다 매번 렌더링을 하게 된다. (좀 더 React스럽다 라고 언급이 되는것 같다) 코드의 내용을 보면 useState를 통해 상태값 하나를 추가해주었고 이는 Input의 value값이 된다. input의 onChnage 핸들러를 추가하여 input 입력값이 변경될때마다 상태를 업데이트 해주었다. 상태가 업데이트 되었으므로 렌더링이 일어난다. 매번 상태를 업데이트 해주므로 화면에 ..

게임 개발[백준 1516] - python

import heapq import sys input = sys.stdin.readline def BOJ1516() : N = int(input()) time = [0 for _ in range(N+1)] graph = [[] for _ in range(N+1)] indegree = [0 for _ in range(N+1)] queue = [] result = [0 for _ in range(N+1)] for i in range(1, N + 1) : temp = list(map(int, input().split())) time[i] = temp[0] temp_graph = temp[1:-1] indegree[i] = len(temp_graph) for k in temp_graph : graph[k].ap..

css align-content, align-items, align-self

css속성중 위의 3개 속성들은 flexbox 혹은 grid에서 컨텐츠 들을 정렬시킬때 사용합니다. align-self grid나 flex item들의 정렬위치를 제어할 수 있습니다. 적용할 수 있는 value 값들은 아래와 같습니다. /* Keyword values */ align-self: auto; align-self: normal; /* Positional alignment */ align-self: center; align-self: start; align-self: end; align-self: self-start; align-self: self-end; align-self: flex-start; align-self: flex-end; /* Baseline alignment */ align-s..

css vertical-align

vertical-align 속성은 inline 요소나 table-cell box의 수직정렬을 제어할 수 있습니다. 주로 사용하는 것들만 알아보겠습니다. vertical-algin: baseline; vertical-align: top; vertical-align: middle; vertical-align: bottom; baseline => 부모의 baseline에 맞추어서 inline 요소를 수직정렬 시켜줍니다. top => 부모의 top에 맞추어서 inline 요소를 수직정렬 시켜줍니다. middle => 부모의 baseline + x-height/2 에 맞추어서 inline 요소를 수직정렬 시켜줍니다. 정확히 중앙은 아닐수 있겠네요 bottom => 부모의 bottom에 맞추어서 inline 요소를..