짧은코딩

never 타입 const x: never = 12; never는 공집합이라는 의미라서 아무런 값도 할당할 수 없다. 따라서 x에 12를 넣을 수 없다. 유닛(unit) 타입/리터럴(literal) 타입 type A = 'A'; type B = 'B'; type Twelve = 12; 유닛 타입은 never 다음으로 작은 집합이며 한 가지 값만 포함하는 타입이다. 유니온(union) 타입 type AB = 'A' | 'B'; type AB12 = 'A' | 'B' | 12; 유니온 타입은 값 집합들의 합집합이다. "|"을 사용해서 타입을 묶어줄 수 있다. -예시 const a: AB = "A"; // 정상 const c: AB = "C"; // "C"는 'AB' 형식에 할당할 수 없다. "C"는 유닛 타..

Loader module.exports = { module: { rules: [] } } 로더는 웹팩이 js가 아닌 HTML, CSS, Images, 폰트 같은 자원을 변환할 수 있도록 도와주는 속성이다. 로더는 module로 사용된다. module을 주석 처리한 경우 module을 주석 처리하고 빌드를 하면 사진 처럼 오류가 난다. js 파일 안에 css가 들어갈 수 없어서 로더를 설정하라는 메시지이다. 예시 module.exports = { module: { rules: [ { // 모든 css 확장자를 가진 파일에 use에 있는 loader를 적용하겠다라는 의미 test: /\.css$/, use: ["style-loader", "css-loader"], }, // 모든 js 파일에 대해 babel..

개인정보 수집 유효기간 JS https://school.programmers.co.kr/learn/courses/30/lessons/150370 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function checkValid(now, chk, num) { let [y1, m1, d1] = now.split("."); let [y2, m2, d2] = chk.split("."); return ((y1 - y2) * 12 + (m1 - m2)) * 28 + (d1 - d2) >= num * 28; } function solution(today, ter..

양과 늑대 https://school.programmers.co.kr/learn/courses/30/lessons/92343 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(info, edges) { let max = 1; let graph = {}; for (let [a, b] of edges) { graph[a] ? graph[a].push(b) : (graph[a] = [b]); } function DFS(now, sheep, wolf, list) { max = Math.max(max, sheep); if (sheep

Entry module.exports = { entry: "./index.js", }; entry는 웹팩에서 웹 자원을 변환시키기 위한 최초의 js 파일 경로이다. 디펜던시 그래프(Dependency Graph) 빌드를 하면 이 사진처럼 모듈 간의 의존 관계가 생기는 구조인 디펜던시 그래프가 생긴다. Entry 포인트가 2개인 경우 entry: { login: './src/LoginView.js', main: './src/MainView.js' } entry 포인트는 2개가 될 수 있다. entry 포인트 2개 이상 쓰는 경우는 싱글 페이지 애플리케이션(SPA)보다 서버에서 정보를 내려주는 형태의 멀티 페이지 애플리케이션이 적합하다. Output module.exports = { output: { fil..

자바스크립트는 덕 타이핑(duck typing) 기반이다. 덕 타이핑은 "만약 어떤 새가 오리처럼 걷고, 헤엄치고, 짹짹거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다."라는 명제이다. 예를 들어 "안녕"이라는 문자열에 숫자 10을 더하면 "안녕10" 이렇게 나오는 것을 의미한다. 구조적 타이핑 성공 예시 interface Vector2D { x: number; y: number; } function calculateLength(v: Vector2D) { return Math.sqrt(v.x * v.x + v.y * v.y); } interface NamedVector { name: string; x: number; y: number; } const v: NamedVector = { x: 3, ..

이미지 전달법 프론트에서 이미지들을 서버에 전달하기 위해서는 formData에 담아서 전달해야 한다. 이 사진에 담긴 정보를 formData에 담아주면 된다. 사용법 const formData = new FormData(); images.forEach((image) => { formData.append('images', image.file as File); }); // 이미지 await axios.post(`/item/upload/${idx}/picture`, formData, { headers: { 'Content-Type': 'multipart/form-data', Authorization: `Bearer ${localStorage.getItem('accessToken')}`, }, }); 먼저 fo..

양궁대회 https://school.programmers.co.kr/learn/courses/30/lessons/92342 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(n, info) { var answer = []; let maxPoint = 0; let dy = Array.from({ length: 11 }, () => 0); function DFS(point, count, a_sum, r_sum, ary) { if (n 10) { let diff = r_sum..

무한스크롤 불러올 데이터가 많으면 프론트엔드에서는 무한스크롤을 사용하여 데이터를 조금씩 가져와야 한다. 그러기 위해서는 스크롤의 위치를 구하는 방법이 가장 중요하다. 스크롤 위치 구하기 useEffect(() => { function onScroll() { window.scrollY + document.documentElement.clientHeight = document.documentElement.scrollHeight console.log( window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight ); window.addEventListener("scroll", onScroll); retur..

faker -npm 사이트 https://www.npmjs.com/package/faker faker Generate massive amounts of fake contextual data. Latest version: 6.6.6, last published: a year ago. Start using faker in your project by running `npm i faker`. There are 2560 other projects in the npm registry using faker. www.npmjs.com faker로 가상의 더미데이터를 만들어 api가 만들어지지 않은 상황에서 미리 구현할 수 있다. 프론트엔드 개발자라면 faker로 더미데이터를 여러 개 만들어서 성능을 높이는 방법도 좋..