Next.js CORS 문제 해결 Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다. next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다. //next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*', destination: `API주소/:path*`, }, ]; }, }; module.exports = nextConfig; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..

👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기 안녕하세요 트리플랩입니다 :) 오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다. 일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고) // src/lib/styled-components.tsx 'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-compo..

안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..

1. 함수 합성(Function Composition)이란? 함수 합성은 함수들을 조합하여 새로운 함수를 만드는 것입니다. 함수 합성(Function Composition)을 사용해서 함수를 만들어 보겠습니다. 1) compose()의 특징은 함수 호출들을 오른쪽에서 왼쪽 방향으로 볼수 있습니다. const compose = function(functions){ if(!functions.length){ return function(x){ return x; } } return function(x){ let val = x; for(let i = functions.length - 1; i >= 0; i--){ val = functions[i](val) } return val; } } const fn = com..

function getData(){ fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(({title}) => console.log(`음답: ${title}`)) } function handleHeavyTask(bFetch){ if(bFetch) getData(); //fetch 비동기 요청 else console.log('지연없이실행') //코드의 실행 순서 보장 못함. } (function(){ console.log('안녕하세요'); handleHeavyTask(false); console.log('무거운 작업이 시작됐어요.'); })(); 결과) 👇🏻 이것은 동기와, 비동기 코드가 ..

🎯무한 롤링 기능 안녕하세요 TriplexLab입니다. 오늘은 무한롤링 기능에 대해서 이야기를 해보겠습니다. 저 같은 경우에는 Swiper(v8.4.7)을 커스텀해서 기능을 완성할 수 있었습니다. 그리고 반응형으로 제작을 해야해서 마크업 상에서 PC, 모바일 둘 다 만들어 놓고 css 미디어쿼리를 사용해서 해상도가 PC일 때 PC버전 보여주고, 해상도가 모바일일 때 모바일 버전을 보여주는 방식을 택했습니다. 그렇다 보니 JS에서 Swiper인스턴스를 다음과 같이 두 번 호출했습니다. /** HISTORY 모바일 영역 */ new Swiper(".history-swiper.mo", { //... } /** HISTORY PC 영역 */ const historySwiperPc = new Swiper(".hi..

최근에 Next.js 학습을 시작했습니다. 오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다. 렌더링의 종류는 크게 4가지가 있습니다. CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다. 👉🏻CSR 특징 클라이언트(브라우저) 측에서 렌더링합니다. 1. 사용자가 Website 요청을 보냄 2. 브라우저는 HTML을 다운로드 합니다. 3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다. 1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고, 2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 ..

안녕하세요 TriplexLab 입니다. 오늘은 macOS에 Homebrew로 Apache 설치하는 방법을 살펴보겠습니다. 👉🏻 1. macOS 11.4 Big Sur 개발환경 세팅 1. Big Sur 필수 라이브러리 설치를 위해 아래 명령어를 수행합니다. > brew install openssl 2. 내장 Apache가 이미 실행 중인 경우 먼저 종료하고 자동 로드 스크립트를 제거해야 합니다. > sudo apachectl stop > sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null 3. Brew에서 제공하는 Apache HTTPD (오픈 소스 기반 웹 서버)의 새 버전을 설치해야 합니다. >..

안녕하세요 오늘은 캔버스 사이즈에 대해서 살펴보겠습니다. 👉🏻고해상도 이미지 표현하기 요즘에는 디스플레이 자체가 워낙 고해상도이다. 픽셀 집적도가 거의 기존의 2배 이상이 디폴트이기 때문에, 이미지 작업을 할 때도 300px짜리 이미지를 만든다고 하면, 300px로 만들지 않고, 600px로 만든 다음, CSS등으로 절반을 줄여서 표현해준다! 선명하게 표현해주기 위해서! 캔버스도 동일합니다. 위에 처럼 디스플레이의 해상도 dpr이 1 일때는 왼쪽과 같고, dpr이 2일때는 오른쪽과 같습니다.(하나의 1픽셀을 4등분으로 나눠서 표현) 따라서 dpr이 높을수로 더 선명한 그래픽을 보여주는 겁니다. 맥을 쓰고 있는 분들은 dpr이 2로 나올것이기 때문에 1픽셀을 실제로 그리는데 4개의 픽셀을 쓰고 있다고 보시..

안녕하세요 triplexlab 입니다. 오늘은 Vanilla JS로 직접한번 구현 해봤습니다. 👉🏻slider를 직접 한번 구현하기 마우스 휠 가로스크롤를 하셔도 slider가 적용됩니다. See the Pen 좌, 우slider영역의 스크롤 by 소윤호 (@younhoso) on CodePen.

안녕하세요 TriplexLab입니다. 오늘은 webpack5으로 Lit.js을 세팅하는 방법에 대해서 살펴보도록 하겠습니다. 먼저 Web Component에 대해서 궁금하신다면 아래 글을 참고하시고👇🏻👇🏻 이어서 글을 보시면 이해하는데 더 도움이 됩니다. Web Component 정리 Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프 triplexblog.kr 👉🏻Lit.js 소개 여러분 혹시 lit.js 라고 아시나요?? Playground – Lit Simple. Fast. Web Components. lit.dev React, Vue..

👉🏻스티커 메모 앱(Sticky Notes App) 안녕하세요 TriplexLab 입니다. 이번에는 브라우저에서 스티커 메모장을 만들어 보겠습니다. 이번 포스트는 dcode라는 외국 유튜버를 보고 참고 했습니다. 👉🏻로직의 차이점 위에 외국인 dcode 유튜브의 코드와 저의 코드에는 약간의 차이점이 있습니다. main.js에서 그 차이점을 볼수 있습니다. 1. javascript의 class 문법을 사용해서 구조화 시킴.(외국인 유튜브는 함수형으로 만듬) 2. Template literals를 사용 (외국인 유튜브는 document.createElement를 사용) 3. UI 측면으로 삭제 휴지통 버튼을 제공(외국인 유튜브는 더블클릭을 해야지 삭제 가능) 👉🏻소스코드 공유 👉🏻파일 공유 작업한것 파일 공..