짧은코딩

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로 더미데이터를 여러 개 만들어서 성능을 높이는 방법도 좋..

shortId -npm 주소 https://www.npmjs.com/package/shortid shortid Amazingly short non-sequential url-friendly unique id generator.. Latest version: 2.2.16, last published: 2 years ago. Start using shortid in your project by running `npm i shortid`. There are 4230 other projects in the npm registry using shortid. www.npmjs.com map에서 key를 주는 등 개발을 하다보면 각각 다른 값을 넣어줘야하는 경우가 있다. 각각 값을 넣어주기 애매한 경우에 shortI..

https://school.programmers.co.kr/learn/courses/30/lessons/92335 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(n, k) { var answer = 0; let temp = n.toString(k).split("0"); for (let i = 0; i < temp.length; i++) { let flag = true; if (temp[i] === "1" || temp[i] === "") continue; for (let j = 2; j

TS 컴파일러 -TS 컴파일러의 역할 1. 최신 js/ts가 동작하게끔 구버전 js로 트랜스파일(translate+compile)한다. 2. 코드의 타입 오류를 체크해준다. 위 역할 두 가지는 독립적이다. 즉, ts가 js로 변환될 때 코드에 있는 타입에는 영향을 주지 않는다. 그리고 변환된 js 실행에서도 타입은 영향을 끼치지 않는다. 타입 오류가 있는 코드 let x = "abcd"; x = 1234; 컴파일과 타입 체크가 독립적이라서, 위 코드처럼 타임 오류가 있어도 컴파일이 가능하다. 코드에 오류가 있더라도 컴파일된 결과가 나오는 것이 도움이 된다. 웹을 만들 때, 오류가 해결되지 않아도 다른 부분을 테스트할 수 있다. 런타임과 타입 체크 ts에서 js로 컴파일되는 과정에서 interface, t..

대부분 개발을 하다보면 cors에러를 접해보게 될 것이다. 이 에러는 백엔드, 프론트엔드에서 모두 해결이 가능하다. 나는 프론트엔드에서 해결할 수 있는 방법을 소개하겠다. 하지만 이 방법은 proxy 방법이라 배포하면 백엔드쪽에서 cors에러를 잡아줘야 한다. proxy 브라우저에서 다른 도메인 서버로 요청을 보내면 cors 에러가 난다. 하지만 서버에서 서버로 보내면 cors 에러가 안난다. 이렇게 서버에서 서버로 보내는 것이 proxy이다. -경로 브라우저 -> 프론트 서버 -> 백엔드 서버 http-proxy-middleware 프론트엔드에서 cors 에러를 해결하기 위해서는 http-proxy-middleware 라이브러리를 사용하면 된다. 사용법 src 폴더에 setupProxy.js 파일을 만..