오늘의 커버 일러스트는 코딩 Mood 를. ㅋㅋㅋㅋ.. 그려봤습니다
[API란?]
디자이너일 때 개발자들과 얘기하며 가장 많이 들었던 용어, API!
API는 서버와 클라이언트 사이에
데이터 이동 즉, 거래가 일어나는 창구다.
??? : 뭔소리임..
한마디로, 서버와 클라이언트가 거래해야 할 정보들이 너무 많기 때문에
각각의 정보를 처리해주는 창구를 만든 것이 API인 것이다.
영화정보를 받고 싶을 때는 '영화정보 API' 창구로 찾아와서 요청해!
영화랭킹을 받고 싶을 때는 '영화랭킹 API' 창구로 찾아와서 요청해!
이런 식이다.
실제 상황으로 비유해보자.
내가 백화점 푸드코트에 갔다고 해보자.
거래 즉, 우동을 시키고 싶으면 어떻게 해야 할까?
- 푸드코트 내부에 있는
- 일식 창구에서
- 우동 결제 번호표를 제시하면
- 우동을 받을 수 있다.
여기서
( 푸드코트 = 서버 )
( 일식창구 = API )
( 우동 결제 번호표 = 가져가기로 한 데이터가 뭔지 )
( 우동 = 가져가기로 한 데이터의 모든 것 ) 이다.
정리하면,
- 푸드코트 (서버위치) 내부에 있는
- 일식 창구 (API주소) 에서
- 우동 결제 번호표 (가져가기로한 데이터) 를 제시하면
- 우동 (가져가기로한 데이터에 대한 모든 것) 을 받을 수 있다.
우리가 흔히 보는 url에 대입해보자.
http://푸드코트/일식창구/우동결제표 (비유)
= http://서버위치/API주소/가져가기로한데이터가뭔지
= http://네이버영화/영화정보받는API창구/리틀포레스트의영화번호
= https://movie.naver.com/movie/bi/mi/basic.naver?code=154449 (실제링크)
리틀포레스트 정보를 받아보고 싶을 때는
서버위치 : movie.naver.com 내부의
API주소(창구) : movie/bi/mi/basic.naver 에 가서
가져가기로한데이터 : code=154449 (리틀포레스트 영화번호) = 리틀포레스트에 관한 정보 줘! 라고 말하면 되는 것이다.
[개발언어 뭐뭐 있는데?]
들어가기 전,
1. 프레임 워크란?
PPT 템플릿같은 블럭이다.
코딩을 0부터 시작하기는 너무 어렵기 때문에
미리 만들어놓은 템플릿(프레임워크) 블럭들을 조합해 사용하는 것이다.
2. 좋은 언어, 나쁜 언어는 없다! 특성만 있을 뿐!
세밀한 묘사를 할때에는 Yellow 말고는 떠오르는 것이 없는 영어보단
노랗다, 샛노랗다, 누르끼리하다 같은 다양한 표현을 가진 한국어가 좋지만,
다양한 문화권 사람들이 모인 자리에선
국제통용어인 영어로 의사소통 하는 것이 유리한 것처럼!
절대적으로 좋은 언어 나쁜 언어는 없다.
상황에 따라 유리한 언어를 취사선택해서 사용하면 되는 것!
(이해하기 쉽도록 간략히 요약해 누락되는 설명들이 있을 수 있음)
(제일 유명한 것 * 표시)
[프론트엔드]
{웹}
HTML : 뼈대
CSS : 꾸미기
Javascript : 모션
위 세개를 엮어주는 프레임워크 : React.js* / Angular / Vue.js
{앱}
Kotlin : 안드로이드 어플
Swift : 아이폰 어플
한번에 개발 : Flutter / React Native
C 언어.. 거의 안씀 (스타트업에서는! 낮은 사양의 컴퓨터가 들어가야하는 티비 등의 전자기기에서는 쓰임)
[백엔드]
수많은 것들 중..
java : 복잡하고 어렵지만, 안정적! 큰 회사에서 선호
프레임워크 : Spring
Node.js : 프론트에서 많이 쓰는 Javascript와 비슷한 문법, 비슷한 문법으로 백엔드까지 할 수 있어 사람부족한 스타트업에서 선호
프레임워크 : Express
Python : 사람의 언어와 비슷해 쉽게 입문가능, 데이터분석 분야에서 선호
프레임워크 : Django / Flask
C++ / Go / TS ..
Php / ASP ..
[데이터분석]
python
SQL
.
Ex)
나는 스타트업을 만들어보고 싶으니까!
웹 프론트 언어 - HTML / CSS / Javascript / 프레임워크 : React.js*
앱 프론트 언어 - React Native
서버 언어 - Node.js / 프레임워크 : Express
를 공부한 풀스택 개발자로 성장하고 싶어!
[HTML과 CSS & 부트스트랩]
웹개발의 기본, HTML과 CSS.
빠르고 예쁜 작업을 도와주는 부트스트랩.
[용어정리]
HTML은 뼈대다.
Ex)
A버튼 옆에 B버튼이 있다.
그 아래 C버튼은 토글로 열린다.
CSS는 꾸미기다.
Ex)
A버튼은 빨간색이고, B버튼은 파란색이다.
그 아래 C버튼의 가로 길이는 20px이다.
부트스트랩은 템플릿이다.
CSS가 적용돼 예쁘게 다듬어진 에셋들을 가져와서 사용할 수 있다.
div는 위계가 있는 그룹이다.
A그룹 안에 속한 B그룹은 A그룹 속성의 영향을 받는다.
A그룹이 이동하면 B그룹도 같이 이동된다.
class는 이름이다.
<div class ="mytitle">해당 그룹의 이름은 "mytitle"이다.
[HTML & CSS기초]
--
HTML은 크게 head와 Body로 나뉘고,
CSS는 head 내에 style섹션을 만들어 css 코드를 작성해 사용한다.
--
style 내에서 클래스를 사용할때는
.클래스명 {...}
형식을 사용한다.
<head>
<title>핵심개념</title>
<style>
.mytitle {
width: 100%;
height: 250px;
}
</style>
</head>
<body>
<div class ="mytitle">
<h1>나는 제목입니다.</h1>
</div>
</body>[기초 꿀팁]
코드짤 때 알아두면 좋은 점!
[자주쓰이는 CSS]
{배경관련}
background-color
background-image
background-size
background-position
{사이즈}
width
height
{폰트}
font-size
font-weight
font-family
color
{간격&모양}
margin
padding
border-radius
{자동정렬}
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
[웹폰트 사용법]
구글 웹폰트에 들어가서 마음에 드는 서체를 고른 후
link 태그를 복사해 > head 사이에
CSS 태그를 복사해 > style 사이에 넣기
[주석달기]
주석의 활용
1. 필요없어진 코드를 삭제하지 않고 비활성화 시키고 싶을 때
2. 코드에 간단한 설명을 붙이고 싶을 때
주석은, 비활성화 된 코드로
개발자 본인 혹은 팀원을 위해서 남겨두는 설명!
command + /
ctrl + /
[CSS파일 분리]
style 속성이 많아져 복잡해진 경우,
HTML 내 style 속성을 한데 모아 CSS 파일로 만들고 HTML과 같은 폴더에 저장한다.
style 부분은 삭제한 다음 이 CSS파일을 html의 head 태그에 불러와 연동시켜 사용한다.
[코드 정리]
코드의 위계가 깔끔하게 정리돼있어야 보기 편하다.
모양이 흐트러진 것 같을 때는 중간 중간 정리해주는 것이 좋다.
{위계정리}
option + command + L
alt + ctrl + L
한번에 선택 영역을 위계에 맞게 정리
{탭}
tab
코드를 오른쪽으로 한 구역 옮기기
shift + tab
코드를 왼쪽으로 한 구역 옮기기
[모바일처리]
width 값을 고정해두지 않고,
최대크기+ 최대크기 전까지 적용될 비율을 설정해두면,
모바일에서 더 자연스럽게 보인다.
width: 95%;
max-width: 500px;
= 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘
