개발관련 유튜브 감상

프리코더

<개발로 월 500을 벌려면 얼마나 공부해야 할까?>

원티드 긱스- 프리랜서 중개

링크드인, 로켓펀치

1년~1년반

 

<억대 연봉을 버는 프리랜서 개발자 로드맵>

인프런강의. 20%할인 쿠폰

 

<코딩 몰라도, 웹 제작으로 월 300만원 법니다>

워드 프레스 사용. 홈페이지 제작. 망고보드. 미리캔버스

 

<기계공학을 포기하고 2년만에 개발자로 취직한 방법>

유튜브 클론코딩. 두달. 뭔가를 만들어 본다는 목표 갖기. 

 

닥코 daqko

<개발자 17년차가 말하는 프론트엔드의 과거, 현재 그리고 미래>

jquery배우지 말기. 필요없음. 없애는 추세.

바닐라 자바스크립트 배우기.

 

드림코딩 by 엘리

<2021 웹개발 트렌드>

깃허브-오픈 프로젝트

프로그래밍 언어 Ranking: JavaScript>Python>Java>TypeScript

웹 프레임워크 react.js > angular > vue.js

자바스크립트 런타임환경 nodeJS

no code, less-code: bubble, airtable사이트

serverless-클라우드(AWS>netlify>google cloud)

JAM Stack-javascript(next.js, Gastby), APIs(Headless CMS), Markup

SPA(Single Page Application)-ex) facebook, pinterest, gmail

PWA(progressive Web Apps)-ex) uber, twitter, instagram

Web Assembly-c,c++,rust 언어 사용.  ex) figma

AI, ML

voice search and navigation

motion design

 

<비전공 개발자로 해외취업에 성공한 이야기(학원선택법, 학원을 다닐때 주의사항 등등)>

부트캠프. 평판이 좋은 학원.(지역 테크 이벤트 참여) 링크드인 졸업생들 취업상황. 6개월. 

 

<비전공자를 위한 IT지식&개발자로 성장하기 위한 팁>

책-비전공자를 위한 이해할 수 있는 IT 지식(twig출판사)

모르는 키워드 작성해놓고, 검색해서 간단하게라도 알아가기.

 

<웹사이트, 모바일 앱 디자인 무료 툴 5가지>

https://mycolor.space/     컬러팔레트 선택에 도움줌

https://cssgradient.io/

https://www.shapedivider.app/   svg(깨짐없는 이미지)이용 단을 곡선으로 나누기

https://haikei.app/  svg만드는 사이트

https://coolbackgrounds.io/   background패턴

https://dribbble.com/    webdesign탭-popular-goods for sale

 

조코딩

<코딩 배워서 앱, 웹 만들고 싶으신가요? 코딩 공부 순서 정리해드립니다.>

프론트엔드(HTML, CSS, JS) 프론트엔드만 할줄 알아도 API를 잘 쓰면 쓸만한 서비스만들 수 있음.

백엔드(javascript, Ruby, Phthon) 변수, 조건문, 반복문, 함수

초보자에게 추천하는 프레임워크는 Ruby on Rails

만들고 싶은 웹 서비스를 프로젝트 형식으로 완성해나가는 것으로 목표로 공부

앱

 

이 영상 속 순서대로 학습하고자 하신다면 아래 재생목록을 따라오시는 것을 추천드립니다. 코딩 기초와 웹, 앱 프로그래밍: https://www.youtube.com/playlist?list=PLU9-uwewPMe0ynomccdrAX2CtVbahN4hD 추가로 실전 프로젝트를 만드시리면 아래 재생목록 추천드립니다. 인공지능 동물상 테스트 만들기: https://www.youtube.com/playlist?list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO

책이 아닌 학습 사이트도 괜찮으시다면 추천드리겠습니다. 배울 수 있는 곳이 정말 많지만 저는 아래 사이트들을 추천드리고 싶습니다.

1. 생활코딩 : 한글로된 영상으로 차근차근 기초부터 배우고 싶으시다면 "생활코딩" 강의를 추천드립니다. 강사님이 설명을 정말 잘해주시고 모든 강의가 무료입니다. HTML: https://opentutorials.org/course/3084 CSS: https://opentutorials.org/course/3086 Javascript: https://opentutorials.org/course/3085

2. CodeCademy : 영어로 되어있긴 하지만 개념 정리와 함께 미션을 통해 바로 실습을 하며 익힐 수 있어서 빠르게 배울 수 있습니다. 이것도 일부 기능을 제외하고 HTML CSS의 개념은 무료입니다. HTML: https://www.codecademy.com/learn/learn-html CSS: https://www.codecademy.com/learn/learn-css 천천히 개념을 하나하나 배우고 싶으시다면 생활코딩 강의를 추천드리며, 빠르게 코딩에 활용할 목적이시면 CodeCademy를 추천드립니다. 물론 둘 다 듣는것도 좋습니다! HTML, CSS, JS등 프론트 엔드 기술을 학습하신 후에는 프레임워크를 활용하여 웹을 개발해보시는 것을 추천드립니다.

추천 사이트로는 1. 인프런, 구름EDU : 다양한 강좌들이 있으며 한글 강의로만 되어있습니다. 유료도 있지만 무료 강의도 많이 있어 부담없이 배우기 좋습니다. https://www.inflearn.com/ https://edu.goorm.io/

2. udemy : 영어에 어느 정도 자신이 있으시다면 추천해 드리는 사이트입니다. 전 세계에서 정말 많은 사람이 코딩을 배우는 플랫폼이며 잘 가르쳐주시는 강사님들이 많습니다. 다양한 유료 및 무료 강의가 많이 있습니다. 유료 강의 구매 시 주의 사항으로는 세일을 안하는 날이 더 적을 정도로 세일을 많이 하니 꼭 세일기간을 활용하여 유료강의를 구매하시는 것을 추천드립니다. http://bit.ly/UdemY

 

노마드 코더

<개발자 99%가 모르는 신박한 HTML 태그 5개>

<progress></progress> 진행률 표시줄

<progress value="50" min="0" max="100"></progress> 진행수준

<meter min="0" max="100" low="20" high="65" optimum(최적)="15" value="50"></meter> 값의 수준을 보여줌. 값이 높고, 낮을 때에 따라 색상이 바뀐다. 값의 상태 ex) 미세먼지 레벨

 

<details>

  <summary> What is the best?</summary> 클릭가능한 영역, 유저가 클릭하기 전에 볼수 있는 영역.

  <span>It's 김치!</span>  클릭한 후에만 표시됨

</details>

 

<input type="week"> 1년 중 주를 선택가능. ex) 예약가능 프로그램.

<input type="time"> 하루 중 시간을 선택가능. 

 

<picture></picture>태그는 img태그, source태그와 함께 사용됨. 사용자 화면에 따라 media속성으로 각기 다른 이미지를 보여줌.

 

<datalist></datalist> 검색어자동완성기능

<label for="movie">What is your favorite movie?</label>

<input type="text" list="movie-options" />

<datalist id="movie-options"> datalist의 id=input의 list.

 <option value="Dune" />

  <option value="Dark Waters" />

  <option value="The Artist" />

</datalist> datalist안에 option태그 사용. 

 

<웹 서비스 구현의 모든 것! 무료 제작툴 39개 몽땅 알려드림!>

서비스 기획 (1)trello (2)notion

디자인 figma

사진, 이미지 필요하면 unsplash

코딩 에디터 visual studio code

css의 경우 bootstrap, foundation은 추천을 안해. twailwind css, bulma css 추천.(css프레임 워크)

코드 올리는 곳 github, gitlab, bitbucket

api를 만들어야 한다면 rest. graphQL 둘다 엔드포인트를 테스트할 수 있는 클라이언트가 필요.

rest를 쓴다면 insomnia.rest, graphQL은 altair 추천

algolia같은 검색엔진 서비스를 사용. 

비밀번호,로그인 서비스 auth0, aws cognito

이메일관리 mailgun, mailchimp

웹사이트 보안을 위해 SSL certificate가 필요. let's encrypt이용

백엔드를 끝내면 heroku에 올린다. AWS 1년 무료

프론트엔드 디플로이는 githubpages, 혹은 netflify를 활용

서버리스를 한다면 aws lambda, 구글 cloud functions

데이터베이스 amazon dynamoDB, 구글 cloud firestore, mongoDB atlas, faunaDB

프로필사진 업로드 google cloud storage, cloudinary

웹 사이트 에러 sentry

채팅기능 pusher

알림기능(웹,모바일 푸쉬) one signal

인스타그램 같은 feed기능 getstream.io

웹 사이트 분석 -구글 애널리틱스(최고), hotjar, mixpanel

프로젝트 시간관리 vsc익스텐션 waka time

 

<모르는 사람 없게 해주세요. 클론코딩 꿀템 추천

구글 확장프로그램 colorzilla

cssviewer 확장프로그램

json viewer json보기 쉽게 정리해줌

whatFont

page ruler redux 웹사이트 위에서 줄자를 사용할 수 있게 해줌. 

builtWith technology profiler 어떤 스택을 썼는지 알려줌. 

ㄴ댓글 Color picker 같은 경우 확장 프로그램보단 파워토이 쓰시는 걸 추천드려요! 훨씬 범용성 있고 여러가지 추가기능이 있어서 엄청 편리합니다! 심지어 마소 공식 오픈소스 프로젝트!

 

<초보 개발자를 위한 팁 3가지>

모든걸 다 암기하려는 실수. 시험 마냔 외우지말고, 개념을 이해하려고 해. 구글링해서 찾을 수 있어.

한가지 분야에 집중해. html, css 편해질 때까지 익숙해지기. 다른 걸 배우기전에, 어느 하나를 완성하기.

직접 코드를 쳐서 해보기. 멍청한 아이디어,포트폴리오 사이트든 만들어보기. 나만의 것을 한번 해봐야함.'

매일 코딩하는 습관을 들이기. 깃허브를 풀밭으로 만들여. 매일 코딩하는 습관을 만들어.

 

interactive developer

<디자이너 & 비전공자 사수없이 혼자 코딩 공부하는 방법>

javascript 배우길 추천.

하나의 언어에 대한 여러 책을 읽기(그냥 쭉 읽기)-많이 만들어보기

 

Hazel Song

<프로덕트 디자이너 스킬셋>

🪄디자인 시스템: 1. 구글: https://material.io/design 2. 애플: https://developer.apple.com/design/hu... 3. IBM: https://www.carbondesignsystem.com/

 

eo

<지방대 개발 비전공자가 배달의 민족 리드 개발자가 되기까지>

1일 1커밋. 3년간 쭉 진행. 계속 꾸준히 하는 것이 중요.

매일아침 2시간 공부. 전공지식 쌓기위한 온라인수업, 책. si->자체서비스 회사로 이직(국비로 시작)

 

라매개발자

<웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법>

내가 만들고 싶은 프로젝트= 웹 앱 하나를 무조건 준비. (추천: 시간 관리 앱, 운동기록, 블로그 등)

컴퓨터공학 기초 컴퓨터공학=컴퓨터 사이언스 cs

자바스크립트 + 웹 브라우저 지식

 

개발을 좋아하는 지 증명: 자기가 만들고 싶은 웹,앱 프로젝트 하고 있는지.

  깃헙 커밋. 

책추천 자바스크립트 deep dive

컴퓨터공학 6대과목: 자료구조, 알고리즘, 컴퓨터 구조, 운영체제, 네트워크, 데이터베이스

자료구조,알고리즘->백준 문제풀이(백문제 풀기)

깃헙에 자주 나오는 면접 질문 레포지토리 외우기. 얕고 넓게 외우기.(취업을 위해. 나중에 더 공부하기)

cs지식-개발 블로그 운영. 그날 공부한 걸 블로그에 올리고 블로그링크를 깃헙에 달아놓기.

협업능력-팀프로젝트(깃,깃허브 사용해서 pull request날리고 서로 코드 리뷰하고 쓰고 싶은 기술 잘 정리해서 위키에 남겨야 합니다. 깃헙 위키에. 그리고 readme는 잘 정리되어 있어야 되고요. 배포 접속가능하게 배포. 배포링크를 반드시 남겨야 한다. 

생활코딩,노마드코너,제로초 강의-강의듣고 만들고 싶은 웹,앱 개발하기.

 

<백준 온라인 저지(BOJ)로 처음 알고리즘 시작해서 공부했던 방법 공유>

단계별로 풀어보기 메뉴-정렬까지 단계별 풀어보기.

강의-알고리즘 기초의 포함되어 있는 문제를 풀어보기. 기초1->기초2(백문제)

-중급1

풀다가 안풀리면 구글링. 외우고 문제를 많이 풀다보면 이해가 된다.

 

<신입 프론트엔드 개발자 취업전략과 포트폴리오>

github잔디를 열심히 심자. 네이버 부스트캠프. 사용한 기술 적어주기.

화면캡처해서 링크들어가지 않아도 어떤 기능이 있는지 파악할 수 있게.

원티드로 지원