불친절한 블로그

이전 글에서 Next.js를 시작하는 방법을 알아봤다. https://onu0624.tistory.com/129 [Next.js] Next.js 시작하기 next.js를 하기 위해서는 node.js가 설치되어 있어야한다. 없다면 설치하자. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이제 next... onu0624.tistory.com 이제 페이지 이동하는 방법을 알아보려한다. pages 디렉토리 안에 새로 만들 페이지 코드를 만들었다. route를 사용해야하나 했더니 그냥 만들고 끝이였다. localhost:3000 에 뒤에 경로만 붙여주면 ..

next.js를 하기 위해서는 node.js가 설치되어 있어야한다. 없다면 설치하자. https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이제 next.js 프로젝트를 만들자. $ npx create-next-app ["프로젝트명"] --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" 만들어진 프로젝트로 접근하자. $ cd ["프로젝트명으로 된 디렉토리"] 실행하자. $ npm run dev 열어보자.

데이터를 주고 받으면서 색상선택이 필요로 하게되었다. 그렇다고 색상을 RGB 코드로 골라서 주고받기에는 사용자가 사용하기에 불편해보여서 색상선택 할 수 있는 걸 찾다가 react-colorful을 찾게 되었다. 뭔가 익숙한 색상선택 창이 보인다. 이걸 react에서 구현해볼꺼다. 우선 react-colorful를 사용하기 위해서는 설치를 해야한다. $ npm install react-colorful import 시켜준다. 라디오 버튼 전환할때 처럼 onChange를 이용한다. 하지만 react-colorful은 핸들러가 필요없다. 선언은 useState를 사용한다. 전체코드

자바스크립트를 짤때 form은 항상 사용해왔다. 그러던 어느날 React에 전용 form이 있다는 소식이 들려왔다. 뭐지? 구글링 ㄱㄱ 그것은 React-Hook-Form이였다. 공식 홈페이지 까지 있었다. https://react-hook-form.com/ Home React hook for form validation without the hassle react-hook-form.com 오호라 공식홈페이지에서 예제들을 보고 바로 한번 만들어 보았다. 응 설치부터~ $ npm install react-hook-form 그럼 이제 import문으로 선언하자. 그리고 공식홈페이지 예제를 보고 간단하게 슥삭! 요녀석인데 아주 기본적인 것만 넣은 상태이다. React를 잘 모르는 나로써는 중간에 {...reg..

라디오 버튼을 만들기 위해서 구글링을 했을때, 여러가지 방법으로 라디오 버튼을 만들 수 있었는데 실제로 코드 작성해보면서 제일 쉽게 따라할 수 있는 방법으로 글을 쓴다. hook의 useState를 사용해서 라디오 버튼의 값을 set 할 수 있도록 한다. 라디오 버튼이 작동할 수 있게 핸들러를 만들어준다. 라디오 버튼은 눌렀을때 한가지만 선택이 되어야한다. 다른 버튼을 누르면 현재 활성화되어있는 버튼이 비활성화 되고, 선택한 버튼이 활성화 되어야한다. 그런 기능을 구현하기 위해 핸들러를 통해 선택된 값을 set 하는 기능을 핸들러에 넣어준다. input 태그에는 아래 이미지와 같이 작성한다. value에 값을 넣고, checked의 조건을 넣어준다. onChange에는 핸들러를 넣어준다. 그럼 버튼이 눌..

이번 실습은 이전 글 위에다가 할꺼다. https://onu0624.tistory.com/123 [React] 레이아웃 구성해보기 리엑트 공식홈페이지를 보면서 학습하고 있었는데 실제 웹페이지를 만들때에는 웹 화면구성하는 법을 알고싶어서 구글링을 통해 레이아웃을 구성하는 법을 찾아보게 되었다. 디렉토리를 layout onu0624.tistory.com rechart 공식 홈페이지에 들어가서 예제를 누른다. 예제 페이지를 보면 오른쪽에 예제 코드가 있다. 근데 클래스 컴포넌트다... 하단에 파란색 링크가 있어서 눌러보니 거기에는 함수 컴포넌트 예제가 있다. 코드 복사!! 차트 관련 컴포넌트를 만들어주고, 복사한 코드 삽입! 차트를 표시해주려고 하는 화면에 컴포넌트 선언하면 끝! 나와라 결과창

리엑트 공식홈페이지를 보면서 학습하고 있었는데 실제 웹페이지를 만들때에는 웹 화면구성하는 법을 알고싶어서 구글링을 통해 레이아웃을 구성하는 법을 찾아보게 되었다. 디렉토리를 layout으로 추가하고, 그 안에 레이아웃, 헤더, 푸터를 js파일과 css파일을 만들어주었다. layout.js를 먼저 보면 간단하게 작성해준다. app.js에는 layout태그로 감싸준다. 결과화면!! header.js와 header.css를 만들자. 그리고 footer.js랑 footer.css도 만들어준다. 헤더와 푸터를 만들어줬으면 다시 layout.js에 헤더와 푸터를 연결해준다. import문을 써서 헤더와 푸터를 가져오고, 태그에는 이런식으로 넣어준다. 결과창 간단한 리엑트 예제를 레이아웃에 넣어보면 https://k..

이전글에 Django와 React 세팅을 했었다. https://onu0624.tistory.com/117 [Django][Python] Django 백엔드 서버 만들기 예전에 가상환경에 Django 설치하는 방법을 게시 했었다. https://onu0624.tistory.com/91 [Django][Python] 가상환경에 Django 설치하기 실습 환경 개발 툴 : IntelliJ 개발 언어 : Python 프레임워크 : Django.. onu0624.tistory.com https://onu0624.tistory.com/119 [React] React 설치하기 프론트화면으로 React를 써보려고 한다. React를 설치해보자 node 설치 확인 React 설치!! $ npm install -g cr..