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

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

[JavaScript] Array.isArray(data) 뜻

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

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

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

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

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

[자바스크립트 알고리즘] 로마자에서 숫자로 바꾸기

1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요.로마 숫자를 숫자로 표기하면 다음과 같습니다.Symbol: ValueI: 1V: 5X: 10L: 50C: 100D: 500M: 1000로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로

2020년 12월 8일
·
1개의 댓글

[자바스크립트 알고리즘] 여러 개의 문자열 원소를 확인하고, 공통된 시작단어 반환하기

`Array.prototype.every()`는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트하여 `true` 또는 `false`를 반환하는 메서드다.

2020년 12월 4일
·
0개의 댓글

[자바스크립트 알고리즘] 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부 반환하기

숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요.num: 숫자return: true or false (뒤집은 모양이 num와 똑같은지 여부)예를 들어,num = 123return false => 뒤집은 모양이 321 이기 때문num

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

[VanillaJS Project]인스타그램 클론코딩

인스타그램 메인페이지를 클론해보았습니다. 이전까지 만들어 온 바닐라 JS 기능 구현 방법이 많이 적용되었습니다. 이번 프로젝트는 사용자 경험을 고려한 세부적인 기획을 한다기보다는, 자바스크립트의 기본적인 메서드를 연습하는 것과 CSS을 탄탄한 구조로 짜는 것이 목표였습

2020년 12월 1일
·
23개의 댓글

[자바스크립트 알고리즘] 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index 배열 리턴하기

twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면,더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요.nums: 숫자 배열target: 두 수를 더해서 나올 수 있는 합계return: 두 수의 index를 가진 숫자 배열예를 들어,nums

2020년 11월 30일
·
0개의 댓글

[JavaScript] innerHTML로 DOM 생성하기 예시 모음

바닐라 자바스크립트로 작은 웹앱을 만들어 보면서 innerHTML을 쓰는 경우가 많았다. 그런데 항상 다른 상황에서 다른 형태로 만들다 보니 그 때마다 다른 문제에 부딪쳤다. 지금까지 DOM 추가를 위해서 어떤 코드를 짰고, 각각 어떤 문제가 있었는지, 어떻게 해결했는

2020년 11월 29일
·
0개의 댓글
post-thumbnail

[JavaScript] 특정 숫자 범위에서 중복을 제외한 랜덤 숫자 뽑는 방법

사용자 정보를 담은 mock data를 만들고 화면에 랜덤으로 출력하는 코드를 짜게 되었다. 이전까지는 랜덤 데이터 또는 랜덤 숫자를 1개씩만 출력하면 되었기 때문에 하지 않아도 될 고민을 지금 하게 되었다. 랜덤 배열 중 여러 개를 뽑되, 그 여러 개에 중복되는 데이

2020년 11월 29일
·
0개의 댓글
post-thumbnail

[JavaScript Toy Project] Mini Game | 가위바위보 게임 만들기 토이프로젝트

바닐라 자바스크립트로 간단한 가위바위보 게임을 만들어보았습니다. 사용자가 가위, 바위, 보 중에 한 개를 선택하면 컴퓨터 측에서 랜덤으로 선택해, 그 결과를 출력해주는 방식입니다.

2020년 11월 22일
·
9개의 댓글
post-thumbnail

[JavaScript] Unary (+) Operator | 단항 연산자 (+)로 문자열을 숫자로 변환하는 법, 활용예시

자바스크립트에서 문자열을 숫자로 변환할 때 parseInt(), parseFloat(), Number() 등의 메서드를 사용하기도 하지만, 단항 연산자(+)를 사용하면 더욱 간단하고 가독성 좋게 변환할 수 있다.

2020년 11월 20일
·
3개의 댓글

[Web] Semantic Web / Semantic Tag 뜻

Semantic이란 의미론적이라는 뜻입니다. 웹의 각 요소가 어떤 역할을 하고 있는지 의미가 명확히 전달된다면 그것이 바로 Semantic Web이고, HTML의 태그의 명칭을 봤을 때 해당 태그가 어떤 의미를 가지는지 명확히 전달이 된다면 Semantic Tag입니다

2020년 11월 16일
·
0개의 댓글
post-thumbnail

[JavaScript Toy Project] Expense Tracker | 가계부 앱 '작심소비' 토이프로젝트

수입과 지출을 관리할 수 있는 가계부 앱 '작심소비'를 기획해 보았습니다. 수입과 지출을 입력하면 내역을 한눈에 보고 거래 내역을 합산해 주는 기능을 가지고 있습니다.

2020년 11월 15일
·
24개의 댓글
post-thumbnail

[JavaScript Toy Project] Random Meal Generator | 오늘뭐먹지? 토이프로젝트

오늘뭐먹지 서비스는 점심메뉴를 정해야 하는 모든 회사의 막내들을 위해 만들어졌습니다.

2020년 11월 13일
·
0개의 댓글