# snippet
우리 Snippet 정상 영업 합니다
많은 관심 부탁드립니다 이제 찐찐막 퍼블릭 오픈 여러분도 이제 가입해서 자유롭게 사용하실 수 있습니다! https://snippet.cloudmt.co.kr/ 일 하고 남는 시간에 혼자서 짬짬히 만든거라 디자인이라던가 만듦새가 막 좋다는 느낌은 안들 수 있습니다. 회사 내에 구축되어 있는 인증 시스템을 붙였는데, 이 인증 시스템이 대외용으로 만들어지지 않았다보니 처음엔 회사 외부 계정에 권한이 안들어가서 가입 후 아무것도 못하는 문제가 생기기도 하고 그 외 자잘한 문제들이 발생하는걸 해결해가며 마참내 오픈하게 되었습니다. 사실 그거 말고도 방해꾼이 많았음 이게 뭐하는건가? > 블로그와 [gist]의 중간 포지션의 플랫폼입니다.
퍼블리싱 할 때 유용한 스니펫 모음
vscode를 쓰면서 유용하게 썻던 스니펫 기록 📝 > 스니펫 셋팅에 대한 설명은 이전 글을 참고해주시면 됩니다 https://velog.io/@seungmimi/VScode-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0 1. HTML_선언 2. HTML_임시 이미지 삽입 *Placehold.it: 임시이미지를 url형식으로 삽입 할 수 있는 서비스 > *Placehold.it: 임시이미지를 url형식으로 표시 할 수 있는 서비스 3. CSS_말줄임 처리 4. CSS_말줄임 처리(2줄이상) 5. CSS_아이콘 마크업을 할 때 아이콘 같은 경우는 태그에 배경으로 아이콘 이미지를 지정하는 식으로 작업을 하는데, 위 처럼
VScode 초기 셋팅하기
1. 확장도구 ⚙️* LiveServer* 작성한 코드를 웹이서 바로 볼 수 있도록 해주는 확장도구 https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer > ⚙️ indent-rainbow tab으로 영역을 구분 하였을 때 영역을 색깔 별로 표시시각적으로 영역을 구분할 수 있도록 하는 확장 도구 [https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbo
CSS 페이드인
위에서 아래로 왼쪽에서 오른쪽으로 오른쪽에서 왼쪽으로 출처 (즐거웅코드) CSS 위에서 아래로 내려오며 페이드인(fade in) 되는 애니메이션
[VSC] {Snippets} 사용하기
visual studio code tips snippet > 재사용할 수 있는 소스 코드 조각, 코드 일부분만을 발췌한 것을 가리키는 말 이미 VSC(visual studio code)에서 제공하는 snippets가 있다. 확인하러 가기 > 대표적으로 html의 경우 !를 치고 tab 키를 누르면 바로 html의 형식이 나타납니다. 혹은 tab이 안된다면 ctrl+space를 눌러 내용을 확인한 후 enter 키를 누르면 됩니다. tab 키를 눌러 snippet이 나올 수 있게 활성화하고 싶다면, "editor.tabCompletion": "on"을 설정을 해주면 됩니다. 
[VSCode] 커스텀 자동완성 만들기 (Snippet)
Vscode로 개발 중 자주 사용하는 함수형 컴포넌트나 변수들이 있다면 Snippet 설정을 통해 생산성을 높일 수 있습니다. 설정 방법 vscode 왼쪽 하단 톱니바퀴 버튼을 누른 후 User Snippets를 클릭해줍니다. 클릭했다면 중앙 상단에 어떤 언어에 대한 Snippet 을 만들 것인지 나옵니다. 저같은 경우엔 백준 문제를 node.js 로 풀 때 모듈 을 통해 파일 입출력을 받아야 하기 때문에 그에 대한 매 문제 반복되는 코드를 자동완성으로 저장하려합니다. 따라서 으로 들어가 줍니다. 처음 들어
Vscode Vue.js snippet 만들기
정말 오랜만에 vue.js 프로젝트를 시작하려는데, init snippet이 맘에 들지 않아 나만의 snippet을 만들고 싶어서 그 과정을 기록합니다 Snippet이란? Snippet 개발 배경: vue-snippet3 vscode 확장 중에서 vue 3 snippets 확장을 기존에 쓰고 있었습니다 이 확장은 여러 snippet을 제공해주는데 그 중에서도 vueInit을 입력하면 다음과 같은 내용을 작성해줍니다 이 snippet으로 컴포넌트를 시작하면 template lang, style lang 부분에 대한 수정이 필요합니다 저는 typescript를 사용할 것이고, scss를 사용하지 않을 것이고, 각 tag 사이에 개행이 있기를 원합니다 Snippet 만들기 shift + command + p 를 눌러 vscode 명령어 창을 띄우고 snippet을 검색하고 configure user snippets를 선택합니다 
VS Code 커스텀 snippet 만들기✨
💡 배경 우리 조직에서 자주 사용하는 코드들이 있다. consolelog("변수명",변수)라던지, (console.log 아님) const dispatch = useAppDispatch() 라던지, const {변수명} = useAppSelector(state => state.슬라이스명)이라던지... 위와 같은 코드들을 정말 많이 사용하고 있으나, 항상 이것들을 직접 타이핑했었다. 짧지 않은 코드들을 반복해서 입력하는 것이 귀찮기도 했거니와, 반복되는 코드들을 간단하게 입력할 수 있는 방법이 있다면 코드 타이핑에 소요되는 시간이 많이 단축될 것이라고 생각했다. 짧은 시간내에 많은 결과물을 만들어야하는 우리 조직에서, 시간 단축은 아주 금 같은 것...! 따라서 이를 해결하기 위해, 짧은 예약어로 특정 패턴의 코드를 간단히 생산할 수 있는 코드 snippet을 해결책으로 떠올렸다. 그럼 우리 조직의 생산성을 위해, 우리 조직에 맞는 커스
[React] 리액트 코드 스니펫 자동완성 만들기
들어가며 아마 리액트 개발자들이라면 대개 많은 사람들이 이 익스텐션을 사용하고 있을 것입니다. (아님 망고 ~ 🥭) 새 파일에서 rsc (혹은 rcc 도 있지만 요즘 누가 클래스형을 사용할까..! ) 을 입력하면 요로꼬롬 이렇게 리액트 컴포넌트를 만들때 필요한 기본 골격이 자동완성됩니다. 하지만 React 17버전 부터 import React from 'react' 를 더이상 입력하지 않아도 되도록 바뀌어서 불필요한 라인이라 매번 지워줘야했고, 반면 useState와 useEffect는 항상 기본적
[Snippet] 자주쓰는 Python 코드
GPU 선택 디렉터리가 없으면 생성 2차원 리스트를 1차원으로 변경 현재 날짜 파일명에 추가 파일 경로 연결 Json 내보내기 Json 불러오기 txt 파일 읽기 txt 파일 쓰기(리스트 요소별로 한줄씩) .env 파라미터 불러오기 Sington Pattern
[Snippet] 나만의 전처리 도구(함수) 모음
Clean Version1 Version2 Tokenize 핵심 형태소만 추출 Pandas 중복제거 datetime 범주화
멋사 TIL (HTML)
HTML (HyperText Markup Language) HyperText(하이퍼텍스트) : 정해진 순서 없이, 참조를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트 Markup Language(마크업 언어) : 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어 HTML은 마크업 언어로 웹 콘텐츠의 의미와 구조를 정의한다. 확장자 .html HTML 작성 My test page</title
작은 일은 chatgpt가 copilot보다 잘한다
python과 typescript로 풀스택 개발을 하다보니 시간이 너무 부족하다 그래서 ChatGPT를 적극 활용해보고 있다. 간단한 것 부터 복잡한 것 까지 여러가지 일을 함께 해보고 있는데 간단한 것들은 잘 처리하는 것을 경험하고 있다. 그래서 오늘은 몇 가지 예를 남겨본다. 1. typescript에 흔히 구현되지만 나는 게을러서 빠르게 구현하지 못하는 매우 기본적인 로직 구현을 시켜봤다. **2. 도커 명령어가 하도 많아 항상 헷갈리는데 이럴 때 한 번 물어봤더니 잘 알려준다. ** **3. pa
VSCode Snippet 추가하기
JS, TS로 개발하면서 Console.log 등 정말 자주 사용하는 메소드나 리액트에서 Component 개발시 직접 타이핑하던 습관들을 고치며 에디터를 쓰는 덕을 좀 보고자 스니펫을 추가 해 보고자 한다. 여러 메서드나 문법들을 자주 쓰고 있지만, 대표적으로 바로 생각나는건 2가지 이다. Console.log Arrow Function Component 우선 이 두 가지만 스니펫을 추가해보고 스니펫 사용에 익숙해지면 여러 가지를 추가해 볼 예정이다. Mac 기준 Cmd+P 를 누르면 VSCode의 검색창이 뜨게 된다. VSCode Search Nav 여기서 > 를 입력해주고 Snippet 이라고 검색하여 추가할 수 있다. 
VScode 더 잘 써보기 (4) snippet 만들기
6개월 간 본격적으로 개발을 하면서 처음에는 일부러 직접 치면서 익숙해지려고 snippet을 쓰지 않았다. 이제는 snippet을 써도 괜찮을 것 같아서 연말에 쉬는 동안 적절한 snippet을 찾아보았다. snippet 관련 extension이 여러 개 있지만 설치 시 쓰지 않는 snippet도 같이 설치되고 아무래도 직접 만들어서 쓰는 게 쓸 때 더 편하지 않을까 싶어서 직접 만들기로 했다. https://code.visualstudio.com/docs/editor/userdefinedsnippets를 보면 VScode snippet 만드는 방법에 대해 자세히 나와있다. 생각보다 간단해서 놀랐다. 앞으로는 자주 사용할 것 같은 코드 조각이나 템플릿은 그때그때 snippet으로 만들어서 사용하게 될 것 같다. 맨 처음 만든 snippet은 snippet을 만들기 위한 snippet이다. body 부분은 배열로 되어있는데 배열 원소 하나 당 한 줄로 snippet 사
VScode Snippet 만들기 🔨
1. 👉 snippet 파일 생성 1) 파일 메뉴 -> Preferences -> Configure User Snippets 2) 전역으로 사용하기 위한 New Global Snippets file 선택 또는 해당 프로젝트 영역에서만 사용하려면 아랫 줄의 New Snippets file for '[Project folder name]' 선택 > ❗ 번외) 단축키로 snippet 설정 검색 window 단축키 : ctrl + shift
멋쟁이 사자처럼 AI 스쿨 - Snippet
코테 전 준비사항 플랫폼에 익숙 사용 가능 라이브러리 미리 확인 등 대부분 numpy나 pandas 같은 라이브러리 사용 금지이지만 간혹가다 제한이 없는 곳도 있습니다. numpy는 python보다 대부분의 경우 속도가 빠릅니다. 크기에 따라 다르지만 100000개 이상의 배열의 연산의 경우 50배 이상의 성능을 보입니다. 언어 선택(속도 : C++, 풀이 : Python) 코드 스니펫(트리, 검색, 최단경로(예를 들어 다익스트라), 직접 제작한 함수 등), Cheatsheet, A4 용지 준비 코드 스니펫을 만들어둔 레파지토리 fork - 제주코딩베이스캠프 시험 전 스니펫을 만들지 말고 하루 한 문제씩 1. 유용한 라이브러리 정리! (collections, itertools(순열, 조합), functools, itertoo