본문 바로가기

[IT/Programming]

React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링 # React Next.js 에서 URL 을 이용한 상태 유지하기: 페이지네이션, 키워드 검색, 필터링작성중...React Next.js 애플리케이션에서 사용자가 페이지네이션, 키워드 검색, 필터링 등을 조작할 때 해당 상태를 URL에 반영하여, 뒤로 가기 버튼을 누르거나 URL을 직접 입력해도 이전 상태가 유지되도록 하는 방법을 알아보자.## PH2024-12-31 : First posting.## TOC## URL 쿼리 파라미터 사용페이지 번호, 검색 키워드, 필터 정보를 쿼리 파라미터에 저장합니다.```/list?page=2&keyword=example&filter=active```/## Next.js 의 useRouter 훅 사용```import { useRouter } from 'next/rou.. 더보기
Linux (AWS Amazon Linux) 에 git 설치 및 nginx 설치 (초기 세팅들) # Linux (AWS Amazon Linux) 에 git 설치 및 nginx 설치 (초기 세팅들)EC2 로 인스턴스 생성 (AWS Amazon Linux) free tier 로.Amazon Linux 에 접속 .ssh 이용. (public IP 는 재부팅시 항상 바뀌기 때문에 돈을 내고 Elastic IP 를 이용하는게 좋긴 함.)아래와 같이 터미널/cmd 창에서 EC2 로 접속.```[.linenums.lang-sh]# FEssh -i "codeit-fs-key.pem" ec2-user@ec2-43-202-97-246.ap-northeast-2.compute.amazonaws.com# BEssh -i "fitmate-be.pem" ec2-user@ec2-15-164-195-136.ap-northeas.. 더보기
12월 30일 2기 위클리 페이퍼 - 테스트의 필요성을 설명하세요. 본인이 생각하는 좋은 테스트란 무엇인지 설명해주세요. # 12월 30일 2기 위클리 페이퍼 - 테스트의 필요성을 설명하세요. 본인이 생각하는 좋은 테스트란 무엇인지 설명해주세요.## PH2024-12-30 : First posting.## TOC## 테스트의 필요성을 설명하세요.웹 개발에서 테스트는 필수적인 과정입니다. 마치 건축물을 짓기 전에 설계도를 검토하고, 완성된 건물에 대한 안전 검사를 진행하는 것처럼, 웹 개발에서도 테스트를 통해 개발된 웹 애플리케이션의 품질을 확보하고, 예상치 못한 문제를 사전에 방지합니다.### 테스트가 필요한 이유는 다음과 같습니다.- 버그 예방 및 조기 발견: 테스트를 통해 코드에 존재하는 오류(버그)를 조기에 발견하고 수정하여, 사용자에게 불편을 최소화할 수 있습니다.- 코드 품질 향상: 테스트를 수행하면서 코드의 구조.. 더보기
12월 23일 2기 위클리 페이퍼 - VPC는 무엇이며, 왜 중요한가요? S3 버킷의 사용 사례와 주의할 점은 무엇인가요? IAM은 무엇이며, 어떤 기능을 제공하나요? # 12월 23일 2기 위클리 페이퍼 - VPC는 무엇이며, 왜 중요한가요? S3 버킷의 사용 사례와 주의할 점은 무엇인가요? IAM은 무엇이며, 어떤 기능을 제공하나요?## PH2024-12-23 : First posting.## TOC## VPC는 무엇이며, 왜 중요한가요?### VPC(Virtual Private Cloud)란 무엇일까요?VPC는 Virtual Private Cloud의 약자로, 퍼블릭 클라우드 환경 내에서 논리적으로 격리된 개인 네트워크를 의미합니다. 마치 자기만의 데이터 센터를 클라우드 상에 구축한 것처럼, 독립된 네트워크 환경을 제공하여 더욱 안전하고 유연하게 클라우드 서비스를 이용할 수 있도록 해줍니다.간단히 말해서, VPC는 클라우드 상의 '사설 네트워크'라고 생각하면 쉽습.. 더보기
12월 16일 2기 위클리 페이퍼 - AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요? EC2 인스턴스란 무엇이며, 어떻게 사용하나요? # 12월 16일 2기 위클리 페이퍼 - AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요? EC2 인스턴스란 무엇이며, 어떻게 사용하나요?## PH2024-12-18 : First posting.## TOC## AWS의 글로벌 instructure에는 어떤 구성 요소들이 포함되어 있나요?AWS의 글로벌 인프라스트럭처는 전 세계적으로 분산된 데이터 센터, 가용 영역, 리전, 엣지 로케이션 등으로 구성되어 있습니다. 이러한 구성 요소들은 고객에게 안정적이고 확장 가능하며 안전한 클라우드 서비스를 제공하는 기반이 됩니다. 주요 구성 요소는 다음과 같습니다.- 리전(Region): 지리적으로 분리된 독립적인 영역으로, 하나 이상의 가용 영역으로 구성됩니다. 각 리전은 자체적인 전력,.. 더보기
12월 09일 2기 위클리 페이퍼 - TypeScript의 동작 원리에 대해 설명해 주세요. d.ts 타입 정의파일이 무엇이며, 어떻게 만들 수 있는지 설명하세요. # 12월 09일 2기 위클리 페이퍼 - TypeScript의 동작 원리에 대해 설명해 주세요. d.ts 타입 정의파일이 무엇이며, 어떻게 만들 수 있는지 설명하세요.## PH2024-12-10## TOC## TypeScript의 동작 원리에 대해 설명해 주세요.TypeScript는 JavaScript의 슈퍼셋으로, JavaScript에 정적 타입을 추가한 언어입니다. 동작 원리를 이해하려면 다음 핵심 개념들을 알아야 합니다:1. 타입 시스템: TypeScript는 변수, 함수 매개변수, 반환 값 등에서 타입을 명시적으로 지정할 수 있게 합니다. 이로 인해 코드를 작성하는 도중에 타입 오류를 발견할 수 있으며, 더 나은 코드 품질과 유지 보수성을 제공합니다.```[.lang-ts]let myString:.. 더보기
코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru # 코드잇 풀스택 2기 - Part 3 - 중급프로젝트 - Docthru개인 개발 리포트: 이강수 (kipid)## PH2024-12-06 : First posting.## TOC## npm install 에러시```npm install --legacy-peer-deps```/## font-size: var(--XXpx) 적극 활용## color, background-color: var(--prime-yellow/red/blue/orange) or var(--brand-black/white) or var(--gray-0 ~ 900) 적극 활용## queryClient.invalidateQueries({ queryKey: ['todos'] })캐싱 (Caching) 을 무효화 할 때 쓰는 명령어.## de.. 더보기
11월 11일 2기 위클리 페이퍼 - MVC(Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요. OAuth란 무엇인가요? 그리고 왜 사용하는지 설명해주세요. # 11월 11일 2기 위클리 페이퍼 - MVC(Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요. OAuth란 무엇인가요? 그리고 왜 사용하는지 설명해주세요.## PH2024-11-11## TOC## MVC (Model-View-Controller) 패턴이란 무엇인가요? 이 패턴의 각 구성 요소의 역할을 설명하고, MVC 패턴을 사용하는 이유와 그 장점에 대해 서술해주세요.MVC(Model-View-Controller) 패턴은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션을 세 가지 주요 구성 요소로 분리하여 구조화하는 방식입니다. 각 구성 요소의 역할과 MVC 패턴의 장점에 대해 설명.. 더보기
11월 04일 2기 위클리 페이퍼 - 경험을 바탕으로 React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명해주세요. 특히 로그아웃 구현 로직에 대해 설명해주세요. RESTful API의 개념과 주요 제약 조건을 설명하세요. # 11월 04일 2기 위클리 페이퍼 - 경험을 바탕으로 React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명해주세요. 특히 로그아웃 구현 로직에 대해 설명해주세요. RESTful API의 개념과 주요 제약 조건을 설명하세요.## PH2024-11-05## TOC## React 애플리케이션에서 JSON Web Token(JWT)을 사용하여 사용자 인증 시스템을 구현하는 방법에 대해 자세히 설명### Front-End 단에서의 처리.```[.linenums]import axios from 'axios';const instance = axios.create({ // baseURL: `https://panda-market-api.ver.. 더보기
10월 28일 2기 위클리 페이퍼 - 세션 기반 인증과 토큰 기반 인증의 차이점을 설명하세요. 어떤 상황에서 각각을 사용하면 좋을지 예를 들어 설명해 주세요. # 10월 28일 2기 위클리 페이퍼 - 세션 기반 인증과 토큰 기반 인증의 차이점을 설명하세요. 어떤 상황에서 각각을 사용하면 좋을지 예를 들어 설명해 주세요.## TOC## 세션 기반 인증 (Session-Based Authentication)특징:서버가 사용자의 상태를 관리하고, 세션 아이디를 클라이언트에 전달합니다.세션 아이디는 쿠키에 저장되어, 클라이언트가 요청을 보낼 때마다 서버에 포함됩니다.서버는 세션 저장소를 사용하여 세션 아이디를 통해 사용자를 식별합니다.사용 상황:상태를 유지해야 하는 경우: 쇼핑카트와 같이 사용자 상태를 지속적으로 추적해야 하는 애플리케이션.보안이 중요한 애플리케이션: 세션 정보가 서버에 저장되므로, 서버 측에서 직접 관리할 수 있어 보안 관리가 용이합니다.브라우저 기.. 더보기
ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기) # ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기)Airbnb Style Guide 가 유명해서 이 가이드대로 .js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.## PH2024-09-27 : First posting.## TOC## ESLint, Prettier 패키지 설치ESLint (EcmaScript Lint) 는 JavaScript에 한정된 Code Formatter (문법이 제대로 맞는지 주로 판단) 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter (코드 스타일을 통일시켜주는 일을 주로 함) 이다.```[.scrollable]npm install --save-dev --save-.. 더보기
Sign-up/Log-in with Google/Kakao (구글/카카오로 가입하기/로그인 구현하기): 구글 Google, 카카오 Kakao Oauth # Sign-up/Log-in with Google/Kakao (구글/카카오로 가입하기/로그인 구현하기): 구글 Google, 카카오 Kakao Oauth구글로 가입하기랑 로그인하기를 어떻게 구현할 수 있는지 알아봅시다.작성중...## PH2024-09-30 : First posting.## TOC## 구글로 가입하기### 우선 console 로 가서 Oauth 를 활성화시켜 줍시다. (Google Developers)https://console.cloud.google.com/ 로 가서 My First Project 링크로 들어갑시다.왼쪽 사이드바에서 APIs & Services > Credentials 를 클릭. OAuth 2.0 Client IDs 를 하나 발급 받읍시다.여기서 Authorized J.. 더보기

티스토리툴바