본문 바로가기

전체 글

 (77)
Next.js에서 middleware 설정 문제상황로그인을 한 사용자만 접속하게 하고 싶다.해결과정React에서는 Router나 각 페이지에서 로그인하지 않은 사용자는 접근할 수 없도록 설정해주었다면 Next.js에서는 rewrite를 사용해서 더 간편하게 설정해줄 수 있습니다. 미들웨어의 목적이 미들웨어의 목적은 애플리케이션의 특정 부분에 대한 접근을 제어하는 것입니다. URL을 재작성하여 사용자를 다른 페이지로 라우팅함으로써, 검사를 수행하거나 다른 콘텐츠를 제공할 수 있습니다. Next.js 애플리케이션의 미들웨어 함수 사용middleware.tsximport { NextResponse } from 'next/server' //요청을 수정하고 응답을 생성.import type { NextRequest } from 'next/server' /..
TypeScript에 대해 얼마나 알고 있는지 점검해봅니다 TypeScript를 사용한 지 어느덧 1년이 되었습니다.그동안 업무에서 꾸준히 사용하긴 했지만, 지금 돌아보면 타입을 단순히 "에러 방지용" 도구로만 활용했던 것 아닌가 하는 생각이 듭니다. 상황에 맞춰 any를 피하고, 적절한 타입을 지정하며 작성하는 습관은 어느 정도 들었지만,왜 그렇게 써야 하는지, 타입 시스템이 어떻게 작동하는지에 대한 깊은 이해는 부족했습니다. 그러던 중 최근 제로초님의 TypeScript 강의를 듣게 되면서, 제가 모르는 기능과 문법이 정말 많다는 걸 느꼈습니다.예를 들어, keyof, infer, typeof 같은 고급 타입 연산자나 유틸리티 타입의 쓰임새 등은 알고 나니 강력하지만,모를 땐 아예 "존재 자체를 모르는" 상태였습니다. 이제는 단순히 에러를 없애기 위해 타입을..
React-hook-form value 값 설정 문제상황React-Hook-Form을 사용하면서 api로 조회해온 값을 value에 세팅을 해주고 싶었다.그래서 Input 안에 field.value(직접 값을 control함) 과 내가 조회해온 값을 value로 써주었다.조회는 잘되었으나, 조회된 값이 'apple'일 경우, 모든 문자를 삭제하여 'a'만 남았을 때 한 번 더 삭제하면 'apple'로 되돌아가는 문제가 있었습니다. input-text.tsx (공통 Input)interface Props { name: string; title: string; type?: string; value?: any; maxLength?: number; loading?: boolean value: string;}export const InputText..
Git 프로그램 설치 안녕하세요.저번 포스팅에 이어서 gitbub 가입 및 git 설치에 대해 알려드리려고 합니다.Github 가입하기1. github.com 에 접속해서 상단의 sign up 버튼을 누릅니다 2. 각 항목을 채워줍니다 Username은 github 에서 사용할 id 라고 생각하시면 됩니다. username 이 무엇인지 꼭 기억해두세요. 다른 설정에서도 계속 사용합니다! 나중에 바꿔줄 수는 있지만 관련된 설정을 모두 바꾸어야하는 불편함이 있으므로 신중하게 결정해주세요. 하단 verify 버튼을 눌러서 문제에 맞는 답을 골라주세요. 문제를 모두 맞추면 create account 버튼을 눌러서 가입을 완료합니다. Git 설치Windows다운로드: https://git-scm.com/ Git git-scm.com다..
Git commit, 원격 repo, .gitignore 안녕하세요.오늘은 평소에 사용하고 있는 git에 대해 순서대로 정리를 해보려고 합니다.01. Git 구조개발자라면 git을 무조건 사용하실텐데 그렇다면 git과 github는 같은걸까요?밑에 그림을 참고해서 확인해주세요. git에서 관리하는 영역은 크게 3가지가 있습니다.현재 작업중인 Working Directorycommit 할 파일의 예비 저장소, 혹은 추적 대상 파일의 공간인 Staging Area각 유저의 컴퓨터에서 관리되고 있는 로컬 저장소여기서 우리가 직접 눈으로 확인할 수 있는 저장 공간은 Working Directory이며, 현재 프로젝트가 담긴 디렉토리입니다.또 많은 사람이 혼란스러워 하는 부분은 바로 로컬 저장소라고 생각이 듭니다. 내 컴퓨터에 분명이 있는 저장 공간이지만 실제로는 눈에..
설계 단계_아키텍처 설계 이 글을 쓰게 된 계기는 설계를 진행하면서 용어들에 대해 정확하게 인지하지 못하여 정리하게 되었다. 기본 설계 과정은1. 아키텍처 설계 : 정보 시스템을 서브시스템으로 분할하기 위한 기능 목록과 인프라가 되는 하드웨어, 네트워크, SW 구성  요소 파악2. UI 설계 : 화면의 레이아웃, 화면의 관계 및 전환을 설계3. 데이터 설계 : 코드화할 데이터가 있다면 코드 설계와 데이터가 어떤식으로 저장되고 관리 될 것인지 논리 데이터 설계4. 외부 인터페이스 설계 : 다른 시스템과 연동될 때 주고받는 데이터의 형식과 호출 방식을 설계이렇게로 나눌 수 있는데 이제부터 하나씩 정리를 시작해 보겠다!!!아키텍처 설계컴포넌트 구성과 연계 방법서비스 지향 아키텍처(SOA, 소프트웨어 구성 요소를 사용해 비즈니스 애플리..
[Snappi] 요즘 뜨는 번역 사이트 스내피 이용후기 2 며칠전에도 스내피 관련해서 리뷰 글을 남겼었는데, 반응이 뜨거워서 한번 더 리뷰합니다!!! 이번엔 제가 즐겨보고 요즘 핫한 드라마인 "눈물의 여왕"에 대해서 영상을 올려서 작업해봤습니다. 올린 영상에 대해서 리뷰를 작성을 하면 무료 쿠폰을 줍니다!!! 그럼 난 또 영상을 올려서 자막 추출을 할 수 있다!!! 이래서 한달 무료라고 했구나..! 리뷰는 5점 만점에 5점 드립니다!!! 왜냐면 너무 편했거든용.. 요즘엔 무료 끝나면 유료로 써야되나도 고민중입니당 ㅋㅋㅋ 다들 스내피하세요~~~
Book_요즘 우아한 개발 위 요즘 우아한 개발 책을 읽게 된 계기는 일하는 회사 동료에게 추천받아서 읽게 되었다. (TMI: 회사 동료분이 배민을 굉장히 좋아한다. 아마 방향성을 닮고 싶어 하는 것 같다.) 나도 요즘 시니어와 주니어의 차이도 궁금하기도 하면서 개발이라는 직업자체가 성장하는 모습을 계속적으로 느끼기보단 하다보니 조금씩 나의 것만이 아닌 다른 주변들의 대해 관심을 갖게 되면서 밑바탕을 만들어주는 일을 하면서 성장을 느끼는게 아닐까라는 생각이 들었는데 딱 43페이지에서 시니어의 좋은 성장에 대해서 이야기 해주는 부분이 있어서 책을 인상깊게 보았다. 책의 내용을 전부 다룰 순 없지만, 나의 미래방향성의 가치관과 맞는 이야기들이 많이 쓰여 있었으며 지금 주니어에서 어떻게 일을 해야할지 그리고 더 나아가서 시니어로써 어떻..

티스토리툴바