본 개발 일지는 스파르타 코딩클럽의 [왕초보] 비개발자를 위한, 웹개발 종합반을 수강하며 작성한 내용입니다.
서버/클라이언트/웹의 동작 개념
- 브라우저의 역할
- 서버가 미리 준비한 것을 "요청하고", "받아서", "그려준다."
- html/css/js를 요청하고 받아서 그려주는 것
- html: 뼈대
- css: 꾸미는 것
- js: 동적인 것
- 서버는 클라이언트한테 '그릴 것'을 준다
- 그릴 것 = 데이터
- 데이터만 내려올 경우
- JSON 형식
- 서버가 미리 준비한 것을 "요청하고", "받아서", "그려준다."
HTML/CSS 개념
- 파이참 = 파이썬을 쓰기에 가장 편한 툴
- HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
- head 안에 들어가는 대표적인 요소들
- meta
- script
- link
- title 등
- 페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.
- CSS
- 스타일 시트(style.css) 파일을 같은 폴더에 만들고, head 태그에서 불러오기
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
부트스트랩, 예쁜 CSS 모음집
- 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)
- 부트스트랩 기본 세팅
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>- 컴포넌트 사용할 때
form은div로 바꾼다! (링크)
Javascript 맛보기
- 개발자도구 → Console에서 작성해놓은 함수 이름 입력(e.g.
hey())하면 해당 함수 재생됨 - 개발자도구는 바로 수정해서 확인하는 역할을 함
Javascript 기초 문법 배우기(1), (2)
-
변수, 자료형, 함수, 조건문, 반복문 정도만 알면 뭐든 구현할 수 있음
-
변수 : 값을 담는 것
let: 값을 담는 박스- 변수 이름을 지을 때는 남이 봐도 알아볼 수 있게 짓는다. 언더바 사용. (e.g. first_name, last_name)
-
자료형
-
기본 함수들
-
a % 7: a를 7로 나눈 나머지 -
부등호
==: 같다 (선언과 구분하기 위해 = 두개)!=: 같지 않다
-
문자열 나누기
let myemail = 'sparta@gmail.com' let result = myemail.split('@') // ['sparta','gmail.com'] result[0] // sparta result[1] // gmail.com let result2 = result[1].split('.') // ['gmail','com'] result2[0] // gmail -> 우리가 알고 싶었던 것! result2[1] // com myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
-
-
함수 : 부르면 정해진 동작을 하는 것
-
조건문
-
if, else if, else if, else if else
function is_adult(age){ if(age > 20){ alert('성인이에요') } else if (age > 10) { alert('청소년이에요') } else { alert('10살 이하!') } } is_adult(12)
-
개발새발 개발하는 디자이너