본문 바로가기

전체 글85

[Findaline] 기록을 찾는 기능 Findaline의 두 번째 릴리즈입니다. 이번 업데이트는 사용자가 자신이 기록한 콘텐츠를 보다 쉽고 빠르게 찾아볼 수 있게 하는 데 중점을 두었습니다. 이를 위해 주요한 두 가지 개선이 이루어졌습니다. - 텍스트 검색 기능 향상: 검색창에서 제공하던 텍스트 기반 검색이 더욱 향상되었습니다. - 사진 관리 시스템 도입: 사진 파일을 쉽게 검색하고 관리할 수 있는 새로운 방법을 제공합니다. 1. 텍스트 검색 기능 텍스트 검색 기능이 향상되어 이제는 메모의 제목뿐만 아니라 본문 내용 전체를 대상으로 검색할 수 있습니다. 검색 결과에서는 사용자가 입력한 검색어와 일치하는 제목이나 본문 내용이 하이라이트 처리되어 한눈에 들어옵니다. 이로써, 필요한 정보를 찾기 위해 메모를 하나하나 열어보는 수고를 덜 수 있게 .. 2024. 3. 26.
[Findaline] 소개 Findaline Findaline은 포트폴리오용으로 만든 메모 웹 애플리케이션입니다. PARA 메모법을 기반으로 하여, 사용자가 메모를 기록하고 정리할 수 있도록 디자인되었습니다. 또한, 기록된 메모를 효과적으로 활용할 수 있는 다양한 방안들을 고려하며 개발되었습니다. 2024.01.29 - PARA PARA 뜬구름 잡는 일들이 많아지니 생각 정리가 어렵고 시간이 없다. 잘 알려진 메모법들과 일정 관리법들에 대해 알아봤고, PARA를 적용하기로 했다. https://www.youtube.com/watch?v=lkRQuMIbFYc PARA 시간 관리 codingbroker.tistory.com 개요 메모 애플리케이션은 크게 두 종류로 나눠 볼 수 있습니다. Notion, Evernote, Obsidian.. 2024. 3. 21.
[react] 폴더구조 구현 - recursive component *리액트 프로젝트의 폴더구조에 관한 것이 아닌, 리액트로 폴더구조를 구현하는 방법에 관한 글입니다. 폴더구조(Folder structure) 데이터 폴더구조라 함은 폴더와 파일로 이루어진 데이터의 집합입니다. 운영체제의 폴더 탐색기를 생각하시면 됩니다. 데이터의 기본적인 모양새는 다음과 같습니다. type File = { id: String, type: String, name: String, value: String, }; type Folder = { id: String, type: String, name: String, children: Array, }; 이 구조에서의 파일과 폴더의 차이점은 파일은 하위에 더 이상 출력할 데이터가 없고, 폴더에는 children 프로퍼티에 다시 파일 혹은 폴더로 이루어.. 2024. 3. 5.
[Rectify] 에디터 Beta v0.4 - 메뉴바, 반응형 Beta v0.3 업데이트 내용 1. 메뉴바 추가 옵시디언 같은 메뉴바가 없는 깔끔한 에디터를 만들 예정이었지만 사용성이 좋지 않은 것 같아서 결국 메뉴바를 추가했다. 옵시디언에서는 마크다운 에디팅이 지원되기 때문에 메뉴바가 없어도 에디팅이 수월한데, WYSIWYG 에디터에서는 아무래도 키보드만으로는 모든 기능을 수행하기가 어렵다. 위치가 고정된 메뉴바 대신 노션처럼 마우스 커서에 따라 움직이는 버블 메뉴바를 추가했다. 기존에 콘텍스트 메뉴에 몰아두었던 기능들을 메뉴바에 분배하니 사용성이 조금 나아진 듯하다. 이미지, 차트 추가 등 커스텀 요소와 관련 있는 기능들은 콘텍스트 메뉴에 그대로 남겨두었고, 스타일 기능(볼드체, 기울임, 색상 등)들을 메뉴바로 옮겼다. 2. 반응형 기존에 막아두었던 작은 화면의.. 2024. 2. 10.
[Rectify] 에디터 Beta v0.3 - 콜라보레이션, 웹소켓 서버 배포 Beta v0.3 업데이트 내용 1. Collaboration 협업 에디팅 구현. tiptap extensions와 @hocuspocus/server 모듈을 사용했다. 이 모듈과 함께 y.js, prosemirror를 사용하면 CRDT(Conflict-free Replicated Data Type)의 설정이 굉장히 간편해진다. 2. 서버 배포 heroku의 eco dyno 티어를 사용했다. 가격은 컴퓨팅 시간당 $0.005, 최대 월 $5이다. 30분 동안 작업이 없으면 서버를 자동으로 재운다. 2024. 2. 8.
[Rectify] 에디터 Beta v0.2 - 차트, 클립보드 데이터 Beta v0.2 업데이트 내용 1. 차트 노드 추가 recharts 패키지의 bar, line 차트 사용 2. clipboard data 연동 에디터 내에서 생성된 콘텐츠가 아닌 외부의 콘텐츠가 클립보드를 통해 삽입되는 경우가 있다. 단순 문자열인 경우에는 paragraph를 생성해서 내용을 채워주면 되지만, 일반적으로 브라우저에서 클립보드에 데이터를 담을 때(복사)에는 HTMLElement로 담기는 경우가 많다. 이 경우 에디터 내에는 이미 이미지(img), 링크(a), 비디오(video)를 랜더링 하는 커스텀 노드가 존재하기 때문에 클립보드에 있는 img, a, video 태그를 그대로 삽입해 버리면 에디터와 매칭되지 않는 html 요소들이 삽입되어 버린다. 그래서 clipboard에 있는 데이터가.. 2024. 2. 7.
[Rectify] 에디터 Beta v0.1 - 컨텍스트 메뉴, shortcutkey, 커스텀 노드 Beta v0.1 에디터만 베타 테스트 배포하기. editor, graph view, calendar는 각각 패키지 출시를 꿈꾸며 독립적인 모듈로 제작할 예정이다. 1. top menu bar 노션과 옵시디언에는 티스토리 에디터와는 다르게 상단에 메뉴바가 없다. 내 수준에서는 어떤 이유인지 잘 모르겠지만 세계적인 UI/UX 전문가들의 화면이니 나도 따라 하기로 했다. 메뉴바 없이 버튼들을 어떻게 배치해야 되나 고민이 많았다. 찾기 좋은 곳에 몰아넣으면 그 많은 버튼 안에서 특정 버튼을 또 찾아야 한다는 불편함이 있었고, 적절히 공간을 나누자니 필요에 의한 분류가 아닌 디자인을 위한 분류가 되는 듯한 느낌이 들었다. 명확한 방향성은 아직 정하지 못했지만 우선 볼드체나 밑줄, 링크 등 기본적인 기능들은 콘텍.. 2024. 2. 2.
[Rectify] 기획 두 번째 프로젝트 Rectify는 PARA를 위한 일정관리 애플리케이션이다. 수익형 웹사이트는 아니고, 포트폴리오용에 가깝다. PARA는 어느 애플리케이션에서도 쓰기 좋지만 PARA만을 위한 애플리케이션은 없어서 기획해 보았다. 기술 스택 react, tailwindcss, firebase 기능 1. WYSIWYG 에디터 prosemirror를 활용한 rich text editor 2. 프로젝트 관리 file system 느낌이 나는 인터페이스로 구현. notion의 좌측 사이드바를 벤치마킹할 예정이다. 3. Graph view P, A, R, A의 관계를 한눈에 파악할 수 있는 화면. obsidian의 graph view를 벤치마킹할 예정이다. 4. Calendar Project에 해당하는 메모들의 일.. 2024. 1. 29.
PARA 뜬구름 잡는 일들이 많아지니 생각 정리가 어렵고 시간이 없다. 잘 알려진 메모법들과 일정 관리법들에 대해 알아봤고, PARA를 적용하기로 했다. https://www.youtube.com/watch?v=lkRQuMIbFYc PARA 시간 관리 전문가 티아고 포르테의 저서 에 소개되어 있는 메모법이다. 일정을 관리하는 법은 아니고, 일상에서 떠오른 생각들을 기록하는 메모법에 관한 것이지만 이 메모법을 일정관리로도 활용할 수 있을 것 같다. 보통 메모를 하다 보면 나중에 그 데이터를 활용하는 것보다, 기록하는 행위 자체에 의미를 두게 되는 경우가 많다. 그러나 기록하는 행위 자체로는 별 의미가 없다. 물론 기록은 중요하지만, 활용되지 않으면 쓸모가 없는 것이다. 그리고 지금 내 메모앱에는 그런 쓸모없는 기록.. 2024. 1. 29.
levelsio https://twitter.com/levelsio/status/1457315274466594817 X의 @levelsio님(@levelsio) 🍰 Only 4 out of 70+ projects I ever did made money and grew 📉 >95% of everything I ever did failed 📈 My hit rate is only about ~5% 🚀 So...ship more twitter.com 수익형 웹사이트 1인 개발자이다. 한 달 수입이 대략 30만 달러라고 한다(인증된 건 아님). 트위터에 보면 수익이 가장 큰 프로젝트는 주식 매매 AI 프로젝트인 듯. AI를 활용한 이미지 생성이나 프리랜싱을 연계해 주는 커뮤니티 사이트가 수익이 높다. 70개가 넘는 프로젝트를 만.. 2024. 1. 28.
[연봉툴즈] 배포 2주일 경과 https://www.yeonbongtools.com/ 연봉툴즈 2024 2024 가장 정확한 연봉 실수령액 계산기. 실수령액 계산기와 연봉별 테이블, 연봉 인상률 계산기 등 급여와 관련된 다양한 툴을 제공합니다. www.yeonbongtools.com 오랜만에 유입수를 확인해 보니 반의 반으로 줄었다. 내가 게을러지니까 어떻게 알고 유입수도 똑같이 줄어든다. 2차 작업 내용을 신나게 적어두었는데, 1주일 동안 손이 가질 않았다. 위기 상황인 것 같다. 일단 중요한 건 기록이니 포스팅은 남기자. 좋은 소식 첫 번째 첫 번째 좋은 소식은 구글 서치콘솔에서 트래픽이 잡히기 시작했다는 것이다. 6일 전 소식이다. 주요 키워드도 예상대로 잘 잡히고 있다. 아직 클릭수는 0이지만! 좋은 소식 두 번째 Light .. 2024. 1. 26.
[HTML, JAVASCRIPT] 요소가 화면에 들어왔는지 확인하는 방법, Intersection Observer API Intersection Observer API Intersection Observer는 보통 스크롤 이벤트에 반응하는 Lazy loading이나 애니메이션 트리거링을 할 때 주로 사용됩니다. 하지만 이것 자체로는 스크롤 이벤트를 직접 처리하는 도구는 아닙니다. 본질적인 기능은 훨씬 더 단순합니다. Intersection Observer API의 기능은 단순히 특정 요소가 사용자의 뷰포트(화면) 혹은 다른 요소 안에 들어왔는지 감지하는 것입니다. lazy loading에서 어느 시점에 데이터를 추가로 요청할 것인지 판단하는 것과 애니메이션 트리거링에서 언제 애니메이션을 시작할지 판단하는 것은, 모두 특정 요소를 적절한 곳에 위치시킨 후 Intersection Observer를 활용하여 그 요소가 화면에 들.. 2024. 1. 23.
[연봉툴즈] 배포 1주일 경과 배포 후 1주일이 지났다. 위 이미지는 vercel에서 제공하는 무료 티어 애널리틱스 화면이다. 총 41의 유입이 발생했고, 페이지뷰는 381이다. 유입은 동일한 사용자 기준 1일 1회로 계산된다고 한다. 여기서 웹 크롤러와 나의 유입을 제외하면 35 유입에 350 페이지뷰 정도가 된다. 당연하게도 모든 유입은 이 블로그를 통해서 발생했는데, 생각보다 많아서 놀랐다. 아직 검색 유입은 한 개도 없다. 고무적인 건 유입당 페이지뷰가 무려 10회에 육박? 한다는 점이다. 개발에 관심이 있는 독자분들이 구경을 하다가 가신 걸까? 잘 모르겠지만 감사하고 신나는 수치다. 각 검색엔진 사이트 등록은 배포 3일 후에 요청했다. 금일(24년 1월 18일) 확인해 보니 구글, 빙, 네이버, 줌은 등록이 완료되었고 다음은.. 2024. 1. 18.
[연봉툴즈] 배포 배포 https://www.yeonbongtools.com/ 연봉툴즈 2024 연봉 실수령액 테이블 연봉 별 실수령 금액을 표로 확인해보세요. www.yeonbongtools.com 1차 배포를 완료했다. 풍문이지만 도메인 서버 등록 6개월 미만의 신생 웹사이트는 검색 노출에 매우 불리하다고 한다. 그래서 추가 작업은 틈틈이 업데이트하기로 하고, 일단 웹사이트를 배포했다. 작업 내용은 기획 AI의 기획서를 그대로 따랐다. 여기서는 기술 스택, 기능, 차별화, 개선할 사항을 정리한다. 1. 기술 스택 Frontend & Backend Nextjs Style Tailwindcss(+daisyUI) Hosting Vercel 2. 기능 주요 기능은 3가지이다. 실수령액 계산기 연봉 인상률 계산기 실수령액 테이.. 2024. 1. 10.
[연봉툴즈] 기획 연봉 계산기 인터넷 건물주 되기 프로젝트. 첫 번째 지을 인터넷 건물은 연봉 계산기이다. 정확히 표현하면 월 실수령액 계산기. 유튜브 영상을 보다가 아이디어를 얻었다. 주요 기능은 사용자가 계약 연봉을 입력하면 세금을 공제한 월 실수령액을 계산해 주는 것이다. 입력할 필드는 5개 정도 되고, 출력은 각종 세금과 월 수령액이다. 주요 기능이 완료되면 연봉과 관련된 다양한 기능을 추가할 예정이다. 주제 선정 과정 구현이 매우 간단하고, 수요가 많다. 네이버 키워드 도구에서 관련 검색어의 월 검색량을 모두 합치면 40만 정도 된다. 특이한 점은 클릭률(특히 pc)이 매우 낮다는 점인데, 이건 검색 결과의 최상단에서 네이버가 자체적으로 연봉 계산기를 제공해 주기 때문인 듯하다. 잡코리아와 사람인에서도 계산기를 .. 2024. 1. 5.
[JAVASCRIPT] this가 가리키는 객체 (메서드, 함수, 화살표 함수에서) this 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서의 this는 전역 객체를 참조합니다. 전역 객체란 node 환경에서는 global 객체, 브라우저에서는 window 객체입니다. 2. 함수 안에서의 this 여기서도 여전히 전역 객체를 참조합니다. 함수 블록 안이라고 해서 컨텍스트가 좁혀지지 않습니다. function someFunc() { console.log(this) } someFunc(); // Window {0: Window, window: Window, self: Window, document: document, name: "", location: Location, …} 단, 엄격모드(use strict)에서는 함수 안에서의 this가 undefined입니다. 'use strict'.. 2024. 1. 5.
[react] JSX 배열 반복문 렌더링 - for, map, forEach 리액트에서 JSX 반복 렌더링 JSX와 중괄호 반복문을 사용하기 위해서는 JSX안에서 중괄호({}, curly braces)를 써야 합니다. JSX는 리액트 컴포넌트의 return문으로 반환되는 코드입니다. javascript를 확장한 문법으로, React에서 UI를 구현하는 데 사용됩니다. (HTML과는 다릅니다) function App() { const weekArr = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]; return {weekArr[0]}; } 이 위치에서 반복 렌더링을 하기 위해 사용이 가능한 방법과 그렇지 않은 방법을 살펴보겠습니다. 1. for 문❌ return문 안에서는 아래처럼 for문을 사용하면 안 됩니다. // wrong funct.. 2024. 1. 4.
[JAVASCRIPT] 배열 vs 객체, 배열보다 객체를 써야 하는 경우, 배열을 객체로 바꾸는 방법(array to object) 배열 vs 객체 애플리케이션에서 데이터를 다룰 때에는 데이터의 용도에 맞게 적절한 자료구조를 사용해야 합니다. 배열과 객체는 모두 대량의 데이터를 다룰 때 활용할 수 있는 자료구조이며, (사실 자바스크립트에서는 배열도 객체입니다만) 내장 메서드를 활용하면 간단하게 양쪽 간에 형태를 서로 변환할 수 있습니다. 형태를 변환해주어야 하는 경우의 예로는 외부에서 가져온 데이터의 구조가 애플리케이션과 궁합이 맞지 않는 경우, 자체적으로 구현한 자료구조라고 하더라도 형식을 변환해 줌으로써 순간적인 성능 향상의 이점을 얻을 수 있는 경우 등이 있습니다. 배열을 객체로 바꿔줘야 하는 경우 배열 내의 특정 요소에 접근하기 위해서는 우선 모든 요소들을 순회해야합니다. 이때 배열 내의 각 요소를 특정할 수 있는 수단은 in.. 2024. 1. 3.
[JAVASCRIPT] 문자열이 특정 문자열로 시작하는지(or 끝나는지) 확인하는 방법 - startsWith(), endsWith() startsWith(), endsWith() 문자열 파싱이나 검색은 알고리즘 문제에 나오는 단골손님입니다. 문자열과 관련된 기능을 자유롭게 다루지 못하면 문제 풀이의 시작조차 어려운 경우가 많습니다. 이 글에서는 자바스크립트 String에 있는 메서드들 중 startsWith과 endsWith에 대해서 살펴보겠습니다. 글 하단의 MDN 링크를 타고 들어가시면 다른 여러 메서드들을 보실 수 있습니다. 한글 번역이 잘 되어 있습니다. 1. startsWith 구문 startsWith(searchString) startsWith(searchString, position) 문자열이 searchString으로 시작하면 true, 아니면 false를 반환합니다. 두 번째 인자로 position값을 전달하면 탐색할 .. 2024. 1. 3.
[HTML, CSS] display 속성 차이(block, inline, inline-block) CSS display 속성 display 속성값은 요소에 적용되는 방식에 따라 display-outside와 display-inside으로 나뉩니다. display-outside 요소를 둘러싼 레이아웃에서 해당요소가 어떻게 위치하는가와 관련됩니다. block, inline, inline-block 등이 있습니다. display-inside 요소 내부의 자식요소들을 정렬하는 방법을 설정합니다. flex, grid, table 등이 있습니다. display-inside는 자식요소를 어떻게 정렬하는지 결정하는 속성입니다. 여기에 flex나 grid등의 값을 설정해서 요소들을 정렬할 수 있습니다. flex, grid 레이아웃 시스템에 관한 내용은 이 글에서는 다루지 않고 여기서는 display-outside 속.. 2023. 12. 31.
[HTML, CSS] 요소에 그림자 추가하는 방법(입체감 주는 방법) box-shadow, text-shadow 총정리 HTML 요소에 그림자 추가하는 방법 CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 다양한 예시를 통해서 shadow 속성들을 살펴보겠습니다. 1. box-shadow /* | | */ box-shadow: 60px -16px red; /* | | | */ box-shadow: 10px 5px 5px black; /* | | | | */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | | | */ box-shadow: inset 5em 1em gold; 값의 개수에 따라 속성값이 적용되는 방식이 다 다릅니다. 길이가 2개 있으면 각각 offsetX, offsetY 길이가 3개 있으면 각각.. 2023. 12. 31.
[JAVASCRIPT] 랜덤 숫자(난수) 생성하는 방법 - Math.random() 난수 생성하기 자바스크립트에서 특정 범위 내에서 난수(무작위의 숫자)를 생성하는 방법에 대해서 살펴보겠습니다. 자바스크립트의 내장 객체 Math의 random() 메소드를 사용합니다. Math.random(); 0 이상 1 미만의 실수를 반환합니다. 예시 const getRandom = () => Math.random(); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); console.log(getRandom()); // 0.1042365462750956 // 0.3437076315867258 // 0.18289290463351882 // 0.98123156291040.. 2023. 12. 28.
[HTML, CSS] 하트 만드는 방법 - before, after HTML 삽입 미리보기할 수 없는 소스 CSS로 하트 만들기 간단하지만 잘 안 되는 하트 만들기. 가상요소 ::before와 ::after 그리고 border-radius와 transform 속성을 활용합니다. ::before 요소의 앞에 가상의 자식 요소를 생성합니다. ::after 요소의 뒤에 가상의 자식 요소를 생성합니다. 가상 요소 before와 after는 각각 하트의 봉우리가 됩니다. 구현 HTML 삽입 미리보기할 수 없는 소스 1. heart 클래스에 ::befor와 ::after를 추가합니다. .heart { width: 300px; height: 300px; background: #ea2027; } .heart::before { content: ""; width: 300px; height.. 2023. 12. 28.
[HTML, CSS] transform, transition으로 요소 이동 및 변형시키는 방법 / 동적인 효과(애니메이션) HTML 삽입 미리보기할 수 없는 소스 transform / transition css 속성 transform과 transition을 사용하면 위에 움직이는 도형처럼 html 요소에 동적인 효과들을 줄 수 있습니다. transform 속성은 요소에 회전, 크기 조정, 이동, 기울임 등의 변형을 주고, transition 속성은 변형의 제어를 담당합니다(동작 시간, timing-function 등). 참고로 transition으로 제어할 수 없는 속성들은 keyframe과 css animation 속성을 활용해야 합니다. 이 글에서는 transition과 transform만 사용해서 간단한 효과를 추가하는 방법을 살펴보겠습니다. 1. transform div가 하나 있습니다. HTML 삽입 미리보기할 수 .. 2023. 12. 28.


        
답변을 생성하고 있어요.