KBW's cosmos

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

빠른 피드백을 통해 서비스를 빠르게 개선시키기 위해서 전달 받은 고객의 문의/건의 사항을 모으고 정리하는 일은 굉장히 중요하다. 이를 위해서 고객 문의/건의 사항에 대한 자동화된 처리가 필요했고 그에 따라 사용하게 된 툴들을 소개하고자 한다. AirTable 고객 문의/건의 사항등을 데이터베이스에 넣기에는 애매한 부분이 있다. 이에 대안으로 AirTable을 알게되었다. 구글 스프레드시트와 구조는 거의 비슷하며 테이블을 만들면 자동으로 rest api가 생성된다. Airtable | Everyone's app platform Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate..

GA를 붙이는 여러 라이브러리들이 있다. 하지만 유럽권에서 개인정보를 활용한 마케팅에 규제를 가하고 있는 이유로 구글 새로운 방식의 마케팅 지원을 할 수 있게 변화를 주고 있다. 이런 변화에 대응할 수 있도록 라이브러리 없이 Vercel에서 제공하는 가이드 라인에 따라 조금은 투박하게 직접 붙여보기로 했다. _app.js 파일에 GA 측정 ID 추가 보통 태그나 태그 안에 들어갈 내용을 커스텀하기 위해 _document.js 파일을 이용한다. 하지만 아래 예제에 따르면 Next 11 버전에서 추가된 next/script를 이용해 _app.js에서 구현하기를 권고하고 있다. GitHub - vercel/next.js: The React Framework The React Framework. Contribu..

나의 인생의 목표, 나는 무엇을 하고 싶을까? 궁극적으로 이루고 싶은 게 무엇일까? 오늘 문득 생각을 가져본 지 오래되었다는 생각을 하였다. 스스로 묻고 스스로 답하는 생각. 나에게 묻는 생각들. 어쩌면 대한민국 이 땅에 사는 많은 사람들이 그러한 것 같다. 한국의 많은 사람들이 ‘평범’해지기 위해 노력한다. 하지만 이 평범의 기준은 무척 높다. 사실 나는 이 평범보다도 더 뛰어나고 싶다. 남들이 오지 못한 곳을 더 오르고 나의 뛰어남을 증명하고 싶다. 하지만 나와 비슷한 또래가 훨씬 앞에서 달려나가는 것을 볼 때 종종 무기력함을 느낀다. 어떻게 보면 내가 특별하지 않다는 걸 인정하기 싫은 것 같다. 그럼 나는 왜 특별하고 싶은걸까? 남들보다 특별해서 얻는 게 뭐지? 사람들의 인정인가? 사랑인가? 명성인..

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..

개발하면서 자주 사용하였지만 개념적으로 잡힌 느낌은 아니여서 포스팅하며 정리하고자 한다. 콜백함수 정의 : 함수에 파라미터로 들어가는 함수 콜백함수 용도 : 순차적으로 코드를 실행하고 싶을 때 사용 먼저 addEventListener를 보겠다. document.querySelector('.button').addEventListener('click', function(){ }) 해당 함수를 사용할 때 콜백함수를 집어넣게 되어있다. addEventListener도 함수인데 파라미터 자리에 또 하나의 함수를 집어넣고 있다. 이것을 콜백함수라고 한다. setTimeout에서도 마찬가지다. setTimeout(function(){ }, 1000) 안에 콜백함수를 집어넣게 한다. 그렇다면 함수안에 함수를 넣으려면 ..

예정된 발표일인 금요일 오전 10시 30분에 합격 발표가 났다. (조기 발표는 없었다..) 이전 기수에는 조기 발표도 있었고 오전 10시 발표, 2시 발표, 4시 발표 다양했다고 한다. 코딩 테스트 후기는 이전 포스팅에서 다뤘기에 이번 포스팅에서는 면접 위주로 다루겠다. 코딩 테스트를 비롯한 다른 내용이 궁금하다면 아래 글들을 참고하길 바란다. 소프트웨어 마에스트로란? ▼ 소프트웨어 마에스트로란? (소마 지원 규모, 목적) 최우수 SW 인재를 발굴해 체계적, 파격적 지원을 통해 SW 산업에 발전을 기여하겠다는 목적으로 기획된 정부 지원 사업이다. IT 관련 프로그램 중 가장 유명하고 인기가 많은 프로그램 중 하나이 kbwplace.tistory.com 소프트웨어 마에스트로 13기 1차, 2차 코딩테스트 ..