본문 바로가기

전체 글136

Business/IT Glossary (영어 용어 정리) 💡 해당 문서는 계속해서 업데이트 예정 입니다. ASAP : "As soon as possible"의 줄임말, "가능한 빨리"라는 뜻 Playbook : 특정 활동 , 산업 , 직업 등에 적합한 것으로 간주 되는 일련의 규칙 , 제안 또는 방법 Buddy : 신규 입사자의 적응을 도와주는 시니어 Onboarding 서비스 관점 : 사용자가 서비스에 빠르게 적응하도록 돕는 과정 조직 관점 : 새로 합류한 사람이 빠르게 조직의 문화를 익히고 적응하도록 돕는 과정 PTO : "Paid time off", 연차, 유급휴가 OOO : "Out of office" OOTO : "Out of the office" OOF : "Out of Facility" Take morning off: 오전 반차 Take after.. 2023. 3. 20.
[Vue] TypeError: sub is not a function 에러 개요 최근 Vue 기반의 서비스 개발 중 아래와 같은 에러가 발생하였다. TypeError: sub is not a function 원인 Vuex 3.1 미만의 버전과 Vue DevTools를 같이 사용하면 오동작을 한다고 합니다. 제가 개발하던 프로젝트는 Vuex 3.0.1 버전을 사용하고 있었습니다. sub is not a function error if vuex dispatch is calling · Issue #1686 · vuejs/devtools Version 6.0.2 Reproduction link https://codesandbox.io/s/535kx57jpx Steps to reproduce Open vue tab in devtools. Call vuex dispatch method W.. 2023. 1. 19.
모노레포에서 NEXT.js 사용 시 Module parse failed: Unexpected token 에러 발생 증상 ../common-styles/src/index.ts Module parse failed: Unexpected token (37:7) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | backgroundSkeleton, | }; > export type { DesignColorSystem, ButtonTheme, ButtonThemes, Theme }; | 모노레포를 구성하였고 그 중 Next.js를 기반으로 동작하는 A라는 패키지가 있고 해당 패키지는 co.. 2022. 8. 29.
(LeetCode) 5. Longest Palindromic Substring (JavaScript) 문제 Given a string s, return the longest palindromic substring in s. 문자열 s가 주어졌을때 s의 substring 중 제일 긴 팰린드롬 문자를 찾아라 🤡 팰린드롬(Palindromic)이란? 거꾸로 읽어도 제대로 읽는 것과 같은 문장이나 낱말, 숫자, 문자열(sequence of characters) 등을 말한다. 풀이 팰린드롬 찾기 함수 팰린드롬은 길이가 짝수인 경우와 홀수인 경우로 나뉜다. 짝수인 경우 abba aa abccba ... 홀수인 경우 aba a abcba ... /** * 팰린드롬 문자열 찾기 함수 * * @param {string} s - Palindrome 검사할 문자열 * @param {string} i - Palindrome .. 2022. 8. 11.
(TypeScript) 조금 더 우아하게 Union Literal Types 체크 방법 👋 개요 현직장에서 프로젝트가 바쁘다는 핑계로 미루어 두었던 포스팅을 해보려고 합니다. (벌써 1년이나;;) 현재 개발 중인 FE 서비스는 NextJS와 TypeScript를 기반으로 개발 중 입니다. TypeScript에서는 특정 상수를 타입으로 정의 하는 방법이 몇가지 있고 그 중 다른 언어들과 같이 열거형(ENUM)을 지원해 주지만 저는 Literal Types Union을 사용하는 것을 선호합니다. (그 이유에 관한 글 첨부합니다. TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.) 🤨 Literal Types을 Union하여 사용하는 경우 type UserStatus = 'NORMAL' | 'WITHDRAW' | 'UNKNOWN'; // 일.. 2022. 7. 26.
[NEXT.js] 빌드 시 ERR_INVALID_ARG_TYPE 오류, 빌드 시 Freezing 증상 개요 최근에 Next.js를 빌드하는데 아래와 같이 더 이상 동작하지 않는 Freezing 증상이 발견되었다. ❯ yarn build info - Checking validity of types 이상하다 싶어서 next build 옵션 중 린트 제외 옵션(--no-lint)을 실행해보니 ERR_INVALID_ARG_TYPE 오류가 발생했다. 아래는 오류메세지와 빌드 환경이다. [ 환경 ] node version: 14.18.2 next@12.0.10 react@18.0.0-rc.0 react-dom@18.0.0.-rc.0 [ 오류 메세지 ] info - Collecting page data ..internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name.. 2022. 5. 25.
Web Storm 단축키 및 Plugin 👋 개요 VS Code에서 WebStorm으로 이사 중 내가 설정한 내용들을 공유하고자 포스팅 하였습니다. 아직 WebStorm을 많이 사용해보지 않아 VSCode에서 사용하던 기능들을 위주로 세팅하였습니다. 저의 VS Code 설정을 보고 싶다면 여기를 참고해주세요 VS Code를 맥에서 쓸때 이모지 단축키가 작동이 잘 안되던가 한글 입력이 잘 안되던가 등이 있습니다. WebStorm을 사용하면서 좋았던 점은 강력한 디버그 기능을 꼽을 수 있겠습니다. 아래에 제가 한달간 WebStorm을 사용하면서 사용한 단축키, 플러그인, 기능 들에 대하여 기술하였습니다. ⌨ 단축키 제가 Mac을 사용하기에 단축키는 mac 기준으로 작성합니다. (윈도우 죄송합니다 🙏🏼) 제가 JavaScript 개발하면서 진짜 중요.. 2021. 12. 8.
나의 VS Code 마지막 모습(부제: VS Code 세팅) 개요 Web Storm으로 갈아타기 전에 나의 VS Code 마지막 모습을 포스팅 하려고 한다. 참고로 나는 Front-End 개발을 하고 있기에 JavaScript 기반의 세팅이다. VS Code 설정 및 확장 앱 최고의 관종 앱: Power Mode 최고의 관종 앱. keyboard 입력이 있을 때마다 팡팡 터지는 effect 때문에 심심하지 않다. (개인적으로 흔들리는 옵션은 머리아파서 disable 했다.) 이걸 쓰고 있으면 사람들이 뭐냐고 물어본다. (물어볼때마다 짜릿함) 아래는 내가 사용하는 setting { // power mode "powermode.enabled": true, "powermode.presets": "fireworks", "powermode.enableShake": fals.. 2021. 10. 29.
그 동안의 개발 도구(IDE) 회고 위는 현재 개발 PC에서 VS Code를 실행하면 보이는 모습이다. 현 회사에서는 Software 지원이 빵빵해서 VS Code와는 이별하고 (나 다시 돌아갈 수도 있어…) 전부터 사용하고 싶었던 Web Storm을 사용해보려고 한다. 나름 오래 사용했던 VS Code이기에 아쉬운 마음에 나의 IDE/Editer의 발자취를 돌아보려고 한다. 🧑🏼‍💻 나의 IDE/Editer의 역사 👶🏼 Visual Studio 2008/2012 사용 시기: 대학교 1학년 ~ 3학년 1학기 나의 첫 IDE다. 첫 Programming Language가 C/C++라서 자연스럽게 사용했다. 기억이 희미하지만 Visual Studio 2008 이전 버전을 사용하다가 2012를 사용하면서 scanf 함수를 사용할때면 취약하다고 .. 2021. 10. 20.
Storybook에서 Failed to execute 'createElement' on 'Document' 에러 발생 🤔 증상 svg 파일을 로드하는 컴포넌트를 Storybook에서 불러왔으나 위와 같은 메세지가 발생하였다. 바쁘신 분은 바로 😀 조치 사항 확인 🧐 원인 1. svg 파일 로드를 위한 패키지 설치 webpack에서 svg 파일을 로드하기 위해서 아래 패키지를 설치하였다. npm install -D @svgr/webpack # 또는 yarn add -D @svgr/webpack 2. 기존의 storybook의 main.js의 webpack 설정 소스 코드 svg 파일을 로드하기 위해서는 webpack 설정이 선행 되어야하고 본인은 아래와 같이 설정하였음. module.exports = { webpackFinal: async (config) => { config.module.rules.unshift({ te.. 2021. 9. 8.
Slack Theme 추천(부제: 남자는 핑크지...) 🌅 블랙 테마 옷부터 컴퓨터 책상, 맥북안의 모든 테마를 Black 색상을 사용하는 중이다. 뭔가 Professional한 느낌을 주는 Black Theme 나의 Mac은 Black Theme와 Red계열 그리고 Arsenal의 조합으로 이루어 져있다. 역시 나의 slack 또한 Sync OS With Setting 옵션으로 인하여 Black Theme로 사용중이다. 그런데… 어느날 Slack의 색상이 지겨워져 Theme를 고르다가… 🐽 핑크를 발견했다… 역시 남자는 Pink지… (박보검만!, ㅋㅋㅋ 웃자고 한번 써봤다…) 나는 박보검이 아니고 Pink 색 옷을 입지는 않지만 Pink 테마는 너무 예쁘다!! 나… 핑크 좋아하나봐… 한번 쯤 테마에 질릴때쯤 Slack의 White & Pink Theme는 .. 2021. 7. 6.
AWS CDK 개발 중 The provided role does not have sufficient permissions to access CodeDeploy 오류 발생 👾 개요 및 오류 메세지 AWS CDK로 CodePipeline을 소스코드화 시키는 작업 중 아래와 같은 에러가 발생하였다. The provided role does not have sufficient permissions to access CodeDeploy 다음은 오류가 발생한 cdk 코드이다. (TypeScript) 💁🏼‍♂️ 소스코드 접기/펼치기!! import * as cdk from "@aws-cdk/core"; import * as iam from "@aws-cdk/aws-iam"; import * as s3 from "@aws-cdk/aws-s3"; import * as ec2 from "@aws-cdk/aws-ec2"; import * as codepipeline from "@aws-cd.. 2021. 6. 17.