괘종소리 세기 ✒️ 방명록 github

[Inner Circle] FE과정 3-4주차 정리

25/04/07번들링, tsconfig에 대해서도 보기 25/04/08왜 useEffect 밖에서 실행한 함수는 ref(엘리먼트)값이 없을까?useEffect는 렌더링 직후 실행되기 때문.반면 일반 함수는 렌더링 중에 실행되기 때문에 엘리먼트가 렌더링되지 않은 시점이기 때문에 없다. 25/04/09에러 핸들링 시에 에러 바운더리를 이용해보고 싶다.(그냥)리렌더링시 state와 ref와 일반변수의 차이: 일반변수는 값이 안남아있음. state와 ref는 남아있음.state와 ref의 가장 큰 차이는 "값 변경" 시임. state는 값이 변경되면 리렌더링을 유발함.또 다른 차이는 ref는 항상 최신 값이라는 점. state는 렌더링이 끝나야 최신 값을 얻을 수 있음.고민되는것: 프리티어 쓰기멘토링: 요새는 ..

이것은 회사 후임분이 자주 쓰시던 팁인데, 좋아보여서 나도 사용해보기로 했다.일단 기존에 작성하던 방법은 아래와 같은 예시이다.export enum CharacterType { LANCER, ROUXLS, RALSEI}export const getCharacterOrderByName = (name: string) => { switch (name) { case "lancer": return CharacterType.LANCER; case "rouxls": return CharacterType.ROUXLS; case "ralsei": return CharacterType.RALSEI; }} enu..

오랜만에 다시 하는 코딜리티...A와 B 사이에 K로 나눴을 때 몫이 0이 되는 수가 몇 개인지 세는 문제입니다. https://app.codility.com/demo/results/trainingGDW5F8-WJ7/ Test results - CodilityWrite a function: function solution(A, B, K); that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.: { i : A ≤ i ≤ B, i mod K = 0 } For example, for A = 6, B = 11 and K = 2, your fapp..

오늘은 그냥 간단한 글입니다. type PrintUser = (name: string, age: number) => void;const printUser: PrintUser = (name, age) => { console.log(name, age);};printUser("aa", 10);뷰에서 커스텀 훅이 리턴하는 함수를 호출할 일이 있었는데 위와 같은 방법(함수형 개별인자 타입)으로 호출하였다.왜냐면 뷰에서 객체를 만들기가 싫었기 때문이다. (코드가 지저분해져서)하지만 이러한 방식은 순서가 바뀌었을 때도 타입스크립트에서 잡아줄 수 없는 상황이 될 수 있기 때문에, 위험성이 있다. type User = {name: string; age: number};const printUser = (user: Use..

enum, const enum 비교나는 상수를 선언할 때 습관적으로 enum을 사용했었는데, 타입스크립트에서 enum보다는 const enum을 사용하는 게 더 좋다는 글을 보았다. enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0const enum ColorType { RED, BLUE, GREEN}console.log(ColorType.RED); // 0 enum의 문제는런타임에 객체를 만들기 때문에 오버헤드가 발생한다.사용되지 않는 코드들도 번들에 포함되어 번들 용량이 증가한다. (즉, Tree Shaking이 안 된다.)  const enum을 사용하면 위의 문제들이 해결되지만, 제한이 있다.리버스 매핑이 안 ..

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 4일차 강의 이번 강의는 사용자의 데이터를 수집하고 분석하는 방법에 대한 강의이다. 아무래도 현 직장이 상용 서비스를 운영하기보단 솔루션을 주로 만드는 회사다보니 잘 감이 오지 않았던 강의긴 한데, 새롭고 신기했다. 언젠간 쓸 일이 있을지도 모르니, 정리해둔다. 개요Data Driven: 데이터를 기반으로 의사결정을 내리는 것을 말한다.데이터를 수집하고 분석하여 그 다음엔 어떤 기능을 만들지, 뭘 더하고 뭘 뺄지 결정하는 전략을 수립한다.보통 마케팅팀이 기획하며, 여기서 프론트엔드 개발자가 할 일은 '데이터 수집' 이다.  데이터 수집 단계수집할 데이터 정의: 어떤 페이지에서 일어날 수 있는 행동 중 수집할 것들에 대해 정의한다. 예를 들면 어..

프로그래머스 Lv 1 - 체육복 Solved-Algorithm/JavaScript/프로그래머스/1/42862. 체육복 at main · ParkBible/Solved-AlgorithmThis is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - ParkBible/Solved-Algorithmgithub.com 좀 많이 헤맸습니다. 이게 1레벨이라니...근데 작성된 코드를 보면 별거 없음... (그리디 특징인가?)function solution(n, lost, reserve) { const losts = lost.filter(l ..

프로그래머스 Lv 2 - 게임 맵 최단거리 Solved-Algorithm/JavaScript/프로그래머스/2/1844. 게임 맵 최단거리 at main · ParkBible/Solved-AlgorithmThis is an auto push repository for Baekjoon Online Judge created with [BaekjoonHub](https://github.com/BaekjoonHub/BaekjoonHub). - ParkBible/Solved-Algorithmgithub.com 상하좌우로 움직일 수 있는 전형적인 BFS 문제입니다.function solution(maps) { const n = maps.length; const m = maps[0].length; co..

Lesson 4 (Counting Elements) - PermCheck(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. A permutation is a sequence containing each element from 1 to N once, and only once. For example, array A such that: A[0] = 4 A[1] = 1 A[2] = 3 A[3] = 2 is a permutation, but array A such that: A[0] =app.codility.com배열의 값들이 연속적인 값이면 1을, 그렇지 않다면 0을 출력하는 문제입니다. 시도1 (실패)funct..

Lesson 5 (Prefix Sums) - PassingCars(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. The consecutive elements of array A represent consecutive cars on a road. Array A contains only 0s and/or 1s: 0 represents a car traveling east, 1 represents a car traveling west. The goal is to countapp.codility.com점수: 40/100 도로와 차들이 있다. 차는 값이 0일때 동쪽, 1일때 서쪽으로 움직인다.위의 그림처럼 A[..

Lesson 4 (Counting Elements) - FrogRiverOne(Easy) Test results - CodilityA small frog wants to get to the other side of a river. The frog is initially located on one bank of the river (position 0) and wants to get to the opposite bank (position X+1). Leaves fall from a tree onto the surface of the river. You are given an arrayapp.codility.com 부끄러운 이야기지만 제 블로그니까 해봅니다.처음에 영어로 된 문제 이해 못해서 18점 받았습니다..

Lesson 3 (Time Complexity) - TapeEquilibrium(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. Array A represents numbers on a tape. Any integer P, such that 0 app.codility.com점수: 84/100 배열을 두 부분으로 나눠서 각 부분의 합계를 구한 뒤 차이를 구하고, 그 차이의 최솟값을 구하는 문제입니다. 예를 들어서 [3, 1, 2, 4, 3] 이라는 배열이 있다면 3+1+2 / 4+3 으로 나눴을 때의 차이가 1로 가장 작기 때문에 답은 1입니다. 초기 코드function solution(A) { le..

Lesson 3 (Time Complexity) - PermMissingElem(Easy) Test results - CodilityAn array A consisting of N different integers is given. The array contains integers in the range [1..(N + 1)], which means that exactly one element is missing. Your goal is to find that missing element. Write a function: function solution(A); that, given aapp.codility.com점수: 100/100 1부터 n까지의 수가 존재하는 배열(순서 무작위) 에서 빠진 수 하나를 ..

Lesson 3 (Time Complexity) - FrogJmp(Easy) Test results - CodilityA small frog wants to get to the other side of the road. The frog is currently located at position X and wants to get to a position greater than or equal to Y. The small frog always jumps a fixed distance, D. Count the minimal number of jumps that the smalapp.codility.com X의 위치에 있는 개구리가 Y와 같거나 먼 위치로 이동하려고 하는데 한번에 D만큼만 이동할 수 있습니다. ..

Lesson 2 (Arrays) - OddOccurrencesInArray(Easy) Test results - CodilityA non-empty array A consisting of N integers is given. The array contains an odd number of elements, and each element of the array can be paired with another element that has the same value, except for one element that is left unpaired. For example, in arrapp.codility.com점수: 55/100 홀수로만 이루어진 숫자 배열이 주어지고, 거기서 하나의 요소를 제외하면 전부 자..