-
사용자 만족도 향상을 최우선으로 생각하는
Front-end 개발자 안유림입니다.
TypeScript, React, Next.js, Jotai, React-Query
➜ Github
-
ECMAScript 문서에서 Array.from()에 대해 읽어보기
요즘 JS로 알고리즘 문제를 푸는 것이 꽤 재미있는 상태다.2차원 배열은 기본이고 3차원 배열도 자주 쓰게 된다. 다차원 배열을 초기화하여 선언하는 과정에서 원소를 복사해서 넣어주게 되면배열 복사 시 기본 특성인 shallow copy (얕은 복사, 주소 참조)로 인해원본 배열을 변경하여도 새 배열이 같은 주소를 참조하여 두 배열의 값이 함께 변경되는 의도하지 않는 일이 발생한다. 따라서 초기화 시 shallow copy 되지 않도록for문 혹은 map()을 이용해서 원소를 하나하나 넣어줄 수 있다. 또는 Array.from() 메서드를 사용할 수 있는데 요즘 나는 이 방법을 주로 사용하고 있다.처음에는 단순 사용법만 외워 쓰다가 원리를 알고 써야겠다 싶어 공부하게 되었다. 1. ECMAScript 명세..
더보기
-
팀 레포 Vercel 무료 배포하기 | Github Action: Fork Repo Sync 맞추기 (+CI/CD)
Github Action를 통한 작은 Continuous Delivery 구축하기프론트엔드 프로젝트의 배포를 도와주는 Vercel을 무료로 사용하기 위해서는 개인 Repository여야 한다.Organization Repo 등을 사용할 경우에는 유료 버전을 사용해야 한다. 사실상 Vercel을 사용하면 배포는 vercel에서 해주는 것이고 나는 CD환경을 직접 구축하지 않아도 된다.보통 CD의 D를 deployment/delivery 중 혼용하여 사용하는 것 같은데, 여기서는 delivery에 가까운 듯 하다. 하지만 우리의 팀 프로젝트에서 Vercel의 기능을 사실상 우회..!하여 프론트엔드를 무료로 배포하기 위해팀 레포에서 공동 작업을 하고 -> 팀원의 개인 레포로 fork한 다음 vercel과 연결..
더보기
-
우아한 타입스크립트 with 리액트
일상이가 추천해준 이 책을 빠르게 빠르게 읽으면서 공부한 짧은 후기를 남겨보려고 한다. 일단 책을 집필한 사람들이 우아한형제들의 웹 프론트개발그룹 현직자들이기 때문에그들이 어떤 코드를 사용하는지 간접적으로 볼 수 있고 (클래스 기반이다 ..!)중간중간 '우형 이야기' 라는 코너에서는 어떤 개념을 사용하는 데 있어 팀별로 각각 다른 의견도 읽을 수 있다. 흥미롭다. 책의 구성도 좋은 것 같다. 초반부에 웹, 자바스크립트와 타입스크립트의 탄생 배경 같은 역사가 가볍게, 이해하기 쉽게 서술되어있다. 타입 개념으로 들어오면 나 같은 경우에는 타입스크립트를 조금은 사용해 봤기 때문에 익숙한 부분도 있었지만고급 타입 개념은 쓰는 방법을 잘 몰라서 코드에 적용해본 적이 없었기에 생소한 부분 다시 한 번 정리도 하면서..
더보기
-
타입 확장하기 (Union/Intersection Type), 좁히기 (Type Guard)
타입 확장하기타입스크립트에서는 중복되는 타입 선언을 줄이기 위해 "타입 확장"을 한다.interface A { name: string; url: string;}interface B extends A { time: number;}type C = { name: string; url: string;};type D = { time: number;} & C; extends 외에도 |, & 기호를 이용해서 유니온 타입, 교차 타입을 사용할 수 있다. 유니온 타입 (Union Type) 유니온 타입은 유니온 타입에 포함된 모든 타입이 공통으로 갖고 있는 속성에만 접근할 수 있다.두 타입의 공통 속성은 orderId뿐이다.step.distance를 찾게 되면 에러가 발생한다. 하지만 책에서는 이 개념을 합집..
더보기
-
타입스크립트 고급 타입 (Index Signatures, Indexed Access Types, Mapped Types, Template Literal Types)
인덱스 시그니처 (Index Signatures)인터페이스 내부에 [Key: K]: T 꼴로 타입을 명시해주면해당 타입의 속성 키는 모두 K 타입이어야 하고 속성값은 모두 T 타입을 가져야 한다는 의미다.위처럼 속성값에 해당하지 않는 타입을 정의하면 에러가 발생한다. 인덱스드 엑세스 타입 (Indexed Access Types)다른 타입의 특정 속성이 가지는 타입을 조회하기 위해 사용된다.인덱스에 사용되는 타입 또한 그 자체로 타입이기 때문에 유니온 타입, keyof, 타입 별칭 등의 표현을 사용할 수 있다. 또한 배열의 요소 타입을 조회하기 위해 사용하는 경우가 있다.PromotionList 데이터에서 타입을 추론하고 싶을 때T[0]는 해당 ElementOf의 에 들어온 어떤 unknown 배열의 원소..
더보기
-
무한 if 지옥을 벗어나자 (feat. Map)
위 코드에서 num은 질문의 문항이고, type은 답변의 문항이다. 분명 문제마다 답을 하나씩 선택했을 때 scores에 카운팅을 하는 것은 동일하기 때문에, 코드의 형식은 매번 같으나알고리즘 문제도 아니고 어떤 수치적으로의 패턴이 없는 상황에서이 if 지옥은 아무리 봐도 아닌 것 같은데 .. 근데 어떻게 해야하지 ... 하다가짱고수 개발자에게 자문을 구해보았다. 🤩Map을 만들어서, 문항별 답변에 어떤 스코어의 값을 올려줄 지 기록한다. 값을 올려줄 때 해당 스코어의 값을 Map에서 찾아와서 올려주는 코드는더 이상 중복하지 않고 두 줄로 끝내버린다. (에러 처리는 덤 ..) Map 자체는 계속 길어지지만, (아마 이 Map도 더 스마트하게 할 수 있는 방법이 있겠지)핵심 코드는 간단해졌기에 누가 봐도..
더보기
-
Junction Asia 2023 Review!
On August 18-20, in Busan, South Korea, Junction Asia!I didn't go to Junction completely of my own volition. Hmm... will it on fun?That weekend many many opened party everywhere.. But I'm going Hackathon?!!Even as I say that, my mind is already arrived Busan. Done Vacation plans and packing. Day 1.A warm welcome kit. XDI liked the glow-in-the-dark bracelet.The snack bar was overflowing with snac..
더보기
-
백준 _ 2580 스도쿠 (Python, JavaScript)
https://www.acmicpc.net/problem/2580 풀이 과정1. 빈 칸의 좌표를 모두 조회해 보관한다.2. 빈 칸에 들어갈 수 있는 숫자를 체크해본다. 이때, 행/열/정사각형 범위를 체크한다.3. DFS 백트래킹을 통해 모든 빈 칸의 좌표가 채워질 때까지 반복한다. Python 코드def check(y, x, n): for i in range(9): if n == arr[y][i] or n == arr[i][x]: return False for i in range(3): for j in range(3): if n == arr[y//3 * 3 + i][x//3 * 3 + j]: return False return Truedef find(n): ..
더보기
