본문 바로가기

전체 글150

리액트 파이버를 알아보자 리액트 파이버란?JSX는 페이스북이 만든 임의의 문법이기 때문에 JS 표준이 아니다. 그렇기 때문에 JSX문법을 포함한 리액트 코드는 JS엔진이 이해할 수 있도록 babel과 같은 트랜스파일러를 통해 ECMAScript로 변환되는데, 이 때 react.createElement() 호출이 반환된다. 이해를 돕기 위해 예시 코드를 첨부한다.const MyComponent=( Today )// ECMAScript로 변환var MyComponent=React.createElement( 'div', null, React.createElement('span', null, 'hello world'),) 이렇게 반환된 element를 DOM에 반영하기 전에 먼저 가상DOM에 .. 2025. 1. 15.
CSS의 기본 정의캐스케이딩 스타일 시트의 약자.여러 스타일이 같은 요소에 적용될 수 있다.CSS는 규칙으로 작동한다. CSS 규칙이란?선택자(스타일링하는 대상)과 선언(스타일링 방법)의 조합 핵심 개념Selector(선택자), Property(속성), Value(값)selector요소 선택자div클래스 선택자.blog-post아이디 선택자#main-title속성 선택자[disabled]전체 선택자*거의 쓰이지 않음. 대신 body 태그 선택자를 사용하는 게 나음propertybackground-colorwidthcolormargindisplayetc..valuered30%#fa923f10pxblocketc..  값의 종류값은 프로퍼티와 연관되어있으며 대략 네 가지로 나눌 수 있다.사전 정의된 옵션 값 (헥스코드, 숫.. 2025. 1. 11.
클린코드 자바스크립트 강의 내용 정리 유데미의 클린코드 자바스크립트 강의를 듣고 정리한 내용입니다. 추후 가독성있게 수정하겠습니다. 자바스크립트 코드 스타일- AirBnB, Google, ECMA, JShint, JSLint, Prettier, ESLint 몽키 패치 (Monkey patch) = 안티패턴: 런타임 중인 프로그램의 내용이 변경되는 행동을 의미 (런타임 과정에서 사용자의 의도와 다르게 동작하는 것)자바스크립트는 몽키 패치 언어다. 자바스크립트와 다른 언어들의 유사성문법 - JAVA문자열, 배열, 정큐, 표현식 - 펄함수 - 오크클로저, 스코프 환경 - 스키마프로토타입 - 셀프이벤트 - 하이퍼토크 https://jsisweird.com/ JS is weirdA fun and tricky JavaScript quizjsisweir.. 2024. 12. 10.
리액트의 동시성 렌더링에 대해 알아보자 (리액트 인터뷰 가이드 5장 보충) 서론참고서에 동시성 렌더링 내용이 아주 조금 써있었는데 궁금해서 더 알아봤다. 등장 배경기존 렌더링 방식의 문제렌더링을 시작해서 화면에 그리기까지 실행을 멈출 수 없었음리액트 변경 비교 알고리즘이 매우 빨라서 보통은 멈춰도 상관X. 하지만 연산이 길어진다면?→ 프레임이 드롭되고 입력은 한참 후에 예약되면서 좋지 않은 사용자 경험 제공 ex)여기서 프레임이 드롭된다는 것은 특정 순간에 리소스 로드, 연산 처리 등으로 화면이 평균 프레임 이하로 떨어졍서 끊기는 듯한 현상을 말한다. 디테일이 높은 게임을 해본 사람이면 한번쯤 경험해봤을 현상이다.위 링크를 타고 들어가서 입력을 빠르게 해보자. 처음에는 괜찮은데 그려야될 네모가 많아질 수록 버벅거리며 심지어 화면이 일정시간동안 멈추기도 한다. 이를 해결하기 위한.. 2024. 11. 5.
리액트 라우터를 알아보자 (리액트 인터뷰 가이드 4장 보충) 서론 리액트 인터뷰 가이드라는 책으로 스터디를 시작했는데 아무래도 책이 얇다보니 보충 공부를 많이 해야한다. 사실 남들은 다 아는건데 나만 몰라서 이렇게 느끼는 걸지도? 아무튼 앞으로도 보충공부한 내용을 기록해보려고 한다. 틀린 부분이 있으면 언제든 댓글 달아주세요! 이번 장은 라우터 이론이었는데 인강으로 리액트 공부할 때 사용 방법만 배워서 책 내용이 조금 어렵게 느껴졌다. 1. 리액트에서 라우터, 라우팅, 라우트란?Routingurl과 매칭되는 특정 페이지를 보여주는 기능모든 자식 라우트를 검색해 가장 적합한 항목을 찾고 해당 UI 분기를 렌더링함 Router정의 페이지나 컴포넌트 간에 이동할 수 있는 라이브러리. 리액트 자체에서는 라우팅 기능을 제공하지 않기 때문에 라이브러리를 사용해야한다.라우터를.. 2024. 10. 29.
프레그먼트를 알아보자 처음 리액트를 사용해본 사람들은 한번쯤 JSX expressions must have one parent element 에러를 겪어봤을 것이다.하나의 부모 요소만 반환해야하는데 여러개의 형제 요소를 반환하고 있기 때문에 발생하는 에러다.function MyComponent() { return ( Title Hello );} 이 때 아무 의미없는 로 감싸주기도 하는데, 프레그먼트를 사용해야 성능 측면에서 더 좋다.그 동안 아무 생각없이 와 를 번갈아가며 쓰던 날을 반성하며 글을 시작한다. 먼저 프레그먼트에 대해 알아보자. 이 내용을 이해하려면 DOM 구조를 어느 정도 알고 있어야한다. 정의DOM에 노드를 추가하지 않고도 리액트 컴포넌트에 자식 요소 목록을 래핑하거나 그룹화할 수 있는 구문 사.. 2024. 10. 23.

티스토리툴바