본문 바로가기

Program23

mobile에서 textarea 자동줌 해결 with 1rem 16px mobile browser에서 textarea 선택시 자동으로 줌이 되는경우가 있다? 왜 줌이 되는 걸까? 아마 줌이 된다면, 아래처럼 1:1로 viewport 고정을 안했을 경우 일것이다. 나역시 viewport 고정을 하고 싶지 않아, 설정을 하지 않았다. 이때에 textarea선택시 자동으로 줌이 된다면, text size가 16px보다 작을 경우이다. text size를 16px 또는 1rem으로 설정하면 해결된다. text size가 모바일에서 16px보다 작을경우, 자동으로 확대가 되게된다. 모바일 에서는 16px가 최소 크기로 설정이 되어있다. 2022. 12. 25.
web3 개발자가본 SSR vs CSR SSR vs CSR 검색을 해보면 똑같은 내용이 많이 공유 되는 것을 알 수 있다. 대부분의 내용이 말하는 것은 web2.0기반의 시스템에서는 맞을 수 있지만 , web 3.0기반에서는 조금 다르다. 아래 내용은 hive blockchain client app을 기반으로 설명한다. 서버사이드렌더링(SSR) 처음에 SEO를 고려해 SSR페이지로 제작을 하였다. 고려대상은 SEO와 속도였다. 하지만 여기서 몇가지 문제점이 발생한다. 서버가 필요하다. 이것은 web3.0의 서버 분산화 정책에 맞지 않게된다. 서버 유지보수 비용이 나가게 되고, 서버가 사라지면 클라이언트 앱이 동작할수 없게 된다. 실제로 빠르지않다. SSR이 빠른경우는 Frontend와 Backend가 같은 서버존 내에서 동작할경우이다. 서버의.. 2022. 12. 24.
listitem [Markdown 다루기 with Marked, Tailwind CSS] 사용 라이브러리 https://marked.js.org/ https://tailwindcss.com/ itemlist itemlist 예를 들면 li 같은 태그에서 이렇게 동그라미가 나와야 하는데 나오지 않는다면, marked에서 지원하는 use를 사용해 custom class를 적용 할 수 있다. Marked + Tailwind CSS에서 사용 예제이다. const renderer = { listitem(text, task, checked) { return `${text}`; }, }; marked.use({ renderer }); const parse = marked.parse(body); 위의 예제와 같이 listitem의 li에 tailwind css를 적용해주는 예제이다. 위처럼 적용하면 li태.. 2022. 12. 22.
Javascript Style Guide Javascript Style Guide https://github.com/airbnb/javascript 위 링크는 airbnb에서 작성한 Javascript Style Guide입니다. 아직 본적이 없다면 천천히 내용을 보면 도움이 됩니다. Prettier settings prettier : https://pish.tistory.com/21 Formatter 설정 샘플 입니다. Key Value is default? Description semi true default 세미콜론 사용 여부 singleQuote true single 쿼테이션 사용 여부 printWidth 80 줄 바꿈 할 폭 길이 trailingComma true default 여러 줄을 사용할 때, 후행 콤마 사용 방식 tabWidt.. 2022. 12. 22.