코딩할때 많이 활용하는 사이트 모음

원래는 VScode 단축키 다룰까 하다가 너무 많아서 걍 이걸로 틀었음... VScode 단축키 중 외우고 있는 건 Ctrl+K+T(테마 변경)말고 없습니다. 

---

Two color combination

https://2colors.colorion.co/

Two Color Combinations

두 가지 색을 전경색/배경색으로 조합했을 때 어떤 느낌인지를 보여주는 사이트인데, 단점이 하나 있다. 저기서 맘에 드는 조합이 있으면 복사는 할 수 있는데 내가 원하는 색 조합을 '만들 수는' 없다.

 

일단 저거 비슷하게 두 가지 색을 입력하면 전경색/배경색 조합일때 어떻게 보이는지는 나중에 JS로 만들어볼거임.

 

AI color palette generator

https://aicolors.co/

AI Color Palette Generator - Browse, Edit, Visualize and Generate Unique Palettes

HEX코드나 프롬프트 메시지(여름의 노을 뭐 이런거) 입력하면 컬러테이블 짜 주는건데 가끔 좀 개 그지같이 짜준다. ㅡㅡ 채찍피티도 그렇고 얘도 그렇고 일부러 성능 너프시키는건가 합리적으로 의심해도 되는 수준일 때가 가끔 있음. 

 

Adobe color

https://color.adobe.com/ko/create/color-wheel

https://color.adobe.com/ko/create/color-wheel

왜 들어가니까 로그인하라고 뜨냐 ㅡㅡ 모바일에서는 Adobe Capture를 통해서 사진이나 이미지로 파레트를 만들 수 있고 여기서도 만들 수 있다. 이미 만들어둔 파레트가 있다면 수정도 된다. 

 

Color Hunt

https://colorhunt.co/

Color Palettes for Designers and Artists - Color Hunt

4색 파레트가 있고 테마별로 분류도 잘 해놨다. 역시나 Two color combination처럼 입력해서 만들어주는 건 안되지만 솔직히 저 중 하나정도는 님들 취향인 컬러 파레트가 있으니까 패스.

 

Colorspace

https://mycolor.space/

ColorSpace - Color Palettes Generator and Color Gradient Tool

HEX코드를 입력하면 해당 색깔이랑 관련 있는 색깔들을 추천해준다. 셰이드라고 해서 그 약간 먹 농도로 색깔 조절하는것같은 단색 라인도 있고 그라디언트도 있다. 

 

Pythontutor

https://pythontutor.com/

Online Python Tutor - visualize, debug, get AI help for Python, Java, C, C++, and JavaScript

파이썬 한정으로 코드를 입력하고 실행하면 실행 단계를 보여주기떄문에 이 코드가 왜 이렇게 실행되는지를 알 수 있다. 예를 들어서 길이가 3인 배열을 만들고 거기서 첫 번째 원소를 인덱싱하는 코드를 입력하면 1) 배열을 만들고 2) 넣고 3) 첫번째 원소를 인덱싱하는 이 과정을 스텝 바이 스텝으로 볼 수 있다. 단점은 코드가 제대로 돌아가야 하기 때문에 오류 뜨면 안된다는거.

 

참고로 다른 언어(자바, C, C++)도 있긴 있다. 내가 파이썬만 쓸 뿐.

 

VScode.dev

https://vscode.dev/

Visual Studio Code for the Web

VScode의 웹버전. 근데 집컴이면 그냥 설치하십쇼. 

 

Code Beautify.org

https://codebeautify.org/

Code Beautify and Code Formatter For Developers - to Beautify, Validate, Minify, JSON, XML, JavaScript, CSS, HTML, Excel and mor

왜 가끔 그런거 있잖음. 코드 긁어왔는데 탭은 탭대로 개판 오분전이고 if문 들여쓰기 된 거 긁어와서 붙였더니 탭이 들어가있어서 이걸 어느세월에 일일이 다 지우나 싶은 그런 거. 그럴 때 맞는 언어 고르고 코드 붙여넣기 하면 탭이고 자시고 싹 정리해준다.

 

Codepen

https://codepen.io/

CodePen

토이프로젝트는 보통 깃헙에 올리는데, 토이프로젝트 말고 ㄹㅇ 나노 반도체급으로 자잘한 무언가를 만들 때 보통 쓴다. 제일 많이 쓰는건 요소 설명글 올릴때... 근데 얘는 VScode랑 달리 자동완성따원 없어서 코딩하기가 빡시다는 단점이 있다. 그리고 자잘한 버그라면 몰라도 콘솔 확인해야 하는 버그면 모바일에서 수정 못 하니까 PC에서 하십시오. 내 경험담임.

 

Boostcourse

https://www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

코딩 공부는 하고 싶은데 돈이 없을 때... 근데 혼자 공부하기는 막막하고 양질의 강의가 고플 때... 오십시오. 여기 다 있습니다. CS50은 일단 꼭 들으십시오. 

 

Lorem Ipsum Generator

https://loremipsum.io/generator/?n=4&t=p

Lorem Ipsum Generator

http://guny.kr/stuff/klorem/

한글 Lorem Ipsum (간세네)

위는 영문(영어인가?)이고 아래는 한글인데 이건 '여기에 콘텐츠를 채우게 되면 이런 느낌이다'를 보여주는 약간 기본옵션같은 느낌이다. 그니까 채울 거 없는데 어떤 느낌인지 보고싶으면 이거 쓰면 된다. 

 

Pixlr

https://pixlr.com/kr/editor/#editor

사진 에디터 : Pixlr.com - 무료 이미지 편집 온라인 프로그램

아 이거 i 아니고 l이었음? 아무튼... 윈도우는 포토샵이 깔려있어서(어도비가 매달 6만원씩 뜯어가는 중) 이미지는 거기서 작업하거나 진짜 간단한건 그림판에서 만지면 된다. 근데 리눅스는요? 포토샵이 일단 돌아가는가 여부는 둘째치고 노트북 2호에서 그런거 돌렸다간 컴퓨터 뻗을수도 있다. 보통 이 사이트는 우분투에서 웹으로 간단하게 이미지 편집하는 데 쓴다.

 

Fontawesome

https://fontawesome.com/

Font Awesome

아이콘인데 이제 텍스트처럼 CSS 쓱 만져주면 컨트롤이 되는 핵편하고 귀여운 아이콘들. svg로 다운로드도 된다. 가끔 필요한 아이콘이 프리미엄 라인에만 있어서 좀 그렇긴 하지만, 그래도 무료만 갖고도 이쁜 아이콘 뽕뽑기 삽가능함. 

 

Baekjoon Online Judge

https://www.acmicpc.net/

그냥 풀다보면 부족함을 깨닫고 아 나는 빡대가리구나… 하게 된다… 아니면 대뇌에 블루스크린 뜨거나… 가장 멘붕 올 때는 VScode에서 돌렸을 때 문제 없었는데 가니까 에러 뜨는 경우. 얘는 에러가 떠도 에러 뜬 것만 알려주지 몇번째줄에서 뜬 건지 안 알려준다.

 

코딩도장

https://dojang.io/

코딩 도장

파이썬이랑 C언어 한정이긴 한데 여기도 강의 사이트이다. 책도 판다. ㄹㅇ 기초부터 배우고 싶다면 이 쪽을 추천한다.

 

w3schools

https://www.w3schools.com/

W3Schools Online Web Tutorials

뭐가 많이 있는데 보통은 HTML, CSS 하다가 막힐 때(혹은 검색하다 저 사이트 나오면) 뭐 찾으러 간다. 자바스크립트는 막히면 저길 갈 게 아니라 에러코드 찾아서 구글링해야됨... 구글링했는데 그냥 목록에 뜨기만 해도 신뢰가 절로 가는 사이트다. 영문인 게 단점.