post-thumbnail

캡처링과 버블링, 이벤트 흐름이란?

우리가 자바스크립트에서 동적으로 웹을 만들기 위해서 가장 많이 사용하는 addEventListener 메소드를 사용했을때, 이벤트가 작용하는 대상을 찾아가는 과정이벤트 흐름에는 두 가지 흐름이 있는데 그게 바로 캡처링과 버블링 단계임window 객체 > document

3일 전
·
0개의 댓글
·
post-thumbnail

카페인마켓 트러블 슈팅 - 멋사 2기 프로젝트

문제 상황하나의 html파일과 API로 yourProfile, myProfile를 동시에 구현해야 했음following/follower 리스트에서 프로필로 넘어갈 때, 해당 유저에 맞는 yourProfile을 보여줘야 함토큰에서는 상대방의 accountname을 가져

2022년 7월 30일
·
0개의 댓글
·
post-thumbnail

Browser Rendering

✨ Rendering? 렌더링은 개발자가 작성한 html, css, javaScript 등의 문서를 읽어서 사용자가 볼 수 있게 화면에 보여주는 과정입니다! 절대 어려운 개념이 아닙니다! 브라우저들은 각자 다른 렌더링 엔진을 사용하고 있습니다. 대표적인 엔진으로는 크

2022년 7월 11일
·
0개의 댓글
·
post-thumbnail

Virtual DOM 🐟

DOM이란, HTML 코드를 해석해서 요소들을 트리 형태로 구조화하여 웹브라우저 화면에 나타게 해주는 인터페이스를 의미한다. 📍 DOM의 특징DOM을 JavaScript를 통해 문서와 문서 요소에 접근하여 웹 화면의 콘텐츠를 추가, 수정, 삭제 또는 이벤트 처리를

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

코딩에 집중이 안돼요 슨생님덜

지난주 회고팀과 프로젝트팀에서 대화를 생각해보면 많은 동기들도 나처럼 코딩에 온전하게 집중하기 어려운 시기인 것 같다. 멋쟁이사자처럼 FE 2기가 벌써 3/4 지점을 넘어서고 있다. 부트캠프 3개월을 달리면 에너지가 소진되기 충분하다. 팀프로젝트를 앞두고 수업 외적으로

2022년 7월 4일
·
0개의 댓글
·
post-thumbnail

호이스팅

호이스팅이란, 변수의 선언문이 코드의 선두로 끌어올려지는 것처럼 동작하는 자바스크립트 고유의 특징이다. 자바스크립트가 실행되면 가장 먼저 소스 코드의 평과과정 → 런타임(순차적으로 코드를 읽음)이 일어나는데, 평과과정에서 가장 먼저 class, function,var

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

React 블로그 구현 과제 중 만난 이슈들

상황) useState의 값을 전달하는 함수를 props로 넘겨주고 싶었고, 라우터가 설정된 경우 render 함수를 사용해야 했다. (App.jsx -> Homepage.jsx -> Header.jsx) 화살표 함수로 전달하는 과정이었는데 { () => {리턴값}

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

낮에 활동하는 올빼미 🦉

지난주부터 리액트 공부, 리액트 홈페이지 클론 과제, 카페인마켓 팀 프로젝트 시작 등등으로 매일 3시 이후에 잤다. 너무 피곤한 채로 쓰러져도 이미 3~4시가 되어서 몸이 적응을 못했는지 불면증에 시달리며 5시 가까이 되어서 잠든 적도 있다. 빨리 자야된다!라는 생각으

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

Hook Hook Hook

useState, useEffect, useRef, 일반 변수 비교

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

리뉴얼된 회고 방식과 React에 바쳐진 주말

지난 주 메이커준님과의 커피챗 이후 처음으로 회고팀 회의를 가졌다. 기존의 회고 방식에 대한 의문점이 있었기 때문에 새로운 방식으로 바꾸는 시도를 했다. 기존의 우리팀 방식은 KPT 템플릿에 맞준 회고였다. 💞 기존 회고 방식1\. 일주일을 보낸 한 마디 2\. Ke

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

fetch랑 조금 친해짐

💡 오류가 발생한다면? 아래는 일부러 json 주소를 틀리게 작성하여 오류를 내보았다.데이터를 불러오지 못하기 때문에 catch에서 오류 문구가 실행되었다. 그렇다면 여기서 하나의 의문점이 있다. 똑같이 주소를 틀리게 작성하고 오류를 냈는데 왜 then에 있던 콘솔로

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

빙글빙글 돌아가는 Component

컴포넌트로 파일을 여러개 쪼개서 관리하는 이유는 뭘까? 사실 자바스크립트는 Single Page Application, 즉 단일 스크립트로 작성되는 언어인데 보기에도 어려운 분리 과정! 바로 다음과 같은 이유일 것이다.1\. 유지/ 보수 2\. 성능 개선 예를 들어

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

Node.js 기초 지식

요청을 받으면 요청한 내용을 보내주는 프로그램 (요청을 처리하는 기계)24시간 작동하고 있는 기계HTTP 요청 (암기!)읽기 (GET)쓰기 (POST) : 댓글 작성, 블로그 포스트 작성수정 (PUT)삭제(DELET)자바스크립트는 브라우저가 엔진을 사용해서 해석엔진

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

두 달 만의 첫 휴가를 받다

멋사 FE 2기 캠프를 3월 28일부터 지금까지 휴일 없이 끊임 없이 달려왔다. 평일에는 아침 9~6시까지 수업을 듣고 복습과 과제로 1~2시에 잠들었고 토요일 오전은 책 출판 회의 오후는 JS 기초반 수업, 일요일은 신촌 모각코 스터디까지!! 주말에 조금씩 쉬면서 컨

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

유튜브로 시작해서 스터디로 끝난 일주일

2022-05-27 멋쟁이 사자처럼 주간 회고를 마치고... 이번주에는 비동기와 관련된 개념과 promise, async, await, fetch를 배웠다. 비동기의 중요성 그리고 콜 스택에 불려오는 과정까지 하나하나 쉬운 것이 없었다. 그래도 이번주에는 자발적으로

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

JSON - 서버와 통신하기

드림코딩 강의 참고https://www.youtube.com/watch?v=FN_D4Ihs3LEHTTP : Hypertext Transfer Progocal hypertext는 링크, 문서, 이미지 모두 포함한 자료 AJAX: Asynchronous Java

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

동기/ 비동기

자바스크립트는 원래 기본적으로 동기적 처리를 한다. 즉 위에서 아래로 하나씩 순차적으로 실행을 하게 된다. 비동기 함수들은 바로 실행이 되지 않고 웹브라우저 API를 호출하여 일단 백테이지와 콜배큐에 추가하고 다른 함수들이 다 실행된 후에여 호출 스택에 넣어 실행한다

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

Scope, Closure, Class

스크립트 어디든 접근이 가능하다협업, 라이브러리 사용 시 충돌 때문에 지양중괄호 안이 블럭중괄호 안에서만 접근 가능블록 내부에서 정의된 변수는 블록 실행이 끝나면 해제설명)블럭 내부에서 var로 선언하면 밖에서도 값을 불러올 수 있음블럭 내부에서 let으로 선언하면 밖

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

객체지향언어- 커스텀 생성자

📌 객체지향언어란? 객체와 객체가 메소드를 통해 상호작용하는 것 객체지향은 표현하고자 하는 사물을 추상적으로 표현 행동 = 함수 = 메소드 상태 = 프로퍼티 아래 코드처럼 어떤 대상에 대한 정보를 알 수 있도록 중요한 내용을 간추린 것이 바로 '추상화'이다. 📌

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

forEach

📌 forEach는 무엇일까? 반복문 for의 고차함수라고 보면 된다. 개발을 하다보면 for문과 if 함수를 함께 자주 사용하고 있는데, 이러한 방법은 조건문이나 반복문의 로직을 쉽게 읽히지 않을 때가 있다. _**이를 보완하기 위해서 필요한 것은 forEach!

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