profile
빵굽는 프론트엔드 개발자
태그 목록
전체보기 (78)JavaScript(32)자바스크립트(25)리액트(15)CSS(9)위코드(8)라이브러리(7)React(6)프로미스(6)WeCode(5)토이프로젝트(5)html(5)알고리즘(4)차트(4)코드카타(4)Fetch API(4)material ui(4)promise(4)DOM(4)vue(4)그래프(3)프로젝트(3)Fetch(3)useEffect(2)Recharts(2)await(2)mutations(2)async(2)비동기(2)node.js(2)responsive web(2)toy project(2)콜백함수(2)Math.random(2)팀프로젝트(2)인스타그램(2)웹개발(1)팀워크(1)lottie(1)date picker(1)XMLHTTPRequest(1)(1)무한루프(1)반응형 웹(1)프론트엔드(1)기업협업(1)선택하기(1)localhost(1)moment(1)Exchange Rate(1)Responsive Website(1)VanillaJS Toy Project(1)반응형 웹사이트(1)포트폴리오(1)keydown(1)이벤트 캡쳐링(1)nuxt.js(1)반응형웹(1)가위바위보(1)Unary Operator(1)회고록(1)행맨게임(1)스위치(1)중복제거(1)promise chain(1)getElementById(1)toLowerCase(1)toUpperCase(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)Hangman(1)vue-lottie(1)Nivo(1)ES6(1)Transitions(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)쿠폰(1)바닐라js(1)querySelector(1)싱글스레드(1)노드(1)슬라이더(1)catch(1)clone coding(1)코드 리팩토링(1)nuxt(1)
post-thumbnail

[Vue] Nuxt.js 에서 transitions 활용하여 팝업 애니메이션 구현하기

프로젝트 진행 중 jQuery로 구현된 일부를 nuxt.js에서 제공하는 기능인 transitions를 활용하여 대체해보았다. 실제 웹에서 어떻게 구현되었는지를 예시를 들어서 정리해보았다.

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

[Vue] Nuxt.js를 활용하여 웹에서 목록 선택 기능 구현하기

웹뷰에 이어 반응형웹 개선이 진행중이다. 새로 적용(적응^^)한 Nuxt.js를 활용하여 목록에서 선택하는 메서드를 어떻게 store로 관리하는지 정리해보고자 한다.

2021년 5월 16일
·
0개의 댓글
post-thumbnail

[Vue] 스위치 모양 Lottie json 파일 삽입하고 기능 추가하는 방법 | vue-lottie

B2B회원이 숙소 예약을 하면, 입실 전까지는 업무예약과 일반예약을 변경할 수 있는 기능이 추가되었다. 추가된 기능에서는 디자인 팀에서 제공한 Lottie(로띠) 파일을 삽입해야 했는데, 여기에서 로띠란 After Effect로 만들어낸 움짤 같은 json

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

[Vue]Vuex의 state는 mutations만으로 변경한다.

쿠폰을 리스트별로 중복으로 선택하는 기능을 구현하면서 mutations와 lodash의 소중함을 배웠다.기존의 쿠폰적용 페이지는 다음과 같다. 업데이트 후의 모습은 찐 업데이트 후 업데이트할 예정..(?)

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

[JavaScript] 이벤트 캡쳐링, 이벤트 버블링 개념, 방지하는 방법

HTML 요소에서 이벤트가 발생하면 해당 요소를 포함한 모든 조상 요소에 이벤트를 전달한다. 왜 전달하는지 알아보고 이벤트가 전파되는 과정을 설명한다.

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

[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법

fetch 함수는 XMLHttpRequest 객체보다 최근에 나온, HTTP 요청 전송 기능을 제공하는 Web API다. 데이터를 받아오기 위해 습관처럼 쓰던 fetch에 대해 정리해보았다.

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

[JavaScript] 프로미스 체이닝, 정적 메서드 정리

프로미스는 then, catch, finally 후속 처리 메서드를 활용하여 콜백 헬 문제를 해결한다. 후속 처리 메서드를 이은 프로미스 체이닝과, 프로미스 객체에서 기본적으로 제공하는 5가지 정적 메서드를 알아보자.

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

[JavaScript] Promise가 비동기 처리를 하는 방식, 프로미스의 메서드, 에러 처리 방법

앞서 자바스크립트의 비동기 처리를 위해 콜백 패턴을 사용하는 경우 콜백 헬이 발생하고 에러 처리가 어려워지는 단점이 발생한다는 것을 살펴보았다. 이를 보완하기 위해 ES6에서 등장한 Promise에 대해 알아보자.

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

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

기능 구현만을 위해 백엔드 데이터를 받아오기 위해 기계적으로 썼던 fetch, then 등 자바스크립트의 비동기 처리를 위한 문법을 다시 들여다보고 기본을 다잡고자 정리해보려 한다. 프로미스란 무엇이고, 왜 등장했을까?

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

[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일
·
3개의 댓글

[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개의 댓글