[Sep 14, 2020] 코딩 #1
요즘은 초딩들도 의무적으로 배운다는 코딩.
시대에 뒤쳐진 문찐 꼰대 어른이 되고 싶지 않아서 오늘부터 공부 시작함.
#유튜브 '조코딩'
코딩/ 프로그래밍 언어/ 프레임 워크
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
1. 웹(인터넷 익스플로어, 크롬, 사파리 등 인터넷 브라우저를 통해 접속할 수 있는 모든 사이트)을 제일 먼저 배우는 것이 좋음 -인터넥을 사용해보았다면 누구나 익숙함 -난이도가 상대적으로 낮음 -개발에 필요한 도구가 많음 -다양한 기기에서 동작함
2. 개발은 크게 두가지로 나뉨(Front-end/back-end) Front-end(Client Side)----->우리가 정보를 받고 실제로 눈으로 보는 부분 ↪Front-end만 할 줄 알아도 API(미리 만들어 놓은 가져다 쓸 수 있는 기능)를 잘 쓰면 쓸만한 서비스 만들수 있다🥰 💛Fromt-end를 먼저 핫습하는 것을 추천💛 -개발하기 위한 사전지식이 (상대적으로) 적다. -코딩한대로 화면에 바로바로 나온다. Back-end(Server Side)----->화면애 보여줄 정보를 저장, 처리, 가공하는 부분 ↪Back-end부터는 프로그래밍 언어가 어느정도 쓰인다(초기부터 깊게 배울 필요는❌) 3. Front-end 배우기 ▶️크게 3가지 언어 필요(유기적으로 연결)<HTML, CSS를 먼저 공부 권유> 💚HTML(연필)----->어떻게 그릴지 전체적인 밑그림을 그리는 역할(제목은 뭐로할지 로그인창은 어디에 둘지...)➡️웹의 뼈대 💚CSS(물감)----->HTML로 그린 뼈대에 색을 칠하고 위치를 수정해가며 화려하게 하는 역할 💚Javascript(플립북)----->앞서 그린 그림을 움직이게 만드는 역할(프로그래밍 언어라서 배울것이 많다➡️웹의 요소를 선택하고 제어할 수 있을 정도로만 배우기)
4. Back-end 배우기 ▶️Javascript--Spring(프레임워크), Ruby-->Rails(프레임워크), Python-->Django(프레임워크) 등 쉬운 언어를 이용해 기본적인 개념인 💛변수, 조건문, 반복문, 함수💛 학습 추천----->필요한 것이 있다면 따로 찾아서 공부하는 것이 효율적 💚변수: ~는 ~다의 개념 ex) ID='jocoding' 💚조건문: 만약 ~라면 ex) ID/PW가 일치하면 로그인 성공표시 💚반복문: ~를 n번 반복해라 ex) 앞으로 이동 10번 반복 💚함수: a를 넣으면 b가 나옴 ex) 공격력이 5이면 데미지가 50 웹 프레임워크(개발에 필요한 것들 미리 만들어 놓은 도구) ❤조코딩님이 개인적으로 추천하는 프레임워크⏭Ruby On Rails❤
Html = Hypertext / mark up / language
hyperlink로 구성된/구조를 표시하는/언어
문서 연결 수행 -> 요즘 : 앱, 어플 등에 활용 가능 유용 언어
<태그>를 쌓아가면서 웹사이트 구성. /이 들어가면 닫는 태그
상위태그 = 부모태그 (기사) , 하위태그 = 자식태그 (제목, 기사 내용)
크롬 - f12로 확인 가능./ 내용 수정 가능,/이미지 주소 복사
추가로 HTML, CSS를 독학으로 학습하실 수 있는 좋은 사이트 추천드립니다. 1. Codecademy https://www.codecademy.com/courses/le... 2. 생활코딩 https://opentutorials.org/course/1
<내가 만든 사이트 인터넷에 공개하기>
1. 내 컴퓨터를 서버로 만드는 방법 (보안 취약/ 24시간 가동해야함)
2. 외부 서버를 이용하는 방법
google 검색 : html free template->다운로드->압축해제->파일확인
visual studio code로 열기->제목 변경->저장
->www.netlify.com ->sign up->파일 drop->체크
주소 이상함->주소 바꾸기 : site settings->change site name->전 세계 어디서든 접속 가능!
<내 사이트 네이버에 검색되도록 만들기 - 검색엔진 원리>
각 검색 엔진마다 내 사이트를 등록할 수 있는 곳이 있음
Search Engine Optimization 설정
'네이버 웹마스터도구' 검색 ->로그인->사이트 추가->사이트 소유 확인=html수정->저장
다시 netlify사이트 가서 Deploys->새로 변경한 폴더 드래그->f12로 사이트에서 수정 삽입 태그 확인
로봇 : 크롤러
특정 사이트에는 검색 엔진에 나오고 싶지 않은 숨기고픈 정보 있을텐데 다 공개되면ㄴㄴ
이러한 현상 방지 위해 약속 - robots.txt파일
웹사이트 방문하면서 가장 먼저 이 파일 읽게되는데
여기서 서용한다고 하면 접근하여 가져오고 거부한다면 크롤러가 접근 못함.
모든 검색로봇이 검색 가능하도록 설정.->* 파일 다운로드->확인
프로젝트 폴더에 넣어주기. 프로젝트 폴더의 가장 최상단 (가장 바깥 쪽)에 위치해야 함.
첫 번째 뜨는 사이트 접속.
우리 url입력. 스타트 ->sitemap생성됨. ->view ~detail->다운로드->폴더 최상단에 위치 시키기
추가적으로 robots.txt파일에 우리 사이트맵 경로 적어두기.
모든 준비 완료 ->다시 netlify에 들어가서 다시 한 번 사이트를 deploy->완성 파일 드랍
->사이트에서 체크->sitemap.xml로 엔터->체크
완료 !
그러나 특정 검색어 상단 노출 위해서는 seo 과정 필요 (검색 엔진 최적화)
웹마스터 도구 -> 검증 -> 웹 페이지 최적화 ->확인->체크 확인.
체크가 많을수록 검색 순위가 올라감.
제목이나 설명등은 내가 원하는 검색어에 알맞게 조정.
? 클릭- 해결방안 볼 수 있음. 웹 표준 html 마크업 가이드 참고.