본문 바로가기
반응형

전체 글294

[React] 7. React hooks[3] - useReducer란? 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를 만드는 .. 2022. 5. 17.
맥북 구매 직후에 유용한 초기 설정 맥북 구매 직후에 유용한 초기 설정 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 맥북 팁 - 유용한 초기 설정 ] 입니다. : ) 맥북 첫 사용 윈도우 사용자로써 처음 맥의 세계로 들어오니, 처음 컴퓨터를 배우는 어린 시절로 돌아가는 듯한 느낌이 들었다. 개발자라면 맥을 써야 하지 않을까 vs 이젠 차츰 맥이 아니더라도 윈도우로써도 가능하다 라는 의견이 분분한 가운데, 둘다 사용해보고 나도 의견을 내 보고 싶다. ( 아마 맥의 매력에 흠뻑 빠지지 않을까 싶지만.. ) 오늘은 나와 같이 맥 OS가 익숙하지 않은 분들을 위해, 유용한 초기 설정 방법에 대한 포스팅을 하려 한다. 배터리 / 스피커 설정 윈도우 사용자라면 우측 하단에 배터리와 스피커등의 설정이 보였을것이다. 맥북에서는 우측 상단에 이와 같은 .. 2022. 4. 16.
헤로쿠(Heroku)에 스프링 부트 프로젝트 배포 하기 헤로쿠(Heroku)에 스프링 부트 프로젝트 배포 하기 안녕하세요. 갓대희 입니다. 이번 포스팅에선 스프링 부트 프로젝트를 헤로쿠(Heroku)에 배포 해보려 합니다. :- ) Heroku, 헤로쿠는 여러 프로그래밍 언어를 지원하는 클라우드 컴퓨팅 플랫폼이다. 이름은 히어로 + 하이쿠에서 따왔다. Git과 GitHub 등을 지원하고, 많은 서비스를 애드온과 API로 지원한다. 2011년에는 세일즈포스가 인수하였다. 탄력성이 매우 좋은게 장점이다. 참고 : https://namu.wiki/w/Heroku heroku를 통해 spring boot 프로젝트를 배포 해보려 한다. 5개까지 무료로 애플리케이션을 배포 가능하다. 0. Netlify로 배포하는 방법 #1. heroku 회원 가입 - 하기 헤로쿠 회원.. 2022. 3. 28.
[React] 7. React hooks[2] - useEffect란? 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.. 2022. 3. 6.
마크다운(MarkDown) 사용법 마크다운(MarkDown) 사용법 안녕하세요. 갓대희 입니다. 이번 포스팅에선 마크다운(MarkDown) 사용법을 기록해 두려 한다. :- ) 제일 흔하게 보고, 편집 하던 README.md 는 마크 다운 문법으로 작성된 파일 이다. 깃헙(Github), 비트버킷(Bitbucket), 워드프레스, 슬랙(Slack), 트렐로(Trello) 등의 서비스에서도 작성할 수 있다. 물론 표준이 없기 때문에 모두 다 적용되는것은 아니다. 간단하게 정리 하고 넘어 가보자. 1. 마크다운의 장/단점 #1. 장점 - 문법이 쉽고 간결하다 - 관리가 쉽다 - 별도의 도구없이 작성가능하다. - 다양한 형태로 변환이 가능하다. - 지원 가능한 플랫폼과 프로그램이 다양하다. - 텍스트(Text)로 저장되기 때문에 용량이 적어 .. 2022. 2. 7.
React 프로젝트, 정적 사이트 Netlify에 배포하기 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으로 웹 애플리.. 2022. 2. 7.
[React] 6. React Router (리액트 라우터) 사용하기 6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는.. 2022. 2. 2.
[React] 5. React에 CSS 적용하기 5. React에 CSS 적용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에 스타일 적용하기 ] 입니다. : ) create-react-app으로 설치한 react프로젝트인 경우 css-loader, style-loader를 따로 설치하지 않아도 webpack에서 사용하는 css 설정을 사용할 수 있다. ※ 참고 css-loader : @import, url() 등의 구문을 해석, 적용해 준다. style-loader : 태그를 통해서 CSS를 DOM에 적용해 준다. css를 적용할 수 있는 방법들에 대해 알아보자. 1. 인라인(inline) styling 적용 - html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으.. 2022. 2. 2.
[React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 반복문 사용하기 ] 입니다. : ) https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]) } ex) map() const numbers = [1, 3, 5]; const listIte.. 2022. 2. 1.
[React] 4. React 컴포넌트(4) - 이벤트 처리 방법 4. React 컴포넌트(4) - 이벤트 처리 방법 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydow.. 2022. 2. 1.
[React] 4. React 컴포넌트(3) - State 알아보기(React Hooks 사용) 4. React 컴포넌트(3) - State 관리 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트 내용 중 State에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/hooks-reference.html#usestate 1. state란? - 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. - 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다. - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. - .. 2022. 1. 14.
[React] 4. React 컴포넌트(2) - 프로퍼티(props)란? 4. React 컴포넌트(2) - 프로퍼티(props)란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트 내용 중 프로퍼티(props)에 대한 내용 ] 입니다. : ) 간단??? 하게 프로퍼티의 사용 방법을 알아 보자. https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때.. 2021. 12. 24.
[React] 4. React 컴포넌트(1) - 컴포넌트란? 4. React 컴포넌트(1) - 컴포넌트란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트에 대한 기본 내용 ] 입니다. : ) 리액트 공식 문서, 자습서에서 함수형 컴포넌트, 클래스형 컴포넌트라는 내용을 간단하게 알아보려고 한다.. 리액트의 꽃이라고 할 수 있고, 리액트로 작성된 화면은 컴포넌트로 구성되어있기 때문에 매우 중요하다. 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소이다. 일단 최대한 기본 개념만 살펴볼 수 있도록 하자. https://ko.reactjs.org/docs/components-and-props.html 1. 리액트 컴포넌트(Component)란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관.. 2021. 12. 23.
[React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. [React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. yarn run, yarn start, npm npm start 모두 다음과 같은 에러를 뱉어 낸다. - yarn start 에러 - npm start 에러 CLIENT_PLUGIN_AUTH is required ▶ 1. 오류 현상 - 환경 : mysql 서버 버전 : 5.1.73 - 접속시도하려는 mysql-connector-java version : 8.0.xx ▶ 2. 문제점 - 원래 yarn에는 start라는 명령어가 없다. yarn start 라는 명령어나 환경변수가 설치되어 있지 않으므로 생기는 에러이다. - yarn start시 yarn run이라고 정의된 명령이 실.. 2021. 12. 7.
[React] 3. React 엘리먼트 렌더링 3. React 엘리먼트 렌더링 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 엘리먼트 렌더링 (Component 이해 전 읽어보기) ] 입니다. : ) 리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어, 이부분도 가볍게 살펴 보고 가려고 한다. 이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다. https://ko.reactjs.org/docs/rendering-elements.html 1. 엘리먼트란? - 리액트에서의 가장 작은 단위 이다. - 화면에 표시할 내용을 기술 한다. ex) 엘리먼트 예시 const element = hello, GodDaeHee!~; - 위의 예시에서 보듯, 우리가 예전에 사용하던 .. 2021. 12. 6.
반응형