[Next.js] Rendering
·
👨‍💻 Programming/Next.js
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 - ..
[Next.js] Next.js 소개
·
👨‍💻 Programming/Next.js
IntroductionNext.js is a React framework for building full-stack web application.리액트만으로 애플리케이션을 구축할 때 모든 기능을 갖춘 애플리케이션을 만드는 것은 실행 불가능합니다. 리액트는 유저 인터페이스를 구축하는 라이브러이고, 라우팅, 데이터 페칭 등등 과 같은 다른 기능에 대한 결정을 해야합니다.Next.js는 유저 인터페이스를 위해 리액트를 사용하고, 어플리케이션을 위한 추가적인 기능을 제공합니다. 그것에는 라우팅, 최적화된 렌더링, 데이터 페칭, 번들링, 컴파일링 등이 있습니다. Next.js는 필요한 패키지를 모두 제공하기 때문에 추가적인 패키지를 설치할 필요가 없습니다.하지만 이러한 특징들을 구현하기 위해 따라야할 컨벤션이 있..
[TanStack Query] TanStack Query란
·
👨‍💻 Programming/React
TanStack Query란네트워크에서 받아온 데이터의 상태를 관리할 수 있도록 도와주는 라이브러리입니다.공식문서TS/JS, React, Solid, Vue, Svelte를 위한 강력한 비동기 상태관리 라이브러리세부적인 상태관리, 수동적인 refetching 그리고 끊임없는 비동기 스파게티 코드를 토스해라. 텐스택 쿼리는 선언적이고, 최신의 자동화된 쿼리 그리고 mutation을 줄 것입니다. 그 결과 개발자와 사용자 경험을 향상시킬 수 있을 것입니다.선언적이고 자동적입니다.데이터 fetching 로직을 일일이 작성할 필요가 없습니다. TanStack Query에게 어디서 데이터를 가져오면 되는지 얼마나 데이터의 신선도를 유지할 것인지 말해주세요. 그러면 나머지는 자동적일것입니다. TanStack 쿼리는..
[git] private repository clone시 remote: Repository not found
·
⚙️ Tool/git
문제다른 사람의 private repository clone시 remote: Repository not found가 나와서 클론을 받을 수 없었습니다.해결책 1github.com의 앞에 유저이름@를 붙여줍니다.$ git clone https://유저이름@github.com/~~~~~~~.git해결책 2이후 권한을 부여받은 토큰을 발급받아 입력해줍니다.토큰 발급 받기프로필을 클릭하고, 세팅에 들어가면 아래와 같은 화면이 나옵니다.
[DynamoDB] DynamoDB란
·
💻 CS/Database
DynamoDBAWS의 대표적인 NoSQL 기반 서버리스 데이터베이스 서비스입니다.key-value와 문서 기반 데이터 모델을 지원합니다.사용한만큼 비용을 지불하고, 버전 업그레이드, 가동 중단 등 유지관리가 필요없습니다.이외의 특징으론 이미지, 동영상 등 어떠한 형태도 저장이 가능하고, 질의 속도가 빠르고, 테이블 생성시 스키마 생성이 필요없다는 특징이 있습니다.기존 RDBMS와 다르게 데이터를 분산 방식으로 저장하므로 수평확장이 가능합니다.어떻게 작동하는가Tables & Items : 로우와 컬럼 대신에, 다이나모 DB는 items(JSON과 같은 객체)을 테이블에 저장합니다.Primary Keys : 각각의 item들은 고유한 primary key를 가져야합니다. primary키는 partition..
[VSCode] Mac OS 터미널 이미지 깨지는 현상 해결
·
⚙️ Tool/VS Code
shift + cmd + P 누르고 setting.json(Open user)에 아래 내용을 추가해줍니다."terminal.integrated.fontFamily": "MesloLGS NF"폰트명을 본인의 폰트와 맞추어주어야합니다.
[JS] 자바스크립트 사용용도, ECMASCRIPT, 자바스크립트의 특징
·
👨‍💻 Programming/JavaScript
자바스크립트의 사용용도브라우저Node.js가 등장한 이후부터 서버 사이드 어플리케이션 개발에서도 사용할 수 있습니다.자바스크립트가 동작하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트 엔진은 코드를 한줄씩 번역해서 실행하는 인터프리터입니다.브라우저는 자바스크립트 엔진을 내장하고 있고, Node.js에도 자바스크립트 엔진을 내장하고 있습니다. 하지만, 브라우저는 HTML, CSS, 자바스크립트를 실행하여, 웹페이지를 렌더링 하는 것이 주목적이라면, Node.js는 브라우저 외부에서 자바스크립트 실행환경을 제공하는 것이 주목적입니다.ECMAScript자바스크립트 핵심 문법을 규격화한 표준사항입니다.각 브라우저 제조사는 ECMAScript 사양을 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현해..
[프로그래머스 Lv0] 안전지대 | 자바
·
📝 Coding Test/Programmers Lv0
문제안전지대풀이import java.util.*;class Solution { public int solution(int[][] board) { int answer = 0; // 폭탄의 위치 파악 하기 List bomb_location = new ArrayList(); for(int i = 0; i = 0 && ny >= 0 && nx if(nx >= 0 && ny >= 0 && nx ArrayIndexOutOfBoundsException : 정해진 배열의 크기보다 크거나 음수 index에 대한 요청이 있으면 ArrayIndexOutOfBoundsException이 발생합니다.
[프로그래머스] 가격이 제일 비싼 식품의 정보 출력하기 | MySQL, 오라클
·
📝 Coding Test/SQL
문제가격이 제일 비싼 식품의 정보 출력하기풀이 1서브쿼리를 이용한 풀이입니다.MySQLSELECT PRODUCT_ID, PRODUCT_NAME, PRODUCT_CD, CATEGORY, PRICEFROM FOOD_PRODUCTWHERE PRICE = (SELECT MAX(PRICE) PRICEFROM FOOD_PRODUCT);오라클SELECT *FROM FOOD_PRODUCTWHERE PRICE = (SELECT MAX(PRICE) FROM FOOD_PRODUCT);풀이 2가격을 내림차순으로 정렬하고, 최상위 로우를 뽑아내는 풀이입니다.MySQLSELECT * FROM FOOD_PRODUCTORDER BY PRICE DESC LIMIT 1;오라클SELECT * FROM ( SELECT * FROM FOOD..