본문 바로가기

전체 글56

[퍼실리테이터] 공부할게 너무 많은 CSS.. 리액트 공부중에 이런 방식으로 CSS를 작성하는 예시를 보게 되었다.그냥 css를 파일로만 따로 만들어서 사용했던 나는 이 방식을 처음 보았고오호, 이거 현업에서도 사용하는건가? 협업할때 불편한거 아닌가?실제 현업에서는 무엇을 사용할까? 싶어서 프론트퍼실님을 찾아갔다. 그래서 알게 된 사실1. 순수 CSS (그냥 CSS 파일 따로 파서 작성하는거)는 현업에서 잘 사용하지 않는다.2.. 위의 경우... 보통은 버튼별, 검색창별로 스타일 컴포넌트로 빼놓거나 modul.css 자주 사용한다.3.. 현업에서는 modul.css 또는 styled component (CSS in JS)Tailwind Css (라이브러리) *부트스트랩은 별로 추천하지 않는다고 하심. https://tailwindcss.com/ Ta.. 2024. 12. 4.
[React] Map을 리액트에서 사용할때 - 리스트를 반환한다매! 근데 왜 UI가 반복적으로 출력됨? 얘는 리스트가 아니잖아 안녕하세요? 좀 더 발전해온 블로그 주인장입니다.저번에 map 함수에 대해 알아보았는데, 키값을 왜 사용하는지도 몰랐고,그냥 단순히 "이렇게 사용한다" 라고만 작성했는데이제 이 친구에 대해 조금은 알 것 같아요. 오늘은 Map 에 대해 다시 알아보겠습니다.1. Map 을 어디서 사용할까?투두리스트를 만든다. 할일이 많아서 할 일을  많이 추가할것이다.그런데 그럴때마다 공부하기마라탕먹기...계속 추가추가하면 보기도 싫고 나중에 관리하기도 힘들겠지. 그래서 할일이 담긴 데이터를 만든다. todoData = [ { id: 1, title: "공부하기", completed: false }, { id: 2, title: "마라탕먹기", .. 2024. 12. 4.
[JavaScript] 자바스크립트 (이벤트의 세 단계 흐름, Event Bubbling, Event Capturing, Event Delegation) Event Bubbling: 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달되는것을 말함. (bubble up)그림에서는 3번이 가장 깊게 중첩되었음.3번→ 2번 → 1번 순으로 진행됨.3번요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면3번→ 2번 → 1번 순으로 진행됨. div -> form 순으로 alert 뜸 --> FORM DIV P 이벤트 버블링 중단: event.stopPropagation()FORM DIV P Event Capturing: 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것이걸 이해하려면 실제로 이벤트가 어.. 2024. 12. 4.
[JavaScript] 자바스크립트(Event Listenr & Event 객체, Event 종류 모음) DOM Event“어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까요?”Event Listener마우스를 이용해서 버튼을 클릭할 때는 클릭 “이벤트"가 발생한다.⇒ 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수(= 이벤트 리스너)를 호출한다.addEventListener()어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해주어야한다. 1. Property Listener자바스크립트 코드에서 프로퍼티(객체의 속성)로 등록 (=onload 같은 속성에 함수(핸들러)를 할당하는 방식)⇒ 이벤트 핸들러를 DOM 객체의 프로퍼티에 할당하는 방식= 즉, 이벤트를 특정 객체에 속성으로 등록하는 것window.onload = func.. 2024. 12. 3.
[JavaScript] 프로퍼티(Property) 프로퍼티(Property)란 객체의 속성을 의미한다.📌 어떤 객체가 가지고 있는 항목들을 프로퍼티라고 하며, 한국어로는 속성이라고 한다. 프로퍼티는 객체의 상태나 특성을 나타내며, 이를 통해 객체의 정보를 읽거나 수정할 수 있다.자바스크립트에서 객체는 프로퍼티로 구성된다.객체는 키-값 쌍으로 데이터를 저장하는데, 이 키를 프로퍼티 이름, 값을 프로퍼티 값이라고한다.자바스크립트에서 프로퍼티자바스크립트의 객체에서 프로퍼티는 속성을 뜻하며, 보통 객체가 가지고 있는 정보나 기능을 나타낸다.let hamster = { name: "metdol", // 'name'은 프로퍼티 이름, "metdol"이는 프로퍼티 값 age: 2 // 'age'는 프로퍼티 이름, 2는 프로퍼티 값};//.. 2024. 12. 3.
[JavaScript] 자바스크립트(createElement, removeChild&replaceChild) createElement - 요소의 생성: document.createElement(tagName);createElement 메서드에 태그 이름을 넣어서 요소를 생성할 수 있다.생성하고자 하는 요소의 태그 이름을 ()안에 넣으면 된다.appendChild()Node.appendChild() : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.removeChild - 요소의 제거: parentNode.removeChild(node);⇒ 부모노드.removeChild(해당 노드)하나의 노드를 삭제한다. 삭제할 때는 삭제 할 노드를 자식으로 가진 부모 노드에서 실행된다.// 부모 노드const listParent = document.querySelector('ul');const lis.. 2024. 12. 3.

티스토리툴바