불친절한 블로그

MPA는 Multi Page Application 여러 개의 페이지로 구성된 Application MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드된다. 항상 전체 페이지가 다시 렌더링 된다. MPA를 SSR(Server Side Rendering)방식을 사용해서 렌더링 한다. 장점 1. SEO(Search Engine Optimization, 검색 엔진 최적화) 관점에서 유리하다. 완성된 형태의 HTML 파일을 서버로부터 전달받는다. 그렇기에 검색엔진이 페이지를 크롤링하기에 적합하다. 2. SPA에 비해 첫 페이지 로딩이 매우 짧다. 단점 1. 페이지를 이동할때마다 리로딩이 발생한다. 2. 프론트엔드와 백엔드가 결합되어 있다. 개발이 복잡해질 수 있다. 관리가 어려워질 수 있다. 3. 서버..

프로젝트를 생성한다. 크게 고쳐야할 부분은 없다. spring web을 선택해준다. 프로젝트가 생성되었다면 build.gradle에서 두가지를 추가해준다. implementation 'org.hibernate:hibernate-entitymanager:5.3.10.Final' runtimeOnly 'org.postgresql:postgresql' 그리고 persistence.xml을 META-INF 디렉토리에 넣어준다. persistence.xml은 이렇게 작성한다. java class 파일을 만든다. run 시켜서 에러가 있는지 확인해본다. member 테이블을 생성한다. member 엔티티를 만든다. gatter 와 setter도 만들어준다. 삽입하기 insert 코드를 만들어본다. persisten..

이전 글에서 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에는 핸들러를 넣어준다. 그럼 버튼이 눌..

ES6 이후부터 'let'과 'const'가 등장했다. 기존에는 변수를 선언할 때, 'var'를 많이 썼었는데 새로 추가된 'let'과 'const'는 'var'와 어떻게 다른지 확인해봐야겠다. 아래의 예제를 보면 'name'으로 선언을 두번 했지만 'var'의 경우 에러가 나지 않는다. 간단한 테스트라면 문제가 없겠지만 복잡한 코드에서 에러가 발생했을 때, 문제파악이 힘들어지고, 값도 바뀔 가능성이 있다. 'let'과 'const'는 같은 이름으로 재선언이 불가능하다. 그럼 'let'과 'const'의 차이는 무엇인가? 재할당의 차이가 있다. 재할당은 변수의 값을 변경하는 작업이다. 'let'은 재할당이 가능하다. 'const'는 재할당이 불가능하다. 추가적으로 'var'의 사용할 수 있는 범위는 함수..