본문 바로가기
React 사용 설정하기 (esbuild) with TypeScript # React 사용 설정하기 (esbuild) with TypeScript우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild 를 깔자.)```[.linenums]npm init -ynpm install --save-exact --save-dev esbuildnpm install react react-dom jquery immer use-immernpm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev.. 더보기
단어 외우기 앱 구현 in Recoeve.net # 단어 외우기 앱 구현 in Recoeve.net간단한 단어 외우기 앱 구현해 놨습니다. 가입하셔서 한번 써보세요. 영어, 일본어, 중국어, 스페인어, 포르투갈어, 독일어 등등 외우고 싶은 것들을 spreadsheet | excel 형태로 저장한 다음, 적절한 uri 와 제목을 정하고 description | 설명 란에 "#dictionary" 엔터누르고 텍스트 복사 붙여넣기 하시면 단어 외우기 앱이 활성화 됩니다.설명 동영상은 조만간 만들어서 업데이트 하겠습니다. [--Memorizing--] 버튼 누르시면 암기 앱이 시작됩니다. From 이랑 count, cutoff 적절히 설정하시고 젤 아래 Start 버튼 누르면 문제가 나가고 Show Answer 를 눌러 답을 확인한 뒤 자신이 외운 단어라면 .. 더보기
음악 플레이리스트 (Music Playlist) 만들기 in Recoeve.net # 음악 플레이리스트 (Music Playlist) 만들기 in Recoeve.net가입하셔서 별점 드래그 하는 것만으로도 자신만의 플레이리스트를 만들 수 있습니다.가입하기 페이지 https://recoeve.net/account/log-in 로 가셔서 ID를 입력하고 구글로 가입하기를 하시거나 간단하게 이메일 ID 비밀번호만 입력하시면 손쉽게 가입 됩니다.기본 카테고리는 제 계정의 카테고리들도 추가해서 카테고리를 뭘로할지 걱정을 조금 덜어드리려고 했습니다.## PH2024-05-07 : First posting.## TOC## [Music/Break]--K-Pop of kipid's Recoeve.net[Music/Break]--K-Pop of kipid's Recoeve.net:https://reco.. 더보기
Vertical center align by CSS in HTML # Vertical center align by CSS in HTMLHTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ)아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음.## TOC## Using fle.. 더보기
HTML CSS composes, and pseudo-element :after, :active:after, and transition # HTML CSS composes, and pseudo-element :after, :active:after, and transition Buttons Add Amount Add Async Add If Odd Images ## Style ```[#pre-code-style-transition.linenums.lang-css] ```/ composes 는 module 단에서만 동작하는듯. ## HTML ```[.linenums.lang-html] Buttons Add Amount Add Async Add If Odd Images ```/ ## RRA https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions .. 더보기
순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. # 순수한 완전 쉬운 편집 (SEE: Super Easy Edit) 문서K (Markdown: 마크다운): 사용 설명서. 현재 문자들로부터 만들어진 HTML 문서K 가 보여지고 있는 중입니다. ## 문서K 와 SEE (완전 쉬운 편집) 의 초록 | 설명 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각 섹션, 하위 섹션으로 점프도 가능하고 각 섹션의 왼쪽 T 버튼을 누르면 목차로 이동됩니다.). 섹션들과 그림들 수식들 자동으로 숫자 이름 메겨주기. 참고 문헌 참조 (citing) 쉽게 하기, 팝업 형태로 참조한 문헌들 바로 보여주기. 그림이나 .. 더보기
Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. # Super Easy Edit (SEE | 엄청 쉬운 편집) of docuK (문서K: MarkDown | 마크다운): 사용 설명서. 쉽게 문서를 작성합시다. 초록 | docuK (문서K) and SEE (엄청 쉬운 편집) 이것은 HTML 문서 편집 형식 중 하나인 문서K 입니다. 자바스크립트, jQuery (쉬운 자바스크립트 프로그래밍을 도와주는 API), MathJax (수식 처리기), google code prettifier (코드 예쁘게 출력해주는 API) 로 처리되는 문서 형식입니다. 문서K 의 특징은 다음과 같습니다. 선택 가능한 모드 (밝은 화면, 어두운 화면, 추가로 핑크도 구현할 예정), 글씨체 선택 가능. 글씨 크기 바꾸기 가능, 줄 간격 바꾸기 가능. 자동으로 만들어 주는 목차 (각.. 더보기
pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). # pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). The docuK rendered from the current text is being represented. ## Abstract | Description of docuK and SEE Specific features are Changable mode, font-family. Resizable font-size, line-height. Table of contents. Numbering of sections/figures/equations. Citing references in bubble-shape pop up. Refering fi.. 더보기

티스토리툴바