개발감성

요약 웹 페이지를 컴포넌트라는 단위로 조각낸다. 페이지 갱신이 필요할 때 바뀌는 컴포넌트들만 쏙쏙 골라서 갱신한다. 22년인 현재까지도 프론트엔드 생태계의 우량아, 쓰는 사람이 많다는 것 다른 이유도 더 많겠지만 리액트 찬양론자는 아니기 때문에 꼭 알아야 할 핵심 내용만을 적어봅니다. 페이스북은 리액트를 왜 만들었을까? 프론트엔드 개발 씬에 SPA, Single Page Application이 생겨난 후에 SPA계에선 Angular, React, Vue 삼대장이 탄생했다. 구글에서 만든 앵귤러는 사실 망해가는 추세, 1인 기업 에반 유가 만든 Vue는 오픈소스의 특징을 강하게 띄고 있으며, 페이스북에서 만든 React가 셋 중 가장 사용자를 많이 보유하고 있는 편이다. 위는 페이스북의 화면인데, 화면의 ..

렌더링, 화면에 변화를 보이다 렌더링 이란 웹 페이지상에서 해당 페이지의 구성요소를 조립하여 사용자에게 보여주는 행동이다. p 태그안에 state.name변수를 나타내도록 하고 버튼을 클릭하면 온클릭 이벤트로 name변수를 new로 변경하도록 해본다. 예상대로라면 name변수가 old에서 new로 변경되니 Hi new의 문장으로 변경되어 표현될 것이다. 하지만 버튼을 아무리 눌러도 name변수는 new로 변경되지만 화면의 old는 변경되지 않는다. SPA를 위한 React의 렌더링은 임의의 상태가 변화할 때 Re-rendering을 하여 변동사항을 갱신하여 보여준다. 분명 클릭이벤트로 인해 name변수는 new로 변경이 되었는데 왜 리렌더링이 일어나지 않았을까 Re-rendering이 일어날 조건과 변수..

위와 같이 객체를 생성할 때 new 를 쓰곤 한다. 여기서 new 연산자의 내부 동작에 대해 알아본다. new 사용 멤버 변수 2개와 그 수를 더해주는 메서드를 정의했다. 이제 정의한 Add에 1과2를 인자로 가져가는 add 객체를 생성한다. add객체에는 a에 1, b에 2가 들어가있으므로 plus메서드를 호출하면 3이 값으로 나온다. new 미사용 new 연산자를 사용하지 않고 newadd객체로 같은 결과를 보이도록 해본다. js 객체에는 proto속성이 있는데 그 속성을 Add의 prototype객체를 참조하도록 연결해준다. 이렇게 하면 newadd는 Add를 상속받게 된다. apply메서드는 this객체와 배열을 전달하는데, Add에 newadd객체에 인자 1,2를 전달하는 것과 같다. 따라서 n..

현재는 클래스 또한 문법적으로 지원을 하지만 원래 JS는 Prototype을 기반으로 확장, 재사용성을 가지는 언어이다. oop, 상속, 확장, 오버라이딩.., 을 JS는 어떤 방식으로 풀어냈는지 알아보자 첫 번째 이야기 : 과일의 속성 (상속, 오버라이딩) 여기 과일을(이름은 apple인) 정의했다. fruit.name은?? apple이다. 사과의 색은 빨간색이기에 fruit에 color속성을 red로 추가해주었다. fruit.color는?? red다. 이쯤에서 fruit의 속성은 무엇이 있는지 궁금해서 hasOwnProperty메서드를 사용해 알아보았다. color속성은 true로 존재한다고 하고 shape속성은 false로 없다고 한다. 아직 만들지 않았으니깐 잠깐...그런데 hasOwnProper..

태그 선택자 아이디, 클래스 선택자 속성 선택자 중첩 선택자 하위 선택자 형제 태그 선택자 가상 선택자 평상시 > 마우스가 올라갔을 시 > 클릭 시 UI 상태 선택자 구조 가상 클래스 선택자 부정 선택자 정합성 체크 선택자 가상 요소 선택자

JSX표현식과 함수형 컴포넌트를 제작하여 표현하는 것을 알아봤다. [React] JSX 표현식, 함수형 컴포넌트 react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 해봤다. [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 리액트에서 중첩노드를 만들고 간단 developefeel.tistory.com JSX를 통해 확실히 편하게 태그를 생성했지만 여전히 깔끔하지 못하다. 컴포넌트를 이용해 코드를 정리해보도록 한다. 컴포넌트 화 컴포넌트 부위를 모두 다른 컴포넌트로 옮겨준다. 내용을 옮겨줄 컴포넌트다. 이전에 JSX에서는 형제노드없이 꼭 하나의 태그로만 묶어줘야 한다고 했다. 따라서 이름 없는 태그로 형식상 묶어준다..

react에서 element를 쉽게 만들기 위해 JSX를 사용하고 Bootstrap을 이용해 스타일을 주는 것까지 해봤다. [React] JSX 이용해 중첩노드 생성, Bootstrap으로 스타일 주기 리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다. [React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다. [React] 순 developefeel.tistory.com 이번엔 JSX의 표현식을 이용해 원하는 태그에 내용을 나타내는 것을 해본다. JSX 표현식 원하는 문구를 입력하여 저장한다. 2개 이상의 속성을 묶어서 넣을 수도 있다. 저장한 표현식을 원하는 태그 안에 입력해준다. 각 컬럼에 저장된 내용대로 출력된..

this는 자기 자신을 가르킨다. 클래스에서 this 함수형 클래스에 this로 속성을 하나 생성하고 프로토타입으로 메소드를 정의하여 this.property1을 띄우도록 한다. 여기서 this는 자기자신, 즉 클래스인 MyClass를 가르키게 된다. MyClass의 인스턴스인 my의 method를 호출했을 때 어떤 값이 나오는지 확인한다. 클래스 내에서의 this는 클래스 자신을 가르킴을 알 수 있다. 함수에서 this 이번엔 함수에서 this를 사용해본다. 전역변수 data에 10을 넣고 중첩함수 inner에 this를 사용해 data를 20으로 생성하고 전역변수 data에 30을 넣어준다. 1번의 data는 30이 나왔다. 함수내에서 같은 이름의 변수를 불렀고 지역변수 var data가 존재하므로 ..

number, undefined, string등의 변수 타입을 원시형 타입이라 한다. es6에서는 새로운 원시형 타입인 symbol타입이 추가되었다. 심볼은 객체의 속성으로 사용됨 심볼이 사용된 값은 유니크한 값을 가짐 심볼값은 선언 후 변경이 불가능함 선언과 출력 형태 testSb이란 변수를 심볼형으로 만들어주었다. 괄호 속 인자에는 심볼변수에 대한 설명만이 담긴다. 변수의 출력 형태는 심볼로 그대로 나온다. 심볼 사용이유 - 충돌방지 배열의 길이가 3인 배열의 length값에 10을 넣어준다면 배열의 길이가 10으로 변경이 된다. 그렇다면 배열에 length라는 이름의 속성을 넣어주면서도 내장된 length와 충돌이 일어나지 않으려면 어떻게 해야 될까 length라는 변수를 심볼형으로 정의하고 arr..

ES6부터 JS에 새로운 자료구조인 map과 set이 추가되었다. set은 일반적인 배열구조에서 중복값이 없는 집합구조라는 것이 가장 큰 특징이다. 배열(array)과 집합(set)의 차이 배열 배열은 3의 값을 가지는 인자가 두개 이상 있어도 모두 출력된다. 집합 집합은 3의 값을 가지는 인자가 여러개라면 중복이 제거되어서 1,2,3만 저장된다. (첫 인자로 보이는 size:3은 크기를 나타냄) Set생성 및 추가 - new, add 방법 1. 아무 인자도 주지 않고 정의된다. 후에 인자를 추가해줘야 함 방법 2. 정의하면셔 add를 사용해 인자를 추가하여 생성한 뒤 후에 인자를 추가했다. 또한 콘솔창을 보면 눈치챌 수 있듯이 set은 arr의 length대신 size를 사용해 크기를 표현한다. 방법 ..