분류 전체보기
만 3년 프론트엔드 개발자 회고록
새해를 맞이하여 기념으로 그간의 경험을 정리하면서 느끼고 배웠던 것들을 정리하고 돌아보는 시간을 가지려 한다.~2022년, 진로를 정하게 되는 과정2022년, 사회 초년생의 의욕2023년, 2년차의 우울2024년, 더 성숙해지기2025년 4년차, 앞으로는 무엇일까 ~2022년, 진로를 정하게 되는 과정2학년 때 나서 전공 필수였던 C프로그래밍 수업을 듣게 되었다. 당시 지도교수님이 담당하던 수업이었기 때문에 나는 그에게 인정받기 위해서 정말 열심히 공부했었다. 매일 밤을 새고 힘들었지만 돌아오는 인정이 나에게 뿌듯함을 줬다. 내가 좋아하는 것 중에 직업으로 삼을 수 있겠다는 생각을 하게 되었다. 좀 더 공부를 해보기 위해서 소프트웨어 공학 복수 전공을 진행하였다.주변의 권유에도 불구하고 당시에는 남들보다..
[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 테스트가 용이합니다. 전통적인 소프트웨어 아키텍처로 개발자들에게 익숙합니다. 작은 규모의 서비스에서부터 개발하기가 쉽습니다. 단점은 다음과 같습니다. 프로그램..