본문 바로가기

개발

(132)
[git] 하나의 repository에 2개 이상의 프로젝트 폴더 넣기 나의 경우에는 backend, frontend를 하나의 repository에 넣기 위해서각각의 repository를 지우고 하나로 다시 repository를 구성했다. 예를 들어서 최상위 폴더가 Fruits이고,banana 프로젝트와 apple 프로젝트를 최상위 폴더에 넣어줘야한다. 그런데, Fruits 폴더에서만 git add를 해버리면banana, apple 폴더 자체는 add가 안 된다. 아래 명령어들을 요약해서 기재한다. echo "# [최상위 repository 이름]" >> README.mdgit initgit add README.mdgit commit -m "first commit"git branch -M maingit remote add origin [최상위 repository URL]gi..
맥 M1 플러터 파이어베이스 연동 오류 해결 플러터에서 파이어베이스 연동을 하는 과정에서 다음과 같은 오류를 발견했다.     아주 지긋지긋했다 몇 시간동안 이 오류를 본건지...Launching lib/main.dart on iPhone 14 Pro in debug mode...Running pod install... 8.2sRunning Xcode build...Xcode build done. 6.4sFailed to build iOS appError (Xcode): unsupported option '-G' for target'x86_64-apple-ios15.0-simulator'Cou..
React 주민등록번호 컴포넌트 1. 목적[인수 조건]Given개발자는 주민등록번호 유효성 검증을 위한 정규식을 이용한다.코드가 길어질 경우 라이브러리 React-hook-form을 사용할 수 있다.text input 2개로 구성된 컴포넌트로 구현한다.When주민등록번호 컴포넌트 GUI와 유효성 검증하는 함수로 각각 분리한다.Then1. 00년생 이전/이후와 생년월일, 성별 케이스별로 나누어주민등록번호의 뒷 번호 첫 번째 자리까지 유효성 검증을 진행한다.2. 실시간으로 유효성 검증이 진행된다.3. 올바르지 않은 주민번호 입력시 가이드 텍스트가 표시된다. [설명]보상 안내 받는 이와 예금주의 주민등록번호를 받았을 때 실시간 유효성 검증 기능이 있는 주민등록번호 컴포넌트를 구현한다.케이스는 00년생 이전과 이후로 나뉘며앞, 뒷 번호 자릿수..
AWS Secret Manager 목적Next.js 프레임워크 내에서 .env 파일 내의 S3 관련 Secret Key 노출을 방지할 수 있는 방법을 모색함빌드 후 배포시 .env 파일이 유실되어 릴리즈 버전에서 s3 접근에 리스크 존재, 이를 방지하기 위함AWS Secret Manager사용 방법https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-secrets-manager/import * as AWS from "@aws-sdk/client-secrets-manager";const client = new AWS.SecretsManager({ region: "REGION" });// async/await.try { const data = await client.l..
[Typescript] type 및 try-catch 시 return 처리 // psuedo codeclass Person { name: string; foo() { console.log(this.name); } constructor(name: string) { this.name = name; }}const p = new Person('kim');console.log(JSON.stringify(p));console.log(JSON.parse(JSON.stringify(p)));function bar(): string { let result = ''; // result가 try에서도 catch에서도 사용해야 할 경우 (부득이) try { result = 'success'; ..
Dynamic Route - Slug 목적정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터에서 경로를 생성하는 경우 요청 시 채워지거나 빌드 시 사전 렌더링되는 동적 세그먼트를 사용할 수 있다.Next.js의 Slug를 적극 활용해야 하는 이유App routing의 Slug 기능을 사용하여 동적 라우팅(Dynamic Routing)을 구현하려고 한다. 이 기능은 일반적으로 다음과 같이 사용된다.// app/blog/[slug]/page.tsxexport default function Page({ params }: { params: { slug: string } }) { return My Post: {params.slug};}이렇게 path param(segment)으로 온 param 데이터를 사용할 수 있는 것이 장점이다.그런데, ..
Xlsx parsing + react-table 분석 계기https://bizinsight.atlassian.net/wiki/pages/createpage.action?spaceKey=Software&title=1.%20Excel%20%ED%8C%8C%EC%8B%B1B2B 여행자 보험 가입 서비스 프로젝트에서 가장 중요한 기능인 Excel 파싱 기능 관련하여 어떤 라이브러리를 사용할지 기술 검토를 했었다. 그 결과, xlsx 라이브러리(SheetJS)를 사용하는 것이 가장 적절하다고 판단하여 개발팀에 공유를 하였다. 그렇다면, 이 xlsx 라이브러리로 어떤 기능들을 구현해야 할지 보다 디테일하게 분석을 해보려고 한다.필요한 기능정해진 양식의 엑셀 파일에 원하는 정보를 리스트업하고, 해당 엑셀 파일을 정확하게 읽어오는 것정확하게 읽어온 데이터를 UI 상..
OAuth 인증 - 인가에 대하여 0. Prologue사이트를 개발하겠다고 하면 빠질 수 없는 회원 관리와 로그인. 그런데, 솔직히 정작 ‘로그인은 어떻게 구현하는가?’에 대해서 깊게 고민해본적은 없었던 것 같다. 그래서, 이번 기회로 집중해서 알아 보게 되었다.단순하게 생각하면 ‘그냥 유저 테이블에 아이디, 이메일, 비밀번호, 연락처 등 정보 넣고, 비밀번호는 암호화해서 넣으면 되는거 아니야?’라고 생각할 수도 있다. 하지만, 유저 테이블에 아이디와 비밀번호를 암호화해서 넣는 방식은 이제 절대로 쓰면 안 되는 방법이다. 상당히 구식일 뿐더러, 보안에 틈이 많아 추후 문제가 생길 소지가 다분하다.그래서 위 방법으로부터 발전된 형태는 유저 테이블에 저장된 비밀번호 해시값을 사용자의 입력에 따른 해시값과 비교하여 동일하면 true가 되는 방..