dolog

서두 아직은 서버 구축과 간단한 로그인 테스트만 진행했기에 기존에 실습했던 백엔드 프로젝트의 폴더 구조를 발판삼아 시도했다. 그러다 각 폴더가 왜 존재하는지, 어떤 목적으로 쓰이는지 궁금해서 알아보았다. express 서버의 파일 및 폴더 app(or index).ts : TypeScript를 기준으로 만든 서버 기본 설정 및 미들웨어, route를 설정하는 파일 config : 데이터베이스 연결 정보, API Key 등 환경 변수 정보 저장하는 폴더 .env : 환경 변수를 설정하는 파일 src constants : 상수값을 정의하는 폴더 routes : API 엔드포인트와 관련된 경로를 정의하는 폴더(controllers와 동일하다고 하지만 분리하기도 한다.) controllers : (routes와..

1. 버블 정렬(bubble sort)서로 인접한 두 원소를 검사하여 정렬하는 알고리즘인접한 2개의 요소를 비교하여 교환하며 정렬한다.이미 정렬이 되어 있는 경우(최고 케이스) : O(n)정렬이 안되어 있고 요소의 개수가 많은 경우(최악 케이스) : O(n^2)const numbers = [7, 4, 5, 1, 3];function bubbleSort(arr) { let temp = 0; for(let i = 0 ; i arr[j+1]) { temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } console.log(..

1. 기존 wisecrypto 레포에 server 폴더와 index.ts 파일 만들기 서버도 그대로 TypeScript를 사용 ➡️ 의존성 패키지를 설치할 때 고려해주어야 한다. 2. 각종 라이브러리 설치 및 typescript config 파일 생성 express 설치 npm i express typescript @types/express nodemon 설치 npm i -D nodemon ts-node package.json에서 변경해주어야 하는 부분 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "nodemon index.ts", "dev": "nodemon --watch \"*.ts\" --exec \"ts-..

소프트웨어 버전은 왜 관리해야할까? 1. 소프트웨어 개발 단계에서 모든 변화를 추적할 수 있음 2. 소프트웨어에서 발생할 수 있는 가능한 업데이트와 변화의 유형에 대해 개발자들에게 설명할 수 있음 3. 의미있고, 깔끔하게 유지할 수 있음 4. 사용자에게 버전에 대한 정보 제공 1. 최초 출시 이전 개발 단계 버그 수정이 이루어지지 않은 첫 번째 버전은 0.1.0으로 시작 2. 최초 출시 첫 번째 안정적인 버전은 1.0.0으로 시작 3. 이후 버전 관리(major.minor.patch) major 이전 버전과 호환 X + 변경 첫 번째 숫자를 1 증가시키고, 두 번째(minor), 세 번째(patch) 숫자를 0으로 만든다. minor 이전 버전과 호환 O + 새로운 기능 추가 두 번째(minor) 숫자를..

1. intersection observer를 사용한 부분에 any 타입 고치기 let observer: IntersectionObserver; // 기존 코드 // const intersector = ([entry]: any) => { // console.log(typeof [entry]); // object // entry.isIntersecting && fetchNextPage(); // }; const intersector: IntersectionObserverCallback = ( entries: IntersectionObserverEntry[], ) => { const [entry] = entries; entry.isInterse..

먼저 관리자 페이지는 기간이 늘어짐에따라 기능 추가를 중단한 녀석이기 때문에... 미처 고려하지 못했던 페이지 접근 권한을 이제야 설정했다. 역시 기획은 아무리 꼼꼼하게 해도 어딘가 놓친 부분이 있다는 걸 다시 한번 느꼈다... 관리자 페이지 접근 권한 설정은 Cookie와 Next.js의 middlware로 해결했다.https://nextjs.org/docs/app/building-your-application/routing/middleware Routing: Middleware | Next.jsLearn how to use Middleware to run code before a request is completed.nextjs.org 폴더구조에 따라 middleware.ts..

메인 페이지 하단에 구글 로그인 추가하기메인 페이지 하단에 가입하는 버튼만 존재하니 소셜 로그인을 할 수 있는지 로그인 페이지를 들어가서 알게되었다라는 피드백이 많아서 지금 바로 가입하기 뿐만 아니라 구글로 가입하기도 추가하기로 했다.   사실 이 피드백에 관련한 디자인이 따로 없기 때문에 기존에 있던 지금 바로 가입하기 버튼과 디자인을 맞추었다.

1. Next.js의 Modal 이슈 해결 - SSR로 인한 portal을 인식하지 못하는 문제 ➡️ useEffect를 사용하여 클라이언트 렌더링이 진행한 후 portal을 설정해줌으로써 해결'use client';import { createPortal } from 'react-dom';import useModalStore, { ModalType } from '@/stores/modalStore';import useUpdateChatAnsweredMutation from '@/hooks/mutation/useUpdateChatAnsweredMutation';import useModal from '@/hooks/useModal';import { ChatModal, InquiryListF..