ougi FE

최근에 코드를 보다가 우연히  middle.ts라는 파일을 보게 되었습니다궁금하여서 서치하다가 이 middleware에 대해서 좀 더 알아보게 되어 이렇게 글을 써보게 되었습니다middleware란?Next.js에서의 middleware란 요청과 응답 사이에서 실행됩니다특정 작업을 처리하거나 요청을 수정할 수 있는 함수입니다사용자 인증, 리다이렉션, 요청 헤더 수정, A/B 테스트와 같은 기능을 구현할 때 사용됩니다사용하기1. next 최신 버전으로 설치하기2. 루트 디렉토리에 middleware.ts 파일 생성하기3. middleware.ts 파일에서 middleware 함수를 내보냅니다npm install next@latest # npmyarn add next@latest # yarn설치import ..

오늘은 코딩테스트를 풀다 자주 봐왔던 개념인 깊은 복사와 얕은 복사를 자세히 알아보고자 합니다얕은 복사 깊은 복사가 무엇일까?얕은 복사란 객체의 참조 값(주소)를 복사하는 것 입니다깊은 복사란 객체의 실제 값을 복사하는 것 입니다 JavaScript에서의 값은 원시 값과 참조 값으로 나누어집니다원시 값은 기본 자료형을 말합니다원시 값에는 Number, String, Boolean, Null, undefined 등이 있습니다 참조 값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다참조 값에는 Object, Symbol 등이 있습니다 깊은 복사의 예시const 똥 = "응가";let school = "student";school = "teacher";console.log(똥) // result: "응가..

오늘은 깃허브를 보다가 발견한 Husky에 대해서 알아보면서 기본으로 알아야 할 Git Hook까지 알아보도록 하겠습니다Git Hooks란?Git Hooks는 Git repository에서 특정 이벤트가 발생할 때마다 자동으로 실행되는 스크립트입니다훅은 .git/hooks 이곳에 저장됩니다 이 디렉토리에서는 Git이 기본적으로 제공한 유용한 스크립트 예제가 몇가지 존재합니다그리고 스크립트가 입력받는 값이 어떤 값인지 파일 안에 자세히 설명되어 있습니다 클라이언트 훅과 서버 훅으로 나눌 수 있습니다클라이언트 훅commit이나 merge를 할 때 실행됩니다클라이언트 훅은 매우 다양해서 committing-workflow 훅, email-workflow 훅, 기타가 있는데저는 committing-workflo..

오늘은 저희가 늘 테스트할 때 보였던 localhost에 대해서 알아보겠습니다 어떻게 동작하는지 알고 사용해봅시다!!localhost란?localhost는 컴퓨터 자신의 IP 주소를 나타내는 특별한 도메인 이름입니다주로 테스트를 할 때 사용되고 고정적으로 127.0.0.1 의 주소를 갖습니다 웹 브라우저에 http://localhost나 http://127.0.0.1을 입력하면 자신의 컴퓨터에서 실행 중인 웹 서버에 접속할 수 있습니다localhost의 동작 흐름로컬 서버 실행사용자가 localhost: 포트번호로 요청해당 포트를 리스닝 중인 로컬 서버가 요청을 수신처리된 응답이 다시 클라이언트(브라우저)로 전송localhost 사용 시 주의사항포트 충돌 문제: 이미 사용하고 있는 포트를 사용하면 포트에..

오늘은 CI/CD에 개념을 제대로 잡고 넘어가고 싶어 이렇게 글을 쓰게 되었습니다CI/CD란?CI/CD란 지속적 통합(Continuous Integration)과 지속적 배포(Continuous Deployment)의 약자로소프트웨어 개발 과정을 자동화하여 더 빠르고 안정적으로 애플리케이션을 고객에게 제공하는 방법입니다CI/CD 파이프라인 구축은 개발 효율성을 높이고 배포할 때 오류를 최소화합니다 먼저 CI에 대해서 더 자세히 말해보자면개발자가 코드 변경 사항을 정기적으로 병합하는 것을 의미합니다이 과정에서 코드 변경 사항마다 빌드와 테스트가 자동되어 문제를 빠르게 발견하고 해결할 수 있습니다 CD에 대해서 더 자세히 말해보자면CI 과정을 통해 테스트를 통과한 코드를 자동으로 배포하는 단계를 말합니다CD..