오랜만에 깃허브 리드미 꾸미기를 하다가 기술스택 부분을 작성해보고져서 서치를 하던 중 괜찮은 것을 발견해서 공유합니다! 결과물은 위와 같아요. 8가지 정도 추가해봤는데, 예쁜 것 같아요. 위 이미지처럼 기술 스택을 뱃지형태로 만드는 방법이 제일 많이 쓰는 방법인 것 같은데요. 저는 이것 말고, 좀 더 둥글둥글하고 로고가 더 돋보이는 디자인을 원했어요! 마침 편리하게 추가할 수 있는 기능을 제공하는, 레포지터리를 찾을 수 있었는데요. 바로 skill-icons 입니다. 사용법 사용법은 간단합니다. [](https://skillicons.dev) 위 코드를 Github README 에 복붙하기만 하면..
README를 작성하다보면 Architecture 소개 부분에 아래와 같이 폴더 구조도를 넣고싶은 경우가 있다. 구글링 해보니까 쉽게 할 수 있는 VSCode 확장 프로그램이 있길래 소개한다. VSCode Extension 에서 file-tree-generator 를 설치한다 원하는 폴더에서 오른쪽 클릭을 하고 [Generate to Tree] 를 클릭한다 그럼 이렇게 프로젝트 구조도가 보기좋게 만들어져서 나온다. 아이콘은 [icon on] [icon off] 버튼을 통해서 만들수도, 지울수도 있다. 내용을 복사해서 README 작성 란에 추가할 때 위 아래에 백틱을 3개씩 추가하면 완성! ``` (복사한 내용 붙여넣기) ``` 자주 쓸 것 같다!
Vite 으로 생성한 React 프로젝트를 개발 서버에서 실행시킬 때 보통 터미널에서 npm run dev 로 실행하는데 모바일 기기로도 확인할 수 있으면 좋을 것 같아서 방법을 찾아봤다. 맥북과 아이폰을 사용한다는 전제하에 설명해보겠다. 방법 1. 먼저 아이폰과 맥북은 동일한 와이파이에 접속해야한다. 2. 맥북 터미널에서 다음과 같은 명령어를 입력한다 ipconfig getifaddr en0 그러면 IP 주소가 뜨는데, https:// 로 모바일에서 사파리로 접속하면 된다. 하지만 나는 제대로 연결되지 않아서 추가적인 과정을 하나 더 해줘야했다. ref:https://dev.to/bhendi/how-to-open-your-vite-dev-server-on-your-mobile-k1k 3. React 프..
한 프로젝트를 기획하면서, 시스템 설계에 대한 플로우차트(flow chart)나 시스템 구조도를 그릴 일이 많을 것이다. 이 때 ai 를 사용해서 그리는 방법을 소개해보려고한다. 두 가지만 있으면 되는데, chatGPT와 mermaid live 사이트이다. Flow Chart 그리기 먼저, chatGPT에 다음과 같이 프롬프트를 작성한다. 나는 예시로 한 프로젝트의 플로우차트를 그려보려한다. 이 ~~~ 프로젝트에서 학생이 강의실을 대여하고 대여를 취소하며 대여 여부를 확인할 수 있는 시스템을 mermaid.live에서 사용가능한 flowchart 코드로 작성해줘 나는 이 코드를 복사해서 mermaid live 라는 사이트에 들어가 왼쪽 코드를 작성할 수 있는 공간에 붙여넣기를 했다. https://mer..
저는 이 티스토리 블로그를 구글 서치 콘솔에 등록해놓았는데요. 각종 관련된 문제들을 해결하면서 어떻게 해결했는지 공유하고자 포스팅을 작성해보려고해요! 적절한 표준 태그가 포함된 대체 페이지 문제 페이지 색인 생성 부분에서 '적절한 표준 태그가 포함된 대체 페이지 - 이러한 페이지는 색인이 생성되지 않거나 Google에 게시되지 않습니다' 라는 문구가 뜨더라구요. 왜 중복된 페이지가 만들어지는건가- 하고 영향을 받은 페이지를 확인해봤어요. 봤더니 다 /m/ 이 붙은 주소더라구요. 티스보리 블로그에 글을 하나 작성하면 '웹' 과 '모바일' 버전이 만들어지게 됩니다. 따라서 링크 주소도 2개가 만들어져요. 구글 서치콘솔은 별도의 설정이 없으면 웹 링크와 모바일 링크 둘중에 하나를 표준으로 설정하고, 하나는 중..
https://3dicons.co/ 3dicons - Open source 3D icon library 1440+ beautifully crafted open-source 3D icons. You can use completely free and without attribution for personal or commercial project 3dicons.co
디자인 관련 포스팅들을 둘러보던 중 재미난 사이트를 발견했다. 링크는 아래와 같다. https://blush.design/collections/0bopA8Y5vn29mdFBU2Br/wavy-buddies-illustrations/character-avatar/nldaiXHq7BWq8PE5?c=Hair_0%7Efecb51-0.0.2.0%7E040226_Skin_0%7Edcad7f-0.0.2.0%7Edcad7f Wavy Buddies - Illustration by Susana Salas Check out this illustration on Blush. blush.design 배경색, 머리색, 피부색, 표정, 머리, 포즈 등을 선택해서 아바타 일러스트를 만들 수 있다. 보니까 아바타 말고도 sitting,..
개발을 하다보면 매번 주소를 바꿔야해서 귀찮은 경우가 많다. 그래서 환경변수를 만들어보기로 했다. 사용법 오른쪽 위에 눈모양 버튼을 클릭한다. variable 에는 환경변수의 이름, Initial value 와 Current value 에는 환경변수의 값을 써주면된다. 나는 dev 라는 이름의 변수를 만들어 local 에서 개발하기 편하도록 만들고 bookmark 라는 변수에는 실제 서비스 url 을 넣어줬다. 실제로 사용할 때에는 {{변수명}} 처럼 작성하여 사용할 수 있다. ref: https://velog.io/@kkl4846/postman-%ED%8F%AC%EC%8A%A4%ED%8A%B8%EB%A7%A8-%EA%BF%80%ED%8C%81team-workspace-%ED%99%98%EA%B2%BD%..
README에 이미지/gif(움짤)을 올려보자 만약 영상 -> gif 변환을 원하는 사람은 아래 사이트에서 gif 변환을 하고 오면된다. https://cloudconvert.com/mov-to-gif MOV to GIF | CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert MOV Converter MOV MOV is a video format that is commonly associated with QuickTime. This video extension is developed by Apple. It uses an algorithm to compress video and audio. Although cl..
이번에 언어학과 심리실험이라는 교양을 듣게 되었는데요. 수업에서 쓰는 프로그램인 OpenSesame 를 설치해야 실습을 진행할 수 있더라구요! MacOS에서 OpenSesame 앱을 설치하고, 여는 법에 대해서 포스팅해보려합니다. OpenSesame 란? "OpenSesame"는 실험실 연구자를 위한 무료 오픈 소스 실험 설계 및 데이터 수집 소프트웨어입니다. 이 소프트웨어는 행동 실험, 뇌 영상 실험 및 통제 실험 등 다양한 실험 유형을 지원하며, 실험 설계, 시각적 자극 제시, 반응 및 데이터 수집을위한 사용자 정의 스크립트를 만들 수 있습니다. OpenSesame는 Python 기반으로 작성되었으며, 그래픽 사용자 인터페이스를 통해 쉽게 사용할 수 있습니다. 설치 저는 homebrew 를 이용해서 ..
안녕하세요! 오늘은 티스토리 스킨을 새로 바꿔보고, 바꾸면서 헤맸던 부분을 공유해드리려고해요. hELLO 스킨 일단 저는 hELLO 라고 하는 스킨을 적용했습니다. 개발자들에게 아주 인기 있는 스킨이라고 하더라구요! 정상우 개발자 님이 제작하셨으며, 아래 포스팅에서 다운로드 받을 수 있습니다. https://pronist.tistory.com/5?category=844785 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 본래 기능의 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 기 pronist.dev 스킨 적용하기 관리자 페이지에 들어가서 스킨 변경 > 스킨 등록 을 눌..
맥북으로 바꾸면서 설정할 것들이 이것저것 많아졌는데, 그 중에서도 폴더 현재위치에서 바로 터미널을 여는 단축키가 있으면 좋을 것 같아 설정해보았는데요. 방법을 공유합니다! 설정 방법 먼저 Finder를 열고 상단에 Finder > 서비스 설정을 들어가줍니다. 앱 단축키 메뉴에 들어가서 새로운 단축키를 추가해주기위해 + 를 눌러줍니다. (저는 이미 추가해둬서 이미 만들어져있지만 무시해주세요!) 응용 프로그램은 Finder 로, 메뉴 제목을 작성하고 (저는 '폴더에서 새로운 터미널 열기' 라고 했습니다) 키보드 단축키도 원하는대로 설정해줍니다. (저는 command + O 로 했어요) 작성해준다음 완료 버튼을 누릅니다. 이렇게 추가되어져있으면 일단 완료! 다음 단계로 넘어갑시다. 이번에는 '앱 단축키' 메뉴..
A계정에 있던 내용을 복사해서 B계정의 페이지에 붙여넣기를 하려고 보니 이런 오류가 떴다. 해결법! 웹에서 공유를 켜주고 '템플릿 복제 허용'을 켜준다. 그리고 아까처럼 다시 A페이지에서 복사, B 계정 페이지에 가서 붙여넣기를 해주면 오류 없이 잘 되는 것을 확인할 수 있다! 저처럼 헤매는 분이 없기를 바라며...😏
https://medium.com/code-states/good-developer-2-%EC%BB%A4%EB%AE%A4%EB%8B%88%EC%BC%80%EC%9D%B4%EC%85%98-%EC%9E%98%ED%95%98%EB%8A%94-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EB%90%98%EB%8A%94-%EB%B0%A9%EB%B2%95-76e78da0ffc2 Good Developer 2 | 커뮤니케이션 잘하는 개발자가 되는 방법 프로그래머와 개발자는 다르다. medium.com
지나가다가 요즘 챗 GPT 라는 것에 대해서 많이 보였다. 제대로 글을 읽게 된 것은 오늘이 처음이었는데 혼자 사용해보고 신기하고 재밌어서 후기를 써볼겸 포스팅한다! 챗 GPT 가 뭔데? https://openai.com/blog/chatgpt/ ChatGPT: Optimizing Language Models for Dialogue We’ve trained a model called ChatGPT which interacts in a conversational way. The dialogue format makes it possible for ChatGPT to answer followup questions, admit its mistakes, challenge incorrect premises, and..
가끔 다른 사람들 깃허브에 들어가보면 프로필에 저렇게 자기가 커밋을 보통 언제하는지 통계표를 볼 수 있게 되어있다. 이쁘길래 나도 도전! 시험기간에는 뭐든 재밌어 일단 아래 링크에 들어가서 fork 를 한다. https://github.com/techinpark/productive-box GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out in gist Are you an early 🐤 or a night 🦉? Let's check out in gist - GitHub - techinpark/productive-box: Are you an early 🐤 or a night 🦉? Let's check out..
구글링하다가 알게된 좋은 익스텐션이 있어서 공유한다. 사실 많은 사람들이 이미 알고 있을 것 같긴하지만... 백준 문제를 풀고 정리하면서 깃허브에 올리는 사람들이 많은 것 같다! 당장 알고리즘 고수 지인들을 보면 백준 문제에 대한 오답노트와 유형/개념들을 깃허브에 정리하는 사람도 있고... 무엇보다 깃허브에 올리면 커밋기록🌱이 남으니까 그걸 보고 뿌듯함을 느낄 수도 있어서 좋은 것같다. 나도 슬슬 백준을 시작해야하지 않을까... 하는 욕심이 들던 와중에 신기하고 좋은 익스텐션을 발견했다. 백준 문제를 풀고 제출하면 자동으로 깃허브에 커밋해주는 크롬 확장 프로그램!! 이름은 BaekjoonHub 이다. 한번 소개해볼까 한다. 이 익스텐션은 아래 링크에서 설치가 가능하다 https://chrome.googl..
1. 보통 많이 쓰는 When2meet 모바일에서는 조금 불편하지만, pc 에서 쓸 때 제일 많이 쓰는 사이트 https://www.when2meet.com/ When2meet www.when2meet.com 2. 그리고 모바일에서 좀 더 쓰기 편한 lettucemeet 다른 분 소개로 봤는데 뭔가 편해보인다. 아직 써보지 않았지만 다음에는 이걸로 도전해볼예정. https://lettucemeet.com/ LettuceMeet - Easy Group Scheduling The easiest way to schedule group meetings. lettucemeet.com 이 후에 좋은 거 알게 되면 업데이트 하겠음!
https://brunch.co.kr/@sijin90/69 구글 설문 데이터 노션 데이터베이스에 입력하기 feat. Zapier | 노션의 API가 나온 뒤로 해외에는 다양한 연동 사례가 이어지고 있습니다. API를 통해 노션의 데이터베이스에 다양한 데이터를 입력할 수 있는데 이번 시간에는 가장 기본적인 연동 사 brunch.co.kr
https://dribbble.com/ Dribbble - Discover the World’s Top Designers & Creative Professionals Jewelry store, landing page dribbble.com
https://www.webjangi.com/ 웹쟁이 | 웹 작품을 공유하는 소셜 네트워크 플랫폼 웹 전문가들이 모여 작품을 공유하는 소셜 네트워크 플랫폼 웹쟁이 입니다. www.webjangi.com
https://namelix.com/ Business Name Generator - free AI-powered naming tool - Namelix namelix.com 몇개 해봤는데 로고도 이뻐서 참고할만하고... 괜찮은 것 같다.
https://velog.io/@dkwjd131/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-tar-%ED%8C%8C%EC%9D%BC-%EC%95%95%EC%B6%95%ED%92%80%EA%B8%B0 윈도우에서 tar 파일 압축풀기 . velog.io
https://yozm.wishket.com/magazine/detail/110/ 저작권 걱정 없이 마음껏 쓸 수 있는 무료 아이콘 사이트 12선 | 요즘IT 아이콘은 디자인에서 필수적인 요소이지만, 필요할 때마다 일일이 만들어 쓰는 것은 시간이 많이 걸립니다. 그렇다고 무료 아이콘을 찾다 보면 시간이 오래 걸리고, 저작권 문제로 망설여지는 yozm.wishket.com
