프론트엔드

[React] Props(불변 객체, Prop Drilling)

결, 꼬재랑 함께하는 레벨2 방학 스터디 😀 Props 컴포넌트에 어떠한 값을 전달할 때 props를 사용한다. 여기서 props는 properties의 줄임말이다. props는 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드(static method)를 통해 전달할 수도 있다. props는 불변성을 가진 읽기 전용이다. porps 예시 // 함수 컴포넌트 function Coke(props){ return Hello, {props.name}; } // 클래스 컴포넌트 class Coke extends React.Component{ render(){ return Hello, {this.props.name}; } } // 비구조화 할당(구조 분해 할당) function..

[React] Ref(React.createRef, ref attribute, useRef)

결, 꼬재랑 함께하는 레벨2 방학 스터디 Ref Ref는 render 메서드에서 생성된 DOM 노드나 React Element에 접근 하는 방법을 제공한다. Ref는 React.createRef()를 사용해 생성하고, 만든 Ref는 참조하려고 하는 노드의 ref attribute에 연결해 준다. Function Component는 인스턴스가 없기 때문에 Function Component에 ref attribute를 사용할 수 없다. 하지만 DOM element나 Class Component의 인스턴스에 접근하기 위해 ref attribute를 Function Component에서 사용하는 것은 된다. Ref는 컴포넌트 Life Cycle 내에서 유지되는 변경 가능한 변수이다. Ref는 State와 달리 ..

[React] Key

결, 꼬재랑 함께하는 레벨2 방학 스터디 Key React에서 key는 컴포넌트 배열을 렌더링할 때 어떤 원소에 변동이 있는지 알아내기 위해 사용하는 값입니다. 따라서 key는 각 원소에 안정적인 고유성을 부여한다. key는 element를 만들 때 포함해야 하는 특수한 문자열 attribute이다. 다음과 같이 코드를 작성하면 React는 에러를 노출 시킨다. element에 고유한 key 속성 값을 넣으라는 에러 메시지가 나타나는데, 이때 index 값을 key 속성값으로 대입하면 에러 메시지는 나타나지 않으나 다음과 같은 문제가 발생한다. key값을 배열의 index로 하면 발생하는 문제! React 렌더링에서 재조정 시, 컴포넌트는 key를 보고 해당 element를 비교를 하는데 배열이 재배열 ..

[React] VirtualDOM

결, 꼬재랑 함께하는 레벨2 방학 스터디 React란? React는 SPA 웹 프레임워크로 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 즉, 사용자와 상호작용할 수 있는 동적인 애플리케이션을 개발 할 수 있는 JavaScript 라이브러리이다. 이러한 React는 다음과 같은 특징을 가지고 있다. 가상 돔(Virtual DOM) JSX 단방향 데이터 바인딩 선언형 프로그래밍 컴포넌트 기반 특징들 중에서 Virtual DOM에 알아 보려고 한다. Virtual DOM (Virtual Document Object Model) DOM은 HTML, XML, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주해 관리하고 브라우저에서 보이는 화면을 DOM트리를 반영해 그리게 된다. Jav..

[React] JSX

결, 꼬재랑 함께하는 레벨2 방학 스터디 React에서 사용하는 JSX란? JSX(JavaScript XML)는 JavaScript에 XML을 추가, 확장한 문법입니다. XML이란? XML(eXtensible Markup Language)은 W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다. XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어 졌다. HTML의 한계? HTML은 확장용이성, 구조용이성, 문서확인용이성 등에서의 한계가 나타났다. 사용자가 주어진 태그의 범위안에서만 문서내의 데이터를 다뤄야했기 때문이다. 따라서 XML이 나타나게 되었다...

우아한테크코스 Level1 회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 우아한테크코스 Level1 자동차 경주 GitHub - intae92/javascript-racingcar Contribute to intae92/javascript-racingcar development by creating an account on GitHub. github.com 로또 GitHub - intae92/javascript-lotto: 자바스크립트로 구현하는 로또 어플리케이션 자바스크립트로 구현하는 로또 어플리케이션. Contribute to intae92/javascript-lotto development by creating an account on GitHub. github.com 유튜브 GitHub - intae9..

우테코 3월 4주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 우테코 3월 3주차 주간회고 우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 게으름에 깜빡함...없음 이번주 회고 Facts (사실, 객관) 코어자바스크립트 클로저 학습 코어자바스크립트 this kit-developer.tistory.com 이번주 회고 Facts (사실, 객관) 타입스크립트 학습 typescript exercise 9까지 클리어 자판기 미션 step1 데이터 바인딩 개념 학습 Cascading Style Sheets Feelings (느낌, 주관) 이번 자판기 미션은 타입스크립트를 사용해야 한다는 요구 사항이 있다. 예전 부터 들어만 봤던 타입스크립트를 이번에 써본다길래 많은..

우테코 3월 3주차 주간회고

우아한테크코스 4기 프론트엔드에서 시원한 콜라를 제공하고 있습니다. 지난주 회고 게으름에 깜빡함...없음 이번주 회고 Facts (사실, 객관) 코어자바스크립트 클로저 학습 코어자바스크립트 this 절반 학습중 나만의 유튜브 강의실 미션 진행 클로저 학습 후, 토스트UI 코드에 적용함 코드 리뷰 모임 Feelings (느낌, 주관) 솔직히 우테코... 노가다 뛰는 느낌이다. 미션을 해결 하기 위해 코드를 작성하는 느낌 이랄까, 내가 성장을 하는 느낌이 안 드는 순간이 많았다. 난 작년에 현업에서 일을 했기 때문에 이런 생각이 드는 거라고 생각한다. 내 자신이 성장하고 있다는 만족감을 얻기 위해 책을 읽는 독서 모임, 코드리뷰 모임을 하는데 드디어 성장을 하고 있다는 느낌을 받았다. 자바스크립트을 했다면 ..