티스토리

Crafting My Future with Code

검색하기

블로그 홈

Crafting My Future with Code

j-plum.tistory.com/m

코드로 미래를 그리다

구독자: 0

방명록 방문하기

주요 글 목록

런데이 30분 달리기 도전 8주 - 2주차 2주차1분 30초 달리기 + 2분 걷기 * 4 + 1분 30초 달리기1분 30초 달리기 + 2분 걷기 * 5 + 1분 30초 달리기2분 달리기 + 2분 걷기 * 4 + 2분 달리기 2주차 첫번째 달리기1주차 마지막부터 달리기가 1분 30초생각보다 힘들었지만 두번째 달리는 1분 30초라 그런지 할만했습니다.2분이 약간 걱정되지만 할만한 것 같습니다. 2주차 두번째 달리기원래라면 화요일 달려야 했지만.. 비도오고 수요일이 예비군이였습니다.그래서 3일 쉬고 달리게 되었습니다.하지만 1분 30초에 꽤 익숙해진 상태라 할만했습니다.마지막 5분 걷기에 추가로 1분30초를 더 달렸습니다. 2주차 세번째 달리기어.. 2분 달리기가 생각보다 더 힘들었습니다.ㅋㅋㅋㅋ마치 처음 1분달리기 할때처럼 숨이 차는게 느껴졌습니.. 공감수 0 댓글수 0 2025. 5. 3.
런데이 30분 달리기 도전 8주 - 1주차 그냥 체력을 기르고 싶었습니다. 그래서 시작한 달리기.. 1주차1분 달리기 + 2분 걷기 * 4 + 1분 달리기1분 달리기 + 2분 걷기 * 5 + 1분 달리기1분 30초 달리기 + 2분 걷기 * 4 + 1분 30초 달리기 1주차 첫번째 달리기 내가 마지막으로 숨차게 움직여본게 언제였을까..? 라는 생각을 가지고 시작했습니다. 1주차의 첫 달리기는 페이스라는걸 모르고 막 달리다 마지막에 지쳐서 힘들게 겨우겨우 완주했습니다. 그리고 비가 와서 이틀 쉬었습니다... (근육통도 좀 있었습니다...) 1주차 두번째 달리기 첫번째 달리기와 다르게.. 매우 할만했습니다... 아주 약간의 근육통이 있었습니다만.. 이건 제가 운동을 너무 안해서 그런거라 생각하고 진행했습니다. 페이스도 안정되었고, 케이던스라는 것.. 공감수 1 댓글수 0 2025. 4. 25.
파일 업로드 처리 (Multer) 생각보다 사용방법이 어렵다 느껴 간단하게 정리해보고자 합니다. Multer는 파일 업로드를 처리하는 미들웨어 입니다.특히 multipart/form-data를 처리하는데 사용하고, 파일을 디스크 또는 메모리에 저장할 수 있습니다. 기본개념multer를 사용하면 클라이언트라 form-data로 업로드한 파일을 서버에서 처리하고 저장할 수 있습니다. storage: 파일 저장 방식(디스크 저장 or 메모리 저장)destination : 파일이 저장될 폴더 지정filename : 저장될 파일명 지정 (이름 충돌 방지)limits : 파일 크기 제한 설정 가능fileFilter : 특정 파일만 허용 가능 ( ex : 이미지 파일만 허용) const upload = multer({ storage: multer... 공감수 0 댓글수 0 2025. 2. 17.
passport.js 정리하기 1. passport.js란?passport.js는 Node.js에서 인증을 처리하기 위한 미들웨어로, 다양한 인증 전략을 제공합니다.인증을 처리하는 데 필요한 로직을 간단하게 구현할 수 있게 도와줍니다.2. passport의 흐름passport.use로 전략 등록하기인증 전략의 개념 인증 전략은 사용자가 시스템에 접근하기 위한 인증방법을 정의하는 것 입니다.예를들어, 로컬 로그인, 카카오 로그인, 구글 로그인 등이 전략으로 제공됩니다.passport.use 사용법passport.use() 메서드는 인증 전략을 등록하는 함수입니다.등록된 전략은 이후 passport.authenticate()로 호출해 사용합니다.예시passport.use( new LocalStrategy( { userna.. 공감수 1 댓글수 0 2025. 2. 14.
mongoDB 에 대하여 1. mongoDBmongoDB는 NoSQL 데이터베이스이고, 그 구조와 사용법이 JSON 형식과 유사하게 설계되어있습니다. 2.mongoDB와 JavaScript의 관계 1. JSON 과 BSON : mongoDB는 데이터를 JSON과 비슷한 BSON 형식으로 저장합니다.자바스크립트 개발자에게는 친숙하게 느낄 수 있습니다. 2. JavaScript 기반 쿼리 : mongoDb의 셸에서 쿼리는 JavaScript 구문을 기반으로 작성합니다.JavaScript 를 사용하는 것처럼 데이터를 조회하고, 조작할 수 있습니다. 3. Node.js와의 호환성 : mongoDB는 Node.js와 잘 어울리는 라이브러리(mongoose, mogodb)나 패키지를 제공하여 JavaScript로 쉽게 다룰 수 있습니다... 공감수 2 댓글수 1 2025. 1. 25.
3. express 미들웨어 정리하기 express의 미들웨어는 요청과 응답 사이에 위치한 함수로, 주로 요청을 처리하거나. 응답을 수정하는 작업을 합니다.각 미들웨어는 요청을 처리하고, next()를 호출하여 다음 미들웨어로 넘길지, 응답을 보낼지 결정할 수 있습니다. 미들웨어는 app.use()로 설정합니다.요청이 들어오면 순차적으로 실행되며, 각각의 미들웨어가 요청을 수정하거나 처리합니다.1. morgan("dev")app.use(morgan("dev"));기능- morgan은 HTTP 요청에 대한 로깅을 처리하는 미들웨어입니다.dev는 로깅 형식중 하나로, 개발환경에서 요청 URL, HTTP상태 코드, 응답시간을 콘솔에 출력합니다. 사용하는 이유 - 요청과 상태를 쉽게 추적하기위해 사용되며, 요청이 서버에 들어올 때마다 콘솔에 로그가.. 공감수 1 댓글수 1 2025. 1. 24.
오랜만에 다시 시작한 알고리즘! 프로그래머스 - 과일장수 문제 설명 과일 장수가 사과 상자를 포장하고 있습니다. 사과는 상태에 따라 1점부터 k점까지의 점수로 분류하며, k점이 최상품의 사과이고 1점이 최하품의 사과입니다. 사과 한 상자의 가격은 다음과 같이 결정됩니다. 한 상자에 사과를 m개씩 담아 포장합니다. 상자에 담긴 사과 중 가장 낮은 점수가 p (1 ≤ p ≤ k)점인 경우, 사과 한 상자의 가격은 p * m 입니다. 과일 장수가 가능한 많은 사과를 팔았을 때, 얻을 수 있는 최대 이익을 계산하고자 합니다.(사과는 상자 단위로만 판매하며, 남는 사과는 버립니다) 예를 들어, k = 3, m = 4, 사과 7개의 점수가 [1, 2, 3, 1, 2, 3, 1]이라면, 다음과 같이 [2, 3, 2, 3]으로 구성된 사과 상자 1개를 만들어 판매하여 최대 .. 공감수 0 댓글수 0 2025. 1. 8.
2. 노드의 특성 1. 이벤트기반Node.js는이벤트를 기반으로 동작합니다.이벤트가 발생했을 때 반응하도록 처리합니다.2. 흐름1. 콜백 함수 생성 : 이벤트가 발생했을 때 실행될 콜백 함수를 정의합니다.2. 이벤트리스너 등록 : 특정 이벤트가 발생시 콜백함수가 실행되도록 이벤트 리스너를 등록합니다.3. 이벤트 발생 : 이벤트가 발생하면 등록된 이벤트 리스너가 반응하며 지정된 콜백 함수를 실행합니다. 3. 블로킹과 논블로킹 I/ONode.js는 기본적으로 비동기적이고 논 블로킹 방식으로 동작하며, 동기적이고 블로킹 방식으로도 동작할 수 있습니다.비동기(Asynchronous) : 다른 작업의 완료를 기다리지 않고 즉시 작업을 시작합니다.논블로킹(Non-blocking) : 작업을 실행할 때, 그 작업이 끝날때 까지 대기.. 공감수 0 댓글수 0 2025. 1. 7.
1. Node.js 란? 1. Node.js란 크롬 V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. (공식 홈페이지)서버 애플리케이션을 개발할 수 있게 해주는 플랫폼으로, 자바스크립트를 사용하여 서버를 구축할 수 있게 해줍니다. 2. Node.js는 내장된 HTTP 서버 라이브러리를 포함하고 있어, Apache와 같은 별도의 웹 서버 소프트웨어 없이도 웹 서버를 구축할 수 있습니다. 따라서 Node.js는 서버 측 애플리케이션을 개발하는 데 사용되는 런타임 환경이며, 서버로서의 역할을 수행합니다.질문) 노드는 서버가 아닌가? - Node.js는 서버 자체가 아니라, 서버를 구축할 수 있는 런타임 환경입니다. Node.js는 JavaScript 를사용하여 서버를 개발할 수 있는 플랫폼을 제공합니다. .. 공감수 0 댓글수 0 2025. 1. 7.
Jest에 대해 알아보자 제스트(Jest)는 자바스크립트 테스트 프레임워크로, 주로 리액트 애플리케이션의 테스트에 사용됩니다. Meta에서 개발하였으며, 단위 테스트(unit testing) 및 통합 테스트(integration testing)를 쉽게 작성할 수 있도록 설계되었습니다 특징 스냅샷 테스트: 컴포넌트의 UI가 예상대로 렌더링되는지 확인하기 위해 스냅샷을 찍어 비교하는 기능을 제공합니다.모듈화: 다양한 모듈을 쉽게 모킹(mocking)하여 테스트할 수 있어, 실제 의존성을 제거하고 독립적으로 테스트할 수 있습니다.빠른 실행: 변경된 파일만 테스트하여 실행 속도를 높이는 "빠른 테스트" 기능을 제공합니다.비동기 테스트: 비동기 코드를 간편하게 테스트할 수 있는 API를 제공하여, Promises와 async/await.. 공감수 0 댓글수 0 2024. 9. 30.
D: Dependency Inversion Principle(의존성 역전 원칙, DIP) 정의 : 고수준 모듈이 저수준 모듈에 의존해서는 안된다. 둘 다 추상화된 인터페이스에 의존해야한다.예시 : 리엑트에서 특정 API 서비스에 직접 의존하지 않도록, 추상화된 서비스에 의존하게 설계할 수 있습니다. DIP 위반 예시function UserProfile() { const [user, setUser] = useState(null); useEffect(() => { fetch('/api/user/1') .then((res) => res.json()) .then((data) => setUser(data)); }, []); return ( {user?.name} {user?.email} );}UserProfile 컴포넌트는 특정 API .. 공감수 1 댓글수 0 2024. 9. 30.
I: Interface Segregation Principle(인터페이스 분리 원칙, ISP) 정의 : 특정 클라이언트에 맞는 인터페이스만 구현해야 한다. 즉, 불필요한 메서드를 포함한 큰 인터페이스 대신, 작은 인터페이스 여러개로 분리해야 한다.리엑트 기준으로 본다면 불필요한 Props를 넘기지 않고 필요한 Props를 정의하는 것으로 보면 될 것 같습니다. 예시 : 리액트 컴포넌트에서 필요 없는 props를 받지 않도록 필요한 props만 정의하기 ISP 위반 예시하나의 컴포넌트에서 모든 기능을 처리하기 위해, ViewUser 와 EditUser 모드를 모두 저리하는 코드를 작 function UserInfo({ user, onEdit, onSave }) { return ( {user.name} {user.email} Edit Save ).. 공감수 1 댓글수 1 2024. 9. 30.
O: Open/Closed Principle (개방-폐쇄 원칙, OCP) 정의 : 소프트웨어는 확장에는 열려 있어야 하고, 수정에는 닫혀 있어야 한다. 즉, 기능을 확장할 때 기존 코드를 수정하지 않고 새로운 기능을 추가할 수 있어야 한다. 즉, 기존 기능의 변경없이 기능을 확장시킬수 있게 만들자가 OCP의 목적입니다. 나쁜예시부터..const menuList = ["메일", "카페", "블로그", "쇼핑", "뉴스"]; menuList가 추가될때 기존 코드에서 Menu라는 컴포넌트를 추가적으로 작성해야합니다.. 네.. 정말 말도안되는 코드입니다. 설마 이런사람이 있을까 싶지만.. 예시일 뿐입니다. const menuList = ["메일", "카페", "블로그", "쇼핑", "뉴스"]; {menuList.map((menuName) => { return .. 공감수 5 댓글수 2 2024. 9. 13.
S : Single Responsibility Principle(단일 책임 원칙, SRP) S: 단일 책임 원칙 (Single Responsibility Principle, SRP)정의: 한 클래스는 오직 하나의 책임만 가져야 한다.설명: 하나의 클래스나 모듈은 단 하나의 역할을 수행하도록 만들어져야 하며, 그 클래스나 모듈에 변경이 발생할 이유는 오직 하나뿐이어야 한다는 원칙입니다SRP의 책임은 단순히 동작을 기준으로 컴포넌트를 쪼개는 것과는 조금 다릅니다. SRP의 핵심은 단일 책임을 가진다고 해도, 그 책임이 반드시 하나의 동작만으로 제한되지는 않습니다.오히려 SRP는 컴포넌트가 명확한 책무를 갖도록 하는 것이 중요합니다. 이 책무는 특정한 기능이나 역할을 담당하는 것으로, 이를 통해 컴포넌트의 역할이 명확히 구분되고 유지보수성이나 확장성이 향상됩니다. 공감수 0 댓글수 0 2024. 9. 13.
2. SOLID전에 OOP의 기본 개념에 대해 알아보자! SOLID원칙을 들어가기전에.. OOP의 기본 개념인 다형성 캡슐화 합성 등에 대해 정리를 해보고자 합니다.OOP의 개념을 프론트앤드의 입장에서 정리하려고 하다보니 생각보다 예시가 적절하지 않다라는 느낌이 들기도합니다.. 1. 캡슐화 (Encapsulation)정의: 객체의 내부 상태(데이터)와 이를 다루는 메서드(기능)를 하나의 단위로 묶는 것을 의미하며, 외부에서는 객체 내부에 직접 접근하지 못하도록 숨기는 것을 말합니다.장점: 캡슐화를 통해 외부에서 객체의 내부 구조를 알 필요 없이 메서드를 통해서만 데이터를 조작하게 되어, 코드의 복잡성을 줄이고 유지보수를 용이하게 합니다.예시 (React):const MyComponent = () => { const [count, setCount] = useS.. 공감수 1 댓글수 2 2024. 9. 11.
1. SOLID 원칙이란? SOLID 원칙이란?OOP 설계 원칙을 다섯가지로 나누어 설명한 것 입니다. S: 단일 책임 원칙 (Single Responsibility Principle, SRP)O: 개방-폐쇄 원칙 (Open/Closed Principle, OCP)L: 리스코프 치환 원칙 (Liskov Substitution Principle, LSP)I: 인터페이스 분리 원칙 (Interface Segregation Principle, ISP)D: 의존성 역전 원칙 (Dependency Inversion Principle, DIP)위의 원칙들은 객체지향 설계를 더 나은 방향으로 이끌기 위해 만들어졌습니다. 그렇다면 SOLID 원칙은 왜 중요한가?SOLID원칙 은 OOP 설계의 품질을 높이기 위한 가이드라인입니다.코드가 더 유연.. 공감수 1 댓글수 2 2024. 9. 11.
공부하며 정리해보기 - 2. Async/Sync에 대해 비동기와 동기는 웹 개발에서 중요한 개념입니다.이 두 방식은 웹 애플리케이션에서 데이터를 주고받는 방법을 설명하며, 각각 고유한 장단점이 있어 상황에 따라 적절하게 사용합니다. 1. Sync(동기) - 요청과 응답이 동시에 이루어지는 방식입니다. 웹 페이지를 새로고침하면서 데이터를 불러오는 경우가 이에 해당합니다. 예를 들어, 온라인 쇼핑몰에서 사용자가 결제 정보를 입력하고 결제 버튼을 누르면, 페이지가 새로고침되면서 결제가 처리되고, 새 페이지에 결제 완료 정보가 표시됩니다. 장점코드의 간결성- 동기 통신은 요청과 응답이 순차적으로 이루어지므로, 코드를 작성하고 이해하기 쉽습니다.순서 보장- 요청을 보낸 후 응답을 받아야 다음 작음을 수행할 수 있으므로, 요청과 응답의 순서가 보장됩니다.에러 처리 .. 공감수 0 댓글수 0 2024. 9. 10.
공부하며 정리해보기 - 1. REST API 1. REST의 구성1) 자원(RESOURCE) - URI (Uniform Resource Identifier) - 자원은 REST에서 관리하는 모든 데이터를 의미합니다. 에를 들어, 사용자 정보, 게시글, 상품 등… 다양한 내용이 자원이 될 수 있습니다. 자원은 특정 위치를 URI로 표현합니다. - URI란? : 인터넷 상에서 자원을 식별하는 고유한 주소입니다. 웹 브라우저에서는 URL 등으로도 많이 알려져 있습니다. URI를 통해 클라이언트는 서버의 자원에 접근할 수 있습니다. 예시 : /users/j-plum - ID가 j-plum이라는 사용자에 대한 자원/products/12345678 - ID가 상품번호가 12345678인 상품에 대한 자원.(예시의 users와 products가 자원이되고.. 공감수 0 댓글수 0 2024. 8. 22.
사용해보니 편했던 VSC Extension에 대해 쓰면서 편했던 걸 추가할 예정입니다. 1. Todo Tree 친구가 추천해준 익스텐션입니다 생각보다 너무 편해서.. 다운받으면 마지막에 나무가 생깁니다 사용법 사용법이랄게.. 없습니다 //TODO 후 해야할 것들을 정리해두면 됩니다. (반드시 대문자 /**/ 가능) 아까 추가되었던 나무를 클릭하면 Todo가 전부 보입니다. 클릭하면 해당 Todo가 있는 파일로 이동합니다. 꽤 유용하게 사용하고 있습니다. 공감수 0 댓글수 0 2024. 3. 11.
background size 에 대해 auto : Default 값, 원본 이미지의 크기를 유지하며, 이미지가 요소보다 크면 자동으로 축소되고, 작으면 확대됩니다. 왜곡이 발생할 수 있습니다 px px : 너비, 높이의 크기를 지정합니다. 이미지가 해당 크기로 고정됩니다. 원본 이미지와 크기가 다르면 왜곡이 발생합니다. px : 너비만 크기를 지정하며, 높이는 자동으로 조정됩니다. 원본 이미지와의 비율을 유지하므로 왜곡이 발생하지 않습니다. 100% 100%: 너비와 높이를 각각 요소의 100%로 지정합니다. 이미지가 부모요소와 동일한 크기로 확대됩니다. 왜곡이 발생할 수 있습니다. 50% : 너비와 높이를 각각 요소의 50%로 지정합니다. 이미지가 부모요소의 반만큼 크기로 축소됩니다. 비율을 유지하므로 왜곡이 발생하지 않습니다. (back.. 공감수 0 댓글수 0 2024. 3. 11.
[Next js] 엑티브 링크와useSelectedLayoutSegment 주소 연결에 따른 아이콘 또는 nav 또는 tab이 바뀌는 경우 사용하는 useSelectedLayoutSegment 라는 넥스트에서 지원해주는 훅이 있습니다. 기존에 활성화된 nav나 tab을 만들기 위해서는 usePathname 도 있었지만 별도의 처리가 필요했습니다. useSelectedLayoutSegment를 사용시 별도 처리없이 간단하게 만들 수 있습니다. 주소가 바뀔경우 useSeletedLayoutSegment는 해당 패이지가 존재하는 폴더에 이름을 전달해줍니다. localhost:3000/home 의 경우 log에는 home가 찍힙니다. (아래는 추후 설명할 useSelectedLayoutSegments 입니다) useSelectedLayoutSegments 에 대해서 useSelecte.. 공감수 0 댓글수 0 2024. 1. 30.
[Next js] Parallel Routes 와 Intercepting Routes 패러랠 라우트 (parallel routes) - 조건에 따라 동일한 레이아웃에서 하나 이상의 페이지를 렌더링할 수 있게 해줍니다. - @폴더명 으로 slot(슬롯)을 지정할 수 있으며 같은 수준의 layout 파일에 props로 전달됩니다. 패러랠 라우트를 이용해 모달 만들기 1. (beforeLogin) 이라는 같은 폴더안에 @modal 이라는 폴더를 만들어줍니다. (여기서 만드는 @이름은 layout에 사용할 props로 이용하게 됩니다. 이 기능을 next에서는 slot 이라고 하는것 같습니다.) 2. @modal 안에는 보여줄 page.tsx 파일을 만들어줍니다. 3. layout과 page 또한 간단하게 구성합니다. (아까 위에서 @modal 이라고 만든 폴더의 이름은 여기서 props로써 사.. 공감수 0 댓글수 0 2024. 1. 23.
[Next.js] 태그 Image 컴포넌트 - Next.js에서 이미지를 로딩하는데 사용되는 img 태그 대신 Image 컴포넌트를 사용할 수 있습니다. Image 컴포넌트는 이미지 최적화와 성능 향상을 위한 여러 기능을 제공합니다. Image 컴포넌트에 대한 정리글 : https://j-plum.tistory.com/120 [Next.js] Images에 대해서 해당 내용은 npx create-next-app --example image-component react-image-app 를 이용해 작성하였습니다. 1. Next.js의 Image 컴포넌트 Image 컴포넌트에서 제공하는 기능 3가지 lazy loading - 화면 밖의 이미지는 로딩을 j-plum.tistory.com 공식문서 : https://nextjs.org.. 공감수 0 댓글수 0 2024. 1. 20.
왜 리엑트를 사용하는가 리엑트는 왜 나왔을까? 1. 페이지 전환없이 앱 같은 느낌을 원할 경우(예시 : gamil(AJAX)) 2. 한 페이지에서 다 하는 SPA(single page application) 방식의 유행 - SPA는 데이터 유지에 용이. (컨텐츠만 갈아 끼우는 느낌의 방식으로 자주 이용합니다) 3. 프론트의 비중이 점점 높아짐(데이터를 많이 다룹니다) - 2번에서 말한 데이터 유지를 통해 백엔드에게 추가 요청이 줄어듭니다. 4. MVC 등의 개발 방식은 대규모 개발에 적합하지 않아 대안이 필요 - MVC는 backend에서 사용하던 아키텍처 입니다. (Model 과 view의 양방향 바인딩입니다.) - 잦은 리랜더링이 발생할 수 있으며 MVC 구현에서는 불필요한 업데이트와 렌더링이 발생하여 성능 문제가 발생할 .. 공감수 0 댓글수 0 2024. 1. 18.
[Next.js] Next App Router에 대해 Next란 - React 위에서 돌아가는 프레임 워크입니다. - React는 화면만 그리는 라이브러리 라고 한다면, Next에서는 데이터, 라우팅, 캐싱, 스타일링, 최적화, 배포 다양한 기능을 Next라는 프레임워크 하나로 만들 수 있습니다. - 백엔드 서버가 없을때 Next 하나만으로 서버를 실행할 수는 있습니다 (권장하지 않음) Pages Router 와 App Router의 차이 - App Router는 디렉토리 관련 변경사항이 많아졌습니다. (추후정리) - Pages Router 는 레이아웃 기능이 없어서 아쉬웠지만 App Router는 레이아웃 기능이 있습니다. - App Router 는 미들웨어로 페이지별 권한 체크가 가능해졌습니다. - React18을 사용하며, 서버 컴포넌트를 사용합니다... 공감수 0 댓글수 0 2024. 1. 18.
다시 공부시작.. 최근에 몸도 안 좋고 여러 가지 일이 많아서 공부를 못했는데 뭐 길게 적어봐야 핑계 같고 다시 시작합니다. 먼저 next app router를 정리해 볼까 합니다. 그리고 이제 꾸준히 디자인 패턴을 정리할 생각합니다. 공감수 0 댓글수 0 2024. 1. 17.
[Next.js] router와 slug + 기본경로설정 기본적으로 Next.js의 Router는 file system 기반입니다. pages/ 또는 src/pages/ 가 기준이 됩니다. pages 폴더가 있다면 src/pages는 무시합니다. 기본적으로 Next.js의 Router는 file system 기반이기 때문에 설명은 생략하고 slug로 넘어가겠습니다. Slug에 대해서 1. pages/category/[slug].js => /category/:slug (ex. /category/items) 파일 시스템 형식의 라우터이지만 파일명에 [] 대괄호 사용시 어떠한 글자, 숫자가 와도 사용이 가능합니다 위 사진의 경우 [slug] 부분에 games가 들어갔습니다. 2. pages/[username]/myinfo.js => /:username/info (e.. 공감수 0 댓글수 0 2023. 9. 7.
[Next.js] Images에 대해서 해당 내용은 npx create-next-app --example image-component react-image-app 를 이용해 작성하였습니다. 1. Next.js의 Image 컴포넌트 Image 컴포넌트에서 제공하는 기능 3가지 lazy loading - 화면 밖의 이미지는 로딩을 지연시키고 화면 안에 있는 이미지만을 로드해서, 불필요한 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것 입니다. 이미지사이즈 최적화 - Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다 - 아래의 이미지를 보면 img 의 경우 294kb(원본크기) Next.js/Image는 8.1kb로 나타나며 유형 또한 다른것이 보입니다 placeholder 를 제공하여 CL.. 공감수 0 댓글수 1 2023. 9. 7.
[Next.js] 공통 레이아웃과 _app.js 1. 하나의 공통된 Layout을 쓰는경우 1-1. 공통된 레이아웃을 가진 컴포넌트를 만든다. 1-2. pages/_app.js 를 만든다. _app 파일에 대해서 _app 파일은 서버 요청시 가장 먼저 실행되며, 공통 레이아웃의 역할을 합니다. (Next.js에서 제공하며 반드시 _app의 이름을 사용) _app.js 파일 내부의 App 컴포넌트는 다음과 같은 두 가지 중요한 인수를 받습니다 Component: 현재 페이지 컴포넌트를 나타냅니다. 즉, 이후에 라우팅된 페이지 컴포넌트가 Component로 전달됩니다. pageProps: 현재 페이지 컴포넌트의 초기 속성(props)을 나타냅니다. SSR, SSG 등에서 미리 가져온 데이터 등이 포함됩니다. 2. 여러개의 Layouts를 사용하는 경우 2.. 공감수 0 댓글수 0 2023. 9. 6.
드래그 라이브러리 react-beautiful-dnd에 대해 react-beautiful-dnd는 3개의 요소로 이루어져있습니다. DragDropContext 드래그를 사용할 영역을 의미합니다 contextAPI의 Provider같은 느낌입니다. (감싸주는 느낌..?) Droppable Drag해서 놓을 Drop할 영역입니다. Draggable을 감싸서 사용합니다. Draggable Drag 할 Item 입니다. 우리가 이용할 Item컴포넌트를 Draggable로 감싸주면 됩니다. DragDropContext DragDropContext는 3개의 prop이 있습니다. onDragStart Darg를 시작할 때 (Drag 할 Item을 클릭하고 움직이기 시작할 때) 호출 onDragEnd Darg가 끝났을 때 (마우스를 땔때) 호출 onDragUpdate Drag중.. 공감수 0 댓글수 0 2023. 7. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.