실무에 바로 투입 가능한 개발자. 신입같지 않은 신입 ?
본인 스스로 업무를 이끌어 갈 수 있는 개발자 ?
회사의 코드를 보고, 유지보수 할 수 있는 능력자 ?
잘 키울 수 있는 개발자
-> 실력보다 질문을 어떻게 하는 사람,
-> 커뮤니케이션이 원활한 사람
-> 항상 자신의 발전에 투자를 하는 사람.
길동과 수지에게 A라는 업무를 부여하였다.
길동은 옳지 않은 방향으로 200%를 해옴
반면에 수지는 올바른 방향으로 80%를 해왔다.
누가 더 잘한 개발자인가??
두 개발자 모두 사수에게 질문을 했으면 올바른 방향으로 100%를 할 수 있지 않았을까?? 소통의 중요성을 알려주고 싶었다.
이러한 길동과 같은 방향이 되지 않도록 꾸준히 소통하고 질문하기
Web 하면 생각나는 것
Http 통신과 Https 통신의 차이점?
-> Https 통신에 조안 인증서를 더한 것이 Https이다.
URL이 무엇인가, URL과 IP의 차이점은?
-> 홈페이지의 주소이며 정체성, 정보등을 가지고 있으며
IP는 숫자로만 이루어짐, URL은 사용자에게 맞춰 이를 변환해 줌
크롬, 파이어폭스와 같은 브라우저는 무엇을 하는가?
-> 개발자들의 소스, 웹 리소스를 번역하여 사용자에게 보여주는 매개체
반응형 웹이란?
-> 사용자에게 반응하여 다른 화면, 페이지를 뛰어주는 웹
WWW, World Wide Web 과 인터넷의 비교
Html, Js
-> hyper text markeup language 마크업으로 둘러 쌓인 웹 페이지
-> Js 서버, 게임, 앱 등에게 다방면 사용
웹에 대한 환경을 잘 모른다면 웹에 친화적인 코드를 짤 수 있을까? 웹을 더 공부하면서 프로그래머가 되어보자.
웹은 과도기가 빨리온다. 라이브러리도 많고 다양하다. 이러한 데 부딪혀 과도기가 왔을 때 이를 어떻게 빠져나갈지 같이 이야기해 보면 좋을 듯
컴퓨터, 웹이든 뭐 로직이든 이 모든 것은 다 사람들의 사회 세계에서의 추상화를 통해 컴퓨터에 적용한 것이라고 생각.
인간의 조직, 사회를 경험하지 않은 인공지능이 이러한 일이 가능할까?
코더는 인공지능이 대체 할 수 있어도, 프로그래머는 이 인공지능이 대체하기 힘들 것 같다.
웹 페이지는 일종의 문서(document)이며 DOM 은 이러한 웹페이지 HTML에 접근하기 위한 일종의 인터페이스이다.
DOM은 다음과 같은 오브젝트들의 트리구조로 이루어져 있으며 이러한 Document Object는 JS에 의해 수정될 수 있다.
가장 많이 사용되는 28가지 태그 목록
<!DOCTYPE html>은 웹 브라우저에게 페이지를 어떻게 해석해야 하는지 알려준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
head : 웹 페이지의 정보, 제목, 외부파일 등을 넣는다.
body : 브라우저에 실질적으로 표시되는 몸통부분
title : 페이지의 제목을 지정한다.
meta : 문자 인코딩 및 검색 키워드, 웹페이지에 대한 설명, 저자, redirect, viewport 설정 등이 가능하다.
div : HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용 네모네모 박스로 구성되며 줄바꿈이 진행됨으로 주의
span : 줄바꿈이 진행되지 않으며, 인라인 요소(inline-element)들을 하나로 묶을 때 사용
a : anchor, 외부 웹 페이지나 외부 사이트 연결
-> 새 창, 새 탭에서 열지, 링크의 툴팁, 같은 페이지 내 이동도 가능
script : 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의할 때 사용
async 속성 명시 : 브라우저가 페이지를 파싱하는 동안 스크립트 실행
defer 속성 명시 : 브라우저가 페이지 파싱을 다 끝내면 스크립트 실행
둘다 없음 : 페이지를 파싱하기 전에 스크립트를 가져와 실행
img : 이미지 삽입태그, 인라인 태그임으로 줄바꿈 실행 X
p : 문단을 정의하는 태그 줄바꿈이 실행된다.
ul, ol : unordered list : 순서 없는 List, ordered list 순서 있는 list를 정의할 때 사용 안의 내용은 li태그로 사용한다.
style : HTML 문서의 스타일 정보를 정의한다. head태그 내에 사용되어야 함
br : 줄바꿈 태그, 이는 닫는 태그가 없는 self-closing 태그이다.
self-closing tag : <br> <img> <meta> <link> <input> <hr> 등등
h(숫자) : 제목을 정의하는 태그, h1이 가장 크다.
input : form의 요소 중 하나로 사용자가 정보를 입력하는 부분을 만들 때 사용
-> 힌트 표시, autofocus, maxLength, 필수 입력 필드 지정 등 여러 속성 적용 가능
form : 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용한다.
form내에는
<button>
<fieldset>
<input>
<label>
<option>
<optgroup>
<select>
<textarea>
등의 태그가 들어갈 수 있으며, method(get,post), name, action, target 등을 설정할 수 있다.
iframe : 내부 페이지 안에 외부 페이지 삽입하는 태그
nav : 문서 연결 링크 : 같은 사이트 내의 페이지나 다른 사이트의 페이지로 연결하는 링크를 의미한다.
strong : 중요 내용을 강조하기위해 진하게 표시한다.
footer : 제작자의 정보 및 저작권 정보를 표시하는 섹션 or 푸터(footer)을 정의할 때 사용
header : 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함하는 섹션 생성
button : form 요소 중 하나로 form 전송 가능
브라우저별로 <button> 요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, <button> 요소에는 언제나 type 속성값을 명시하는 것이 좋다.
<button type="button" onclick="alert('Hello World!')">클릭해 보세요!</button>
flex 시리즈
flex-direction
flex 아이템 방향
flex-wrap
다음 화면으로 넘어갈지 안넘어갈지
justify-content
align items
align contents
flex-grow
flex-container 요소 내부에서 할당 가능한 공간의 정도
flex-shrink
flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때
flex-shrink 값에 비례하여 요소 크기 축소
Grid Layout
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
/* 1이상 3미만 즉 1~2를 차지하겠다. */
grid-column: 1 / 3;
/* 첫번쨰 row로 설정 */
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
div{
border: 1px solid black;
}
또는
.container {
grid-template-areas:
"header header header"
" a main b "
" . . . "
"footer footer footer";
}
와 같이 임의로 템플릿 지정도 가능
const and let
- const는 변경되지 않으며 재할당 불가. 새로운 값을 제공하려고 하면 오류가 반환됩니다.
- let은 새로운 값을 가질 수도 있고 재할당 가능
Arrow functions(화살표 함수)
만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
return문에서 소괄호는 사용가능하다.
// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;
let str3 = `Hello ${str1} ${str2}`;
const myFunc = (name, age = 22) => {
return `안녕 ${name} 너의 나이는 ${age}살 이니?`;
};
console.log(myFunc1('영희'));// 출력 => 안녕 영희 너의 나이는 22살 이니?
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30,40,50]
// 나머지 연산자 rest_a 값 확인
var { a1, a2, ...rest_a } = { a1 : 10, a2 : 20, a3 : 30, a4 : 40 };
console.log(a1); // 10
console.log(a2); // 20
console.log(rest_a); // { a3: 30, a4: 40 }
// const, let을 안쓰고 변수할당하면 ()안에 넣어 줘야함.
({a,b,...rest} = {a:10, b:20, c:30, d:40});
// ./detailComponent In ES6
export default function detail(name, age) {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
// Other File
import detail from './detailComponent';
console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!