개발
-
[Next.js] css 파일 import개발/HTML & CSS 2023. 1. 9. 22:52
프로젝트 폴더 구조를 아래와 같이 만들고 난 후, _app.tsx에 css 파일 2개를 import 하였으나 제대로 스타일이 적용되지 않았다. public ├── images └── fonts src ├── pages └── styles ├── globals.css └── layout.css Next.js 에서는 _app.tsx에서만 css 파일을 import 할 수 있게 하는 것까지는 알고 있었지만 css 파일 역시 global.css 하나만 import 하도록 막는지는 몰랐기 때문에 이런 참사가 벌어졌다... globals.css 에서 다른 css 파일을 import 선언하는 꼼수로 해결 /* _app.tsx */ import '../styles/globals.css' import type { App..
-
[Javascript] 조건에 따라 Object key & value 할당하는 쿨한 방법개발/Javascript & jQuery 2023. 1. 8. 22:04
특정 조건을 만족할 때만 Object에 특정 key에 값을 저장하는 새로운 방법을 알게 되어 까먹기 전에 적어본다 const [selected, setSelected] = useState(''); // 선택된 selected 값에 따라 newObj에 각기 다른 key: value를 추가 const newObj = { ...(selected === '1' && { first: 'first test' }, ...(selected === '2' && { second: 'second test' }, };
-
[TypeScript + React] 공통 UI 컴포넌트 interface 선언개발/TypeScript 2023. 1. 8. 16:39
공통 UI 컴포넌트를 쓰다 보면 부모 컴포넌트에서 전달해야할 props가 각기 다른 경우가 태반이다. 이럴 때 TypeScript에서는 어떤 식으로 interface를 작성해야 하는지 감을 못 잡고 있었는데 거금을 주고 강의 결제했더니 바로 거기서 튀어나왔다. 아주 값진 쓰임이었다...! 아래와 같이 인터페이스에서 [key: string]: any; 로 각종 props를 처리할 수 있게 넣어준 후 컴포넌트가 받을 props 선언하는 부분에서는 ...rest와 같이 spread 연산자로 풀어주면 끝 interface TextAreaProps { label?: string; name?: string; [key: string]: any; } export default function TextArea({ lab..
-
[TypeScript] Generic 써보기개발/TypeScript 2023. 1. 6. 23:03
[Generic] - 확실한 타입을 모를 때 사용 가능 /// 파라미터 타입이 미정인 경우 예제 type SuperPrint = { (arr: T[]): void } const superPrint: SuperPrint = (arr) => { arr.forEach(el => console.log(el)); } // 이하 모두 정상 작동 superPrint([1, 2, 3]); superPrint([true, false, true]); superPrint(['1', '2', '3']); superPrint(['1', true, 3]); /// 리턴 타입이 미정인 경우 예제 type SuperReturn = { (arr: T[]): T } const superReturn: SuperReturn = arr = ..
-
[TypeScript] 함수 선언 - Call Signature와 Overload개발/TypeScript 2023. 1. 6. 19:59
[Call Signature] - 함수의 파라미터, 리턴값을 선언 // 타입 선언. number형 파라미터를 2개 받고 number형 값을 반환한다 type Add = (a: number, b: number) => number; // 위에서 선언한 타입을 사용하는 함수 작성. call signature 덕분에 파라미터와 리턴값 타입 선언을 생략했다 const add: Add = (a, b) => a + b; // call signature 없이 함수 선언 시 const add_before = (a: number, b: number): number => a + b; [Overload] - 하나의 함수가 여러개의 call signature를 가질 때 발생 // 파라미터 데이터 타입이 상이한 경우 type A..
-
[TypeScript] 읽기 전용(readonly) 속성 지정개발/TypeScript 2023. 1. 6. 19:39
특정 속성 값을 수정하지 못하도록 readonly 선언을 할 수 있다. type Player = { readonly name: string }; // name 속성 값 변경 불가 const firstPlayer: Player = { name: 'first man' }; firstPlayer.name = 'first cool man'; // numbers 원소 편집 불가 const numbers: readonly number[] = [1, 2, 3]; numbers.push(4); 개발툴에서 보면 아래와 같이 평범한 js 코드였다면 아무 문제 없었을 부분에 빨간 줄이 뜨면서 수정을 강요한다.
-
Programmers - 배열 회전시키기 (Javascript)개발/코딩 테스트 2022. 12. 14. 17:07
정수 배열 numbers의 원소를 문자열 direction 방향으로 한 칸씩 회전시킨 배열을 반환하는 문제 numbers 가 [1, 2, 3]이고 direction이 "right" 이면 오른쪽으로 한 칸씩 회전시킨 [3, 1, 2]를, numbers 가 [4, 455, 6, 4, -1, 45, 6]이고 direction이 "left" 이므로 왼쪽으로 한 칸씩 회전시킨 [455, 6, 4, -1, 45, 6, 4]를 반환하면 된다. [나의 풀이] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function solution(numbers, direction) { let answer = []; const directions = { right: 1, le..
-
Programmers - 문자 반복 출력하기 (Javascript)개발/코딩 테스트 2022. 12. 13. 16:22
문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 반환하는 문제 [나의 풀이] 1 2 3 4 5 6 7 8 9 10 11 12 function solution(my_string, n) { const answer = []; const converted = my_string.split(''); converted.forEach(string => { for ( let i = 0; i v.repeat(n)).join(""); return answer; } Colored by Color Scripter cs String의 내장 메소드 중 repeat() 함수를 활용한 부분이 눈에 띄어 기록한다.