기록하는 개발자

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

우선 이 도전은 내가 2021년에 휴학을 하면서 시작되었다. 한참 재학하면서는 전공 공부를 하느라 알고리즘 문제 풀이에는 소홀했다. 그래서 휴학 후 백준과 프로그래머스 문제를 본격적으로 풀기 시작했는데, 분명 매우 쉬운 문제임에도 접근법을 생각하기 어려운 문제들이 많았다. 알고리즘 문제는 확실히 어려운 문제를 푸는 것도 좋지만 감을 잃지 않게 쉬운 문제라도 꾸준히 푸는 것이 오히려 좋을 것 같다는 생각이 들었다. 그래서 2021년 8/2부터 1일 1커밋과 1일 1백준 풀기를 1년 이상 꾸준히 해보자는 스스로와의 약속을 했다. 백준에도 잔디밭이 생겨서 시작한 날짜, 그 날 푼 문제수 등을 확인할 수 있는 점이 아주 마음에 든다. 꾸준히 오르고 있는 내 경험치와 최근 졸프 시작으로 쉬운 문제를 위주로 풀었더..

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

DOM Document Object Model DOM(문서 객체 모델)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 문서 내의 모든 요소, 요소의 속성, 그리고 텍스트를 각각의 객체로 만들고 이들 객체를 부모-자식 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. DOM은 W3C의 표준 객체로, 아래와 같이 계층 구조로 표현되며, 네 종류의 노드로 구성된다. 문서 노드(Document Node) 트리의 최상위에 존재하며 다른 모든 노드에 접근하기 위해서는 반드시 문서 노드를 통해야 한다. 따라서 DOM tree에 접근하기 위한 entry point 이다. 요소 노드(Element..

참고 : https://medium.com/@nugen/react-hooks-calling-child-component-function-from-parent-component-4ea249d00740 React Hooks-Calling Child Component Function From Parent Component In this article we’re are assuming that you are somewhat familiar with React Hooks medium.com [ 상위 컴포넌트 ] import React, { useRef } from "react"; const ParenctComponent = () => { const myRef = useRef({}); function doSomet..

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