FrontEnd/React 썸네일형 리스트형 [React] 팝업 창 만들기 - daum - post - code (회원가입 - 주소 팝업) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) react프로젝트를 진행하면서, 회원가입 창을 만들어야 했습니다. 그러던 중 주소의 입력을 넣기 위해서 react에서 재공 하는 daum-post-code에 대해서 간략히 파악해 보고 이를 활용해 파업창을 이해해보자 Daum-postcode란? 다음과 kakao에서 제공하는 우편번호 검색 api로 우리가 쉽게 주변에서 우편번호를 입력할 때 가장 많이 보는 형식이다. 나는 이제 해당 api를 활용하여 회원가입의 주소 입력 칸을 해결할 것이다. 팝업창 이란? 팝업창은 특정 웹사이트가 어떠한 내용을 표시하기 위해서 갑자기 생성되는 창을 의미한다. 여기서 우리는 해당 api를 하나의 컴포넌트로 만들어서 특정 .. 더보기 [React] axios를 활용한 srping연동(get, post) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) react와 spring을 활용해 프로젝트를 진행하던 도중 서버와 클라이언트의 통신을 보다 간편하게 할 수 있는 방법이 fetch와 axios를 활용하는 방법이 대중적이라고 파악하였습니다. 그래서 저는 이번에 axios에 대해서 이해해보고 직접 간단한 실습을 통해 프로젝트에 적용해보려고 합니다. 언제나 그렇듯이 저는 정말 쉽게 누구나 이해할 수 있도록 axios에 대해서 조사해 보았습니다. 물론 더 딥하게 들어간다면, 완성도 높은 프로젝트가 되겠지만, 누구나 그렇듯 step1부터 차례대로 적용해보며 구현해보도록 하겠습니다. 간단히 axios에 대해서 이해해보고 적용해봅시다. Axios란? axios는 .. 더보기 React useEffect, useState (Hook의 이해) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. (인텔리제이 활용) Hook이란? hook은 react v16.8에서 새롭게 출시된 기능으로 함수형 컴포넌트에 state를 제공하여 로직의 재사용성을 높여주는 기능이다. 여기서 컴포넌트는 리액트에서 가장 기본이 되는 단위 컴포넌트이며, java의 객체와 유사한 개념이다. hook 이전에는 여러 컴포넌트들의 재사용하기 위해서 HOC나 Render Props패턴을 주로 이용하였지만, hook을 활용해여 함수 컴포넌트의 state나 lifecycle을 보다 쉽게 접근하고 사용할 수 있게 해줍니다. 우리는 그 중 Hook에서 제공하는 useEffectm useState API에 대해서 이해해하고 활용해보겠습니다. - useSta.. 더보기 React v6 카드 목록 작성하기(4*4 상품 페이지 만들기, 쇼핑몰) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. 4*4 상품 목록 카드 작성하기 저희가 일반적으로 카드 목록을 작성하게 되면, 아래 글과 같이 상품들이 나열되는 목록을 보여줘야 할 때가 있습니다. 이러한 목록을 만들어주는 방법을 소개해드리겠습니다! - HTML 기본적으로 저희는 아주 간단하게 코드를 작성하였습니다. 카드에 들어갈 내용은 이미지, 상품 제목, 상품 내용 요약, 가격, 상품 상세페이지 보러 가기 총 5가지의 정보를 담고 있는 카드를 만들어 보겠습니다. function App(){ return( 상품 목록 카드 작성하기 상품 제목 상품 내용.. 더보기 React v6 변화한 router 사용하기 (Link, Routes, Route 태그) 안녕하세요 인포돈 입니다. 최근에 변화된 React v6에 의거하여 작성되었습니다. 실행코드 ide는 vscode를 활용합니다! 리액트 이전에 html, css, js에 대한 기본 지식이 있어야 합니다. React Router란 웹 프런트엔드를 개발하다 보면 항상 document를 활용해 페이지를 넘겨주는 작업이 귀찮고, 사이트가 방대해질수록 점점 복잡한 구조 때문에 어려움을 겪기 일상입니다. 우리는 이러한 문제점을 보다 쉽게 해결하기 위해서 React에서 제공하는 Router를 사용하면 이러한 어려움을 해결할 수 있게 됩니다. 리액트에는 이러한 페이지 이동을 보다 쉽게 해주는 많은 라이브러리가 있지만, 대중적으로 가장 많이 사용하는 라이브러리가 바로 React Router입니다. 이러한 router는 .. 더보기 이전 1 다음
