RoutingPage Router → App Router이전 버전까지는 pages/ 디렉토리에 파일들을 생성하며 페이지 구성을 함13버전 부터는 app/ 디렉토리를 제공13버전이 등장하며 가장 큰 변화가 생긴 부분 중 하나는 페이지 라우팅 방식페이지 라우팅 방식13 이전 버전(Pages Router)└── src/ └── pages/ ├── _app.tsx ├── _document.tsx └── index.tsx└── src/ ├── layouts/ │ └── testLayout.tsx └── pages/ ├── _app.tsx ├── _document.tsx ├── index.tsx └── ..

Next.js !== SSRNext.js는 SPA이며 SSG를 기본으로 사용하고, SSR를 사용할 수 있음더보기• SSG(static site generation) 개발자가 빌드 시 사전생성페이지(pre-render page)를 만들어 static 페이지로 가지고 있다. 클라이언트에서 페이지 요청 시 사전생성페이지를 로드하여 보여 준다. 페이지를 사전 생성하여 가지고 있기 때문에 클라이언트 요청에 대한 응답이 빠르다. 빌드 할 때 페이지가 생성되므로 변경사항이 생기게 되었을 때는 next.js의 특정 함수를 활용하여 변경사항을 읽은 다음 페이지를 생성 한다.Next.js는 기본적으로 SSG를 사용하기 때문에 빌드 시점에만 서버 사이드에서 pre-render한 파일들을 보내주고, 그 이후에는 CSR로 페이..

REACTCSR(Client Side Rendering)클라이언트 사이드 렌더링장점페이지 간 전환이 부드러움단점첫 페이지의 로딩속도가 느림HTML, JS를 사용자에게 보낸 뒤 사용함으로크롤링 봇이 사용하지 못한다. → 마켓팅 툴 사용X → 웹 비지니스에 있어 매우 큰 단점NEXT.JSSSR(Server Side Rendering)서버 사이드 렌더링장점서버 측에서 HTML파일을 만들어 브라우저에 보냄code splitting이라는 기술을 통해 초기 로드 시 필요한 최소한 코드만 다운로드 하여맵의 초기 로딩 속도를 개선함고 동시에 React보다 가볍게 동작함NEXT.JS 필요성풀스택 프레임워크프론트엔드, 백엔드 개발에서 필요한 잡다한 설정들에 수고를 줄여줌→ 리액트 라우팅, 바벨, 웹팩등의 설정부터, 백엔드..

컴포넌트란? 컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다를 수있다. (재사용 ↑ → 개발 시간 ↓) Vue 컴포넌트 간단 예시 Vue SFC Playground play.vuejs.org Vue 컴포넌트 등록 2가지 방법 컴포넌트 등록 방식은 전역, 지역 두 가지 방법이 있다. 전역 컴포넌트 등록 인스턴스 생성 후 view 또는 컴포넌트에서 사용할 수 있게 등록한다. app.component() 메서드를 사용하여 컴포넌트를 전역으로 등록한다. import MyComponent from './App.vue' // 전역 컴포넌트 등록 app.component('컴..

토이프로젝트도 만들겸 프론트엔드 공부를 해보자 생각해 대중적으로 사용하는 리액트랑 Vue 공부하며 정리하고자 글을 작성하게 됐다. Vue js 란 Vue는 웹에서 사용자 인터페이스를 프런트 엔드 JavaScript 프레임워크 MVVM패턴의 ViewModel에 해당하여, UI코드와 데이터 제어 로직을 분리 SPA(Single Page Application)를 구축하는데 이용 가능 Vue js 장점 1. 새로운 개발자들이 배우기 쉬움 단순하고 직관적인 문법을 가지고 있어 배우기 쉽고 개발을 더 간편하게 할 수 있다. 2. 가상 DOM 랜더링 방식 사용 가상 DOM을 사용하여 효율적으로 렌더링을 구현하고, DOM 조작을 최소화하여 성능을 향상시킨다. 3. 양방향 데이터 바인딩 방식을 사용 양방향 바인딩이란, ..

JOIN이란 관계형데이터베이스는 중복 데이터를 피하기 위해서 데이터를 여러개의 테이블로 나눠서 저장한다. 이렇게 분리되어 저장된 데이터를 사용자가 원하게끔 다시 도출하기 위해서 여러 테이블을 조합해야할 때가 있다. 이때 JOIN을 통해서 만들 수 있다. JOIN 종류 INNER JOIN OUTER JOIN - LEFT OUTER JOIN - RIGHT OUTER JOIN - FULL OUTER JOIN CROSS JOIN SELF JOIN INNER JOIN INNER JOIN은 교집합(A ∩ B) 연산과 같다. 양쪽 테이블 데이터 집합에서 공통적으로 존재하는 데이터만 조인해서 결과 데이터 집합을 추출한다. INNER JOIN 사용법 // INNER은 생략가능 SELECT 컬럼명 FROM 테이블A [IN..

SELECT문 실행 순서 SELECT 쿼리문을 작성할 때 사용되는 WHERE, FROM, GROUP BY 절과 같은 구문은 실행하는데 순서가 존재한다. 쿼리문의 실행 순서를 알고 쿼리를 작성하면 보다 효율적인 쿼리를 작성할 수 있다. SELECT문 문법 순서 SELECT -> FROM -> WHERE -> GROUP BY -> HAVING -> OERDER BY SELECT문 실행 순서 FROM -> WHERE -> GROUP BY -> HAVING -> SELECT -> ORDER BY SELECT문 각각의 역할 FROM 쿼리의 가정 첫번 째 실행 순서이다. FROM절은 전체 테이블의 결과를 조회한다. WHERE WHERE절은 FROM절에서 조회한 테이블에서 조건에 맞는 결과만 갖도록 데이터를 간추린다..

바인딩 바인딩(Binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미한다. 프로그램에서 사용되는 변수나 메소드 등 모든 것들이 결정되도록 연결해주는 것을 뜻한다. 바인딩이 되는 시점에 따라 정적 바인딩과 동적 바인딩으로 구분된다. 정적 바인딩 정적 바인딩(Static Binding)이란 컴파일 시 호출되는 바인딩을 뜻한다. 정적 바인딩의 형태로는 static, final, private method가 있다. class Person{ // static public static void hello() { System.out.println("안녕하세요 :)"); } } class Kim extends Person{ public static void hello(){ Sy..

MVC패턴 MVC패턴은 말 그대로 어플리케이션을 Model, View, Controller를 세 가지 구성 요소로 나누어 역할을 구분한 개발 방법론이다. 자세한 내용 [개발지식] MVC 패턴이 뭐길래 (Model-View-Controller) MVC패턴이란 위키백과 모델-뷰-컨트롤러(model–view–controller, MVc)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈 97dog.tistory.com Spring MVC [스프링/Spring]Spring MVC 패턴이란? (구조, 순서) MVC패턴이란 MVC패턴은 말 그대로 어플리케이션을 Model, View, Controller를 세 가지 구성 요소로 나누어 역할을 구분한..

SQL SQL(Structured Query Language : 구조적 질의 언어)이란 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다. SQL이란 데이터베이스에 데이터를 저장, 조회, 수정, 삭제할 때 사용한다. SQL 문법 종류 DDL(Data Definition Language) : 데이터 정의 언어 DML(Data Manipulation Lanuage) : 데이터 조작 언어 DCL(Data Control Language) : 데이터 제어 언어 TCL(Transcation Control Language) : 트랙잭션 제어 언어 DDL DDL(Data Definition Language : 데이터 정의 언어)이란 테이블과 컬럼을 정의하는 명령어로 생성, 수정, 삭제 등의 데이터 전체 골..