7. React hooks[3] - useReducer란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React hook 중 useReducer에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 ..

헤로쿠(Heroku)에 스프링 부트 프로젝트 배포 하기 안녕하세요. 갓대희 입니다. 이번 포스팅에선 스프링 부트 프로젝트를 헤로쿠(Heroku)에 배포 해보려 합니다. :- ) Heroku, 헤로쿠는 여러 프로그래밍 언어를 지원하는 클라우드 컴퓨팅 플랫폼이다. 이름은 히어로 + 하이쿠에서 따왔다. Git과 GitHub 등을 지원하고, 많은 서비스를 애드온과 API로 지원한다. 2011년에는 세일즈포스가 인수하였다. 탄력성이 매우 좋은게 장점이다. 참고 : https://namu.wiki/w/Heroku heroku를 통해 spring boot 프로젝트를 배포 해보려 한다. 5개까지 무료로 애플리케이션을 배포 가능하다. 0. Netlify로 배포하는 방법 #1. heroku 회원 가입 - 하기 헤로쿠 회원..

7. React hooks[2] - useEffect란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React hook 중 useEffect에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpd..

마크다운(MarkDown) 사용법 안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다. 깃헙(Github), 비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다. 물론 표준이 없기 때문에 모두 다 적용되는것은 아니다. 간단하게 정리 하고 넘어 가보자. 1. 마크다운의 장/단점 #1. 장점 - 문법이 쉽고 간결하다 - 관리가 쉽다 - 별도의 도구없이 작성가능하다. - 다양한 형태로 변환이 가능하다. - 지원 가능한 플랫폼과 프로그램이 다양하다. - 텍스트(Text)로 저장되기 때문에 용량이 적어 ..

React 프로젝트, 정적 사이트 Netlify에 배포하기 안녕하세요. 갓대희 입니다. 이번 포스팅에선 가볍게 React 프로젝트를 배포 해보려 합니다. :- ) Netlity는 GitHub, GitLab 등과 계정 연동 및 정적서버로 쉬운 호스팅을 제공하는 서비스이다. 글로벌 배포, 지속적인 배포(Continuous Deployment), One-Click HTTPS, CDN 등 다양한 서비스를 제공한다. 특히 JAMstack, SPA(Single Page Application)가 유행하면서 이러한 정적 사이트을 쉽게 배포할 수 있어 인기가 있나 싶다. ※ JAM Stack - JavaScirpt, API, Markup으로만 구성된 스택, - 즉 JavaScript와 API, Markup으로 웹 애플리..

6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는..