Javascript& React study
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자3Javascript& React study 2021. 10. 9. 05:00
undefined와 비교하는 것 이외에도 in을 사용하게 되면 프러퍼티 존재 여부를 확인할 수 있다. "Key" in object let user = { name : "John", age : 30 } alert("age" in user); // user.age가 존재하므로 true가 출력 alert("blabla" in user); // user.blabla는 존재하지 않기 때문에 false가 출력 in 왼쪽에 반드시 프로퍼티 이름이 와야한다. 프로퍼티 이름은 보통 따옴표로 감싼 문자열이다. 따옴표를 생략하면 엉뚱한 변수가 조사 대상이 된다. let user = { age: 30 }; let key = "age"; alert( key in user ); // true, 변수 key에 저장된 값 ("age..
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자2Javascript& React study 2021. 10. 8. 05:00
변수 key는 런타임에 평가가 되기 때문에 사용자 입력값 변경 등에 따라 값이 변경될 수 있는데 점 표기법은 이러한 방식이 불가능하다고 볼 수 있다. let user = { name : "John", age : 30 }; let key = "name"; console.log(user.key); // undefined 계산된 프로퍼티 객체를 만들 경우 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우에는 이를 계산된 프로퍼티(computed property) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?','apple'); let bag { [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받는다. } console.log(bag.apple..
-
[JAVASCRIPT-모던자바스크립트] 객체 기본에 대해서 알아보자Javascript& React study 2021. 10. 7. 05:00
자바스크립트에서는 총 8가지 자료형이 있다. 이중에서 7개는 하나의 데이터 (문자열,숫자만)담을 수 있기 때문에 원시형 (primitive type)이라고 부른다. 객체는 다양한 데이터를 담을 수 있다. 객체는 중괄호 {...}를 이용해서 만들 수 있다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 넣을 수 있는 프로퍼티(property)를 여러개 넣을 수 있다. 키에는 문자형, 값에는 모든 자료형이 허용된다. let user = new Object(); // '객체생성자' let user = {}; // '객체 리터럴' 리터럴과 프로퍼티 중괄호 {...}안에 는 '키:값' 쌍으로 구성된 프로퍼티가 들어간다. '콜론(:)'을 기준으로 하여 왼쪽에는 키가 오른쪽에는 값이 위치한다. let use..
-
프론트엔드 개발자를 위한 리액트 기초 part-3Javascript& React study 2021. 2. 24. 21:50
리액트에서 컴포넌트라는 것은 개념적으로 prop를 input으로 하고 UI가 어떻게 보여야 하는지 정해야 하는 React Element를 output으로 하는 함수를 뜻합니다. 그래서 합성을 이용해서 UI를 재사용할 수 있으며 또한 독립적인 단위로 쪼개서 생각을 할 수 있습니다 그래서 컴포넌트라는 것은 React.Component 를 상속받아서 정의를 할 수 있지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장합니다. 또한 UI를 구성하기 위해서는 화면에 컴포넌트를 그리면서 갱신하고 지워야 하는데 여기서 컴포넌트는 각 프로세스가 진행이 될 때 Lifecycle 함수로 불리는 특별한 함수가 실행이 됩니다. 여기서 개발자는 이를 재정의하면서 컴포넌트를 제어하게 됩니다. 리액트에서 컴포넌트 만들기 // Ap..
-
프론트엔드 개발자를 위한 리액트 기초 part-2Javascript& React study 2021. 2. 23. 23:31
리액트를 마주하게 되면 가장 먼저 보게 되는 CRA 즉 Create React App 이 아이의 경우 페이스북에서 만들어진 react 웹 개발용 boilerplate라고 할 수 있다. 그 전까지는 직접 모든 환경들을 설정해야 하거나 또는 남이 만든 boilerplate를 사용했어야 했는데 여기에 es6 버전의 javascript로 작성하는 것이 일반화 되어있어서 webpack같은 모듈 번들러로 컴파일을 하거나 빌드를 하는 것이 필수이기 때문에 이런 환경까지 공부하는 것이 쉬운 일은 아니다. 그래서 이런 사람들의 어려움을 이해(?) 하고자 create-react-app이 만들어지게 되었으며 지속적으로 업데이트가 되기 때문에 더욱 편하게 사용할 수 있게 되었다. create-react-app으로 시작하기 -..
-
프론트엔드 개발자를 위한 리액트 기초 Part-1Javascript& React study 2021. 2. 22. 22:26
필자는 10년 정도 디자이너를 하다가 30대 초반에 개발업에 도전하게 되었으며 지금은 프론트엔드 개발자로 이직을 하기 위해 개발공부를 하고 있다. 솔직히 첫술에 배부르랴 싶지만 그래도 차근차근 공부를 하다보면 결국에는 내가 원하는 개발자가 되어있을 것 같아 이렇게 글을 남기게 되었다. 부디 이 글을 읽는 예비 개발자와 주니어 개발자들에게 도움이 되었으면 하는 바램이다. React란 무엇인가? - 페이스북에서 만든 편리하게 웹페이지를 만들어 주는 Javascript 라이브러리이다. - 리액트는 UI 기능만 제공하며 전역 상태 관리, 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다. - 이러한 리액트의 진입 장벽을 낮추기 위해서 create-react-app을 만들었다. - API 통신이나 사용자 이..
-
-