기록하는 개발자

REST(REpresentational State Transfer) REST는 HTTP기반으로 필요한 자원에 접근하는 방식을 정해놓은 아키텍쳐이다. (여기서 말하는 자원은 저장된 데이터(DBMS), 이미지, 동영상, 문서, 서비스를 모두 포함한다.) [ REST의 속성 ] 1) 서버에 있는 모든 자원마다 클라이언트가 바로 접근 할 수 있는 고유 URI가 존재한다. 2) 모든 요청은 클라이언트가 요청할 때마다 필요한 정보를 주기 때문에 서버에서는 세션 정보를 보관할 필요가 없다. 따라서 서비스의 자유도가 높아지고 유연한 아키텍쳐 적응이 가능하다. 3) 모든 자원은 http 인터페이스인 GET, POST, PUT, DELETE 4개의 메소드(HTTP 메소드)로 접근 되어야 한다. 4) 서비스 내에 하나의 자..

Error: Invalid hook call 위와같은 에러는 boardList 상태 관리를 위하여 react+typescript환경에 redux 적용 후 문제가 발생하였다. 구글링 결과 관련 해결 방법이 매우 많았지만 useDispatch에서 문제가 발생했던 나의 해결법을 써본다. 문제 발생 구간 : GetAlcohol.tsx GetAlcohol.tsx의 작동 방식 1. 게시판 url인 '/board'로 라우팅되면 서버에 boardlist를 받기위한 get요청을 보낸다. 2. 이때 url에 query parameter로 필터링 정보를 붙여 전달한다. 3. 정상적으로 get이 전송되면 redux의 action을 통해 boardList를 저장한다. 상태관리르 위해 redux를 적용하고 useSelector,..

나는 지금 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. [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 아래와 같이 화면에 지도를 띄우고 도로명 주소를 검색하면 해당 좌표로 이동하여 화면이 줌 되고, ..