2020 년에 적극적으로 코딩을 시작한 이후로 많은 유용한 리소스를 발견했습니다.
일부는 완료했고 다른 일부는 아직 대기열에 있습니다. 바라건대, 그들은 당신에게도 도움이 될 것입니다!
자원 유형
? = 과목에 대한 과정 완료
? = 개발을 더 쉽게 만드는 도구
? = 주제에 대한 단일 기사 또는 비디오
HTML Resources
# |
표제 |
내 생각 |
Type |
1 |
좋은 대체 텍스트가 어떻게 보이는지에 대한 예제를 제공하는 방법을 좋아했습니다. |
? |
|
2 |
HTML 구문을 처음 배울 때 특히 유용합니다. |
? |
|
3 |
모든 것이 <div>에 없어야 하는 이유에 대한 빠른 소개. |
? |
|
4 |
다음 단계로 갈 준비가 되셨나요? 이 가이드는 많은 HTML 요소에 대해 더 자세히 설명합니다. |
? |
|
5 |
이 가이드는 <figure> 및 <figcaption>과 같은 요소를 이해하는 데 정말 도움이 되었습니다. |
? |
|
6 |
인터랙티브 한 방식이 마음에 들지만 이 접근 방식은 요소 학습에 있어 단순화되었습니다. |
? |
|
7 |
이를 통해 JS를 html 파일로 로드 하는 다양한 방법을 배울 수 있어 성능이 크게 향상되었습니다. |
? |
|
8 |
부트 캠프를 준비하기 위해 이 과정을 수강했습니다. HTML에 대한 훌륭한 소개. |
? |
|
9 |
나는 위의 초급 코스를 정말 즐겼고 이 코스를 기대하고 있습니다. |
? |
|
10 |
기술적으로 HTML은 아니지만 효율적으로 작성하는 데 도움이 됩니다. 이 튜토리얼을 기대합니다. |
? |
|
11 |
여러 소셜 미디어 플랫폼을 위한 메타 태그를 만드는 데 가장 좋아하는 생성기 중 하나입니다. |
? |
|
12 |
이 심층 비교 기사에서는 올바른 작업에 적합한 도구를 사용하는 것이 더 분명해집니다. |
? |
|
13 |
이 도구를 사랑하십시오! 페이지 섹션에 대한 곡선 분리를 만들기 위해 svg 웨이브를 생성하십시오! |
? |
CSS Resources
# |
Title |
My Thoughts |
Type |
1 |
프레임 워크를 사용하지 않더라도 공통 웹 구성 요소에 대한 영감을 얻기 위해 설명서를 사용하는 것을 좋아합니다. |
? |
|
2 |
CSS-Tricks에 의한 훌륭한 분석과 끝에 멋진 그래픽 예제가 있습니다. |
? |
|
3 |
박스 모델의 작동 방식에 대한 예제에 접근하기 매우 쉽습니다. |
? |
|
4 |
여기에는 멋진 애니메이션을 만들고 성능을 확인하는 데 유용한 팁이 많이 있습니다. |
? |
|
5 |
아직 이걸 가져 가지 않았지만 그렇게 하려고 기다릴 수 없습니다. 코스 디자인은 최고 수준입니다. |
? |
|
6 |
이것은 SASS에 대한 나의 첫 번째 과정이었으며 여전히 때때로 다시 참조합니다. |
? |
|
7 |
이것은 SASS가 무엇인지에 대한 첫 번째 입문서로 좋습니다. |
? |
|
8 |
이것은 BEM과 SASS를 함께 사용할 수 있는 방법을 소개했을 때 제 마음을 사로 잡았습니다. |
? |
|
9 |
이것은 널리 사용되는 명명 규칙의 작성자로부터 개요를 제공합니다. |
? |
|
10 |
이 기사에서 BEM 사용 방법에 대해 제공하는 버튼 예제가 마음에 듭니다. |
? |
|
11 |
BEM에 대한 이 설명은 정말 훌륭하지만 특히 기사의 짧고 전체 버전이 있는 방식이 마음에 듭니다. |
? |
|
12 |
강력한 디스플레이 속성에 대해 알고 싶은 모든 것. |
? |
|
13 |
calc()는 CSS에서 더 강력한 기능 중 하나이며 이 기사에서는 이에 대한 몇 가지 훌륭한 사용 사례를 보여줍니다. |
? |
|
14 |
무료로 논쟁 할 수 없으며 Wes Bos는 개발을 위한 최고의 교사 중 한 명입니다. |
? |
|
15 |
위를 참조하지만 이번에는 Flexbox에 대해 |
? |
|
16 |
그라디언트, 테두리 반경, 노이즈 텍스처 및 상자 그림자를 위한 강력한 CSS 생성기 모음입니다. |
? |
|
17 |
위치 속성에 대해 하나의 리소스에만 액세스 할 수 있다면 이것이 바로 그것입니다. |
? |
|
18 |
이 사이트에서는 모든 속성에 대한 브라우저 지원을 알 수 있습니다. |
? |
|
19 |
저는 레이아웃과 Flexbox 속성을 시각적으로 미리 볼 수 있는 방식이 마음에 듭니다. |
? |
|
20 |
CSS 선택 자의 잡초에 빠져들고 싶을 때 (BEM 죄송합니다)이 기사를 다시 참조합니다. |
? |
|
21 |
이 도구는 코드를 확인하고 오류를 강조 표시합니다. |
? |
|
22 |
프로젝트에 연결할 수 있는 미리 정의 된 글꼴 대체 스택입니다. |
? |
|
23 |
이 도구는 요소가 페이지 표면 바로 아래에 있는 것처럼 보이게 합니다. |
? |
|
24 |
Udemy에서 이 놀라운 코스를 구입했지만 아직 수강 할 기회가 없었습니다 ... 언젠가 곧! |
? |
|
25 |
이 도구는 CSS만으로 스크롤 위치에 따라 나타나는 그림자를 생성합니다! |
? |
JavaScript Resources
# |
|
|
|
1 |
이것은 JS의 완전하고 잘 설명 된 개요 중 하나입니다. |
? |
|
2 |
ESlint에 들어가기 전에 저는 JS가 모두 정결한지 확인하기 위해 이 도구를 정말 좋아했습니다. |
? |
|
3 |
이 문서는 값이 참 또는 거짓으로 간주 될 수 있는 모든 경우에 대한 훌륭한 참조 자료입니다. |
? |
|
4 |
나는 아직 이것을 보지 않았지만 그것을 고대하고 있습니다. |
? |
|
5 |
일반적인 JS 루프를 이해하기 위해 하나의 비디오 만 볼 수 있다면 이것이 하나 일 것입니다. |
? |
|
6 |
일반적인 JS 루프를 이해하기 위해 하나의 기사 만 읽을 수 있다면 이것이 하나 일 것입니다. |
? |
|
7 |
완전히 무료이며 일반적인 JS 요소 및 개념의 멋진 컬렉션입니다. |
? |
|
8 |
내가 문자열에 대해 알고 싶은 모든 것과 문자열을 사용할 위치. |
? |
|
9 |
이 JSON 함수는 나를 끝까지 혼란스럽게했습니다. 이 기사는 차이점을 설명하는 데 정말 도움이 되었습니다. |
? |
|
10 |
이 링크를 북마크 하십시오. :) 항상 최신 jQuery cdn 스크립트가 있습니다. |
? |
|
11 |
오늘 프로젝트를 사용할 수 있는 훌륭한 공개 API 목록! |
? |
|
12 |
이벤트가 무엇이며 이벤트 위임이 어떻게 작동하는지에 대한 멋진 시각적 표현. |
? |
|
13 |
다양한 변수 유형에 대한 훌륭한 소개 (그리고 var이 쓰레기 인 이유) |
? |
|
14 |
나는 이것이 두 가지 함수 유형이 사용되는 방법을 설명하는 방법을 좋아합니다. |
? |
|
15 |
JS와 함께 사용할 DOM의 요소를 선택하는 방법 알아보기 |
? |
|
16 |
DOM을 탐색하는 방법에 대한 기본 사항을 알아 봅니다. |
? |
|
17 |
DOM 요소에 연결 이벤트를 첨부하는 방법을 알아 봅니다. |
? |
|
18 |
지난 3 개의 비디오를 기반으로 작은 프로젝트를 만듭니다. |
? |
|
19 |
DOM에 대한 또 다른 훌륭한 리소스 인이 빠른 기사는 사용자를 시작하고 실행하는 데 도움을 줍니다. |
? |
|
20 |
지금까지 북마크 한 것을 잊었습니다. 이것은 Net Ninja의 멋진 무료 코스입니다. |
? |
|
21 |
이 멋진 테마 교육 도구를 사용하면 달콤한 Javascript 기술을 연습 할 수 있습니다. |
? |
|
22 |
이벤트 버블링이 무엇이며 이를 활용하는 방법에 대한 또 다른 훌륭한 리소스입니다. |
? |
|
23 |
이벤트를 올바르게 트리거하고 수신하는 방법을 알아 봅니다. |
? |
|
24 |
어떤 요소와 상호 작용했는지 알아보세요. |
? |
|
25 |
이 사이트의 디자인을 사랑하고 범위를 설명하는 철저한 작업을 수행합니다. |
? |
|
26 |
"함수 선언"함수를 작성하는 방법에 대한 빠른 문서입니다. |
? |
|
27 |
이것은 Vanilla JS로 간단한 이미지 슬라이더를 만드는 방법을 알려줍니다. |
? |
|
28 |
Learn the smart, efficient way to test any JavaScript application. |
저는 아직 이 주제를 다루지는 않았지만 매우 중요한 주제이므로 기대하고 있습니다! |
? |
29 |
나는 알고리즘의 팬이 아니지만 이 과정을 북마크에 추가 한 이유입니다! |
? |
|
30 |
웹 서버에 대한 AJAX 요청에 대해 알고 싶었던 모든 것. |
? |
|
31 |
이 기사는 프로젝트에서 API 호출을 사용하는 방법을 이해하는 데 정말 도움이 되었습니다. |
? |
|
32 |
PHP와 JavaScript가 JSON을 어떻게 다르게 처리하는지 보는 것은 매우 흥미 롭습니다. |
? |
|
33 |
이 짧은 기사는 이 강력한 JS 메서드를 분석하는 훌륭한 작업을 수행합니다. |
? |
|
34 |
나는 Axios에 접근하는 경향이 있지만 이 기사는 두 가지 모두를 설명하는 훌륭한 역할을 합니다. |
? |
|
35 |
이 30 시간 코스를 수강했는데 놀랍습니다. 기본 사항을 잘 설명합니다. |
? |
|
36 |
사용자 데이터가 올바른지 확인하기 위해 가입 및 로그인 양식에 사용할 수 있는 훌륭한 도구입니다. |
? |
|
37 |
디자이너로서 이것은 내가 다이빙에 대해 매우 흥분되는 것입니다. |
? |
React Resources
# |
Title |
My Thoughts |
Type |
1 |
일반적인 React 패턴과 조각에 대한 치트 시트를 빠르고 쉽게 훑어 볼 수 있습니다. |
? |
|
2 |
Udemy보다 가격이 조금 낮지 만 Wes Bos처럼 가르치는 사람은 없습니다. 곧 구매할 수 있기를 바랍니다. |
? |
|
3 |
이를 통해 Chrome DevTools에서 소품, 구성 요소, 렌더링 등을 바로 볼 수 있습니다. |
? |
|
4 |
이것은 거의 모든 주요 아이콘 라이브러리를 가지고 있기 때문에 제가 가장 좋아하는 아이콘 패키지 중 하나입니다. |
? |
|
5 |
React - The Complete Guide (incl Hooks, React Router, Redux) |
제가 가장 좋아하는 강좌 중 하나이며 React에서 코딩 할 수 있도록 많은 준비를 했습니다. |
? |
6 |
이 기사 / 비디오는 라이브러리를 다운로드하지 않고도 "Redux와 같은"상점을 얻을 수 있는 매우 멋진 후크를 분해합니다. |
? |
|
7 |
이 구문은 JSX와 Markdown을 하나로 결합합니다! |
? |
|
8 |
여기에는 React를 시작하기 위한 몇 가지 훌륭한 과정과 초급 프로젝트가 있습니다. |
? |
|
9 |
React Router 탐색의 힘과 Bootstrap의 스타일이 하나로 결합되어 있습니다. |
? |
|
10 |
이 패키지를 정말 배우고 싶습니다. 다른 "반응 페이지"에 SEO 메타 태그를 추가 할 수 있습니다. |
? |
|
11 |
이것은 정말로 작동합니다! 내 웹 사이트에서 구현 한 후 성능 점수가 향상되었습니다. |
? |
|
12 |
React에 대한 양식 유효성 검사 및 데모 코드의 멋진 모음입니다. |
? |
|
13 |
React hook useRef로 작업하는 방법에 대한 유용한 비디오. |
? |
|
14 |
양식 유효성 검사를 설정하는 강력한 패키지입니다. 할 수 있는 모든 것을 배우려면 하루 더 깊이 잠수해야 합니다. |
? |
|
15 |
이 패키지를 사용하면 사용자 지정 양식을 작성할 수 있으며 유효성 검사를 처리합니다. |
? |
|
16 |
React 사용자가 선호하는 앱으로 CSS 중심의 사용자 정의 구성 요소를 만들 수 있습니다. |
? |
|
17 |
React inline styles and media queries using a custom React Hook |
이 기사는 JSX 환경에서 반응 형 스타일을 모방하는 데 도움이 되었습니다. |
? |
18 |
React와 함께 부트 스트랩 사용에 대한 정말 좋은 문서입니다. |
? |
|
19 |
Redux에 대한 최신 Hook 구문으로 작업하십시오. 이것은 저에게 많은 시간을 절약했습니다! |
? |
|
20 |
이것은 클래스 구성 요소에서 상태를 변경하기 위해 setState를 사용해야 하는 이유를 잘 설명합니다. |
? |
|
21 |
React 구성 요소가 서로 데이터를 전달하는 방법에 대해 자세히 알아보십시오. |
? |
|
22 |
성능이 전부이며 이는 렌더링 작업을 올바르게 수행하는 방법을 알려줍니다. |
? |
|
23 |
나를 위해 React Documentation에서 가장 많이 방문한 핵심 페이지 중 하나입니다. |
? |
|
24 |
Redux DevTools는 제가 설정하기에 가장 간단한 것은 아니지만 이것은 프로세스를 잘 설명하는 데 도움이 되었습니다. |
? |
|
25 |
아직 Redux에서 이 초급 과정을 보지 못했지만 좋은 소식을 들었습니다. |
? |
|
26 |
이 정적 사이트 생성기로 곧 작업하 게되어 매우 기쁩니다. |
? |
|
27 |
이 과정을 구입했지만 아직 수강하지 않았습니다. 너무 많은 내용을 다루는 즉시 그렇게 하게 되어 매우 기쁩니다. |
? |
|
28 |
지금 이것을 받아들이고 그것이 들어가는 모든 세부 사항을 사랑하십시오. |
? |
WordPress Resources
# |
Title |
My Thoughts |
Type |
1 |
WordPress의 사용자 지정 테마에 대한 멋진 소개. |
? |
|
2 |
모든 비디오가 아주 잘 정리되어 있습니다. |
? |
|
3 |
WordPress의 기본에 대한 또 다른 훌륭한 재생 목록입니다. |
? |
|
4 |
이 동영상을 가져 오지는 않았지만 이 재생 목록에는 유용한 동영상 주제가 많이 있습니다. |
? |
|
5 |
고급 WordPress 테마 주제에 대한 정말 유용한 재생 목록입니다. |
? |
|
6 |
이 과정에서 서버 작업도 다룹니다. |
? |
|
7 |
How to install WordPress on your local computer with MAMP (Mac) |
이 비디오는 내 컴퓨터에서 로컬로 WordPress로 작업하는 방법을 가르쳐주었습니다. |
? |
8 |
이 웹 사이트는 WordPress의 모든 다양한 파일 유형과 그 중요성 수준을 설명하는 데 큰 역할을 합니다. |
? |
|
9 |
WordPress에서 CSS 및 JS 사용에 대한 문서. |
? |
Git & CLI Resources
# |
Title |
My Thoughts |
Type |
1 |
이것은 각 팀의 필요에 따라 다른 Git 워크 플로가 있다는 것을 이해하는 데 매우 유용했습니다. |
? |
|
2 |
이 과정을 통해 진정한 터미널 마스터가 되기를 기다릴 수 없습니다. |
? |
|
3 |
이 대화형 과정은 분기가 작동하는 방식을 이해하는 데 매우 유용했습니다. |
? |
|
4 |
Git 워크 플로에서 팀과 함께 작업하는 방식에 대한 훌륭한 개요입니다. |
? |
|
5 |
일반적인 Markdown 구문을 확인하고 Git README를 업그레이드 하기 위한 훌륭한 리소스 |
? |
|
6 |
버전 제어를 위해 Git을 처음 사용하기 시작했을 때 매우 유용합니다. |
? |
|
7 |
일반적인 git 명령에 대한 또 다른 멋진 치트 시트입니다. |
? |
|
8 |
이 매우 사용자 친화적인 가이드로 Github를 시작하세요. |
? |
|
9 |
일반적인 Git 명령에 대한 매우 시각적 인 접근 방식입니다. |
? |
|
10 |
검색 가능한 치트 시트 |
? |
|
11 |
많은 CLI 터미널 명령에 대한 Codecademy의 멋진 목록. |
? |
Hosting Resources
# |
Title |
My Thoughts |
Type |
1 |
특정 분기가 업데이트 되면 라이브 사이트에 대한 빌드를 트리거 하는 멋진 Netlify 프로세스. |
? |
|
2 |
Netlify 호스팅 시작 및 실행을 위한 무료 과정 |
? |
|
3 |
Netlify를 메일 서버로 설정하는 방법에 대한 쉬운 자습서. |
? |
|
4 |
PHPStorm을 사용하여 SFTP 또는 FTP에 연결하는 방법에 대한 자습서. (VS 코드에 비해 즐겁습니다) |
? |
Optimization Resources
# |
Title |
My Thoughts |
Type |
1 |
이것을 가지고 CDN 및 자산 최적화에 대해 배우기를 기다릴 수 없습니다. |
? |
|
2 |
Canonical URL이 무엇이며 어디에 사용되는지에 대한 좋은 설명입니다. |
? |
|
3 |
지연 로딩의 작동 방식을 배우기 시작하기에 좋은 곳입니다. |
? |
|
4 |
SEO가 무엇이며 어떻게 접근하는지에 대한 멋진 소개입니다. |
? |
|
5 |
페이지 속도가 좋지 않은지 확인하는 여러 영역이 표시됩니다. |
? |
|
6 |
웹 사이트를 디버깅 하는 과정과 도움이 되는 도구에 대해 자세히 알아보세요. |
? |
Databases Resources
# |
Title |
My Thoughts |
Type |
1 |
이 기사에서는 MongoDB가 무엇이며 Mongoose를 함께 사용해야 하는 이유를 자세히 설명합니다. |
? |
|
2 |
이것을 읽을 때까지 RESTful API 호출을 완전히 이해하지 못했습니다. |
? |
|
3 |
코드 418이 최고입니다. ;) |
? |
|
4 |
풀 스택 사용자 인증에 사용할 수 있는 훌륭한 도구 |
? |
MISC Web Dev Resources
# |
Title |
My Thoughts |
Type |
1 |
새로운 코드베이스를 탐색하는 방법에 대한 유용한 팁. |
? |
|
2 |
이것이 내가 이 게시물에서 테이블을 만든 방법입니다.) |
? |
|
3 |
테스트 주도 개발에 사용되는 산업 테스트 프레임 워크 중 하나입니다. |
? |
|
4 |
이 프레임 워크를 사용하면 반응 형 HTML 이메일을 쉽게 코딩 할 수 있습니다. |
? |
|
5 |
위의 이메일 프레임 워크를 위한 훌륭한 과정입니다. |
? |
|
6 |
이 패키지를 사용하면 프로젝트 내에서 API 키와 같은 민감한 정보를 보호 할 수 있습니다. |
? |
|
7 |
저는 부트 캠프 전에 이것을 사용하여 코드 입력을 더 빠르게 연습했습니다. |
? |
|
8 |
프로젝트에서 Google지도를 사용하기 위한 API 문서입니다. |
? |
|
9 |
이것은 SSO의 작동 방식을 개략적으로 이해하는 데 매우 유용했습니다. |
? |
|
10 |
느슨하게 관련된 웹 콘텐츠를 구성하는 방법에 대한 매우 흥미로운 기사입니다. |
? |
|
11 |
이것은 내가 가장 좋아하는 Favicon 생성기 (브라우저 탭의 작은 아이콘)이며 훌륭한 인터페이스를 가지고 있습니다. |
? |
|
12 |
Wes Bos가 코드를 linting하는 데 사용하는 설정을 다운로드하십시오. |
? |
|
13 |
여러 언어로 된 일반적인 Emmet 명령에 대한 매우 유용한 참조 |
? |
|
14 |
이것은 내가 가장 좋아하는 IDE가 되었으며 올바르게 사용하는 방법에 대한 모든 리소스를 좋아합니다. |
? |
|
15 |
Agile 워크 플로가 설정되는 방식에 대한 정말 좋은 개요입니다. |
? |
Career Resources
# |
Title |
My Thoughts |
Type |
1 |
예를 들어 인터뷰에 이력서와 같은 고용 자료 준비에 대한 놀라운 가이드. |
? |
|
2 |
이것을 가지고 더 나은 "학습자"가되는 방법을 배우기를 기다릴 수 없습니다. |
? |
|
3 |
인터뷰에서 물어볼 수 있는 50 개의 질문 목록 |
? |
|
4 |
이것은 내가 가장 좋아하는 기사 중 하나이며 동기 부여를 위해 자주 다시 참조합니다. |
? |
|
5 |
화이트 보드 인터뷰 수행에 대한 유용한 링크 및 가이드입니다. |
? |
|
6 |
How to: Work at Google — Example Coding/Engineering Interview |
Google에서 인터뷰 수준을 보는 것은 매우 흥미롭습니다. |
? |
7 |
커버 레터와 이력서를 최적화 하는 유용한 사이트입니다. |
? |
Design Resources
# |
Title |
My Thoughts |
Type |
1 |
기능 아이디어를 빠르게 모형화 하는 방법을 배우고 이를 수행하는 방법의 많은 중요한 영역을 다룹니다. |
? |
|
2 |
이 과정은 많은 중요한 UX 주제와 디자인을 통해 생각하는 방법을 다룹니다. |
? |
|
3 |
웹 디자인의 기초에서 최고의 무료 과정 중 하나입니다. |
? |
|
4 |
이 비디오는 Figma의 자동 레이아웃 사용에 대해 자세히 설명합니다. |
? |
|
5 |
In the file: A look into building selection colors and OpenType |
아직 이걸 보지 못했지만 기다릴 수 없습니다. |
? |
6 |
빅 브랜드가 디자인을 만들거나 변경할 때 데이터를 어떻게 고려하는지에 대한 흥미로운 웹 세미나입니다. |
? |
|
7 |
In the File: Developer and designer, working together to build design systems |
내가보기를 기다릴 수없는 또 하나. 진정으로 효과적인 팀은 프로세스 초기에 설계와 개발간에 명확한 의사 소통을 합니다. |
? |
8 |
여기에는 많은 디자인 팁과 Figma 트릭이 있습니다. |
? |
https://dev.to/gedalyakrycer/165-developer-resources-i-discovered-in-2020-2021-6ma
등록된 댓글이 없습니다.
