documenting and archiving

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..

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

글로벌에는 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..

프로젝트에서 파일이나 모듈을 가져올 때 상대경로 대신 사용자가 정의한 경로인 모듈 별칭을 사용할 수 있다.예를 들면 ../../components/Button 대신 @components/Button처럼 간결하고 명확한 임포트 경로로 만들 수 있다. 1. babel-plugin-module-resolver 패키지 설치npm install --save-dev babel-plugin-module-resolver2. babel.config.js module.exports = { presets: ['babel-preset-expo'], plugins: [ 'react-native-reanimated/plugin', [ 'module-resolver', { root: [..

모든 프로젝트에 prettier를 적용하지 않고, 특정 프로젝트에만 prettier를 적용하고 싶어서 찾아본 방법이다.  settings에서 require config를 체크한다.이 설정을 추가하면 VSCode는 현재 작업 중인 프로젝트 디렉토리에 Prettier 설정 파일이 있을 때만 Prettier를 실행한다.Prettier 설정 파일로 인식되는 파일들은 .prettierrc.prettierrc.json.prettierrc.yml.prettierrc.yaml.prettierrc.js.prettierrc.cjsprettier.config.jsprettier.config.cjs.prettierrc.tomlpackage.json의 "prettier" 필드등이 있다. 혹은 settings.json에 "pre..

https://fuse-react-vitejs-demo.fusetheme.com/dashboards/projectFuse React 라는 관리자 템플릿을 사용하여 관리자 페이지를 개발하게 되었다. 이 Fuse 라는 템플릿의 기본 테마를 CSS로 커스텀하는 법을 정리해봤다.1. 테마 설정 파일 수정 및 새로운 테마 생성src/app/configs/themesConfig.js에서 테마를 수정 및 새로운 테마를 생성할 수 있다.export const myCustomTheme = { palette: { mode: 'light', primary: { light: '#bec1c5', main: '#252f3e', dark: '#0d121b', }, // 기타 색상 ..

맥북으로 리액트 네이티브 환경에서 작업을 하고 깃에 커밋을 하려는데 Git: You have not agreed to the Xcode license agreements. Please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode and Apple SDKs license. 갑자기 이런 오류 메시지가 뜨면서 커밋이 되지 않았다. 찾아보니 Xcode 라이선스 동의와 관련된 Git 오류 메시지라고 한다. 해결 방법은 :1. 터미널을 연다2. 아래의 명령어를 입력한다sudo xcodebuild -license3. 엔터를 누른 후 관리자 비밀번호를 입력한다. (내 맥북의 비밀번호)4. 스페이스..

모바일 레이아웃이 따로 없는 경우,모바일 기기에서 PC 레이아웃 그대로 노출하고 싶은 경우 아래 방법을 사용할 수 있다. 1. viewport meta 태그 사용 meta 태그의 width에 특정 고정 사이즈를 지정한다. 2. css body 태그 수정body { width: 1280px; margin: 0 auto;} body 태그의 width를 특정 사이즈로 지정한다. 이렇게 하면 모바일 기기에서도 PC 레이아웃 그대로 노출이 가능하다.

See the Pen lottie by Jihyeon Kim (@jh418531) on CodePen.  lottie는 에어비앤비에서 만든 라이브러리로, 애프터이펙트에서 만든 애니메이션을 JSON형식으로 변환해서 이 JSON파일을 화면에 렌더링한다.lottie를 쓰면 더 깔끔한 애니메이션을 적용할 수 있다. Lottie 적용하기1. cdn 2. lottie 애니메이션이 불러질 영역을 생성한다. Click  버튼을 누르면 해당 버튼에서 하트가 나오는 듯한 형태로 구현하고 싶어서,애니메이션 영역은 like-lottie라고 지정하고 버튼과 함께 묶어주었다. 3. 스크립트로 lottie 적용하기function createLottieAni(containerSelector) { const containe..