잡다하다

이전 글에 이어 _app.js를 커스텀하는 방법에 대해 작성해 보려고 한다. [NEXT.JS] #5 CSS STYLING (2) 이전 글에 이어 CSS 를 설정하는 다른 방법에 대해 작성해보겠다. [NEXT.JS] #4 CSS STYLING (1) 이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next p many.tistory.com _app.js Next.js에서 각각의 페이지가 초기화될 때 로딩되는 파일이다. 모든 페이지가 초기화될 때 로딩되므로 전체 페이지의 로직을 작성할 수 있다. 즉, 모든 페이지에서 공통으로 사용하는 컴포넌트나 css 등을 적용하는데 용이하다. 이전 게시물들에서 NavBar.js를 index.js, ..

이전 글에 이어 CSS 를 설정하는 다른 방법에 대해 작성해보겠다. [NEXT.JS] #4 CSS STYLING (1) 이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project many.tistory.com styled JSX next js에서 사용하는 기본적인 css 설정 방법이다. 방장은 next.js 14버전을 사용했기 때문에 하위 버전과 사용법이 다를 수 있다. components/NavBar.js 사이의 코드를 통해 element의 css를 설정하는 방법이다. import Link from "next/..

이전 글에 이어 CSS 를 설정하는 방법에 대해 작성해보겠다. [NEXT.JS] #3 pages와 페이지 이동 이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project 생성하기 특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특 many.tistory.com module.css 첫번째로 .module.css로 생성된 css파일을 import하여 내부의 class를 적용하는 방법을 사용했다. 방장은 next.js 14버전을 사용했기 때문에 하위 버전과 사용법이 다를 수 있다. components/NavBar.module.css .active { color: tomato; } compone..

이전 글에서 next project를 생성했다. 이번 글은 nextjs의 페이지 이동에 대해 작성하였다. [NEXT.JS] #2 Project 생성하기 특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특징과 기능 [NEXT.JS] #1 특징과 기능 회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발 many.tistory.com routing을 통해 호출한 url과 component를 연결해주는 작업이 필요한 library인 react와 달리 framework인 nextjs는 pages 내부에 생성된 파일명만으로 웹에서 해당 파일을 호출할 수 있었다! pages/test.js 이제 intelliJ를 열고 pages하위에..

특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특징과 기능 [NEXT.JS] #1 특징과 기능 회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발을 할 거기 때문에 학습을 해두라고 들었고, 이에 따라 차근차근 학습하기 위해 글을 작성하게 되었다. 참조 https many.tistory.com create-next-app 방장은 MAC을 사용하고 있고, 다른 프로젝트들이 있어 node가 여러 버전이 설치되어 있다. 이번에 node 18버전을 설치했고, 해당 버전으로 변경 후 next.js를 설치하였다. 추가 라이브러리는 우선 모두 설치하지 않았다.(No 선택) npx create-next-app ✔ What is you..

회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발을 할 거기 때문에 학습을 해두라고 들었고, 이에 따라 차근차근 학습하기 위해 글을 작성하게 되었다. 참조 https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx NEXT.JS 특징 NEXT JS는 React로 만드는 서버사이드 렌더링 프레임워크이다. ☞ js는 클라이언트 언어로 알고 있었는데, next js는 서버사이드 프레임워크라고 한다. 서버사이드 렌더링(SSR)을 함으로써 다음과 같은 장점이 발생한다. 1. 서버에서 자바스크립트를 로딩하여 클라이언트 측에서 로딩하는 시간이 줄어든다. 2. 클라이언트사이드 렌더링의 경우 자바스크립트가 로드되지 ..

이전 프로젝트 들에서는 JPA를 통해 사용자 데이터를 추가/수정/조회 시 @Query를 통해 SQL문을 작성해야만 했다. 전화번호 같은 개인정보 등을 DB에 저장 시 암호화된 데이터로 저장해야 하기 때문이었다. 이를 위해서는 Service 단에서 암/복호화를 수행 후 DB에 작업을 하는 방법이나 mysql AES_ENCRYPT를 통해 명령을 수행하는 방법을 사용했다. 이번에 Converter를 통해 Annotation만으로 손쉽게 암/복호화를 수행하는 방법을 찾게 되어 글을 작성하게 되었다. @Converter 란? 엔티티의 데이터를 변환하여 데이터에 저장할 수 있는 기능 주로 개인정보나 암/복호화 해야하는 정보, 날짜를 원하는 방식으로 저장하기 위해 사용한다. 위 글에서는 전화번호의 암/복호화 수행을 ..

클릭 시 v-model을 통해 즉각적으로 data를 변경할 수 있다. template: ` `, data() { return { radioData: 'red', } },

데이터(객체)를 table 형태로 보여주는 컴포넌트이다. 코드를 보면서 설명하는 것이 이해하는데 더 좋을 것 같다. 코드 tempate: ` `, data() { return { table: { selected: [], loading: true, headers: [ {text: '번호', value: 'seq'}, {text: '이름', value: 'name'}, {text: '사용여부', value: 'useYn'}, {text: '등록일', value: 'regDt'}, {text: '수정일', value: 'uptDt'}, ], }, data: [], } }, created() { // data 가져오기 this.data = this.getData() }, computed: { // 테이블 set..

★ 이 글은 김영한 님의 스프링 핵심 원리 - 기본편을 학습하면서 작성하였습니다. SOLID란? 로버트 마틴의 좋은 객체 지향 설계의 5가지 원칙을 정리한 것 SRP - 단일 책임 원칙(Single Responsibility Principle) OCP - 개방-폐쇄 원칙(Open/Closed Principle) LSP - 리스코프 치환 원칙(Liskov Substitution Principle) ISP - 인터페이스 분리 원칙(Interface Segregation Principle) DIP - 의존관계 역전 원칙(Dependency Inversion Principle) SRP 단일 책임 원칙(Single Responsibility Principle) 한 클래스는 하나의 책임만 가져야 한다. 변경이 있을..