1. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어 자바스크립트의 확장된 언어 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 javascript 파일로 변환하는 과정을 거쳐야 됨. 이러한 변환 과정을 우리는 컴파일(complile) 이라 함 2. 타입스크립트에서 컴파일 이란 ts파일을 js파일로 변환하는 과정 3. 왜 타입스크립트를 쓰면 좋은가요? 에러의 사전 방지 코드 가이드 및 자동 완성(개발 생산성 향상) 4. 자바스크립트에 타입이 있을 때의 첫 번째 장점 타입스크립트가 없을 때는 jsDoc을 이용해 타입을 설정했었는데 코드에 종속성이 생겨 관리하기가 힘들어짐 💡 jsDoc와 Typescript 차이점 - jsdoc은 자바..
해당 글은 2022년 7월에 작성한 글입니다. 원인 현재 사용중인 RBSheet 모듈은 react-native-raw-bottom-sheet인데 2년 동안 업데이트가 없을 정도로 관리가 안되고 있는 모듈입니다. 이 모듈은 react-native-modal을 dependence하고 있는데 KeyboardAvoidingView를 비활성화해도안드로이드에서만 키보드 활성화 시 빈 공간만큼 모달이 올라갑니다. 해결방법 해당 모듈의 내부 코드에있는 Modal 속성에 있는 statusBarTranslucent 의 값을 활성화 합니다 statusBarTranslucent는 모달이 시스템 상태 표시줄 아래에 있어야 하는지 여부를 결정하는데 기본값이 false라서 빈 공간이 있으면 상태바 아래까지 모달이 올라갑니다 급한 ..
이 글은 2021년 2월 19일에 작성되었습니다. Next JS에서는 SSG와 SSR 두 가지의 사전 렌더링 방식이 존재합니다. SSG는 프로젝트가 빌드되는 시점에 필요한 데이터를 미리 호출하며 이를 사용하기 위해 next js에서 getStaticProps와 getStaticPaths함수를 제공합니다. SSR은 각 페이지 요청마다 데이터 통신을 하며 next js에서는 getServerSideProps함수를 제공합니다. 이번 글에서는 getStaticProps와 getStaticPaths 그리고 getServerSideProps함수 사용방법에 대해 알아보겠습니다. getStaticProps /* pages/home/index.js */ export default function Home({homeDat..
이 글은 2021년 2월 21일에 작성되었습니다. Git pull request를 사요면 자연스럽게 모든 팀원들이 한눈에 알아볼 수 있는 Commit의 형태는 무엇일지 고민하게 됩니다. 이번 글에서는 가독성 좋은 Commit의 가이드라인을 공유하고 Commit 템플릿을 어떻게 적용하는지 알아보겠습니다. 기본 Commit 구조 [optional scope]: [optional body] [optional footer(s)] type 종류 feat: 새로운 기능 추가 fix: 버그 수정 docs: 문서 수정 style: 코드 포맷팅 refactor: 코드 리팩토링 chore: 빌드 파일 수정, 패키지 파일 수정 revert: 커밋 되돌리기 description 작성법 글의 길이는 50글자를 넘지않습니다. 과..
이 글은 2021년 5월 1일에 작성되어 레거시 내용이 포함되어 있습니다. 최신 Next js Image 공식 문서를 확인 해주세요 서론 Next.js는 버전 10.0.0부터 이미지 태그를 자동으로 최적화는 next/image를 제공하고 있습니다. next/image의 는 HTML의 를 최신 웹 용으로 확장합니다. 를 사용하면 자동으로 크기를 최적화하는 WebP 같은 최신 형식의 이미지를 제공받을 수 있습니다. 이는 더 작은 장치의 화면에서 큰 이미지가 전송되는 것을 방지할 수 있습니다. 또한 Next.js가 향후 이미지 형식을 자동으로 채택하고 해당 형식을 지원하는 브라우저에 제공할 수 있습니다. 는 모든 이미지 소스에서 작동합니다. 이미지가 CMS와 같은 외부 데이터 소스에서 호스팅 되는 경우에도 여..
해당글은 2021년 5월 21일에 작성되어 레거시한 내용이 포함되어 있습니다. 설치 Apollo Client 및 GraphQL 종속성을 추가합니다. yarn add @apollo/client graphql subscriptions-transport-ws lib/apolloClient.js 파일 생성 Apollo 클라이언트 설정을 저장할 lib/apolloClient.js 파일을 생성합니다. import { ApolloClient, HttpLink, InMemoryCache, createHttpLink, split } from "@apollo/client"; import { concatPagination, getMainDefinition, offsetLimitPagination } from "@apollo..
1. 적응 지원의 문제 (전문가의 저주) 선임 개발자가 새 팀원에게 많은 정보를 준다. 정보의 양이 너무 많아서 높은 인지 부하를 유발한다. 예를 들어 팀원들, 코드베이스의 도메인, 워크플로, 코드베이스를 한꺼번에 소개한다. 소개가 끝난 후 선임 개발자는 새 팀원에게 질문을 하거나 과제를 준다. 선임 개발자는 이것을 아주 간단한 일로 여긴다. 도메인이나 프로그래밍 언어 혹은 두 가지 모두 관련 청크의 부족과 관련 자동화 기술 부족으로 인해 인지 부하가 높아지고 새 팀원은 적응에 어려움을 느낀다 새 팀원은 프로젝트가 매우 어렵다고 느낄 것이고 팀장은 새 팀원의 능력을 의심한다. 2. 전문가와 초보자의 차이 전문가의 뇌는 LTM에 관련 기억을 많이 저장하는데 이 저장된 기억을 작업 기억 공간이 필요로 할 때..
1. 코드베이스의 특성 조사 라이브러리, 프레임워크, 모듈에 대해 이야기할 때, 기술적인 측면에 대해 이야기할 수 도 있지만 인지적 차원의 코드베이스(CDBN)를 고려하면 사용자에게 미치는 영향을 이해하는 데 도움이 된다. 인지적 차원 오류 경향성 일관성 분산성 숨겨진 의존성 잠점성: 사용하는 동안 생각하는 것이 얼마나 쉬운지에 대한 것이다. 점도: 특정 시스템을 변경하는 것이 얼마나 어려운가에 대한 차원으로, 잠정성과 관련이 있다. 점진적 평가: 주어진 시스템에서 부분적인 작업을 확인하거나 실행하는 것이 얼마나 쉬운지에 대한 것이다. 역할 표현력: 프로그램에서 여러 가지 다른 부분의 역할을 얼마나 쉽게 알 수 있는지를 나타낸다. 메서드에 ()를 표현하는 것과 변수와 키워드를 다른 색으로 보여 주는 게 ..
