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

[JavaScript] 비동기 처리의 의미, 콜백 패턴의 문제점, Promise의 등장 배경

휘몰아치는 프로젝트 속에서 백엔드 데이터를 받아오기 위해 기계적으로 썼던 fetch, then 등 자바스크립트의 비동기 처리를 위한 문법을 다시 들여다보고 기본을 다잡고자 정리해보려 한다. 프로미스란 무엇이고, 왜 등장했을까? 동기 vs 비동기 의미 짚고 넘어가기

약 5시간 전
·
0개의 댓글

[JavaScript] 코드 리팩토링: Set 객체를 이용해서 배열 중복 제거하기

코드 리팩토링을 하다가 백엔드에서 보내 준 데이터에 중복이 있는 것을 발견했다. 중복을 없애기 위해 Set 객체를 사용해보기로 하였다.

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

[CSS]깨진 CSS 고치기 프로젝트..

이전에 진행한 프로젝트를 다시 npm start해서 열어보니 그 때는 문제가 없었던 CSS가 깨져서 보이기 시작했다.. CSS 수정하기 시작..!

2021년 2월 22일
·
0개의 댓글
post-thumbnail

[Team Project] Airbnb 사이트 클론 프로젝트

세계 최대의 숙박 공유 서비스인 에어비앤비는 보다 광범위하고 다양한 종류의 숙소 및 서비스를 공급합니다. 집주인은 숙소에 대한 소개, 사진, 숙소의 규칙과 같은 여러 형태의 정보들을 쉽고 자세하게 설명해 놓으며, 이용객은 자신이 원하는 숙박 유형, 날짜, 위치, 인원

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

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

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

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

에러창만 바라보고 있는 나, 이전보다 얼마나 성장했을까?

마지막 3개월차. 위코드에서의 마지막 프로젝트를 마치고 쓰는 회고록 겸 기업협업 후기

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

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

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

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

[React] PropTypes 쓰는 이유, 방법

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

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

[React] Default Export vs Named Export

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

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

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

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

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

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

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

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

[JavaScript] Array.isArray(data) 뜻

프로젝트 중, 데이터 형식 때문에 골머리를 썩던 백엔드 분의 자바스크립트 문법 질문에 당황했다. 알고 보니, 인자가 Array 타입인지 판별하는 메서드였다.괄호 안에 객체를 넣고, 객체가 array면 true, 아니면 false를 반환한다.

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

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

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

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

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

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

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

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

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

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

[React] Nivo 차트 라이브러리 장점, 단점

기업협업 프로젝트에서 오만가지 차트 라이브러리는 다 써 보는 것 같다. 그 중에서 Nivo 차트만큼 장단점이 뚜렷한 라이브러리도 없을 것 같다.

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

[OS] 싱글스레드, 멀티스레드의 의미

먼저 프로세스와 스레드의 차이를 알아보았다. 프로세스: 운영체제로부터 자원을 할당받는 작업의 단위 디스크로부터 메모리에 적재되어 운영체제로부터 주소 공간, 파일, 메모리 등을 할당받으며 이것들을 총칭하여 프로세스라고 함 함수의 매개변수, 복귀 주소, 로컬 변수와 같은

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

[Node.js] "비동기"로 이벤트처리를 한다는 말의 의미

코드가 순차적으로 실행하되, 작업이 오래 걸리거나 무거운 일을 차례대로 하기까지 기다리지 않고 다음 이벤트도 동시다발적으로 실행된다.

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

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

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

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

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

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

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