본문 바로가기

전체 글57

React Context API Context API 오늘은 채용관련 사전과제 위주로 풀었다. 과제 중 Context API 를 사용하려는 데, Context API 를 어떤 기준에 의해서 사용하는게 좋을 지를 고민해보다가 velopert 님이 가장 최근에 쓰신 글을 읽었다. 사실 이전에 읽은적이 있던 typescript + Context API + useReducer 를 사용하는 방법을 찾으려고 구글링했다가 최신 글로 작성하신 게 있어서 읽게됐다. 이전 글에서는 하나의 Context API 를 사용하여 value 와 actions 를 따로 쓰는 곳에서 모두 리렌더링이 일어나는 것을 막기 위해 두 개의 Provider 로 나누어서 hooks 를 만든다는 발상이 신기했었다. 이전 글과 최근 글의 차이점은 useReducer 의 dispa.. 2022. 7. 15.
Babel polyfill - core-js? core-js-pure? 오픈소스 첫 PR Babel polyfill - core-js 에 대하여React Boilerplate 를 작성할 때 사용하던 babel polyfill 에 대해서 깊게 알아봤다.useBuiltIns 옵션에 있는 usage 와 entry 가 단순히 usage 는 필요한 polyfill 만 추가로 넣어주니까 이것만 사용하면 되겠다 싶었고 이전 프로젝트에서는 그대로 사용했다. 지금 사용중인 react ts boilerplate 에서 최근 코드스쿼드 슬랙에서 앨런이 공유해준 ES2022 문법중 하나인 at 메서드를 사용해보려는 과정에서 오류가 났었다. 이유는 core-js 를 다운받지 않아서 였다. 그래서 단순히 다운을 받아서 해결했다. 문득 궁금했다. core-js 를 왜 다운받아야 하는거지? node_modules 에 d.. 2022. 7. 14.
[VanillaJS, SPA] 카카오페이지 클론 진행 기간 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 의 클릭 이벤트를 연타하면 이미지가 깨지기도 함 - 의도하지 않은 사용을 방지하기 위하여 클릭 이벤트.. 2022. 7. 11.
[Babel, Webpack] possible exports: __esModule 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.. 2022. 6. 6.
px 단위를 사용하면서 생긴 이슈 - px, rem PR 을 보내면서, 데모 홈페이지를 같이 첨부하는 편인데, 내 화면에선 깨지지 않던 레이아웃이 리뷰어 분의 화면에선 깨져있었다. 근데 내 화면에선 아무리봐도 레이아웃이 깨져있지도 않았고, 크롬의 글꼴 크기를 조정해보아도 깨지지 않았다. 일단 레이아웃은 - width: 700px - height: 500px 로 잡혀있는 상황이었는데, 크롬환경이 아닌 사파리 환경으로 테스트해보았다. 뭐지? 왜 사파리에서는 또 깨지지? 브라우저 별로 기본 폰트크기가 다른건가? 일단은 width, height가 px 단위로 사용되고있어서 그런가? 라는 의심으로 rem 단위로 변경해보았다. 브라우저의 폰트 크기를 따르는 rem 단위로 변경하니 레이아웃이 깨지지않았다. 일단 rem 단위로 변경하여 해결이 되었으니, 브라우저 별로 .. 2022. 5. 16.
[JavaScript] 이터러블, iterator protocol, 유사 배열 객체 무엇이 배열로 형변환이 자유로운거지?평소 자바스크립트에서 "문자열" 을 다룰 때, 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.split(.. 2022. 4. 4.

티스토리툴바