본문 바로가기

Computer Programming

[Next.js] Optimistic UI 구현 (좋아요, 북마크 기능 개선)
Computer Programming/Next 2024. 2. 24. [Next.js] Optimistic UI 구현 (좋아요, 북마크 기능 개선) Optimistic UI는 API에 요청을 보낸 후 UI를 그려내는 과정에서 모든 것을 낙관적으로 보고 UI를 먼저 그리는 모델이다. 다시 정리하자면, 옵티미스틱 UI는 모든 API 통신이 성공할 것이라 여기고 화면에 먼저 결과 값을 그리는 것을 말한다. 성공확률이 99%정도 되는 요청엔 적용해줘도 되지 않을까..? (좋아요, 북마크는 메인페이지 -> 상세페이지에 접근한 후 가능한데, 상세 페이지 유저가 좋아요나 북마크 버튼을 누를 때 아래와 같은 onSubmit 함수가 실행된다. const onSubmitOption = async (type: string) => { try { const res = await fetch( `${process.env.NEXT_PUBLIC_NEXT_SERVER}/api/${..
Deep Dive 18-21 [함수와 일급 객체 | 프로토타입 | strict mode | 빌트인 객체]
Computer Programming/Javascript 2023. 10. 9. Deep Dive 18-21 [함수와 일급 객체 | 프로토타입 | strict mode | 빌트인 객체] 18장. 함수와 일급 객체 일급객체의 조건 - '무명'의 리터럴로 생성 가능(런타임에 생성), 변수나 자료구조에 저장 가능, 매개변수에 전달 가능, 반환값으로 사용 - 함수는 위의 조건을 만족시킴 * 런타임(할당 단계)에 함수 리터럴이 평가되고, 함수 객체가 생성되어 변수에 할당되는 과정이 가능!! function example() { return function() { //... return num; } } - 즉 함수를 객체와 동일하게 사용할 수 있음 (어디서든지 리터럴로 정의할 수 있고, 런타임에 함수 객체로 평가됨) - 그러나 일반 객체와는 차이가 있음 -> 함수 객체는 호출할 수 있고, 함수 고유의 프로퍼티를 소유함 - 프로퍼티는 Object.prototype 객체의 프로퍼티를 상속받은 것 (즉..
Deep Dive 12-17 [함수 | 스코프 | 전역 변수의 문제점 | let, const | 프로퍼티 어트리뷰트 | 생성자 함수에 의한 객체 생성]
Computer Programming/Javascript 2023. 10. 1. Deep Dive 12-17 [함수 | 스코프 | 전역 변수의 문제점 | let, const | 프로퍼티 어트리뷰트 | 생성자 함수에 의한 객체 생성] 12장. 함수 - 함수 : 일련의 과정을 문statement으로 구현하고, 코드블록으로 감싸서 하나의 실행단위로 정의한 것 - 함수 사용을 통해 유지보수의 편의성을 높이고 코드의 신뢰성을 높임 (+재사용성, 가독성 향상) - 자바스크립트에서 함수는 객체 타입의 '값'이다. 즉 함수 리터럴로 생성할 수 있으며 변수에 할당할 수도 있음 함수 정의 방식 1) 함수 선언문 (표현식 x, 문) function add(x,y){ return x + y } - 이름 생략 불가 - 표현식이 아닌 문statement이라서 원래는 변수에 할당할 수 없지만, 함수는 함수 리터럴 표현식이 될 수 있으므로 '문'임에도 변수에 할당할 수 있음 - 즉 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석되고, 피연산자로 사용하면 ..
Deep Dive 10-11 [객체 리터럴 | 원시값과 객체의 비교]
Computer Programming/Javascript 2023. 10. 1. Deep Dive 10-11 [객체 리터럴 | 원시값과 객체의 비교] 10장. 객체 - 객체: 원시 값을 제외한 나머지 값 , 변경 가능한 값 - 상태(프로퍼티)와 동작(메소드)을 하나의 단위로 구조화 함 - 생성 방법 : 객체 리터럴 사용하기 ({} 중괄호 안에 0개 이상의 프로퍼티 정의) 변수에 할당되는 시점에 자바스크립트 엔진이 객체 리터럴을 해석해 객체를 생성함 - 프로퍼티 키 동적 생성 : obj[key] = "value" - 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀 - 자바스크립트에서 함수 = 일급객체. 즉, 값으로 취급할 수 있기 때문에, 프로퍼티 값으로 사용할 수 있음 프로퍼티 접근 1) 마침표 표기법 person.name 2) 대괄호 표기법 person['name'] (키 네임을 따옴표로 감싸야 함 ..
Deep Dive 6-9 [데이터타입 | 연산자 | 제어문 | 타입변환과 단축 평가]
Computer Programming/Javascript 2023. 9. 30. Deep Dive 6-9 [데이터타입 | 연산자 | 제어문 | 타입변환과 단축 평가] 6장. 데이터타입 1) 원시타입 a) 숫자 타입 - 숫자 타입 값은 모든 수를 실수로 처리 (정수만 표현하는 타입 x) - 2진수, 8진수, 16진수로 표현해도 참조할 때는 10진수로 해석됨 - Infinity, -Infinity, NaN b) 문자열 타입 - 자바스크립트에서 문자열은 원시 타입이며, 변경 불가능한 값(immutable value)임 c) 템플릿 리터럴 - 런타임에서 일반 문자열로 변환되서 처리됨 2) 객체타입 ----------------- * 데이터 타입 필요성? 1. 메모리 공간 확보 -> 낭비, 손실 줄임 (데이터 타입에 따라 공간의 크기 결정) - 식별자를 통해 값이 저장되니 메모리 주소의 선두 메모리 셀 주소를 찾아감 -> 데이터 타입에 따라 선두~ 해당하는 셀 크기 만큼 읽어..
리눅스로 C언어 컴파일하고 실행하기 (Ubuntu, vi editor, gcc)
Computer Programming/리눅스 | 운영체제 | 네트워킹 2023. 9. 20. 리눅스로 C언어 컴파일하고 실행하기 (Ubuntu, vi editor, gcc) 리눅스로 C언어 컴파일하고 실행하기 (vi editor, gcc) 리눅스에서 c언어 파일을 생성해야하므로 (vi editor 이용) vi editor가 없다면 설치해준다. 사실 리눅스는 초기 설치 시 이미 설치가 되어있으나, 더 다양한 기능을 위해 새로 설치하여 config를 수행해주는것이 좋다. 리눅스 환경에서 아래 코드를 실행하여 설치한다. sudo apt-get install vim 이 떄 설치 오류가 난다면 update를 먼저 실행하고나서 설치하면 에러가 안 뜬다. 설치가 완료됬다면 vi를 좀 더 편하게 사용하기 위해 설정파일을 만들면 된다. vi ~/.vimrc 그리고 나서 만든 파일을 vi를 통해 연다. 이후 insert모드로 변경한 아래 내용을 원하는만큼 입력한다. set autoindent..
Computer Programming/Next 2023. 8. 3. Next.js 13 - 블로그 프로젝트 | 성능 최적화 1. cache() - fetch를 사용하지 않는 api 비동기 함수 fetch()는 중복된 호출이 있다면 한번 캐싱하고 그 값을 자동으로 사용한다. export const getPosts = cache(async () => { const filePath = path.join(process.cwd(), "data", "posts.json"); return readFile(filePath, "utf-8") .then(JSON.parse) .then((posts) => posts.sort((a, b) => (a.date > b.date ? -1 : 1))); }); cache -> request 인자가 동일한 인자라면 한번 호출이 되면 캐시된 값을 반환한다. 한번 렌더링 될 때 유지되며 (= 한번 렌더링 될..
Next.js 13 - Redirects, Rewrites, Middleware, .env
Computer Programming/Next 2023. 8. 2. Next.js 13 - Redirects, Rewrites, Middleware, .env 1. Redirects 삭제된 페이지, 존재하지 않는 페이지일 경우 지정한 경로로 리다이렉트 시킴 next.config.js에서 설정함 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", }, ], }, async redirects() { return [ { source: "/products/deleted_forever", destination: "/products", permanent: true, //search engine에게 현재 페이지는 존재하지 않는다고 알려줌 -> 캐싱 }, { source:..
Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트
Computer Programming/Next 2023. 8. 2. Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트 1. loading.tsx layout.tsx와 같은 위치의 폴더 안에 loading.tsx를 정의해주면 해당하는 return 값이 로딩중에 보여지게 된다. export default function PageLoading() { return loading...; } layout은 보여지고, 그 layout의 children에 해당하는 부분에서 로딩중일 때 실행된다. 정적인 데이터이므로 pre-fetched html에 포함되어있다. -> SSG에서는 확인할 수 없으며 의미도 없다. 즉 loading 이라는 것은 dynamic하게 SSR이나 CSR을 사용할 때 의미가 있음 loading.tsx는 한 라우트당 1개씩 지정할 수 있기 때문에, 데이터들 내에서 loading...들을 보여주고싶다면 segments..

티스토리툴바

*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*