Review

[코드캠프] 프리캠프 2일차

Anna-Jin 2021. 10. 27. 00:53
728x90
반응형

기술스택설명

  • 웹사이트의 구조

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;
}
728x90
반응형
저작자표시 (새창열림)

'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

'Review'의 다른글

  • 현재글[코드캠프] 프리캠프 2일차

관련글

댓글

티스토리툴바