박지연의 코딩이야기

앞서 동적인 UI를 만들기 위해서 render 함수에 ReactDOM.render(, root); 코드를 넣어주어서상태값이 바뀔때마다 render함수를 호출해주는 코드를 짰었다.  이전글 참고https://coogooo.tistory.com/39 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다" data-og-host="coogooo.tistory.com" data-og-source-url="https://coogooo.tistory.com/39" data-og-url="https://coogooo.tistory.com/39" data-og-image="https://scrap.kakaocdn.net/dn/wcPUn/hyX0yEsk4..

리액트(React)에서 State는컴포넌트의 동적인 데이터를 관리하는 데 사용되는 객체=> 동적인 UI를 구현하는 핵심 요소  위에 이미지처럼버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다. 1번째 리액트 UI컴포넌트를 만들어준다.    const Container = () => (      div>        h3>Total Clicks : {counter}h3>        button onClick={countUp}>CLick mebutton>      div>    );   1번째버튼을 누르면 숫자 상태가 변경되어야 하기에 let counter = 0; 초기값 '0'을 하나 선언해준다.       //2번째    let counter = 0;  2번째증가되는 함수를 만들어 ..

기존 리액트 렌더링방식은 React.createElement를 생성해서 root로 렌더링 해주는 방식이였다. 하지만 이 코드는 직관적이지 못하다.container에 넣기 위해서 하나하나 엘리먼트들을 체크해서 넣어야하기때문 더 직관적인 코드 문법이 존재한다.그것이 JSX (Javascript XML)  앞서 리액트 장점4번에서 봤듯이 JSX 사용함으로써 직관적인 코드 사용과 동적 렌더링이 가능해진다.4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 )=> Javascript 결합 코드로 이해하기 쉬움 얼마나 직관적인지 한번 차이를 느껴보자 기존 리액트엘리먼트 생성 코드는 아래와 같다. const btn = React.createElement( "button", ..

리액트(React)는페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다  장점1. 컴포넌트 기반 아키텍처 ( 재사용성 / 모듈화 ) => 속도 증가 및 유지보수 용이  2. 가상DOM (성능최적화 / 효율성 ) => 가상 DOM 에서 먼저 반영 후 변경된 부분만 실제 DOM에 업데이트 3. 단방향 데이터 흐름 (예측가능성 ) => 부모에서 자식으로 데이터 전달 / 상태 관리가 명확하여 버그줄이고 디버깅이 쉬움 4. JSX (Javascript XML) (직관적문법 / 동적 렌더링 ) => Javascript 결합 코드로 이해하기 쉬움 5. 광범위한 커뮤니티 (광범위한 라이브러리) => 신속한 업데이트 및 방대한 자료를 통해 문제해결이 용이 6. Reac..

HTML Hello World! Javascript 1 ) className 속성 사용 // 요소 선택const element = document.querySelector(".old-class");// 클래스 이름 변경element.className = "new-class";  2) classList 속성을 사용  2-1. 클래스 추가 (add) element.classList.add("new-class"); 2.2. 클래스 제거 (remove)element.classList.remove("old-class");  2.3. 클래스 교체 (replace)element.classList.replace("old-class", "new-class"); 2.4. 클래스 토글 (toggle)element.cla..

HTML HTML CSS CSS3 JavaScript jQuery  Javascriptvar li = document.querySelectorAll("#tutorial li");for (var i = 0; i   JavaScript 코드 설명querySelectorAll로 모든 요소 선택:document.querySelectorAll("#tutorial li")는 #tutorial ID를 가진 의 모든 요소를 NodeList로 반환합니다.for 루프로 각 요소 순회:루프를 사용해 각 요소의 클래스 이름(className)을 확인합니다.slice 메서드로 문자열 자르기:className.slice(0, 3)로 클래스 이름의 처음 3문자를 추출합니다.조건문 if (na..

HTML 1 2 3 4 Javascript // 모든 li 태그를 가져옵니다.var items = document.getElementsByTagName("li");// 각 li 태그의 색상을 변경합니다.for (var i = 0; i 설명document.getElementsByTagName("li")는 모든 요소를 HTMLCollection으로 반환for 루프를 통해 모든 요소를 순회하며 스타일을 변경items[i].style.color = "red";로 각 요소의 텍스트 색상을 빨간색으로 설정함결과페이지를 실행하면 요소의 텍스트 색상이 빨간색으로 변경됩니다! 😊 추가 Tip (코드 효율성)최신 JavaScript에서는 querySelectorAll과 forEach를 사용..

앞서서 Scss 아키텍처(구조) 짜는 방법에 대해서 알아봤는데요https://coogooo.tistory.com/32 scss를 컴파일하는 과정에서 .map파일도 같이 생성되게 됩니다.Q. 왜 .map파일이 같이 생성되며 생성되는 이유가 뭘까요? .map 파일은 원본 SCSS 파일과 생성된 CSS 파일 사이의 매핑 정보를 포함합니다.이렇게 함으로써 디버깅 시에 브라우저 개발자 도구에서 원본 SCSS 파일의 위치를 쉽게 추적할 수 있습니다. 소스맵이 필요한 이유는 크게 3가지가 있습니다. 디버깅 용이성: 오류를 찾을 때 원본 SCSS 코드와 어떤 부분이 대응되는지 알기 어려워집니다.소스맵은 이를 해결해줍니다.브라우저에서의 개발자 도구 사용: 개발자 도구에서 .map 파일을 통해, 컴파일된 CSS 코드가 실..

대규모 프로젝트에서 소스 관리가 어려워지는 상황을 방지하기 위해,퍼블리셔가 초기부터 체계적으로 컴포넌트를 관리하고효율적으로 컴파일할 수 있는 SCSS를 소개해 드리려고 합니다.   퍼블리셔는 협업 시 작업 병합과 충돌 해결을 돕는 형상관리가 필수적이며, 대규모 프로젝트에서는 그 중요성이 더욱 커집니다.   퍼블리셔에게 필요한 주요 역량은 웹/소프트웨어 프로젝트의 협업과 파일 관리입니다.형상관리는 이러한 작업물을 체계적으로 관리하고, 협업을 효율적으로 지원하는 중요한 도구입니다.이러한 효율적인 형상관리를 위해서 많은 퍼블리셔들이 Scss를 사용합니다.Scss는 css를 더 체계적으로 관리할 수 있도록 컴파일이라는 작업을 거칩니다. 먼저 scss 설치하는 방법은 다른 블로그에도 잘설명이 되어있어서 링크로 대..

See the Pen Untitled by allis (@qwer273) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스