전체 글 (138) 썸네일형 리스트형 React 공식문서 - Your First Component(첫번째 컴포넌트) Components: UI building blocks(컴포넌트: UI 구성 요소) React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"로 결합할 수 있고, HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인할 수 있다. 프로젝트가 커질수록 컴포넌트의 재사용은 많은 디자인을 구성할 수 있게 해주고 개발 속도를 빠르게 해준다. Defining a component(컴포넌트 정의하기) 기존의 웹페이지 개발에서는 웹 개발자가 콘텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했다면, React 컴포넌트는 마크업으로 뿌릴수 있는 JavaScript 함수다. Step 1: Export the co.. DeepDive - 22장.this 22.1 this 키워드 객체의 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하고, 이때 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. // 재귀적으로 자기 자신이 속한 객체를 참조하는 방법 const circle = { // 프로퍼티 radius: 5; // 메서드 getDiameter() { return 2 * circle.radius; } } console.log(circle.getDiameter()); // 10 // this를 사용하는 방법 const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiamete.. DeepDive - 21장.빌트인 객체 21.1 자바스크립트 객체의 분류 * 표준 빌트인 객체(standard build-in objects/native objects/global objects) 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다. 전역 객체의 프로퍼티로 제공되므로 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. * 호스트 객체(host objects) 호스트 객체는 ECMAScript 사양에 정의되어 있진 않지만 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 객체이다. * 사용자 정의 객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가.. React 공식문서 - Thinking in React JSON API와 디자이너의 목업이 있다고 가정을 했을 때, React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내하는 챕터. React에서 UI를 구현하려면 일반적으로 동일한 5단계를 따른다. Step 1: Break the UI into a component hierarchy(UI를 컴포넌트 계층 구조로 나누기) 목업의 모든 컴포넌트와 하위 컴포넌트 주위에 상자 그리고 이름을 정한다. 컴포넌트는 단일 책임 원칙(single responsibility principle) 기법에 따라 이상적으로 한 가지 일만 수행해야 한다. 만약 컴포넌트가 늘어나게 되면 더 작은 하위 컴포넌트로 분해해야한다. 목업에서 컴포넌트를 식별했다면, 계층 구조로 정렬한다. Step 2: Build a stati.. React 공식문서 - Quick Start Creating and nesting components(컴포넌트 생성 및 중첩하기) React 앱은 컴포넌트로 만들어진다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수로써, 고유한 로직과 모양을 가진 UI(사용자 인터페이스)의 일부이며, 버튼만큼 작을 수도 있고 전체 페이지만큼 클수도 있다. * MyButton이라는 컴포넌트 선언 function MyButton () { return ( I'm a button ); } * 선언된 MyButton 컴포넌트를 다른 컴포넌트에 중첩 export default function MyApp() { return ( Welcome to my app ); } 위의 예제와 같이 React 컴포넌트는 대문자로 시작하고, HTML 태그는 소문자로 시작한다.. DeepDive - 20장.strict mode 20.1 strict mode란? function foo() { x = 10; } foo() console.log(x) 위의 예제의 실행 결과는 ReferenceError가 아닌, 10이 출력되는데, 이는 자바스크립트 엔진이 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성하기 때문이다. 이러한 현상을 암묵적 전역(implicit global)이라고 한다. 하지만, 암묵적 전역은 오류를 발생시키는 원인이 될 가능성이 크기 때문에 ES5부터는 strict mode가 추가되었다. strict mode(엄격 모드) : 자바스크립트의 문법을 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적 에러를 발생시킨다. * strict mode 대신.. 이슈 트래커(Issue Tracker) 회고 팀프로젝트 이슈 트래커(Issue Tracker)📚첫 번째 팀프로젝트가 끝이 났다. 기획서의 기능을 전부 완료하지 못한 점에서 아쉬움도 많았지만, 당연히 배운 점과 좋았던 점도 있었기 때문에 회고를 작성해보려고 한다.배운 점팀프로젝트를 진행하면서 나에게 유연함이 조금 부족하다는 것을 깨달을 수 있었다. 물론 학습과정이라는 명목하에 작은 기능이라도 많은 고민과 정확한 이해를 위해 노력했고 그 과정에서 개발 속도가 저하됨을 느꼈다. 물론 정확히 이해하지 못하고 개발을 하는 것은 지양해야하는 행동임을 알지만, 프로젝트를 기한내에 완료하기 위해서는 조금은 빠른 결정과 판단이 필요하다는 생각을 했다.좋았던 점팀프로젝트를 하면서 가장 좋았던 점은 나의 부족한 점을 보완해줄 수 있는 팀원이 있고 새로운 것을 배울.. Issue-Tracker 팀프로젝트 1주차 회고 코드스쿼드 마스터즈 첫 번째 팀프로젝트 Issue-Tracker 📚 프로젝트 시작 개인 프로젝트가 모두 끝나고 첫 번째 팀프로젝트 Issue-Tracker가 시작되었다. 항상 혼자 계획하고 개발을 진행했었는데, 처음으로 동료와 협업을 한다는 사실에 설렘도 있었고 걱정도 있었다. 그리고 프론트엔드에 대한 개발 뿐만 아니라 프로젝트에 대한 전체적인 부분을 이해하고 학습한다는 사실에 조금 기대가 되기도 했다. 프론트엔드 동료뿐만 아니라 백엔드와 iOS 동료들과 팀 프로젝트를 진행하는 것이 재밌을 것 같아서 기대가 되기도 했지만, 혹시나 내 역할을 해내지 못해 팀에 피해를 주지 않을까 걱정이 되기도 했다. 하지만, 첫 팀 미팅부터 너무 좋은 팀원들과 함께할 수 있다는 생각에 걱정은 사라지고 내 역할을 더 잘하.. 이전 1 ··· 14 15 16 17 18 다음
