📚 우리를 위한 기록

Stackticon: Readme 작성시 기술스택 추가 꿀팁(진짜꿀팁..진짜루..)

🚀 Stackticon으로 기술스택 간편하게 추가하기! 저는 Readme 작성하는게 너무너무 귀찮았어요. 무엇보다 기술스택을 작성하는 부분이 가장 귀찮더라구요. 그래서 가져왔습니다. 정말 쉽고 진짜 간단하게 기술스택을 img 형태로 만들어서 가져다주는 갓. 서비스를요 개발자라면 꼭한번써봐야할 서비스중하나! stackticon 소개합니다 🐶💕 말투가 네이버 블로그같죠? 마지막에 '**에서 협찬받았지만 직접 사용해보고 작성한 후기입니다' 적혀있을것같죠? 절대아닙니다 절대아니에요. 말투는 네이버 블로그를 쓰다 와서 그래요. 먼저 이해를 구하고 들어가겠습니다 💦💦 🖐 사용 방법 자신이 사용한 기술 스택을 검색한 후 create 버튼을 눌러요 만들고싶은 이미지 색상을 선택한 후 상황에 따라 원하는 저장방식을 선택..

[ MUI ] Autocomplete option 사용 시 same key ERROR

0. 오류 상황 발생 Stackticon 프로젝트를 진행하면서 발생한 문제 Autocomplete에 들어가는 options(stack의 아이콘 정보 객체를 담은 배열)의 title이 중복돼서 발생했다 option.title} onChange={onStackChange} filterSelectedOptions renderInput={(params) => ( )} /> 1. 추론 궁금증 Autocomplete에 들어가는 options의 key는 바꿀 수 없나? icon 객체 내의 다른 정보(path, hex, title ...) 중 왜 title을 key로 사용했을까? 생각 분명 Autocomplete의 key를 바꿀 방법이 있을 것이다 문제 상황에서 왜 title이 key였는지 알아보자 2. 시도 How ..

개발자 이력서 작성 꿀팁 if(kakao) + EO + 개발바닥

최근 채용 트렌드 지원서 작성의 간소화(파일 첨부와 같은) 나만의 매력 보여주기(복잡한 스펙을 나열하기 보다는) 잘 읽히는 이력서와 안 읽히는 이력서 이력서란 '나를 표현하는 하나의 프로덕트' 가독성 읽는 사람 입장에서 생각하기 매력적인 이력서의 조건 what(무엇을 했는지) - how(어떻게 했는지) - growth(꾸준히 성장가능할지) what(무엇을 했는지) 상대방의 입장에서 이해되도록 업무 주제 개발 환경 개발 기간 참여 인원 및 리소스 결과 how(어떻게 했는지) 차별화 포인트는 HOW growth(꾸준히 성장 가능할 지) 성장 가능성을 증명하는 것이 중요 '주기적인 스터디 활동' 스터디 주제 학습 주기 학습 결과물 실전 이력서 작성 꿀팁 파일 형식 PDF로 작성하자 분량 1~3장으로 간결하게 ..

VScode 설정 간단하게 동기화하기

🤷‍♀️ Settings Sync? VScode 설정 동기화를 한번이라도 생각해봤다면 Settings Sync라는 익스텐션에 대해서는 들어봤을 것이다. 나 또한 이전까지는 Settings Sync를 이용했고... 병합을 안하고 새로운 설정값으로 덮어버린 후 그걸 병합해버린다든가 하는 멍청한 실수들이 있었다. 물론 Settings Sync의 잘못은 아니지만 어쨌든 Settings Sync는 토큰을 받아와서(한 번밖에 못보는) Gist ID를 받아오고.. Settings Sync 익스텐션에 들어가서 Gist ID와 토큰, URL 등등을 입력해줘야 했다. + settings.json 파일에 업로드 이렇게 설정이 복잡하기는 하지만 처음 한번이 복잡할 뿐 그 후로는 간단하게 동기화 할 수 있다 하지만 우리가 원하..

[ decodeURI() ] 외부 경로 접근시 한글 깨짐 해결하기

개요 mailJS를 통해 프로젝트 경로를 보내주고 텍스트를 파라미터로 받을 때 한글 텍스트가 깨지는 현상이 나타났다. 한글에 입장해 프로젝트를 진행해보세요 http://localhost:3000/V/%ED%95%9C%EA%B8%80/1645693731116 %ED%95%9C%EA%B8%80 이 깨진 공간에 들어가야 할 말은 '한글' 하지만 막상 링크에 들어오면 http://localhost:3000/V/한글/1645693731116 '한글'은 깨지지 않고 잘 드러난다. ... 그러나 1. '한글' 이 그려져야 할 부분이 여전히 깨져있다. 2. 그러나 프로젝트 내용을 얻어올 때 쓰는 경로를 '한글'로 해놓았기 때문에 경로를 얻을 수가 없다,('한글'이 깨져서) 해결 과정 1. 한글 문자가 깨져있는 부분의 ..

[ 배포 ] Netlify로 배포하기

.. 끝났다고 끝이 아니다 아 이제 마무리했으니 배포해야지! 하고 배포를 시도하면 그 시간부터 최소 3시간은 배포와 열심히 씨름하게 된다. 내가 생각지도 못한 곳에서 오류가 터져나오고 firebase를 이용할 때는 도메인 승인을 깜빡한다거나 콘솔 창을 끄고 다시 크게 본 화면에서 css가 현란하게 뒤엉켜 있다거나 하는 문제. 하지만 오늘은 3시간까지는 아니었다 배포만 따지자면.. 20분? 🥱 몇 번 배포와 씨름하다 보니 대충 어떤 오류가 생기겠구나.. 아 이걸 깜빡했구나.. 이럴 때는 아마 이렇게 해야하겠지? 하는 내공이 생기는 것 같다. 어쨌든 시작! ✍ 순서 1. netlify에 접속한다 2. 로그인이나 가입을 하고 github를 연결한다 - 연결하지 않아도 되지만 연결하는게 여러가지로 더 편하다 3..

[ CSS ] 아이템에 shadow 주기

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com css shadow쓸 때 좋음 https://getcssscan.com/css-buttons-examples?ref=beautifulboxshadow-bottom CSS Scan - The fastest and easiest way t..

[ React + typescript ] 카카오톡으로 공유하기

웹사이트에 카카오톡으로 공유하기 추가하는 방법 1. 일단 Kakao Developers에 접속한다 우측 상단의 문서 -> 메시지 -> Javascript로 들어온다 공식 문서를 읽어보자. 애플리케이션 설정 확인 이 기능을 사용하려면 카카오디벨로퍼스(Kakao Developers, 이하 개발자 웹사이트) 애플리케이션(이하 앱) 설정에 Web 플랫폼 및 도메인 등 정보가 등록되어 있어야 합니다. 자세한 내용은 애플리케이션 등록을 참고합니다. => 공유하기 구현 전 앱 등록하라는 말 1 - 1. 애플리케이션 등록( 진작 등록되어있으면 넘어가기 ) 공식 문서를 보면 잘 설명되어 있다. 내 애플리케이션으로 들어가서 애플리케이션을 추가하는 방법은 애플리케이션 등록 공식문서에 아주 잘 나와있다. 1. 등록하기 2. ..