- [ 개인 프로젝트 ][ electron-sample ] Electron + Typescript + React 셋팅2023-08-27 06:24:36electron 으로 앱을 개발해야 할 때, typescript 와 react 를 사용해야 한다면 매번 일일이 환경 설정을 해주는 것이 불편할 것입니다. 그래서 electron + typescript + react 조합으로 이미 셋팅을 해놓은 제 개인 레포지토리를 공유드립니다. 레포지토리 주소 https://github.com/wisdomstar94/electron-sample GitHub - wisdomstar94/electron-sample: 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트 본 레포지토리는 일렉트론 샘플 프로젝트 입니다. 프론트는 리액트를 사용합니다. Contribute to wisdomstar94/electron-sample development by creating..
- [ IT 기타 ]리액트(React)의 역사2023-08-26 22:13:21이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..
- [ 리뷰 & 추천 ][ Rectangle ] Mac 에서 창의 위치와 크기를 단축키로 조작하기2023-08-26 17:42:01개요 Mac 에서 사용하기 좋은 앱중에 "Rectangle" 이라는 앱이 있습니다. 단축키를 이용해 포커싱 되어 있는 창의 위치나 크기를 조정할 수 있도록 해주는 앱입니다. 이 앱은 무료버전과 유료버전(Pro)이 분리되어 있으며, 저는 무료 버전을 이용하는 것에 대해 큰 불편함은 없었습니다. 자주 사용하는 단축키 제가 자주 사용하는 단축키는 다음과 같습니다. ^(Control) + ⌥(Option) + 방향키 : 창의 위치와 크기 변경 ^(Control) + ⌥(Option) + ↩(Retrun or Enter) : 창의 크기를 전체화면으로 확장 ^(Control) + ⌥(Option) + (+키 또는 -키): 창의 크기를 조금씩 키우거나 축소 이 밖에도 다양한 단축키를 제공하며, 단축키는 직접 커스텀도..
- [ Node.js & Javascript & Typescript ]javascript 에서 rsa 암호화, 복호화 하기2023-08-26 13:20:06이번 글에서는 javascript 에서 rsa 암호화 및 복호화 하는 방법에 대해 공유드리고자 합니다. 코드 공유 import { JSEncrypt } from 'jsencrypt'; export function encrypt(data: string, key: string): string { const sign = new JSEncrypt(); sign.setKey(key); return sign.encrypt(data).toString(); } export function decrypt(encData: string, key: string): string { const sign = new JSEncrypt(); sign.setKey(key); return sign.decrypt(encData).toStr..
- [ IT 기타 ]meta 태그의 keywords 는 이제 seo 에 영향을 주지 않는다?2023-08-24 22:54:12개요 사이트가 검색 결과에 잘 뜨게 하기 위해서는 검색 봇이 사이트의 주요 정보를 읽을 수 있게 meta 태그를 잘 작성해 놓는 것이 중요합니다. 그래서 과거에는 사이트가 검색 결과에 자주 노출 될 수 있도록 하기 위해 meta 태그의 keywords 에 무수히 많은 keyword 를 명시하곤 했었습니다. 하지만 요즘에는 meta 태그의 keywords 를 작성하는 것이 예전만큼 큰 의미가 없어졌다고 합니다. 무분별한 키워드 작성 meta 태그의 keywords 에는 사이트와 관련 있고 주요한 키워드만 작성하는 것이 일반적이나, 사이트가 조금이라도 더 많이 노출되게 하기 위해 사이트와 크게 관련 없는 키워드까지 무분별하게 작성하는 일이 빈번했다고 합니다. 이렇게 무분별하게 작성된 keywords 를 기반..
- [ IT 기타 ]네이티브? 웹뷰? 앱이 무엇으로 만들어졌는지 확인해보자!2023-08-09 23:43:36안녕하세요. 루루 개발자 입니다. 이번에는 안드로이드 모바일 기기에서 앱이 네이티브로 만들어졌는지 웹뷰로 만들어졌는지 혹은 섞여 있는지 등을 확인해볼 수 있는 방법을 공유드려보고자 합니다. 개발자 옵션 활성화 먼저 개발자 옵션을 활성화 해야 합니다. [설정] - [휴대전화 정보] - [소프트웨어 정보] 에 들어가신 후 빌드번호 탭을 여러번 탭 하셔서 개발자 옵션을 활성화 해주세요. 개발자 옵션의 "레이아웃 범위 표시" 옵션 활성화 [설정] - [개발자 옵션] - [레이아웃 범위 표시] 옵션을 활성화 해주세요. 확인하고 싶은 앱을 실행 네이티브로 만들어진 경우 네이티브로 만들어진 부분은 위 사진 처럼 각 버튼이나 아이콘별로 레이아웃이 잡혀 보이게 됩니다. 웹뷰로 만들어진 경우 웹뷰로 만들어진 부분은 위 사..
- [ Node.js & Javascript & Typescript ]javascript 에서 aes256 암호화, 복호화 하기2023-07-26 22:07:42안녕하세요. 루루개발자 입니다. 이번 글에서는 javascript 에서 aes256 암호화, 복호화 하는 방법에 대해 공유드리고자 합니다. 먼저 이 글을 보시는 분들께서는 가까운 시일 내에 또는 지금 당장 javascript 에서 aes256 암호화, 복호화를 적용해야 하는 상황이실 거라 생각됩니다. 그래서 먼저 제가 만들어 둔 코드를 공유 드리겠습니다. import { AES, enc } from 'crypto-js'; export function encrypt(data: string, key: string): string { const dataWA = enc.Utf8.parse(data); const keyWA = enc.Utf8.parse(key); const ivWA = enc.Utf8.parse..
- [ react & next.js ]useEffect 에 대해 알아봅시다2023-07-25 22:37:04안녕하세요. 루루개발자입니다. 이번에는 리액트에서 기본으로 제공해주는 훅 함수 중 하나인 "useEffect" 에 대해 알아보고자 합니다. 아래 예시 코드들은 리액트의 프레임워크인 Next.js 를 기준으로 작성되었으므로 이 점 참고해주세요. useEffect 란? 리액트(react) 공식 문서에 의하면, useEffect 는 외부 시스템과 컴포넌트를 동기화 할 수 있게 해주는 리액트 훅(hook) 이라고 정의 되어 있습니다. 여기서 말하는 외부 시스템이란, 리액트에 의해 제어 되지 않는 것들을 말합니다. 리액트에 의해 제어 되지 않는 예시는 다음과 같습니다. API 통신 ref 를 이용한 dom 제어 window 전역 객체에 이벤트 리스너 할당 또는 해제 이 밖에도 여러가지가 있겠지만, 대체로 이런 상..