profile
빵굽는 프론트엔드 개발자
태그 목록
전체보기 (77)JavaScript(32)자바스크립트(25)리액트(15)CSS(9)위코드(8)라이브러리(7)React(6)프로미스(6)html(5)WeCode(5)토이프로젝트(5)promise(4)Fetch API(4)DOM(4)코드카타(4)material ui(4)알고리즘(4)차트(4)그래프(3)프로젝트(3)Fetch(3)toy project(2)Recharts(2)async(2)비동기(2)node.js(2)useEffect(2)vue(2)await(2)responsive web(2)콜백함수(2)Math.random(2)팀프로젝트(2)인스타그램(2)팀워크(1)lottie(1)date picker(1)XMLHTTPRequest(1)(1)무한루프(1)반응형 웹(1)프론트엔드(1)기업협업(1)localhost(1)moment(1)Exchange Rate(1)Responsive Website(1)레거시(1)VanillaJS Toy Project(1)반응형 웹사이트(1)안녕히계세요 여러분 짤(1)포트폴리오(1)keydown(1)이벤트 캡쳐링(1)가위바위보(1)Hangman(1)회고록(1)Unary Operator(1)스위치(1)중복제거(1)promise chain(1)getElementById(1)toLowerCase(1)toUpperCase(1)단항 연산자(1)티스토리(1)select(1)callback Hell(1)삼항연산자(1)타입(1)vuex(1)inline block(1)setTimeout(1)테이블(1)axios(1)인턴(1)버튼(1)hook(1)스프레드 연산자(1)전역변수(1)localstorage(1)block(1)에어비앤비(1)개발자(1)inline(1)InnerHTML(1)Movie Booking(1)spread operator(1)proptypes(1)youtube(1)addEventListener(1)ipinfo(1)노드JS(1)조건부렌더링(1)starbucks(1)db(1)slice(1)RDBMS(1)semantic web(1)이벤트 버블링(1)행맨게임(1)vue-lottie(1)Nivo(1)ES6(1)mutations(1)modal(1)set(1)charAt(1)git(1)register page(1)HTTP Request(1)Promise Chaining(1)keypress(1)숫자변환(1)로띠(1)scss(1)콜백지옥(1)Root(1)프로미스체인(1)semantic tag(1)환율계산기(1)uuid(1)클론코딩(1)BEM(1)속성값(1)바닐라js(1)querySelector(1)싱글스레드(1)노드(1)슬라이더(1)catch(1)clone coding(1)코드 리팩토링(1)웹개발(1)
post-thumbnail

[React] 직접 구현한 Pagination 컴포넌트를 Material-UI 라이브러리로 변환하기

숙소 리스트 페이지에서 직접 제작한 페이지네이션 부분을 Material-UI 를 사용하여 바꾸어보았다.

2021년 2월 12일
·
0개의 댓글
·

[React] 가독성을 높인 조건부렌더링

컴포넌트 함수 내부에서 특정 값에 따라 선택적으로 렌더링하는 것을 조건부 렌더링이라고 한다. 가독성을 높이는 조건부 렌더링 방법과 특징을 알아보고 어떻게 가장 최적화된 코드를 작성할 수 있는지 알아보았다.

2021년 2월 3일
·
1개의 댓글
·

[React] PropTypes 쓰는 이유, 방법

작업하는 프로젝트의 규모가 커질 수록 생각지 못한 곳에서 에러가 발생하는 일이 잦아진다. 이를 방지하기 위한 방법으로, PropTypes를 활용하여 타입(type)을 확인하는 것이 대표적이다.

2021년 2월 1일
·
4개의 댓글
·

[React] Default Export vs Named Export

협업을 하면서 다른 팀원들의 코드를 살펴보고 내 코드에 적용할 기회가 아주 많아졌다. 오늘 정리해보고 싶은 포인트는 default export와 named export의 차이점이다.

2021년 1월 29일
·
0개의 댓글
·

[React] Material-UI Select Box 사용방법, 커스텀하기

이번엔 구체적인 날짜 말고, 년도와 월을 선택해서 조회하는 기능을 붙이게 됐다. Date Picker 까지는 필요 없을 것 같고 기존 한전 사이트에도 셀렉트박스가 있길래 나도 적용하기로 했다.

2021년 1월 28일
·
1개의 댓글
·
post-thumbnail

[React] Recharts 차트 라이브러리 커스텀하는 방법

리차트 라이브러리 커스텀 하나 때문에 이틀 보내고 쓰는 글

2021년 1월 27일
·
0개의 댓글
·

[React] Recharts 차트 라이브러리 사용법

한전 데이터를 시각화하는 업무를 맡게 됐다. 사업장의 년도별, 월별, 일별, 시간별 사용량/요금현황 데이터를 차트로 한번에 보여주어야 한다. 나는 가장 군더더기 없는 Recharts 라이브러리를 선택해보았다.

2021년 1월 26일
·
3개의 댓글
·

[React] Material-UI 라이브러리 테이블 커스텀하기

한전 데이터를 시각화하는 업무를 담당하게 됐는데, 예쁜 차트를 외에도 데이터 테이블도 만들어야 했다. html 테이블 태그로도 만들 수 있겠지만 나는 material-ui 라이브러리를 커스텀해서 테이블을 만들어보았다.

2021년 1월 26일
·
0개의 댓글
·
post-thumbnail

[React] React Datepicker 라이브러리 사용법

한전 데이터 시각화 중, 선택한 날짜 또는 선택한 기간 동안의 전기사용량 데이터를 불러오는 기능을 추가하게 되었다. 내가 선택한 라이브러리는 React-Datepicker 이다.

2021년 1월 25일
·
4개의 댓글
·

[React] Fetch에서 Axios로 변환하는 방법

Axios와 Fetch, 언제 쓰는지 Axios 사용하기 좀 더 편리하다. -> 개인적인 생각으로는 사용법이 살짝 다르지만, 전체적으로 비슷한데, axios 가 좀 더 사용자가 인지하기 쉽게? 사용하기 쉽게? 만들려고 노력한 흔적이 보인다.(는 아래 코드를 통해서 확

2021년 1월 15일
·
0개의 댓글
·
post-thumbnail

[React] 리액트 그래프/차트 라이브러리 모음

기업협업 프로젝트에서 다양한 차트 라이브러리를 사용해야 해서 직접 사용해 본 라이브러리나 리액트 개발자들 사이에서 유명한 라이브러리를 모아 보았다. https://nivo.rocksNivo.rocks커스텀 끝판왕. 직접 실행해보고 바로 코드 복붙 가능걍대박인데

2021년 1월 15일
·
4개의 댓글
·
post-thumbnail

[React] Material-UI로 구현한 가격필터 슬라이더 성능 개선하기

에어비앤비 숙소 리스트 페이지의 가격 필터를 구현했는데, 슬라이더가 유난히 느리게 반응하는 것이 신경쓰였다. 슬라이더를 material-ui 라이브러리를 활용해서 내 앱이 무거워진건 줄 알았는데 정말 비효율적인 코드를 짰다는 것을 나중에야 알게 됐다.

2021년 1월 4일
·
2개의 댓글
·
post-thumbnail

[React] 리액트 수량 더하기, 빼기 버튼 구현하기

리액트로 프로젝트를 진행하던 중, 필터 팝업에서 plus, minus 버튼을 구현하게 되었다. 처음에는 대체 어떻게 접근할지 감이 안 왔는데, 차근차근 접근하다 보니 구현할 만 했다. 다른 기능들이 워낙 헬이었어서...

2021년 1월 3일
·
0개의 댓글
·
post-thumbnail

[React] useEffect 무한루프 탈출하는 방법

기존에 클래스형 컴포넌트 방식으로 짠 코드를 함수형 컴포넌트로 변환을 했는데, 특정 컴포넌트만 클릭하면 미친듯이 렌더가 일어나 브라우저가 다운되는 현상을 겪었다. 알고 보니 componentDidMount를 대체하는 함수인 useEffect 에서 무한루프가 일어난 것이

2021년 1월 3일
·
0개의 댓글
·
post-thumbnail

[React] 코드 리팩토링으로 비슷한 기능을 하는 함수 합치기

리액트로 장바구니 페이지의 기능을 짜다가, 장바구니 수량을 수정하는 기능을 추가하게 되었다. 처음에는 addItem()과 subtractItem() 메서드 두 개를 썼다가, 하나로 합칠 수 있다는 멘토님의 리뷰에 어떻게 합칠지 고민하기 시작했다.

2020년 12월 27일
·
0개의 댓글
·
post-thumbnail

[Team Project] Instagram Clone Project | 리액트 인스타그램 클론 프로젝트

사진, 동영상, 커머스 서비스를 이용할 수 있는 SNS인 Instagram을 React 및 Sass를 이용하여 클론해 보았습니다.

2020년 12월 13일
·
0개의 댓글
·
post-thumbnail

미숙한 결과물을 남들에게 공개할 줄 아는 용기

같이 공부하는 누구누구의 말처럼 '머리 박아가며' 리액트로 프로젝트를 진행하면서, 아무것도 모르는 사람이 당장 어떤 기능을 구현해야 하는 그 절박함과 답없음을 몸소 느끼게 되었다. 뭐든 어느 수준 이상 공부를 한 후 남에게 보여준 내게, 이번에 리액트를 처음부터 공부하

2020년 12월 13일
·
12개의 댓글
·