좋은 개발자란??, html의 DOM, HTML 필수 태그, CSS 필수 속성, ES6 문법

Falco·2022년 6월 6일
CSSRC7WEBhtmljs
0

신입 개발자로써 연봉을 6~7천을 받는 개발자는 어떤 개발자인가??

  1. 실무에 바로 투입 가능한 개발자. 신입같지 않은 신입 ?

  2. 본인 스스로 업무를 이끌어 갈 수 있는 개발자 ?

  3. 회사의 코드를 보고, 유지보수 할 수 있는 능력자 ?

  4. 잘 키울 수 있는 개발자
    -> 실력보다 질문을 어떻게 하는 사람,
    -> 커뮤니케이션이 원활한 사람
    -> 항상 자신의 발전에 투자를 하는 사람.

길동 vs 수지

길동과 수지에게 A라는 업무를 부여하였다.

길동은 옳지 않은 방향으로 200%를 해옴
반면에 수지는 올바른 방향으로 80%를 해왔다.

누가 더 잘한 개발자인가??

두 개발자 모두 사수에게 질문을 했으면 올바른 방향으로 100%를 할 수 있지 않았을까?? 소통의 중요성을 알려주고 싶었다.

이러한 길동과 같은 방향이 되지 않도록 꾸준히 소통하고 질문하기

Web이란 무엇인가??

Web 하면 생각나는 것

  • Http 통신과 Https 통신의 차이점?
    -> Https 통신에 조안 인증서를 더한 것이 Https이다.

  • URL이 무엇인가, URL과 IP의 차이점은?
    -> 홈페이지의 주소이며 정체성, 정보등을 가지고 있으며
    IP는 숫자로만 이루어짐, URL은 사용자에게 맞춰 이를 변환해 줌

  • 크롬, 파이어폭스와 같은 브라우저는 무엇을 하는가?
    -> 개발자들의 소스, 웹 리소스를 번역하여 사용자에게 보여주는 매개체

  • 반응형 웹이란?
    -> 사용자에게 반응하여 다른 화면, 페이지를 뛰어주는 웹

  • WWW, World Wide Web 과 인터넷의 비교

  • Html, Js
    -> hyper text markeup language 마크업으로 둘러 쌓인 웹 페이지
    -> Js 서버, 게임, 앱 등에게 다방면 사용

웹에 대한 환경을 잘 모른다면 웹에 친화적인 코드를 짤 수 있을까? 웹을 더 공부하면서 프로그래머가 되어보자.

Why ? 웹을 선택하게 되었나요?

  1. UI 꾸미기가 너무 재밌어서
  2. 기본적인 것이 좋아서 -> 개발자의 수요 풀이 넓음
  3. JS 확장성, 웹의 접근성
  4. 입문용으로 좋은 것 같아서
  5. 제대로된 frontend를 느끼고 싶어서

웹은 과도기가 빨리온다. 라이브러리도 많고 다양하다. 이러한 데 부딪혀 과도기가 왔을 때 이를 어떻게 빠져나갈지 같이 이야기해 보면 좋을 듯

인공지능이 개발을 대체할 수 있을까?

컴퓨터, 웹이든 뭐 로직이든 이 모든 것은 다 사람들의 사회 세계에서의 추상화를 통해 컴퓨터에 적용한 것이라고 생각.

인간의 조직, 사회를 경험하지 않은 인공지능이 이러한 일이 가능할까?

코더는 인공지능이 대체 할 수 있어도, 프로그래머는 이 인공지능이 대체하기 힘들 것 같다.

html의 DOM 이란 무엇인가 ?

  • DOM : Document Object Model

웹 페이지는 일종의 문서(document)이며 DOM 은 이러한 웹페이지 HTML에 접근하기 위한 일종의 인터페이스이다.

DOM은 다음과 같은 오브젝트들의 트리구조로 이루어져 있으며 이러한 Document Object는 JS에 의해 수정될 수 있다.

HTML 전체 적인 구조와 필수 태그에 대해서 학습하기

가장 많이 사용되는 28가지 태그 목록

  • html : HTML의 시작과 끝을 알리는 태그

<!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 속성 명시 : 브라우저가 페이지 파싱을 다 끝내면 스크립트 실행
    둘다 없음 : 페이지를 파싱하기 전에 스크립트를 가져와 실행

  • link : 외부 파일을 연결할 때 사용 (주로 CSS) 이는 head안에서 실행되야함

  • 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>
  • i : 기울임 태그

CSS 필수 속성 학습하기

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";
}

와 같이 임의로 템플릿 지정도 가능

JavaScript의 최신문법 ES6 문법에 대해서 학습하기

  • const and let
    - const는 변경되지 않으며 재할당 불가. 새로운 값을 제공하려고 하면 오류가 반환됩니다.
    - let은 새로운 값을 가질 수도 있고 재할당 가능

  • Arrow functions(화살표 함수)
    만약 함수의 본문(body)에 return만 있는 경우 화살표 함수는 return과 {}를 생략할 수 있다. 단, 같이 생략해야한다.
    return문에서 소괄호는 사용가능하다.

// 함수 표현식 - 화살표 함수 (생략형)
const plusFn = (a, b) => a + b;
  • Template Literals(템플릿 리터럴)
    다음과 같이 변수 표현 가능
let str3 = `Hello ${str1} ${str2}`;
  • Default parameters(기본 매개 변수)지정 가능
    기존에는 함수의 매개변수에 초기화를 하려면 내부 작업이 필요했으나, ES6 에서는 필요 없어졌다.
const myFunc = (name, age = 22) => {
	return `안녕 ${name} 너의 나이는 ${age}살 이니?`; 
};

console.log(myFunc1('영희'));// 출력 => 안녕 영희 너의 나이는 22살 이니?
  • 비구조 할당
    배열 or 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 javascript 표현식
    좀 더 사용해 보면서 익숙해져야 할듯
[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});
  • Import and export(가져오기 및 내보내기)
    export를 사용하면 다른 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있습니다. 우리는 그 모듈을 우리의 컴포넌트에 사용하기 위해 가져오기 import를 사용합니다.
// ./detailComponent In ES6 
export default function detail(name, age) {
	return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}

// Other File
import detail from './detailComponent';
console.log(detail('영희', 20));
// 출력 => 안녕 영희, 너의 나이는 20살 이다!
profile
Falco
강단있는 개발자가 되기위하여
이전 포스트

UMC_WEB_라우팅, Node.js, Express

다음 포스트

[Android/Kotlin] Paging3, PagingDataAdapter의 Item에 상태 적용하는 방법에 대해

0개의 댓글