불친절한 블로그

SSL을 적용하기 위해서 인증서를 발급받는 것은 지난 게시글에서 확인할 수 있다. https://onu0624.tistory.com/105 [SSL] 무료 SSL 발급하기 지난번에 내도메인.한국에서 무료 도메인을 만들어보았다. https://onu0624.tistory.com/104 [Domain] 무료 도메인 만들기(내도메인.한국) 도메인을 만들기 위해선 돈이 든다. 근데 실습할땐 돈 내기 아깝다 onu0624.tistory.com 이번 게시글에서는 SSL을 적용하고 https redirect하는 과정을 기록한다. 우선 지난 게시글에서처럼 인증서를 발급받았다고 가정하고 진행한다. 파일질라를 통해서 다운받아놓은 인증서를 ec2 인스턴스에 전송해놓는다. 인증서를 /etc/ssl/ 경로에 이동시켜놓는다. $..

https://onu0624.tistory.com/47 [AWS][WordPress] AWS EC2에 Wordpress + mysql + apache 구성하기 웹페이지를 처음부터 만들려면 준비되어야 할게 너무 많지만 AWS를 이용하면 보다 수월하게 만들 수 있고, 관리도 해주기 때문에 많은 유저들이 이용하고 있다. 다만, 약간의 비용이 든다는 점을 onu0624.tistory.com 워드프레스를 사용해서 회사 홈페이지를 운영중에 있었다. 운영 도중에 간간히 메모리 부족하다는 에러가 뜨길래 워드프레스 내부에 메모리 제한도 설정을 해줬지만 에러는 여전히 떴다. 그래서 aws 인스턴스 유형을 업그레이드 시켜주기로 했고, 인스턴스를 중지하고 인스턴스 유형을 변경해줬다. 문제는 인스턴스를 중지하고 재시작하면서 퍼..

이전 글에서 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 공식 홈페이지에 들어가서 예제를 누른다. 예제 페이지를 보면 오른쪽에 예제 코드가 있다. 근데 클래스 컴포넌트다... 하단에 파란색 링크가 있어서 눌러보니 거기에는 함수 컴포넌트 예제가 있다. 코드 복사!! 차트 관련 컴포넌트를 만들어주고, 복사한 코드 삽입! 차트를 표시해주려고 하는 화면에 컴포넌트 선언하면 끝! 나와라 결과창