기록하는 개발자

나는 처음 프론트엔드를 공부할 때, 당시 vue, angular 보다 react의 생태계가 더 넓고 커뮤니티가 활성화 되어있기 때문에 react를 선택했다. vue의 점유율은 꾸준히 오르고 있는데 실제로 취업 공고에도 vue가 많이 보이고 카카오에서도 react와 vue, angular를 함께 사용한다. react와 vue의 github issue나 star수만 보면 사실 차이가 많이 나긴 한다. react - issue 1.2k, start 220k vue - issue 691, start 43.6k 그렇다면 react와 vue의 장단점, 공통점과 차이점을 알아보자. React React는 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위해 사용된다. - SPA(Single Page Applica..

react+typescript 환경에서 최근 업데이트 된 react-router-dom의 v6를 이용하여 프로젝트의 생성, 페이지 라우팅 그리고 nav bar 구성까지의 과정이다. React+TypeScript 로 개발 시작하기 https://mingmeng030.tistory.com/224 [TypeScript] React+TypeScript 로 개발 시작하기 1. [react+typescript project 생성] npx create-react-app [프로젝트명] --template typescript 2. 함수형 컴포넌트 작성 방법 - `type Image`와 `interface ListProps`와 같이 컴포넌트의 props 타입을 명시하여.. mingmeng030.tistory.com rea..

1. [react+typescript project 생성] npx create-react-app [프로젝트명] --template typescript 2. 함수형 컴포넌트 작성 방법 - `type Image`와 `interface ListProps`와 같이 컴포넌트의 props 타입을 명시하여 작성한다. 이를 통해 property로 유효하지 않은 값이 전달되면 바로 오류를 확인할 수 있다. import React from "react"; type Image = { src: string; }; interface ListProps { header: string; content: string; image?: Image; } const List = ({ header, content, image }: ListPr..

property의 특징이 컴포넌트 내부에서 값을 변경할 수 없다는 점이었다면, state는 반대로 컴포넌트 내부에서 값을 변경해야 하는 경우 사용한다. state 값을 변경하거나 저장할 수 있는 객체로 보통 버튼 클릭, 값 입력 등의 이벤트와 함께 사용된다. state 사용 시 주의점 1. 반드시 생성자(constructor)에서 초기화 해야한다. 2. state 값을 변경할 때는 반드시 setState()를 사용해야한다. 3. setState()는 비동기로 처리되며 setState() 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거친다. state를 변경할 때 setState를 사용해야하는 이유 setState() 함수를 쓰지 않고 state를 변경하는 것이 불가능한 것은 아니다. ..

Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import React from "react"; import MyComponent from './MyComponent'; class App() extends React.Component{ render(){ return ( ); } } export default App; MyComponent에서는 name이라는 이름의 프로퍼티로 전달받은 "msg" 문자열을 render 함수에서 참조한다. 아래 코드에서 this.props.name으로 프로퍼티 값을 참조하고 있음을 확인할 수 있다. ..

컴포넌트의 개념 기존 웹 구동 방식 정보(Model), 화면(View), 구동(Controller)코드를 분리한 MVC 방식으로 관리되었다. 장점 - 코드를 효율적으로 관리할 수 있다. 단점 - MVC 간 의존성이 높아 재활용이 어렵다(독립성이 떨어져 하나만 수정이 어려움). → 웹사이트 화면의 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 것에 착안하여 컴포넌트가 탄생한다. react의 웹 구동 방식 MVC의 View를 독립적으로 구성하여 재사용이 용이하다(기존 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있다). ※컴포넌트의 이름컴포넌트의 이름의 첫 번째는 반드시 대문자로 이루어져야한다. 이는 기존 HTML 마크업과 구분하기 위해서 이다. 기존 HTML 마크업 : , 컴포넌트 : , 컴포넌트의 ..

JSX : JavaScriptXML 자바스크립트에 XML을 추가한 확장형 문법 XML 또한 HTML의 표현법을 확장한 문법이기 때문에 HTML을 다룰 줄 안다면 JSX도 쉽게 체득할 수 있다. 대신 JSX는 HTML이 아니라 마크업 규칙을 따르기 때문에 아래와 같은 차이점이 발생한다. //HTML //JSX - JSX 에서는 element의 시작표시 의 짝이 맞지 않으면 react 엔진이 jsx를 분석할 때 오류가 발생한다. 1. index.js 파일은 npm run start 혹은 yarn start를 통해 리액트 서버를 구동했을 때 가장 먼저 실행되는 파일이다. 2. index.js는 'root'라는 id를 가진 element에 App component를 출력한다. (root라는 id를 가진 elem..

객체확장표현 JS문법에서 사용되는 key-value 데이터 형식의 객체를 확장하여 표현할 수 있다. // const a = 0; const b = 0; let number = { a, b }; // let favoriteString = 'favorite'; let myColors = { ['my'+favoriteString] : 'ivory', }; // let count = { add(x,y) {console.log(x+y);}, mul(x,y) {console.log(x*y);}, }; 1 - 객체의 변수를 선언 할 때 key 값을 생략하면 자동으로 키의 이름으로 키값을 지정해준다. ex) number = { a : a, b : b } 2 - 객체 생성 시 블록 내에 대괄호 [] 를 사용하여 계산된 ..