Babel polyfill - core-js 에 대하여 React Boilerplate 를 작성할 때 사용하던 babel polyfill 에 대해서 깊게 알아봤다. useBuiltIns 옵션에 있는 usage 와 entry 가 단순히 usage 는 필요한 polyfill 만 추가로 넣어주니까 이것만 사용하면 되겠다 싶었고 이전 프로젝트에서는 그대로 사용했다. 지금 사용중인 react ts boilerplate 에서 최근 코드스쿼드 슬랙에서 앨런이 공유해준 ES2022 문법중 하나인 at 메서드를 사용해보려는 과정에서 오류가 났었다. 이유는 core-js 를 다운받지 않아서 였다. 그래서 단순히 다운을 받아서 해결했다. 문득 궁금했다. core-js 를 왜 다운받아야 하는거지? node_modules 에..

진행 기간 22.02.14 ~ 22.02.27 사용 기술 - Javascript (VanilaJS) - webpack, babel - gh-pages 데모 : https://healtheloper.github.io/fe-kakaopage/ Git : https://github.com/healtheloper/fe-kakaopage TL;DR - Component 를 템플릿 리터럴을 반환하여 생성 - 해당 컴포넌트가 생성된 이후 이벤트 리스너를 달아주기 어려운 문제가 생김 - Vanila JS 로 Rendering 흐름을 Prototype , 생성자 함수 패턴으로 개선하여 사용 - 메인 배너 Carousel 의 클릭 이벤트를 연타하면 이미지가 깨지기도 함 - 의도하지 않은 사용을 방지하기 위하여 클릭 이벤트..

webpack + babel-loader 를 사용하던 중, 위와같은 에러메세지 발생 해결 .babelrc 에 preset-env 옵션으로 "modules" : "cjs" 추가 { "presets": [ [ "@babel/preset-env", { "useBuiltIns": "usage", "modules": "cjs", "corejs": { "version": 3, "proposals": true } } ], ["@babel/preset-react", { "runtime": "automatic" }] ] } - cjs 는 commonjs 와 같은 것으로, 바벨이 ES Module 코드를 CommonJS 모듈의 문법으로 변환하여 두 모듈을 같이 사용할 수 있도록 함. - 바벨은 _interopRequire..

PR 을 보내면서, 데모 홈페이지를 같이 첨부하는 편인데, 내 화면에선 깨지지 않던 레이아웃이 리뷰어 분의 화면에선 깨져있었다. 근데 내 화면에선 아무리봐도 레이아웃이 깨져있지도 않았고, 크롬의 글꼴 크기를 조정해보아도 깨지지 않았다. 일단 레이아웃은 - width: 700px - height: 500px 로 잡혀있는 상황이었는데, 크롬환경이 아닌 사파리 환경으로 테스트해보았다. 뭐지? 왜 사파리에서는 또 깨지지? 브라우저 별로 기본 폰트크기가 다른건가? 일단은 width, height가 px 단위로 사용되고있어서 그런가? 라는 의심으로 rem 단위로 변경해보았다. 브라우저의 폰트 크기를 따르는 rem 단위로 변경하니 레이아웃이 깨지지않았다. 일단 rem 단위로 변경하여 해결이 되었으니, 브라우저 별로 ..

무엇이 배열로 형변환이 자유로운거지? 평소 자바스크립트에서 "문자열" 을 다룰 때, Array.from() 메서드를 사용하거나 ... (스프레드 연산자) 를 사용해서 문자열 배열의 형변환을 자유롭게 합니다. 1. "ABCDEF" 에서 "D" 를 없애주세요 const string = "ABCDEF"; const strArr = string.split(""); strArr.splice(strArr.indexOf("D"), 1); const newStr = strArr.join(""); console.log(newStr); // "ABCEF" 2. 위에선 indexOf 를 사용했지만, 간단히 고차함수를 사용할 수도 있습니다. const string = "ABCDEF"; const strArr = string...

전역 변수 변수는 자신이 선언된 함수가 호출될 때 생성되는 함수 렉시컬 환경의 생명주기를 따라 소멸됩니다. 가비지 컬렉터(GC) 에 의해서 소멸되는 것인데요, 함수가 호출될 때 생성되는 함수 렉시컬 환경이 어느 곳이든지 참조를 하고 있지 않다면 GC 에 의해서 소멸됩니다. 그렇다면 전역 변수는 어떤 생명주기를 따르게 될까요? var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 가 되는데요, 그렇다면 전역 변수의 생명주기는 전역 객체의 생명주기와 일치할 것이고, 전역 객체의 생명주기는 코드를 실행하는 환경이 종료되야 종료되므로, 결국 끝까지 GC 에 의해 소멸되지 않게됩니다. 즉, 메모리 누수로 이어지게 됩니다. 전역 객체 브라우저 환경의 모든 자바스크립트 코드는 하나의 전역객체 window 를 공유..

2021-1 ~ 2021-6 마지막 학기 2020년 1학기 컴퓨터공학과로 전과한지 약 1년 만에 마지막 학기를 다니게 되었다. 정확히는 2019년 2학기 부전공으로 시작해서 2년 동안 컴퓨터 공학수업을 모두 들은 셈이지만, 2년 전에는 'Hello World' 도 찍어보지 않은 컴퓨터 언어와 거리가 먼 사람이었는데, 주 전공을 컴퓨터공학과로 졸업한다는 게 신기하다. 마지막학기 이전의 나는 같은 학교는 아니지만 주변에 컴퓨터전공관련 친구들이 있었다. 그런데도 늘 혼자 공부하고 고민하는 버릇이 있었기 때문에 어떻게 공부를 해나가야 할지 스스로 결정해서 공부해나갔다. (지금 생각해보면 너무 너무 너무 안타깝다. 왜그랬니?) 이전 학과(공대)에서는 '학점+자격증+외부활동' 이 좋으면 취업하는데 무리가 없었다. ..

fakeDB [] 에서 sqlite 로 옮기던 와중, Many-To-One, One-To-Many 관계 설정을 하고 있었는데, 마지막 단계에서 아래와 같은 오류가 발생했다. Cannot determine a GraphQL input type for the "...". Make sure your class is decorated with an appropriate decorator. 아무리 눈을 씻고 찾아봐도 InputType 을 넣어주지 않은 클래스는 없었다. 혹시나 싶어 create input dto 를 뒤져보면서, OmitType 을 PickType 으로 로직을 바꾸어 사용해보니 위와 같은 에러가 사라졌다. // 에러난 로직 @InputType() export class CreateEpisodeInp..

서론 → 왜 공부하게 되었는가? Javascript 는 int , float 와 같은 다양한 숫자타입을 사용하는 것이 아닌 1 가지 숫자타입을 사용한다. 이 숫자타입의 값은 배정밀도 64비트 부동소수점 을 따른다. 부동소수점 이라는 개념은 알지만 배정밀도 라는 언어는 낯설어 찾아서 공부하게 되었다. 왜이러는걸까요? console.log(0.1+0.2) // 0.30000000000000004 console.log(0.1+0.2 === 0.3) // false 단정밀도? 배정밀도? 단정밀도(single precision)는 32비트 를 사용하는 것을 이야기하며, 배정밀도(double precision)는 64비트를 사용하는 것을 이야기한다. 고정소수점? 부동소수점? 7.625 를 2진수로 표현하고자 할 때..

class-transformer 모듈 관련 오류였는데, @nestjs/graphql 버전이 8 버전으로 업그레이드 된 상황에서 강의상황에 맞춰가기 위해 7.9.4 버전으로 사용하고 있었음, 그 상황에서 발생한 오류라고 판단 https://github.com/typestack/class-transformer/issues/566 global 로 설치된 nestjs cli 를 버전 업 하고, nest js docs 에서 제시한 새로운 graphql 설치 방향으로 진행 // cli 업데이트 $ npm i -g @nestjs/cli // graphql 설치 $ npm i @nestjs/graphql graphql apollo-server-express@2.x.x https://docs.nestjs.kr/graph..