기록하는 개발자

나는 처음 프론트엔드를 공부할 때, 당시 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..

나는 지금 Springboot+react환경에서 프론트엔드를 맡아 졸업 프로젝트를 진행 중이다. 전부터 프로젝트 진행 시 react에서 useState hook을 사용할 때, 하위 컴포넌트가 state를 사용하기 위해서는 해당 state가 쓰이지 않는 중간 컴포넌트에도 state를 전달해야하는 방식이 정말 비효율적이라는 생각이 들었다. 이 점을 해결하고자 검색해봤을 때, 이름만 알고 있었던 'Redux'가 바로 그 역할을 한다는 것을 깨달았다. 개발을 직접 해보니 왜 써야하는지 이유를 스스로 체감하게 되는 것 같다. Redux 1. store - 전역에서 state를 관리해주는 공간으로 객체 형태이다. 2. action - 상태 변화를 일으키는 주체이다. - 객체 형태이고 타입이라는 것이 필수로 들어간다..

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. → - Wrapper 명칭이 의 element들을 포함하는 로 변경되었다. - exact 옵션이 삭제되어 exact가 default로 적용된다. → `exact`옵션을 없애고 싶다면 path 끝에 *을 붙여준다. (예시로 확인) - path에 하위경로(":id")와 상대경로(".", ".." )로의 지정이 가능하다. 2. 중첩 라우팅의 간편화 // 기존 v5의 중첩 라우팅 import { BrowserRouter, Switch, Route, Link, useRouteMatch } from 'react-router-dom'; function App() { return ( ); } function Login() { const { path } = useRouteMatch(); return ( ); } /..

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..

지도를 사용하는 프로젝트를 하게되어 naver map api를 사용하기로 했다. api 를 처음 적용해봤기도 하고 react로 본격적인 팀프로젝트도 처음이라 쉽지 않았다. 구글링을 해도 일반 태그로 작성하는 예시는 많았지만 react에 작성하는 예시는 너무 없어서 맨땅에 헤딩하는 느낌이었다.. 아직 부족해서 코드가 지저분할지라도 동작은 하기 때문에 react 프로젝트에서 naver map을 사용하는 사람들에게 조금이라도 도움이 되길 바란다. naver map 회원가입이나 key값을 받아오는 설명은 검색하면 너무 자세히 나와있어서 생략하겠다. +) key 값은 env. 파일을 만들어 관리하자,, 나는 Home 아래와 같이 화면에 지도를 띄우고 도로명 주소를 검색하면 해당 좌표로 이동하여 화면이 줌 되고, ..

https://mingmeng030.tistory.com/216?category=1025066 컴포넌트 - 3. property Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import mingmeng030.tistory.com 앞선 위 게시물에서 상위 컴포넌트가 하위 컴포넌트에 property를 전달할 수 있음을 설명했다. 만약 하위 컴포넌트에서 전달받은 property를 변경해야 할 때는 어떻게 해야할까? property의 원본을 수정할 수 있는 함수를 하위 컴포넌트에 함께 제공하면 된다. 이러한 함수를 callback ..

react 컴포넌트 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 그렇다면 두 방식의 차이점은 무엇일까? 1. 선언 방식 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const Hello = 'hello'; return {Hello} } } export default App; 1. class 키워드가 필요하며, Component 상속을 받아야한다. 2. render() 메소드가 반드시 필요하다. 3. 함수형보다 메모리 자원을 더 많이 사용한다. 4. state, lifeCycle 관련 기능(생명주기함수)사용이 가능하다. 5. 함수형보다 메모리 자원을 더 많이 사용한다. 6..