기술 스택
컴퓨터2대 필요: 데이터요청-결과값전달(클라이언트-서버) = 프론트엔드-백엔드
프론트엔드: 웹/앱(네이티브)
백엔드: 서버/Database(안정성을위해 2개로 나눠 관리)
프론트엔드
웹 언어: HTML, CSS, JAVASCRIPT
라이브러리/프레임워크: React.js, Vue.js, Angular.js
라이브러리란? 여러줄 필요한 기능을 간단하게 구현해놓은것
앱- Android(Kotlin언어), IOS(swift언어) 결국 둘 다 알아야함
하나로 만들어 해결하는방법: 크로스플랫폼개발언어 라고 한다.
React.Native(JS기반) 랑 Flutter(Dart기반) 임.
-> 결국 JS는 필수적으로 알아야함
백엔드: 데이터를 검증,저장,정제해서 API를 만드는 담당
API란? 손님(프론트엔드)과 요리사(백엔드) 그리고 요리재료(데이터). 요리재료를 API라고 생각?하자?
JS로도 백엔드기능 가능(Nest라는 라이브러리/프레임워크있음)
프론트엔드와 백엔드 사이를 이어줄 통신Tool, 즉 도구 도 알아야함
정보를 받으면 백엔드가 DB로 데이터 보내야함. 그러기위한
통신툴도 있음(앞서말한 툴과는 또 다른 도구들임)
웹페이지의 기본은 CRUD가 잘 되는 것.
- CRUD란?
Create(생성), Read(읽기), Update(갱신), Delete(삭제)
정보의 검색, 참조, 갱신을 의미하기도 함.
JAVASCRIPT
변수와 상수 : 데이터를 담아두는 박스
변수 만드는 법
선언: let, var, const : let 가장 자주 쓰임 let name
할당: (변수명) = (데이터) name = "철수"
선언+할당: let (변수명) = (데이터) let name= "철수"
여기서 등호(=)는 같다 의 의미가 아님.
변수에 데이터를 대입하는 것.
이름중복(재선언): var 만 가능 - 실무에서는 거의 안씀
데이터수정(재할당): const만 불가능 - 변경되면안되는데이터 담음
변수와 상수의 작명 규칙
camelCase(낙타모양) - JS에서 주로 사용
snake_case(뱀모양) - 파이썬에서 주로 사용
- VSCODE에서 주석처리하는법: 컨트롤 + 물음표 함께 누르기
들여쓰는거: 탭 버튼
다시 돌아오게: 쉬프트 + 탭
배열
데이터를 여러개 담을 수 있음.
상자를 한 줄로 나열하는 것과 같음.
각 상자에 번호를 붙여 구분함(*인덱스 라고 함)
- 인덱스는 1이 아닌 0부터 시작
배열의 길이는 제한X
배열 양식
대괄호[ ] 안에 데이터를 담고 쉼표( , ) 로 데이터를 구분한다.
배열의 다양한 기능
초급
array.length 배열의 길이구하기
array[숫자] 배열의 값 꺼내기
array.push() 배열 맨 뒤에 값 추가
array.pop() 배열 맨 마지막 값 삭제
array.sort() 배열 요소 정렬
array.includes() 배열에 데이터 있는지 확인
...
중급
array.concat(array2) 배열2개를 연결
array.join() 배열을 문자열로 만들기
array.slice() 배열을 분리하기
array.filter() 배열에서 원하는 요소 뽑아내기
array.map() 배열의 모든 요소 변경하기
...
연습-03-javascript라는 폴더에 배열 연습한 것 정리.
주석을 통해 반환값을 남겨놓는다.
이렇게 모아둔 걸 코드지갑 이라고 함.
문자열도 배열처럼 다룰 수 있다.
문자열 쪼개기(string.split() ),
문자열 양 끝 빈칸제거(string.trim() )도 가능 - 공백 자동 제거해줄때 쓴다.
실무사용 예시
조회한 메일에 **** 표시하기
codecamp@gmail.com
1. 메일 맞는지 확인: 골뱅이 여부 - includes 사용
2. 계정이름&회사정보 분리해야함 계정정보만처리하기위해서.
3. 계정정보의 마지막4글자만 마스킹하기
code**
4. 메일주소를 다시 합치기
code**@gmail.com
객체
성격이 다른 데이터를 하나의 그룹으로 묶는 것
const profile = {
키 : 값
name: "철수",
gender: "남자",
height: 170
}
profile.name // "철수"배열에 담긴 객체
비슷한 객체를 한 묶음으로 만들어야 할 때
const classmates = [
{name: "철수", age: 8, school: "다람쥐초등학교"},
{name: "영희", age: 8, school: "다람쥐초등학교"},
{name: "훈이", age: 7, school: "토끼초등학교"}
]여기서 원하는 데이터를 가져오는 방법 등은 폴더에.
띄어쓰기를 통해
클래스를 1개 이상으로 줄 수 있다
aaa 라는 클래스 추가된 것.
아이콘은 글씨 와 동일한 취급을 받는다.
그래서 width, height 이런거 없음
font-size로 조절해준다.
부모요소는 자식요소에 영향 줄 수 있지만, 손자(자식의 자식)요소에는 영향X. 자식요소를 통해 손자요소를 제어해야함 아마도?
<iframe> : html파일들을 서로 연결시켜주는 역할
width와 height등 할 때
사이즈를 % 로 주는건 부모를 기준으로 하는것.
body 태그의 width, height 를 100% 줘도 효과X 왜?
부모는 html인데 html에 사이즈가 없으니까.
html의 사이즈 지정하면 효과있음
html,
body {
width: 100%;
height: 100%;
}이런식으로 여러 태그 같이 써줄 수도 있음
이렇게 100%로 다 채워도 보통 껍데기가 생겨 여백(margin)이 보인다.
그래서 보통은 *(모든태그 의미) 를 써서
* {
margin: 0; // 껍데기 제거
box-sizing: border-box; // 받은 박스 디자인 그대로 쓰기
}