profile
sming
post-thumbnail

github action 환경에서의 빌드속도 개선기

웹팩 개발환경 빌드속도 개선기 - 1웹팩 개발환경 빌드속도 개선기 - 2또 어떤 문제가 있길래 빌드속도 개선을 저렇게 했는데 또 이 게시물을 작성할까?이번에는 ci tool인 github action에 대해서 알아보자! 현재 프로젝트에서는 yarn run test, y

2022년 10월 25일
·
0개의 댓글
·
post-thumbnail

웹팩 환경에서의 빌드 속도 개선기 - 2

웹팩 개발환경에서의 빌드 속도 개선기 - 1 위의 게시물을 작성하고 문제가 발생하였다. 바로 ts-loader에서 하는 타입체킹이 local에서는 통과하지만 github action, jenkins와 같은 ci tool에서는 이상한 곳에서 타입에러가 발생하였다. e

2022년 10월 25일
·
0개의 댓글
·
post-thumbnail

라이브러리와 함께 하는 Storybook 설정하기

다들 스토리북을 사용하면서 겪었을 문제라고 생각된다. 여러 라이브러리와 함께 이용할 시 골치아프다는것..지금부터 외부 라이브러리들과 스토리북을 함께 이용할때 스토리북을 설정하는 법을 알아보자!먼저 react router를 사용한다면 컴포넌트에 BrowserRouter를

2022년 10월 23일
·
0개의 댓글
·
post-thumbnail

웹팩 환경에서의 빌드 속도 개선기 - 1

너무 느린 빌드 속도 프로젝트 개발을 하던 도중 빌드 속도가 너무 느린것을 확인하였다. development환경기준 yarn start를 할시 17초, auto save로 rebuild를 할시 7.5초가 소모 되었다. 첫 빌드속도는 크게 중요하진 않지만 개발할때

2022년 10월 12일
·
1개의 댓글
·
post-thumbnail

제너레이터와 실행컨텍스트

제너레이터를 공부하면서 생긴 의문이다. 과연 제너레이터 함수는 실행 컨텍스트에서 어떻게 돌아가는 걸까? https://tc39.es/ecma262/#sec-generator-function-definitions 자바스크립트에서의 일반 함수가 실행 컨텍스트에서 돌아가

2022년 10월 6일
·
0개의 댓글
·
post-thumbnail

엄격하게 타입스크립트를 이용하는 9가지 방법

자바스크립트의 유연성때문에 나오게 된 타입스크립트! 하지만 올바르게 이용하지 않으면 안쓴것과 다름이 없습니다.타입스크립트를 대부분 입문하시는 분들도 "any를 지양하자" 정도는 알고 있습니다. any를 쓰지 않는것에서 좀 더 나아가 타입스크립트를 좀 더 엄격하게 이용하

2022년 10월 3일
·
5개의 댓글
·
post-thumbnail

우리 팀 프로젝트 에서의 에러핸들링 (feat. 에러 바운더리)

공식에서의 에러 핸들링 ⛔️ 공식에서 비동기 통신에 대하여 제대로 된 에러 관리 방식이 없어서 잡지 못하는 에러도 많았고 컴포넌트내에 에러 로직이 무더기로 있는 경우가 있었다. 그래서 지금부터 공식팀이 에러를 처리한 방식에 대해서 알아볼것이다.😊 일반적인 에러

2022년 9월 22일
·
2개의 댓글
·

디바운싱과 쓰로틀링

연속적으로 들어오는 입력중에 처음이나 마지막 입력만 실행하게 하는 기법을 디바운싱이라고 한다.디바운싱도 어떤 시점을 입력하게 할건지에 따라서 trailing edge와 leading edge로 나눌수 있다.연속적으로 들어오는 입력중에 마지막 입력만 실행하게 하는 기법이

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

나만의 패턴 경험기

미션을 하며 너무 무지성으로 mvc패턴을 사용하고 있다고 생각됬다. 왜 mvc를 사용하는지도 모르고 도메인과 ui를 왜 나눠야 하는지도 모른상태로 이용하고 있었다. 그래서 어쩌다 이런 패턴이 나오게 됬는지 도메인과 ui를 안나눴을때와의 차이점을 보기위해 나만의 패턴을

2022년 5월 19일
·
0개의 댓글
·

custom event에 대해 알아보자

custom event MVC패턴을 이용하던 도중 controller의 역할과 view의 역할을 확실하게 분리하기 위해서 custom Event를 사용하였다. 그렇다면 custom event는 어떻게 사용할까? 다음은 mdn의 custom event에 대한 설명이다

2022년 5월 19일
·
0개의 댓글
·

비슷한 2개의 이벤트들의 비교(keyup, change, focus) + Number

change vs input (input입력시에)keyup vs keydown(focus, blur) vs (focusin, focusout)번외: Number(), Number.parseInt()input태그내에서 입력(텍스트 입력)을 변화할때마다 change이벤트가

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

input tag의 pattern attribute(feat. title)

굉장히 생소할수 있는 input 태그의 pattern attribute이다. 이것은 과연 어디에 사용을 하고 어떻게 사용을 할까?input 태그에 required 속성을 추가하고 값을 입력하지 않은채 제출을 하게 되면 브라우저에서 값을 입력해주세요 라는 메시지를 던져준

2022년 5월 19일
·
0개의 댓글
·

input tag에서 한글 막기

HTML input tag에 type="number" 을 준후 영어 e나 한글을 입력해보자! 아마 입력이 될것이다.원래는 keydown, event.preventDefault() 를 이용하여 원하지않은 입력값을 막는다.이런식으로 하면 Backspace, Tab, 방향키

2022년 5월 19일
·
0개의 댓글
·

no-await-in-loop

eslint를 사용하던중 발견한 이슈입니다. await를 loop안에서 이용하게 되면 async/await의 병렬화 이점을 충분히 활용하지 않는다 라는 이슈입니다.이렇게 이용을 하면 비동기인 bar 함수에서 promise요청을 마치고 다음 await함수로 들어가기때문에

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

webpack - 1

웹팩은 여러개 파일을 하나의 파일로 합쳐주는 번들러이다. 하나의 시작점(entry point)로 부터 의존적인 모듈을 모두 찾아내어 하나의 결과물을 만들어낸다.package.json의 script에 build: webpack로 설정을 한다.이제 webpack.confi

2022년 3월 1일
·
2개의 댓글
·
post-thumbnail

우아한 테크코스 프론트엔드 4기 최종테스트 후기

12.18(토) 드디어 우아한 테크코스 최종테스트를 보았다.3주차 미션을 마치고 최종미션이 어떻게 나올까 생각해보았다. 3기처럼 3주차미션에서 변형된 미션이 나올지 1, 2기처럼 3주차와 완전히 다른 미션이 나올지 고민해보았다.그리고 오늘 완전히 다른미션인 팀 매칭 미

2021년 12월 18일
·
0개의 댓글
·
post-thumbnail

우아한 테크코스 프론트엔드 4기 프리코스 후기

우아한 테크코스 프리코스 우아한 테크코스에 지원하여 1차를 합격하고 프리코스에 시작하게 되었습니다. 3주동안 정말 많은것을 배웠고 각 주차마다 배운것에 대해서 작성해보려고 합니다. 코딩 컨벤션 처음 시작해보는 프리코스 였기에 먼저 지켜야될 컨벤션부터 정리하여 보았

2021년 12월 13일
·
2개의 댓글
·
post-thumbnail

React로 Skeleton Component 만들기

스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 쉽게 지치고 지루함을 느끼므로 단순히 흰색 화면만 보여준다면 많은 사람들은 사이트를 떠나게 될 것이다.이런식으로 유튜브의 썸네일과 제목정보가 올라오기전에 회색으로 띄

2021년 10월 3일
·
0개의 댓글
·

자바스크립트에서의 데이터 타입

자바스크립트에서는 총 7개의 타입을 제공한다.크게 원시타입과 객체타입을 나뉘며 원시객체안에서는 6개의 타입으로 나눌수있다.원시타입숫자타입 : 숫자 정수와 실수 구분없이 하나의 숫자타입만 존재문자열 타입 ; 문자열불리언 타입 : true,falseundefined 타입:

2021년 9월 28일
·
0개의 댓글
·

자바스크립트에서의 변수

이번에는 자바스크립트에서의 변수에 대해서 알아보려고 한다.먼저 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 그 메모리 공간을ㄹ 식별하기 위해 붙인 이름이다. 즉, 값의 위치를 가르키는 상징적인 이름이다.변수에서 값을 저장하는 것을 할당 이라고 하며

2021년 9월 28일
·
0개의 댓글
·