기술스택설명
- 웹사이트의 구조
client(front-end) → server(back-end)
데이터 요청 →
fe : 사용자가 실제로 서비스를 사용하며 눈에 보이는 화면을 담당
be : 서비스 사용에 필요한 데이터, 서버 및 보안 등을 담당
- front-end
데이터를 보내고, 데이터를 받으며 실제 유저가 사용하는 ui화면을 담당
-웹
웹개발 언어
: html, css, java-script > 기본
라이브러리/프레임워크
: 일정 메소드를 한 곳에 모아놓은 것, 자바스크립트를 더 효율적으로 사용할 수 있게 해주는 것
react.js, vue.js, angular.js > 레고 부품들을 먼저 만들고 조립하는 방식
앱 :
OS - 앱 개발언어 - 크로스플랫폼 개발 언어
android - Kotlin - React.Native(JS)
ios - swift - Flutter(Dart)
- back-end
데이터를 검증하고, 저장하고, 정제해서 API를 만드는 담당
서버, 데이터베이스 > 두가지를 같이 쓸 줄 알아야한다.
API란?
front-end 개발자가 back-end 개발자에게 데이터를 요청하면 back-end개발자가 데이터베이스에서 데이터를 꺼내서 각 기능을 만드는 것. ex)회원가입을 받는 것, 로그인 처리, 이미지 파일 받는 것, 게시글 등록, 좋아요 등록 등등.
Javascript
페이지에 동적인 기능을 만들어 줌
- 변수와 상수
데이터를 담는 공간(상자)
-종류와 특징
var : 이름 중복 가능 - 실무에서 사용하지 않음
let : 이름 중복 불가능
const : 이름 중복 불가능
-기본 구조
let 변수이름 = 담을 내용
→ 값 변경 가능
const 상수이름 = 담을 내용
→ 값 변경 불가능
실무에서는 const를 더 많이 사용한다. → 안정성이 높다.
-작명 규칙
camelCase : 두 개 이상의 단어가 붙을 때 다음 단어의 첫 글자는 대분자로 한다. (java, javascript에서 많이 사용)
snake_case : 두 개 이상의 단어가 붙을 때 다음 단어의 앞에 _(underscore)를 붙인다. (phyton에서 많이 사용)
박스를 만드는 것 : 선언
값을 넣는 것 : 할당
let 함수에 변수를 다시 넣는 것 : 재할당
크롬 개발자 도구 console탭에서도 자바스크립트 실습이 가능하다
콘솔탭의 중지(?)버튼을 누르면 콘솔 클리어, 웹페이지 새로고침을 누르면 리셋이므로 새로고침에 주의할 것.
개발자도구 콘솔 탭에서는 console.log 명령어 없이 변수만 입력해도 값이 출력된다.
-html파일과 js파일 연결하기
<script src="연결할 js파일명or위치">
</script>
- 배열
배열에는 데이터를 여러 개 담을 수 있음
첫번째는 0부터 시작함 // 0번지
-배열에 데이터 담기
대괄호([]) 안에 데이터를 담고 쉼표(,)로 구분
빈 배열
const blacks = []
숫자열 배열
const numbers = [2, 4, 6, 8]
문자열 배열
const classmates = ["철수", "영희"]
-배열의 다양한 기능
const array = ["배열"]
array.length 배열의 길이 구하기
array[숫자] 배열의 값 꺼내기
array.push() 배열 맨 뒤에 값 추가
array.pop() 배열 맨 마지막 값 삭제
array.sort() 배열 요소 정렬
array**.**includes(값) 배열 데이터 확인
-문자열도 배열의 기능을 가지고 있다.
string.split() 문자열 쪼개기
string.trim() 문자열 양끝 빈칸 제거
array.join() 문자열 합치기 >>default는 ' , '
- 객체
성격이 다른 데이터를 하나의 그룹으로 묶는 것
키(key)와 값(value)로 이루어져있음.
const profile = {
name:"철수"
gender:"남자"
...
}
값(value)불러오기
profile.key값
객체는 일반적으로 배열과 함께 쓰인다
-배열에 담긴 객체
비슷한 객체를 한 묶음으로 만들어야 할 때
배열([]) 안에 객체({})를 담는다
Cyworld
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>싸이월드</title>
<link href="styles/index.css" rel="stylesheet" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div class="background">
<div class="outerbox">
<div class="wrapper">
<div class="wrapper__left">
<div class="wrapper__left__header">
<div class ="today">
TODAY <span class="zero">0</span> | TOTAL <span class="count">12345</span>
</div>
</div>
<div class="wrapper__left__body">
<div class="header">
<div class="headerGrey">
</div>
<div class="line"></div>
<div class="profileWrapper">
<div class="profile">
<i class="fas fa-file-signature"></i> 이름
</div>
<div class="profile">
<i class="fas fa-phone"></i> Phone
</div>
<div class="profile">
<i class="far fa-envelope"></i> E-mail
</div>
<div class="profile">
<i class="fab fa-instagram"></i> 인스타그램
</div>
</div>
</div>
<div class="footer">
<div class="feelWrapper">
<div class="feel">오늘의 기분</div>
<select class="feelSelect">
<option>기쁨 😀</option>
<option>슬픔 😭</option>
<option>분노 😡</option>
<option>행복 😊</option>
<option>웃음 😃</option>
</select>
</div>
</div>
</div>
</div>
<div class="wrapper__right">
<div class="wrapper__right__header">
<div class="wrapper__right__title">사이좋은 사람들, 싸이월드</div>
<div class="wrapper__right__setting">사생활보호설정<i class="fas fa-caret-right bbbb"></i></div>
</div>
<div class="wrapper__right__body">
<iframe src="home.html"></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
inext.css
* {
margin: 0px;
box-sizing: border-box;
}
.background {
background-image: url('../images/background.png');
width: 1024px;
height: 600px;
padding-left: 20px;
padding-top: 20px;
}
.outerbox {
background-image: url('../images/outerbox.png');
width: 808px;
height: 544px;
}
.wrapper {
display: flex;
flex-direction: row;
padding-left: 32px;
padding-top: 32px;
}
.wrapper__left {
width: 208px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-top: 20px;
}
.wrapper__left__header {
}
.today {
font-size: 9px;
padding-bottom: 8px;
}
.zero {
color: red;
font-size: 11px;
}
.count {
font-size: 11px;
}
.wrapper__left__body {
width: 208px;
height: 440px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid gray;
border-radius: 15px;
padding-top: 20px;
padding-bottom: 31px;
padding-left: 30px;
padding-right: 30px;
background-color: white;
}
.wrapper__left__body .header {
width: 100%;
height: 70%;
}
.headerGrey {
width: 148px;
height: 133px;
background-color: #c4c4c4;
}
.line {
border-top: 1px dotted black;
margin-top: 12px;
margin-bottom: 12px;
}
.profileWrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 72px;
}
.profile {
color: #999999;
font-size: 9px;
}
.wrapper__left__body .footer {
width: 100%;
height: 30%;
display: flex;
align-items: flex-end;
}
.wrapper__right {
width: 524px;
height: 472px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 10px;
z-index: 1;
}
.wrapper__right__header {
padding-top: 10px;
width: 510px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper__right__title {
padding-left: 40px;
color: #55b2d4;
font-weight: 700;
font-size: 16px;
}
.wrapper__right__setting {
font-size: 13px;
font-weight: 500;
}
.wrapper__right__body {
width: 524px;
height: 430px;
background-color: white;
border: 1px solid gray;
border-radius: 15px;
}
.feelWrapper {
width: 141px;
height: 41px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.feelSelect {
width: 141px;
}
.bbbb {
color: red;
}'Review' 카테고리의 다른 글
| [코드캠프] 프리캠프 4일차 (0) | 2021.11.01 |
|---|---|
| [코드캠프] 프리캠프 3일차 (0) | 2021.10.27 |
| [코드캠프] 프리캠프 1일차 (0) | 2021.10.26 |
| 메가 IT 아카데미 자바 웹프로그래밍과정 청강 1, 2일차 후기 (0) | 2021.10.18 |
| 메가IT 아카데미 세미나 <NAVER 개발자가 말하는 WEB 백엔드 공부는 이렇게> 후기 (0) | 2021.10.14 |
