documenting and archiving

ckeditor 생성은 https://ckeditor.com/ckeditor-5/builder/ 여기서 할 수 있다.여기서 에디터의 종류나 사용할 옵션을 모두 선택할 수 있다. 나는 무료버전인 Classic Editor를 선택했고, Next를 눌러준다. 그 다음에는 옵션을 선택할 수 있다.필요한 옵션을 선택하고, Next를 눌러준다.참고로 옵션중에는 유료 옵션들도 있으니 무료버전을 사용하고 싶다면 무료 옵션만 선택해야 한다. 다음은 툴바 스타일을 선택할 수 있는 화면이 나온다. 마지막으로 언어 선택과, 설치할 수 있는 방법을 선택할 수 있는 옵션이 나온다.나는 리액트 환경에서 설치할 것이기 때문에 리액트를 선택했고, npm으로 설치하는 방법을 선택했다. Copy Code Snippets를 선택하..

Hydration이란 React가 서버에서 렌더링된 정적 HTML을 받아서 인터랙티브한 React 앱으로 변환하는 과정이다. 그런데 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 일치하지 않을 때Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used 라는 오류가 발생한다. 나의 경우는useIsMobile 이라는 커스텀 훅을 만들어서 이걸 통해 모바일 디바이스나 모바일 뷰포트인지를 체크한 다음레이아웃이나 조건부 렌더링 등의 ..

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은 팝업 내에 존재해야 했기 때문에, 팝업 내에 만들었고팝업의 타이틀도 슬라이드에 따라..