What is Rendering?Rendering is the process of transforming the component code you write into UI that users can see and interact withIn Next.js, the tricky part to building a performant application is figuring out when and where this transformation should happen.CSR, SSR and RSCs?Rendering in React → Rendering in Next.jsHow rendering works in React - CSRClient Side RenderingThis whole approach - ..

IntroductionNext.js is a React framework for building full-stack web application.리액트만으로 애플리케이션을 구축할 때 모든 기능을 갖춘 애플리케이션을 만드는 것은 실행 불가능합니다. 리액트는 유저 인터페이스를 구축하는 라이브러이고, 라우팅, 데이터 페칭 등등 과 같은 다른 기능에 대한 결정을 해야합니다.Next.js는 유저 인터페이스를 위해 리액트를 사용하고, 어플리케이션을 위한 추가적인 기능을 제공합니다. 그것에는 라우팅, 최적화된 렌더링, 데이터 페칭, 번들링, 컴파일링 등이 있습니다. Next.js는 필요한 패키지를 모두 제공하기 때문에 추가적인 패키지를 설치할 필요가 없습니다.하지만 이러한 특징들을 구현하기 위해 따라야할 컨벤션이 있..

TanStack Query란네트워크에서 받아온 데이터의 상태를 관리할 수 있도록 도와주는 라이브러리입니다.공식문서TS/JS, React, Solid, Vue, Svelte를 위한 강력한 비동기 상태관리 라이브러리세부적인 상태관리, 수동적인 refetching 그리고 끊임없는 비동기 스파게티 코드를 토스해라. 텐스택 쿼리는 선언적이고, 최신의 자동화된 쿼리 그리고 mutation을 줄 것입니다. 그 결과 개발자와 사용자 경험을 향상시킬 수 있을 것입니다.선언적이고 자동적입니다.데이터 fetching 로직을 일일이 작성할 필요가 없습니다. TanStack Query에게 어디서 데이터를 가져오면 되는지 얼마나 데이터의 신선도를 유지할 것인지 말해주세요. 그러면 나머지는 자동적일것입니다. TanStack 쿼리는..

자바스크립트의 사용용도브라우저Node.js가 등장한 이후부터 서버 사이드 어플리케이션 개발에서도 사용할 수 있습니다.자바스크립트가 동작하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트 엔진은 코드를 한줄씩 번역해서 실행하는 인터프리터입니다.브라우저는 자바스크립트 엔진을 내장하고 있고, Node.js에도 자바스크립트 엔진을 내장하고 있습니다. 하지만, 브라우저는 HTML, CSS, 자바스크립트를 실행하여, 웹페이지를 렌더링 하는 것이 주목적이라면, Node.js는 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주목적입니다.ECMAScript자바스크립트 핵심 문법을 규격화한 표준사항입니다.각 브라우저 제조사는 ECMAScript 사양을 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현해..

생성자 다중 정의생성자도 다중 정의할 수 있습니다.생성자가 다중 정의되었다고 할지라도, 호출되는 생성자는 1개입니다.class MyString { private byte[] string; public MyString() {} public MyString(String param) { this.string = param.getBytes(); } public MyString(int param) { String tmp; tmp = String.format("%d", param); this.string = tmp.getBytes(); } public String getString() { if (string == n..

Object(객체)OOP에서 소스코드를 구성하는 단위요소입니다.자바에서는 클래스라는 문법으로 객체를 기술하고, 클래스는 반드시 존재 이유와 목적이 명확해야합니다.클래스에서 생성된 객체를 인스턴스라고 부릅니다.*OOP(Object-Oriented Programming)프로그램을 객체의 집합체로 보고 객체들은 서로 관계를 갖는다는 관점을 갖고 프로그래밍하는 것입니다.클래스클래스 안에 있는 변수나 함수를 멤버라고 부릅니다.더 자세히 변수는 필드, 함수는 메서드라고 부릅니다.선언과 정의가 공존하는 구조입니다.객체를 사용할 사람을 배려하여 작성하는 능력이 필수적으로 요구됩니다.클래스는 constructor, field, method로 구성됩니다.접근제어자public : 외부 접근 허용protected : 같은 패..

자바스크립트에서 변수를 선언하는 방법은 var, let, const 세 가지가 있습니다. ES5까지 var가 유일한 변수 선언문이였지만, ES6 이후 var 사용을 지양하고 let, const를 사용합니다.그 이유는 아래와 같습니다.var는 변수의 중복선언이 가능합니다.변수 호이스팅(hoisting)이 발생하여, 변수 선언이전에도 사용이 가능합니다.var는 함수레벨 스코프라, 함수 내부의 변수 외에는 모두 전역 변수가 되버립니다.해당 항목들이 어떤 문제가 생기는지 하나씩 알아보겠습니다.변수 중복 선언var는 같은 이름으로 중복선언이 가능합니다. 중복선언을 하게 된다면, 의도치 않게 값이 변경될 수 있고, 이는 오류로 이어질 수 있습니다.var name = jin;var name = kim;var age ..

null?자바의 primitive 타입의 경우 초기값으로 0이나 false가 들어갑니다. 하지만, reference 타입의 경우 주소값이 들어와야하고, 주소값이 초기화 되지 않았을 경우 주소가 없다라고 표현을 해야하는데 이 때 null을 사용합니다.즉, null이라는 것은 아무 주소도 가리키고 있지 않다라는 의미로 이해하면 됩니다.NullPointExceptionNullPointException(NPE)은 컴파일 시점이 아닌 런타임 시점에 발생하기 때문에 까다로운 오류입니다. NPE는 다음과 같은 상황에서 발생합니다.null 객체의 인스턴스 메서드를 호출할 경우null 객체의 필드에 접근하거나 값을 변경할 경우빈 배열 객체의 길이 속성을 가져올 경우...String 객체가 비었는지 확인하는 방법== nu..

말줄임 한줄 적용하기p { width : 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }얼마의 너비를 넘어갔을 경우 말줄임을 사용할건지 width를 지정해주어야합니다.white-space: nowrap을 사용해 자동줄 바꿈을 없앱니다.text-overflow: ellipsis를 사용하면 글자가 특정 범위를 벗어나면 말줄임표 처리를 해줍니다.text-overflow를 사용하기 위해선 overflow를 지정해야하는데 overflow : hidden를 적용해줍니다.말줄임 여러줄 적용하기p { width: 200px; overflow: hidden; text-overflow: ellips..