전체 글

브라우저마다 약간의 차이는 있지만, 브라우저에서 기본적으로 제공되는 스타일은 예쁘지 않습니다.따라서 보통 기본 스타일은 없애고 입맛에 맞게 새로운 스타일을 입히게 됩니다. 버튼의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.button { border: 0; /* 테두리 없애기 */ background-color: transparent; /* 배경을 투명하게 */}또는button { cursor: pointer; /* 커서를 손 모양으로 */ background: none; /* 배경 없애기 */ border: none; /* 테두리 없애기 */} 리스트의 기본 스타일을 없애고 싶다면 아래와 같은 css 스타일을 적용해주면 됩니다.ul,ol { l..

🔮 디자인 패턴이란디자인 패턴이란 프로그램을 개발하는 과정에서 사용되는 설계 패턴들을 정의한 것입니다.과거의 웹 사이트보다 훨씬 복잡해지고 다양한 개발 프레임워크를 사용하는 지금, 효율적인 웹 사이트의 구축이나 유지보수를 위해 컴포넌트 단위의 활용은 더욱 중요한 사항이 되었습니다. 따라서 컴포넌트를 구성하는 방법에 대한 다양한 디자인 패턴이 생겨나게 되었으며,패턴마다 장단점이 존재하므로 프로젝트의 특성에 맞는 디자인 패턴을 선택해야 합니다. 리액트의 주요한 디자인 패턴은 다음과 같습니다.컴포넌트 기반 아키텍처(component-based architecture)상태 관리 패턴(state management pattern)프레젠테이션-컨테이너 패턴(presentation-container pattern)..

🌱 생명주기란?리액트의 생명주기란 컴포넌트가 생성되어 사용되고 소멸되는 일련의 과정을 뜻합니다.모든 리액트 컴포넌트에는 생명주기 이벤트가 발생합니다.이 이벤트를 기반으로 컴포넌트가 수행할 동작과 실행 시점을 제어하고 정의할 수 있습니다. 생명주기 이벤트에는 3가지 종류가 존재합니다.생성(mounting) 이벤트: 리액트 요소가 처음으로 돔에 추가될 때 발생갱신(updateing) 이벤트: 속성이나 상태가 변경되어 리액트 요소가 갱신될 때 발생제거(unmounting) 이벤트: 리액트 요소가 돔에서 제거될 때 발생함수형 컴포넌트에서 이벤트를 발생시키기 위해 주로 사용하는 훅은 'useState'와 'useEffect'입니다.아래에서 아이템을 추가할 수 있는 쇼핑 리스트 애플리케이션을 예시로 각 이벤트를 ..

🪴 웹 렌더링이란웹 렌더링이란 실시간으로 웹 페이지가 그려지는 과정으로, 웹 페이지를 사용자에게 보여주기 위한 과정을 의미합니다.- 요즘IT대부분의 웹 브라우저를 분해해보면, 그 안에는 2개의 엔진이 내장되어 있습니다.먼저 '렌더링 엔진'은 html과 CSS 문서를 읽고, 사용자가 볼 화면을 그려내는 역할을 합니다.다른 하나인 '자바스크립트 엔진'은 자바스크립트 코드를 읽고, 코드가 가지고 있는 기능을 작동시키는 역할을 합니다. 일반적으로 렌더링 과정은 매우 빨리 처리되기 때문에 해당 과정을 눈으로 확인하기는 어렵습니다.그러나 불러와야 할 파일이 너무 무겁거나 개수가 많은 경우, 처리되는 데 걸리는 시간이 길어져 사용자는 불편을 느낄 수 있습니다.따라서 렌더링의 방식에 따라 초기 로딩 시간, 검색 엔진..

🌵 문제 상황프로그래머스의 문제 중 'JadenCase 문자열 만들기'에서 문자열 중 원하는 문자만 대문자로 바꾸기 위해 '='을 이용하여// 🚫틀린 코드입니다string[i] = string[i].toUpperCase();위와 같은 코드로 새로운 문자를 할당했지만, 문자가 제대로 변경되지 않았습니다. 그 이유는자바스크립트의 원시값은 변경 불가능 = 불변하기 때문입니다.(전체값을 재할당은 가능)따라서 원시값이란 무엇인지와 문자열의 특정 문자를 변경하는 방법에 대해 알아보겠습니다. 🌵 원시값(primitive, 원시 자료형)객체가 아니면서 메서드 또는 속성도 가지지 않는 데이터로, 변수에 저장된 값에 직접적으로 접근할 수 있는 단순한 데이터입니다.원시값의 종류에는 7가지가 있습니다.String(문자)..

🔑 key란키는 리액트가 어떤 항목을 변경하거나 추가 또는 삭제할지 식별하는 것을 돕습니다.키는 각 요소에 고유성을 부여하기 위해 배열 내부의 요소에 지정해야 하고, 그 값은 변하지 않아야 합니다.전체 범위에서 고유할 필요는 없고, 형제 요소들 사이에서만 고유한 값이면 가능합니다. 따라서 대부분의 경우, 데이터의 id를 키로 지정하여 사용합니다.function NumberList({ numbers }) { const listItems = numbers.map((number) => {number} ); return ( {listItems} );}렌더링 한 항목에 대한 안정적인 id가 없거나 명시적으로 키를 지정하지 않으면, 대안으로 요소의 인덱스를 key로 사용할 수 있습니다.(리액..