frontEnd/HTML_CSS_JS

🌈 이벤트 버블링이란? 자식 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 예를 들어 아래에서 Children 클래스를 클릭해도 Parent의 이벤트가 실행된다. import React from 'react'; const ParentComponent = () => { const handleChildClick = () => { console.log('Child clicked'); }; const handleParentClick = () => { console.log('Parent clicked'); }; return ( Click me (Child) ..

.map( ) .filiter( ) .substring( ) 등 우리가 흔히 불러와서 쓰는 매서드들이 있다. 보통 매서드들의 하는 역할을 구글링하고 쓰는 방법을 가져와 적용시키는데 문득 이 매서드들은 어디서 오는가? 궁금해졌다. 그래서 이번에 한번 정리해 보려고 한다. 그리고 우리가 console.log 를 찍을 때 마다 나오는 Prototype가 뭔지도 알아야하지 않을까!? 같은 맥락이니 함께 정리한다. 프로토타입의 개념과 활용 프로토타입이란 무엇인가? 프로토타입 = 유전자 라고 생각하면 이해 쉬움 ▶ 프로토타입은 객체 지향 프로그래밍에서 상속을 받는 객체의 원본. ex) 아버지(프로토타입) -> 아들(상속받는 객체) ▶ 자바스크립트에서 모든 객체는 __proto__라는 내부 프로퍼티를 가지고 있는데,..

 JS에서 사용하면 좋을 8가지 코드 팁! 고고~! 1. 구조 분해 할당을 이용한 변수 swap 코드는 a와 b의 값을 서로 바꾸기 위해 구조 분해 할당을 사용. a와 b의 값을 배열로 묶어주고, 그 값을 다시 순서를 바꾼 배열로 할당함으로써 변수를 스왑할 수 있다. let a = 5; let b = 10; console.log('스왑 전: '); console.log('a:', a); // 출력: a: 5 console.log('b:', b); // 출력: b: 10 // 구조 분해 할당을 사용하여 변수 스왑 [a, b] = [b, a]; console.log('스왑 후: '); console.log('a:', a); // 출력: a: 10 console.log('b:', b); // 출력: b: 5..

JS를 공부하고 React를 연이어 공부했을 때 느낀점은 동작원리가 중요하다는 거다. useEffect를 쓸 때든, setTimeout를 쓰든 내가 원하는 순서와 흐름으로 함수가 작동해야하는데 이게 엉키면 원하는 출력값이 안나온다. ex) setstate('안녕하세요')로 state를 관리했는데 console에 null이 찍히는 경우 등등 이러면 난감하다... 그러면 이제 디버깅의 늪에 시달리는데... 이때 중요한게 동작원리와 흐름을 알아야 디버깅도 가능하다는 점! 따라서 프론트개발자로서 동작원리에 대해서 공부해 보려한다. 동기적 vs 비동기적 ? - 동기적 동기적인 작업은 순차적으로 실행됨. 한 작업이 시작되면 그 작업이 완료될 때까지 다음 작업이 대기. ex)코스요리 : 차례대로 먹어야 다음을 먹을..

개발을 하다보면 이름 짓기를 계속하게 된다. 이러다 작명소 차려도 될듯... 팀활동을 할 때 가장 턱 막혔던 부분이 팀 이름 짓기, 팀구호 짓기 였는데 개발을 하며 이름 짓기를 이렇게 많이할 줄을 처음엔 생각이 못했다 : ( 그래서 처음엔 classname을 막 짓곤 했는데 개발을 계속하다보니 이게 그냥 지으면 안되는 것이었다!! 협업에서도 규칙을 정하는게 중요하고 내가 리펙토링을 할 때에도 중요하더라. 그래서 이번에 클래스 네임을 짓는 방법을 찾아보았다. BEM 소개 및 기본 원칙 BEM은 웹 개발에서 CSS와 HTML을 구조화하고 유지보수하기 쉽게 만들어주는 방법론이다. 이름은 Block(블록), Element(요소), Modifier(수정자)의 약자를 따온 것. - Block (블록) 블록은 독립적..