전체 글
-
react -boilerplate: lint 적용하기(eslint, prettier, stylelint, husky)기타 2022. 3. 15. 20:31
적용 이유 팀원들과 지속적으로 프로젝트를 진행하면서 css의 순서까지 맞추기로 하였습니다. 저는 팀원이 공유해준 css정렬 순서에 관한 블로그 글을 보며 계속 css를 맞추게 되었습니다. 하지만 이러한 작업이 저에게는 굉장히 귀찮고 하기 싫은 작업 중 하나로 남았습니다. 따라서 주말 동안 이를 자동화할 도구를 찾게 되었고 스타일린트를 적용하게 되었습니다. 스타일 린트란? 스타일린트 공식 홈페이지를 가게 된다면 아래와 같은 문장으로 설명합니다. A mighty, modern linter that helps you avoid errors and enforce conventions in your styles 스타일린트와 css-in-js를 함께 사용하기 위해서는 추가적인 설정을 해주어야 합니다. 이를 위해서 ..
-
picture태그를 통한 이미지 최적화하기기타 2022. 3. 13. 21:21
picture태그란? picture태그란 0개 이상의 태그와 다른 디스플레이/장치 시나리오에 대한 이미지의 대체 버전을 제공하기 위한 하나의 요소를 포함하는 태그입니다. mdn의 예시를 본다면 미디어 쿼리를 통해 화면별 다른 이미지를 보여주기 위해 picture태그를 사용하는것을 볼 수 있습니다. 우리는 pucture태그를 통해 화면의 width가 기준이 아닌, 다른 방법으로 최적화를 해보겠습니다. avif,webp, jpeg를 통해 이미지 최적화하기 그럼 avif는 무엇일까요? avif는 av1(오픈 소스 코텍)의 이미지 파일 형식입니다. 압축을 하기 때문에 일반 이미지보다 몇배 작게 만들수 있고, HDR과 호환이 되는 코덱입니다. webp란 무엇일까요? 웹에서 사용되는 기존의 이미지 형식의 포맷을 대..
-
[함수형 프로그래밍] reduce, go, pipe, curry 로 풀어보는 코딩테스트JavaScript 2022. 3. 9. 10:29
https://programmers.co.kr/learn/courses/30/lessons/87389 이 문제의 답은 사실 아래와 같이 정말 간단하게 풀어볼 수 있습니다. 하지만 reduce, map, go를 활용하여 이를 풀어보도록 하겠습니다! const solution = n => { for(let i = 1; i { if (!iter) { iter = acc[Symbol.iterator](); acc = iter.next().value; } for (const a of iter) { acc = f(acc, a); } return acc; }; 위와 같이 나타낼 수 있는데요, 처음부터 보겠습니다. 내장 reduce의 경우 두 번째 인자에 초기값을 넣어주지 않는다면 이터레이터의 첫 번째 값을 초기값으로..
-
[React / 에러 핸들링] react-helmet, react-snap 안될때 해결 방법React 2022. 3. 4. 23:54
사이드 프로젝트를 진행하면서 링크 공유 기능을 구현할 일이 생겼습니다. 이때 OG태그를 사용하면서 생긴 에러를 써보려 합니다. 메타데이터 메타데이터는 데이터를 설명하는 데이터입니다. 그중에서도 OG 태그라는 것이 있는데 Facebook이 웹 사이트에 더 풍부한 메타데이터를 제공하기 위해 발명한 메타데이터 프로토콜입니다. 메타데이터들을 사용한다면 검색엔진에게 더 많은 데이터를 제공하므로 좋습니다. 뿐만 아니라 og태그를 사용하게 된다면 링크를 공유했을 때 사용자에게 더 좋은 정보를 보여줄 수 있습니다. CRA와 meta data의 문제 프로젝트의 기술 스택은 cra였습니다. 해야 하는 일은 og태그를 사용하여 동적으로 url에 해당하는 이미지 및 사진을 보여주어야 합니다. 하지만 csr은 index.htm..
-
[함수형 프로그래밍] generator 알아보기JavaScript 2022. 2. 22. 15:29
generate은 "만들어내다"라는 뜻을 가지고 있습니다. 즉, 제너레이터는 이터레이터이자 이터러블을 생성하는 함수를 말합니다. 문법은 function 키워드 앞에 * 을 붙이고, yield를 통해 next에 들어갈 값을 만들어줄 수 있습니다. 첫 번째 예제 function* gen() { yield 1; yield 2; yield 3; return 10 } let iter = gen(); console.log(iter[Symbol.iterator]() === iter); // true console.log(iter.next()); // {value: 1, done:true } console.log(iter.next()); // {value: 2, done:true } console.log(iter.ne..
-
[Javascript] 프로토타입으로 상속 구현하기JavaScript 2022. 2. 19. 01:07
VanillaJs로 채용과제를 약 일주일정도 진행하게 되었습니다. 이때 클래스 키워드를 사용하지 않고 function으로 만들게 되었는데, prototype의 활용을 잘 하지 못한것 같아 아쉬움이 남았습니다. 따라서 이번에 prototype을 통한 상속을 구현해 보면서 개념을 정리하고, 추후에 리팩토링을 해보려 합니다. 생성자 함수 만들기 function Foo(name) { this.name = `${name} success!`; console.log("constructor Foo"); } Foo.prototype.getName = function () { console.log(this.name, "prototype"); }; 기본적인 함수를 만들어 주었습니다. 화살표 함수로 만들어주게 된다면 this..
-
[프로그래머스] 3차 압축 js 풀이프로그래머스 2022. 2. 18. 23:18
문제 https://programmers.co.kr/learn/courses/30/lessons/17684 코딩테스트 연습 - [3차] 압축 TOBEORNOTTOBEORTOBEORNOT [20, 15, 2, 5, 15, 18, 14, 15, 20, 27, 29, 31, 36, 30, 32, 34] programmers.co.kr 차근차근 구현하면 되는 문제입니다. 우선 Map을 통해 A부터 Z까지의 색인번호를 만들어 줍니다. const createDic = (dic) => { for (let i = "A".charCodeAt(); i { for (let i = "A".charCodeAt(); i { const dic = new Map(); const ans = []; let lastIdx = 26; cr..
-
[함수형 프로그래밍] 잘 만들어진 이터레이터란? (well-formed iterator)JavaScript 2022. 2. 9. 15:27
사용자 정의 이터러블 만들기 const iterable = { [Symbol.iterator]() { let i = 3; return { next() { return i == 0 ? { done: true } : { value: i--, done: false }; }, }; }, }; console.log(iterable[Symbol.iterator]().next()); // 3 for (const a of iterable) console.log(a); // 3 2 1 순으로 순회가 가능합니다. iterable변수는 [Symbol.iterator]라는 키를 가지고 있으며 이를 실행했을 때 이터레이터를 반환합니다. 여기서 문제점은 iterable이 얼마나 순회하였는지를 기억하지 못한다는것입니다. 문제 해결..