documenting and archiving

tsconfig.json의 "moduleResolution": "bundler" 에서Option '--resolveJsonModule' cannot be specified without 'node' module resolution strategy. 라는 오류가 계속 발생했다.그런데 같은 프로젝트를 작업하는 다른 사람들은 이 오류가 없고,나만 이 오류가 뜨고 있어서 해결법을 찾아보았다. 원인은 vscode에서 타입스크립트의 버전을 해당 프로젝트의 버전으로 사용하지 않아서 생긴 문제였다. 먼저 cmd(ctrl) + shift + p를 입력하거나 Command Palette를 열어서,Select Typescript Version을 선택해준다. 그러면 이렇게 vscode의 버전을 사용할 것인지, 워크스페이스..

styled-component로 스타일을 작성하는데, 갑자기 css 자동완성이 하나도 뜨지 않았다.확인해보니 vscode-styled-components 익스텐션을 1.7.5 이상으로 업데이트 해야하는데,나의 경우는 vscode를 업데이트 하지 않아서 1.7.8 버전이 아예 보이지 않았다.그래서 vscode를 업데이트 하려고 했는데,Cannot update while running on a read-only volume. The application is on a read-only volume. Please move the application and try again. If you're on macOS Sierra or later, you'll need to move the application out..

디자인이나 레이아웃을 위해 의미 없는 요소를 넣어야 하는 경우가 있다.이런 장식용 요소는 스크린 리더에 읽히지 않도록 하기 위해 숨겨줘야 하는데, 적절히 숨기는 방법은 다음과 같다. 1. aria-hidden="true"시각적으로는 보이지만, 스크린 리더에서 읽히지 않아야 하는 경우 area-hidden 속성을 사용한다.단 aria-hidden="true"가 적용된 요소 안에 포커스 가능한 요소(ex: link, button)등이 들어가서는 안된다.2. role="presentation"장식용 이미지 등을 넣는 경우, role="presentation"을 사용해서스크린 리더가 무시할 수 있도록 한다.3. CSS 가상요소 사용하기장식적 요소인 경우, 가능하면 css 가상 선택자인 ::before, ::af..

ios에서는 ScrollView 컴포넌트를 사용하면, 실제로 스크롤이 생기지 않더라도사용자가 화면을 드래그하면 바운스 효과가 발생한다.그런데 바운스가 되면 원치 않는 화면이 나타날 때가 있다보니(디자인이 깨지는 것 처럼 보일 경우)바운스 효과를 막기 위해서 ScrollView 컴포넌트의 bounces 속성으로 바운스를 막았다.  {/* 컨텐츠 내용 */} bounces={false}를 사용해주면 ios 특유의 바운스 효과를 막을 수 있다.

vscode 좌측 탭의 explorer 버튼이 사라지는 경우가 있다.ctrl(command) + shift + p를 누르면 된다고 하는데, 이 단축키를 입력해도 나타나지 않는 경우가 있다.  그럴때는 command palette > Reset View locations 를 입력해주면 다시 explorer가 잘 나타난다.

리액트 네이티브에서는 이미지의 크기를 반드시 명시적으로 설정해줘야 한다.그리고 웹에서 사용하는 것 처럼 width, height를 auto로 값을 설정해주는 것도 불가능하다. 이미지를 부모 영역 안에서 width는 100%로 꽉 차게 하고,height값은 이미지가 원래 가지고 있는 사이즈의 비율에 따라 자연스럽게 차지하게 만들었다. import React, { useState } from 'react';import { View, Image, Platform } from 'react-native';import { useSafeAreaInsets } from 'react-native-safe-area-context';import styles from './styles';const DetailScreen = ..

리액트 네이티브에서 간단한 carousel을 만들었다.처음에는 react-native-snap-carousel을 사용해서 구현하려고 했는데,내가 원하는대로 제대로 작동이 안되기도 했고, 간단한 carousel이라서 굳이 라이브러리까지 사용하지 않아도 될 것 같아서 직접 만들어 보기로 했다.마침 직접 구현한 좋은 글을 발견하여, 아래 글을 참고해서 만들어봤다. 참고글:https://maruzzing.github.io/study/rnative/React-Native-%EC%BA%90%EB%9F%AC%EC%85%80(carousel)-%EB%A7%8C%EB%93%A4%EA%B8%B0/    내가 구현해야 하는 carousel은 팝업 내에 존재해야 했기 때문에, 팝업 내에 만들었고팝업의 타이틀도 슬라이드에 따라..

글로벌에는 nvm이 설치되어 있고 사용이 가능한데, vscode 의 터미널에서 nvm을 사용하려고 하면 command not found: nvm 이라고 오류 메시지가 뜨면서nvm을 사용할 수 없었다.vscode에서 개별적으로 프로젝트를 열어서 사용할 때도 nvm을 사용하는 방법을 찾아보았다.나는 zsh 셸을 기본으로 사용중이기 때문에, zshrc에서 수정해주었다. 1. 터미널에서 zshrc 파일을 열어준다.open -e ~/.zshrc 2. 파일에 다음 코드를 추가하고 저장해준다.export NVM_DIR="$HOME/.nvm"[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/ba..

프론트 개발을 할 때 마다 늘 아이콘을 어떻게 관리해야 할 지 고민이 되었다.아이콘 파일이 한두개도 아니고, 또 아이콘마다 사이즈도 다 다르고,같은 아이콘인데 상태별로 컬러도 다르다보니어떻게 하면 아이콘을 좀 더 효율적으로 관리할 수 있을지 여러 방법을 찾아보고 시도도 해보았다.리액트 네이티브 프로젝트를 개발하면서 아이콘을 어떻게 관리할 지 고민하다가, react-native-svg를 통해 svg 파일로 아이콘 컴포넌트를 만들어 사용해보기로 했다. 1. react-native-svg 설치npm install react-native-svg2. 아이콘 파일 저장/assets/icons 하위에 사용할 아이콘 파일들을 svg 형태로 저장해준다. 3. index.ts 파일에 아이콘 관리그리고 아이콘을 저장해둔 위..