분류는 아직 못하고 일단 다 때려넣고 있습니다.
Frontend Developer Roadmap
Learn to become a modern frontend developer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern frontend development.
roadmap.sh
그외 모든 로드맵 https://roadmap.sh/
Developer Roadmaps - roadmap.sh
Community driven roadmaps, articles and guides for developers to grow in their career.
roadmap.sh
프로그래머스 코딩테스트 https://school.programmers.co.kr/
프로그래머스
코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.
programmers.co.kr
코드펜- 환상적인 html css js 레퍼런스 모음. https://codepen.io/trending
CodePen Free Sign Up
codepen.io
정올 알고리즘 테스트 http://www.jungol.co.kr/
undefined - Jungol
www.jungol.co.kr
프론트엔드 마스터스 무료강의 https://frontendmasters.com/learn/beginner/
Beginner Learning Path – Your Path to Becoming a Career-Ready Web Developer!
You'll start with introduction to web development and deep dive into JavaScript, modern layout techniques in order to have the skills to be a professional web developer today.
frontendmasters.com
프론트엔트마스터스 입문 강의중 추천 https://btholt.github.io/complete-intro-to-web-dev-v3
Complete Intro to Web Dev v3
btholt.github.io
인프런 (코드팩토리 플러터, 다트 무료강의 좋음) https://www.inflearn.com/
학습 페이지
www.inflearn.com
코드팩토리 (유튜브. 플러터, 다트) https://www.youtube.com/@codefactory_official
코드팩토리
프로그래밍을 쉽게
www.youtube.com
네이버 부스트코스 (무료 lecture) https://www.boostcourse.org/
다 함께 배우고 성장하는 부스트코스
부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.
www.boostcourse.org
CS50 2023 하버드 무료 강의 https://cs50.harvard.edu/x/2023/
CS50x 2023
Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.
cs50.harvard.edu
자바의 정석 남궁성(유튜브 무료 강의) 자바 8 기준임에 유의
자바의 정석 요약정리 글 Java 객체지향 개념 요약정리 글
[java] 자바의 정석 - 객체지향개념 요약 by 리카츄
수업중에 학생들에게 객체지향개념(6장, 7장)을 A4용지에 요약하게 시키는데. 잘 정리한 학생이 있어서 자바의 정석으로 공부하시는 분들 참고하시라고 올립니다. 이 요약본을 참고로 해서 본인
codechobo.tistory.com
무료강의 (자바, jsp, spring 등)
뉴렉처
"유료" 온라인 강의 사이트 뉴렉처에서 제공하는 프로그래밍 강의 채널입니다. 교육서비스 : (10월 새롭게 오픈될 예정입니다.) https://www.newlecture.com 교재: https://javaweb.tistory.com https://answeris.tistory.
www.youtube.com
자바기초개념 - 위키독스 점프투자바 https://wikidocs.net/book/31
점프 투 자바
**초보 프로그래머를 위한 자바 입문서** 이 책은 문법위주의 지식보다는 이해중심의 지식을 전달하는 것을 주 목적으로 한다. 예를 들어 자바에서 잘 파악하기 힘든 개념 중 …
wikidocs.net
신입개발자 면접자료 신입 개발자에게 필요한 전공 지식
GitHub - HyeminNoh/Tech-Stack: 📚 신입 개발자로서 성장을 위한 전공 지식을 정리합니다 😊
📚 신입 개발자로서 성장을 위한 전공 지식을 정리합니다 😊. Contribute to HyeminNoh/Tech-Stack development by creating an account on GitHub.
github.com
드림코딩 무료 자바스크립트 강의 추천 https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w
드림코딩
모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다. ❝Don't forget to code your dream 여러분들의 멋진 꿈을 코딩하세요 ⭐️ ...................................................
www.youtube.com
드림코딩 유.무료 강의(강의 퀄리티 좋음) https://academy.dream-coding.com/
드림코딩 아카데미
대체될 수 없는 개발자로 성장하는 곳, 드림코딩
academy.dream-coding.com
유튜브 개발자의 품격 - 한시간만에 끝내는 언어 시리즈 https://www.youtube.com/@thegreat-programmers
개발자의품격
"코드로 세상을 바꿀 수 있다고 믿는 개발자들이여~ 다 내게로 와라! 내가 너를 정말 좋은 개발자로 만들어 줄게!" 소프트웨어 기술을 통해 세상에 선한 영향력을 주고 싶은 20년 이상의 실무 경
www.youtube.com
유튜브 코딩앙마 - JS, 리엑트 기초, 중급 강좌 시리즈 - 목소리가 약간 졸림 https://www.youtube.com/@codingangma
코딩앙마
안녕하세요. 코딩앙마 입니다 :)
www.youtube.com
생활코딩 - https://www.youtube.com/@coohde
생활코딩
일반인에게 프로그래밍을 알려주는 온라인/오프라인 활동 입니다. 채널 공개키 : MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbU/jgeYLWbmUB5pk/wlqMs+2qsOOPgN2ydxOsrWe8JJUXzj5ovsUmjfBSwLjajT6SyO00ulne3zja2PzEZC2wnJCgvZ6lr/ZLvA9yUqmrKRNa
www.youtube.com
오픈튜토리얼 생활코딩. 내용동일 https://opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
부부개발단 - 자바 강좌 추천. https://www.youtube.com/@funnyjava
부부개발단 - 즐겁게 프로그래밍 배우기
Carami쌤과 Toto쌤 부부 개발단! 자바, Spring, JavaScript IT 프로그래밍과 관련된 모든 것을 다루고자 합니다. 인프런에 즐거운 자바( 무료 교육 과정 )이 등록되었습니다. 여기 재생목록으로 봐도 좋고,
www.youtube.com
MDN- 번역이 좀 약한게 흠. https://developer.mozilla.org/ko/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
udemy - 유명하다는데 들어보진 않음 https://www.udemy.com/
git nation - 최근 떠오르는 개발자들 올라오는 사이트. 무료 강의도 많음 https://portal.gitnation.org/
Open source technology conferences: JavaScript, React, Vue, NodeJS - GitNation
Follow all the important community JavaScript events, talk recordings and hands-on workshops brought to you by GitNation team.
portal.gitnation.org
deepL 번역기 - 최근 한국어 지원하기 시작한 새로운 번역기 https://www.deepl.com/translator
DeepL 번역: 세계에서 가장 정확한 번역기
텍스트 및 전체 문서 파일을 즉시 번역하세요. 개인과 팀을 위한 정확한 번역. 매일 수백만 명이 DeepL로 번역합니다.
www.DeepL.com
웹표준 준수여부 체크 사이트 https://validator.w3.org/
The W3C Markup Validation Service
Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.
validator.w3.org
Can I Use - 내가 쓰는 기술이 사람들 브라우저에 지원이 되는지 체크 https://caniuse.com/
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
chat gpt (프롬프트지니와 함께 사용 추천) https://chat.openai.com/
Color- Material Design3 by google - 구글의 색상 관련 레퍼런스 https://m3.material.io/styles/color/overview#!/?view.left=0&view.right=0
Color – Material Design 3
Material uses color to create meaningful experiences while also expressing hierarchy, state, and brand identity.
m3.material.io
Material Design 1 이건 예전버전인데 이게 간단하게 색상값 가져오긴 더 쉬움 https://m1.material.io/style/color.html#color-color-palette
Color - Style - Material Design
The color palette This color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other. The color palette starts with primary colors and fills
m1.material.io
FlexBox 설명. 이것 외에도 CSS관련 트릭 참고 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
언스플레시 무료이미지 https://unsplash.com/
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
Font awsome https://fontawesome.com/
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
boot strap https://getbootstrap.com/
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
google fonts https://fonts.google.com/
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
FE 관련 효과들 잘 정리해놓은 블로그 https://wsss.tistory.com/1147
마우스 방향에 따라 움직이는 이미지 이펙트
See the Pen Shadow Box Effect by Bharat Patel (@bharatpatel) on CodePen. 마우스 방향에 따라 움직이는 이미지 이펙트
wsss.tistory.com
무료 벡터이미지 (graphics-vector) https://www.vexels.com/
Vector Images, Illustrations, Merch Designs for Commercial Use | Vexels
✔ Ready-made designs you can customize and use on POD platforms like Amazon Merch on Demand ✔ All designs are originally-made by our in-house Design team ✔ Full access to POD-licensed vectors, PNGs, PSDs, and Illustrator files for any niche you're i
www.vexels.com
무료이미지 https://pixabay.com/ko/
CSS 그래디언트 생성기 https://cssgradient.io/
CSS Gradient — Generator, Maker, and Background
As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
cssgradient.io
CSS box shadow 생성기 https://www.cssmatic.com/box-shadow
Box Shadow CSS Generator | CSSmatic
CSSmatic is a non-profit project, made by developers for developers Are you a web developer? Would you like to collaborate on CSSMatic?
www.cssmatic.com
CSS box shadow 생성기 2 https://html-css-js.com/css/generator/box-shadow/
Box Shadow CSS Generator
Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview
html-css-js.com
어도비 컬러휠 https://color.adobe.com/ko/create/color-wheel
https://color.adobe.com/ko/create/color-wheel
color.adobe.com
제이쿼리 대체 코드 추천하는 사이트 https://youmightnotneedjquery.com/#empty
You Might Not Need jQuery
Your search didn't match any comparisons.jquery📋$.getJSON('/my/url', function (data) {}); ie8+📋var request = new XMLHttpRequest(); request.open('GET', '/my/url', true); request.onreadystatechange = function () { if (this.readyState === 4) { if (this.
youmightnotneedjquery.com
몽고DB https://account.mongodb.com/
MongoDB Cloud
MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services.
www.mongodb.com
클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services
aws.amazon.com
github https://github.com/
GitHub: Let’s build from here
GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...
github.com
다이어그램 그리기
draw.io
Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app. No login or registration required.
www.drawio.com
