전체 글
[JS] Promise.race를 사용하여 timeout 구현하기
// 1초 후에 실행되는 Timeout Promise 객체 const timeoutPromise = new Promise((resolve, reject) => { setTimeout(reject, 1000, "timeout"); }); // 2초 후에 실행되는 Promise 객체 const myPromise = new Promise((resolve, reject) => { setTimeout(resolve, 2000, "resolve"); }); // Promise 실행 함수 const race = async () => { try { // 프로미스 배열 중에 가장 먼저 resolve/reject가 실행되는 결과를 출력한다. const response = await Promise.race([myPromis..
[CSS] HTML table element 행렬 pivot하기
2x4의 형태의 HTML table을 CSS를 간결하게 사용해서 4x2 행렬로 바꿀 수 없을까 연구해봤다. H1 H2 H3 H4 R1 R2 R3 R4 css script를 추가한 결과는 아래와 같다. 이제 pivot을 위해서 존재하는 복잡한 데이터 계산 로직을 제거할 수 있다. 다만 flex를 통해 table element의 예외 경우를 만든 것이기 때문에, 화면 개발 측면에서 유지보수는 필요하다.
ESLint, Prettier 적용하기
ESLint, Prettier란 무엇이고 어떻게 사용할 수 있을까? 개발자들은 각자의 개발 스타일을 갖고 있다. (들여쓰기의 정도, async/await 사용 여부 등...) 많은 코드 스타일들이 프로젝트 한곳에서 모이면 코드가 제각각이 되어 어플리케이션 품질이 저하될 수 있다. 이를 해결하기 위해서 Linter/Formatter를 사용하여 코드 컨벤션 통일을 강제화한다. 대표적인 Linter인 ESLint의 공식 문서에는 아래와 같이 정의한다. ESLint is an open source project that helps you find and fix problems with your JavaScript code. It doesn't matter if you're writing JavaScript in..
[Next.js] next build warn 문구 제거
warn 문구 1 info - Linting and checking validity of types ...warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config 해결 어플리케이션에서 별도의 eslint 설정파일을 사용하는 경우 명시해줘야한다. // .eslintrc.js module.exports = { extends: ['plugin:@next/next/recommended'], }; 참조 https://nextjs.org/docs/basic-features/eslint#migrating-exi..
정규표현식으로 사이에 있는 내용 가져오기
요구사항 태그 내부의 태그 내부의 내용 가져오기 Input const input = ` 나비 치즈 바둑이 냥냥이 `; 구현 function getNamesIncludeTag(input, type) { const reg = new RegExp(`()(.*?)()`, "gs"); const result = input.match(reg); return result; } function getNamesExcludeTag(input, type) { const reg = new RegExp(`(?
[Git] 실무에서 자주 사용되는 commands
git branch // 현재 브랜치를 기준으로 "feature"란 브랜치 명으로 생성함 $ git branch feature // "feature2" 브랜치의 내용을 "feature1"이란 브랜치 명으로 생성함 $ git branch feature1 feature2 // "feature" 이름을 가진 로컬 브랜치를 삭제함 $ git branch -d feature // "feature1", "feature2", "feature3" 이름을 가진 브랜치를 삭제함 $ git branch -d feature1 feature2 feature3 // 브랜치 이름에 "feature" 단어를 포함한 브랜치들을 삭제함 $ git branch | grep feature | xargs git branch -d // "fe..
MSA 한번에 이해하기
MSA의 등장 배경 MSA의 등장은 모놀리식 아키텍처(Monolithic Architecture)에서 부터 시작됩니다. Monolithic이라는 단어는 "하나의 암석으로 된", "한 덩어리의"라는 뜻을 가지고 있습니다. 그동안 대부분의 소프트웨어들은 모놀리식 아키텍처로 개발되었습니다. 이들은 단단한 암석이지만, 하나의 저장소에 모든 코드가 담겨있어 획일화 된 구조를 갖고 있었습니다. 모놀리식 아키텍처의 장점은 다음과 같습니다. 프로그램 전체의 개발 스택이 동일하여 복잡하지 않습니다. 고가용성 서버 환경을 쉽게 만들 수 있습니다. End-to-End 테스트가 용이합니다. 전통적인 소프트웨어 아키텍처로 개발자들에게 익숙합니다. 작은 규모의 서비스에서부터 개발하기가 쉽습니다. 단점은 다음과 같습니다. 프로그램..
![[AWS 7] AWS 서비스 후기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FExQ0W%2FbtqTSUE6zzU%2FtmKbwOYgmvu2CClF3wdI9K%2Fimg.png)
[AWS 7] AWS 서비스 후기
공부 - 실습 - 포스팅으로 계획했던 프로젝트가 8일에 걸쳐 모두 완료됐습니다. 뿌듯하네요. 이번 포스팅에서는 과정을 회고하며 편하게 작성해보겠습니다. 아래의 내용으로 구성하였습니다. # 계기 # 어려웠던 점 # 배운 점 # 참조 # 계기 GS SHOP IT 직군 직무 소개 영상 프로젝트를 계획하게 된 계기는 GS SHOP 실무 면접입니다. GS SHOP 실무 면접에서는 IT 산업의 전반적인 관심도를 질문 받았습니다. 예상하지 못했던 질문들이었기에 배경지식으로 대답하는 것이 최선이었습니다. 그동안의 저는 풀스택 개발 능력과 디자이너와의 협업 경험을 바탕으로, 프론트엔드 개발자로서 강점을 어필했었습니다. 그래서인지 면접관님께서 해주신 "신입이면 다양한 경험에 도전해보는 것이 좋다"는 조언이 크게 와닿았습니..