Brezel1910 https://velog.io/ 흐르는 대로 설명하기 && 틀리면 훈수 둬 주세요... 😊 Fri, 17 Mar 2023 02:38:23 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Brezel1910 https://velog.velcdn.com/images/pretzel-1910/profile/7e5bcc4c-844d-4481-aca7-0ffade1b5827/image.jpg https://velog.io/ Copyright (C) 2019. Brezel1910. All rights reserved. <![CDATA[[Javascript] Hoisting]]> https://velog.io/@pretzel-1910/Javascript-Hoisting https://velog.io/@pretzel-1910/Javascript-Hoisting Fri, 17 Mar 2023 02:38:23 GMT Hoisting
  • 변수가 선언된 시점보다 앞에서 사용되는 현상.
  • 함수는 생성 단계에서 전체가 저장되므로 호출 가능.

    var

    • var는 생성 단계에서 undefined로 초기화(initialization);

      console.log(someFunc());
// undefined

var x =10;

console.log(someFunc()); // 10

    function someFunc(){

     return x;

    }

    ### const, let
- const, let 변수는 생성 단계에서 초기화되지 않는다.
```js
 // ReferenceError : Cannot access 'a'a
 // before initialization
 console.log(someFunc());

 let x = 10

 console.log(someFunc()); // 10

function someFunc(){
    return x;
}

    TDZ (Temporal Dead Zone)

  • 선언문 이전에 접근 시 ReferenceError
  • 빨간 박스가 TDZ 구역이다.
  • 따라서 let, const는 hoisting이 발생하지 않는다.
]]> <![CDATA[Event 🎊]]> https://velog.io/@pretzel-1910/Event https://velog.io/@pretzel-1910/Event Wed, 08 Mar 2023 07:38:55 GMT Event (이벤트) ?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 JavaScript를 통해 발생한 이벤트에 특정 동작을 수행할 수 있다.

ex) hover, click ...

Event Type (이벤트 타입)

발생한 이벤트의 종류 ex) 폼, 키보드, 마우스, HTML DOM, WIndow 객체 등..)

<!-- click 이벤트 예시 -->
<span onclick="changeText(this)">클릭해주세요 click here</p>

<script>
  function changeText(element){
      element.innerHTML = " 바꿀 내용 입력 !";
  }
</script>

Event Handler(이벤트 핸들러)

이벤트가 발생했을 때 처리를 담당하는 함수 지정된 이벤트 발생 시, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행한다 !

// HTML이 load될때 발생 (실행)
window.onload = function() {
     var txt = document.getElementById("text");
      text.innerHTML = "HTML 문서가 로드되었습니다."
}
]]> <![CDATA[DOM ? 🤔]]> https://velog.io/@pretzel-1910/DOM https://velog.io/@pretzel-1910/DOM Wed, 08 Mar 2023 03:00:28 GMT DOM ( Document Object Model )
  • 문서 객체 모델
  • 객체 지향 모델로 구조화된 문서를 표현하는 형식 (HTML, XML 문서 등...)
  • 프로그래밍 언어(JS)가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 도와준다 !

HTML(문서), XML DOM

  • HTML, XML을 조작하고 접근하는 표준화된 방법
  • 모든 요소는 HTML, XML DOM을 통해 접근 가능

Document

  1. Document 객체
    • 웹 페이지를 의미
    • HTML 요소애 접근할 때는 꼭! Document 객체부터 시작
  2. Document 메소드
    • 요소의 선택 : .getElementBy__ ( Id, ClassName, Name, ... )
    • 요소의 생성 : .createElement() , .write()
    • 이벤트 핸들러 추가 .onclick = function( .. ) { ... }
    • ++ .querySelectorAll( .. )
      • 해당 선택자로 선택되는 요소를 모두 선택
    • ++ .querySelector( .. )
      • ... 선택되는 요소를 1개 선택

DOM 트리(DOM tree)

Node

  • HTML DOM에서 정보를 저장하는 계층적 단위

Node Tree

  • Node들의 집합으로, Node 간의 관계를 나타냄

JavaScript에서는 HTML DOM을 통해 Node Tree에 포함된 모든 Node에 접근 가능 !

Node 관계

(루트 노드)root Node = HTML (자식 노드)child Node = head, body (형제 노드)sibling Node = head, body (부모 노드)parent Node = HTML

Node 종류

  • 문서 노드(document node)
    • HTML 문서 전체를 나타내는 노드
  • 요소 노드(element node)
    • 모든 HTML 요소는 요소 노드다. 속성 노드를 가질 수 있는 유일한 노드 !
  • 주석 노드(comment node)
  • 속성 노드(attribute node)
    • 모든 요소의 속성은 속성 노드다. 하지만 해당 요소 노드의 자식 노드 에는 포함하지 않음 !
  • 텍스트 노드(text node)

JavaScript & DOM

  1. DOM의 요소의 선택

       // HTML <h1> 요소 선택
   var selectedItme = document.getElementsByTagName("h1");
   // id가 "id"인 요소 선택
   var selectedItme = document.getElementById("id");
   // 클래스가 "odd"인 요소 선택
   var selectedItme = document.getElementsByClassName("odd");
   // name 속성값이 "first"인 요소 선택
   var selectedItme = document.getElementsByName("first");

  2. DOM요소의 스타일 변경

          var selected = document.getElementByID("id");
   // 선택된 요소의 text 색상 변경
   selected.style.color = "red";

  3. DOM요소의 내용 변경

          var selected = document.getElementByID("text");
   // 선택된 요소의 내용 변경
   selected.innerHTML = "변경할 내용을 작성";

Node 값 접근

JavaScript에서 HTML DOM을 통해 모든 노드에 접근할 수 있다.

//1.
document.childNodes[0].nodeName;  // 자식 노드 중에서 첫 번째 노드의 이름을 선택
//2.
let apple = document.getElementById('apple');
apple.firstChild.nodeValue;  // 첫 번째 자식 노드의 값을 선택;
//2.
let apple = document.getElementById('apple').childNodes[0]; // 자식 노드 중에서 첫 번째 노드의 타입을 선택

apple.nodeType; 
// 대표적인 HTML 노드별 nodeType 프로퍼티 값
요소 노드:1
속성 노드: 2
텍스트 노드: 3
주석 노드: 8
문서 노드: 9
]]> <![CDATA[레이아웃에 영향을 미치는 속성]]> https://velog.io/@pretzel-1910/%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%97%90-%EC%98%81%ED%96%A5%EC%9D%84-%EB%AF%B8%EC%B9%98%EB%8A%94-%EC%86%8D%EC%84%B1 https://velog.io/@pretzel-1910/%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%97%90-%EC%98%81%ED%96%A5%EC%9D%84-%EB%AF%B8%EC%B9%98%EB%8A%94-%EC%86%8D%EC%84%B1 Wed, 01 Mar 2023 09:01:55 GMT 🖥 display
  • Block과 Inline 요소의 성격을 바꿀 때 사용
  • inline-block을 사용하면 두 요소의 성격을 가짐
    h1 { display : inline-block;}

🌊 float

  • 왼쪽 정렬, 오른쪽 정렬
  • 선택자를 띄워 새로운 레이어 층을 만듬
  • 레이어가 겹치지않게 정렬하고싶으면 연속으로 입력
    .left { float : left;}
.right { float : right;}

🫧 clear

  • float 속성을 제어할때
  • float을 사용한 태그 다음으로 오는 태그에 clear 속성 적용해야함
      .className p { clear : both;}
  /* 전에 사용된 float : left 또는 right; 기능을 끔  */

⭐️ 브라우저와 공간 공백 제거 ⭐️

  • html, body 태그의 margin, padding 값을 0으로 초기화해줌
  • 이유는 디자인이나 위치, 모양 잡기 편리하게 할려고 사용됨!
]]> <![CDATA[HTML, CSS ?]]> https://velog.io/@pretzel-1910/HTML-CSS https://velog.io/@pretzel-1910/HTML-CSS Wed, 01 Mar 2023 07:56:14 GMT 📄 HTML
  • Hyper Text Markup Language
  • Hyper Text Markup Language
    • 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어
      • ex) 배너, 로그인, 내비게이션 ...
<!DOCTYPE html> 
- HTML5라는 문서를 선언하는 태그

<html> … </html>
- HTML문서의 시작과 끝을 의미

<head> … </head>
- 웹사이트의 간단한 요약 정보를 담는 영역
- 웹에 노출되지 않는 정보

<body> … </body>
- 웹사이트에서 눈에 보이는 정보를 담는 영역

<meta charset=“UTF-8”>
- 모든 문자를 표현하는 유니코드 UTF-8

<title> … </title>
- 웹사이트 탭에 나타내는 제목 태그


<img src =“test.jpg” alt=“로고사진”>
- 이미지 삽입
- src 속성 : 이미지 파일 경로
- alt 속성 : 웹사이트가 이미지를 출력하지 못했을 경우, 텍스트 정보로 대체


<h1> … </h1>
- 가장 중요한 정보를 담으므로, html문서당 한 번만 사용

<p> … </p>
- Paragraph의 약자 (문단)
- 본문 내용을 표현
- 웹사이트의 중요 정보를 담는 태그
- 긴 문장, 문단을 넣을때

<ul> … </ul>
- Unordered list의 약자
- 순서가 없는 리스트 생성
- 메뉴 버튼을 만들 때 사용



## 구조를 잡을 때 사용하는 태그
- header 웹사이트의 머리글을 담는 공간
- nav 메뉴 버튼을 담는공간 ul,li,a 함께 사용

🎨 CSS

  • Cascading Style Sheet
  • 문서의 레이아웃, 스타일 정의
  • HTML로 작성된 정보를 꾸며주는 언어

CSS 연동 방법 3가지

1. Inline Style Sheet(인라인 스타일 적용)
<h1 style="color : red;"> title </h1>


2. Internal Style Sheet (인터널 스타일 적용)
<head>
    <style>
        h1{ color : red; }
    </style>
</head>

3. External Style Sheet
  - .css 파일을 만들어 link태그로 연결방식
  -- html, css 분리하여 관리하기때문에 가독성이 높고 유지보수가 쉬움
  <head>
      <link rel="stylesheet" src="index.css"/>
  </head>

⭐️ 웹사이트 제작시 고려할 사항 ⭐️

  • ** 웹 표준성 : 공식 표준이나 기술적 규격 **
  • ** 웹 접근성 : 장애의 여부와 상관 없이 모두가 웹사이트를 이용할수 있게 하는 방식 **
  • ** 크로스 브라우징 : 모든 브라우저 또는 기기에서 사이트가 작동하도록 하는 기법 **
]]> <![CDATA[🏁 엘리스 SW 엔지니어 트랙 | 지원]]> https://velog.io/@pretzel-1910/eliceTrack https://velog.io/@pretzel-1910/eliceTrack Wed, 08 Feb 2023 08:43:17 GMT 👓 대상 및 소개

"경력으로 가기 위한 경험"을 원하는 개발자 취업 준비생을 위한 교육입니다. 현업에서 사용하는 기술 스택에 집중하여 배우고, 현업 개발팀 방식 그대로 실무 프로젝트를 완수하는 경험

🚕 교육 대상

  • 내일배움카드 발급이 가능하며, 6개월간 주 5일동안 매일 7시간 학습이 가능한 사람 !

    🕰 접수 기간

  • 2023년 1월 9일 ~ 2023년 2월 12일

    📅 교육 기간

  • 2023년 02월 27일 ~ 2023년 6월 16일 (16주)

    👥 모집 인원

  • 200명 (아마 변동될수도?..)

✏️ Six - step with Elice

1. 매일 함께하는 이론 강의와 실습

  • 이론 강의와 실습 문제를 통해 지식과 역량을 꾸준히 발전

    2. 주간 테스트

  • 매주 1번 테스트를 통해 예습, 복습

    3. 실무 팀 프로젝트

  • 두 번의 팀 프로젝트를 수행하여 실무에 가까운 경험 및 협업 역량 습득

    4. 팀 스터디

  • 함께하는 스터디를 통해 알고리즘 역량 강화, 전산 이론 학습 등 내게 맞는 학습 목표 달성

    5. 커리어 빌드업 프로그램

  • 진로 탐색부터 설계, 기업 탐색, 포폴 준비 등

    6. 리크루팅 위크

  • 16주간의 결과물을 발표하고 직접 기업에 지원!

👥 이런 분이라면 지원해보시는 걸 추천!

  • 16주간 밀도있게 배우고 Front-End 개발자로 일하고싶은분 !
  • 협업과 커뮤니케이션을 잘하는 개발자로 성장하고 싶은 분 !
  • 수료 후 개발자 커뮤니티에서 네트워킹하며 성장하고 싶은 분 !

--> https://elice.training/track/sw <--

]]> <![CDATA[[React] props.children 사용하기]]> https://velog.io/@pretzel-1910/React-props.children https://velog.io/@pretzel-1910/React-props.children Mon, 06 Feb 2023 08:42:20 GMT

기존 ExpenseItem

변경 후 ExpenseItem

🪡 ExpenseItem 설명

  1. Card 컴포넌트를 만들어 미리 정의된 CSS 설정
  2. 사용자 지정 컴포넌트(Expensedate)를 Card 컴포넌트로 감싸 사용할 수없음
  3. <div> --> <Card>

Card.js

Card 설명 (with.children)

  1. children은 예약어이다.

  2. 기존 className은 컴포넌트로 변경되면서 클래스가 아닌 속성으로 변경됨. 따라서 전달받은 props의 className 을 상수 classes생성 <div className={classes}> ---> <div className="card expense-item">

  3. 사용자 지정컴포넌트인 Card 사이에 있는 컨텐츠 --> children

     <Card className="expense-item">
   /* children */
     <ExpenseDate date={props.date} />
     <div className="expense-item__description">
       <h2>{props.title}</h2>
       <div className="expense-item__price">{props.amount}원</div>
     </div>
   /* children */
 </Card>

  4. CSS파일에서 일부 중복되는 스타일을 추출하여 코드 중복을 피할 수 있음.

  5. 깔끔하고 가독성 좋은 코드 작성 가능.

]]> <![CDATA[[React] props통해 데이터 전달하기]]> https://velog.io/@pretzel-1910/ReactUseprops https://velog.io/@pretzel-1910/ReactUseprops Mon, 06 Feb 2023 07:40:07 GMT

App.js

✏️ App 설명

  1. 상수 expense의 배열 생성
  2. Expenses 컴포넌트에 전달할 속성명 items , 값 설정 expense

Expenses.js

🔑 Expenses 설명

  1. 함수 Expenses에 전달받은 props

  2. props 객체는 key : value로 이루어짐

  3. props.items[0].title 은 props를 통해 items속성의 0번째 배열의 key값인 title 추출

  4. ExpenseItem 컴포넌트의 속성명 title에 {props.items[0].title}로 값 설정 후, 전달

    ExpenseItem.js

🧾 ExpensesItem 설명

  1. props 파라미터로 전달받음
  2. 해당 props의 key값을 props.date, props.title, props.amount로 출력
  3. date 속성명으로 ExpenseDate 컴포넌트에 전달

ExpenseDate

📅 ExpenseDate 설명

  1. ExpensesItem에서 전달받은 props의 date를 month, day, year로 상수 선언.
  2. toLocaleString 매서드를 통해 월, 일, 년 값을 문자열로 반환
  3. 상수 month, day, year 전달하여 출력
]]> <![CDATA[🏁엘리스 SW 엔지니어 트랙 | 지원]]> https://velog.io/@pretzel-1910/SwTrack https://velog.io/@pretzel-1910/SwTrack Mon, 06 Feb 2023 06:49:07 GMT 👓 대상 및 소개

"경력으로 가기 위한 경험"을 원하는 개발자 취업 준비생을 위한 교육입니다. 현업에서 사용하는 기술 스택에 집중하여 배우고, 현업 개발팀 방식 그대로 실무 프로젝트를 완수하는 경험

🚕 교육 대상

  • 내일배움카드 발급이 가능하며, 6개월간 주 5일동안 매일 7시간 학습이 가능한 사람 !

    🕰 접수 기간

  • 2023년 1월 9일 ~ 2023년 2월 12일

    📅 교육 기간

  • 2023년 02월 27일 ~ 2023년 6월 16일 (16주)

    👥 모집 인원

  • 200명 (아마 변동될수도?..)

✏️ Six - step with Elice

1. 매일 함께하는 이론 강의와 실습

  • 이론 강의와 실습 문제를 통해 지식과 역량을 꾸준히 발전

    2. 주간 테스트

  • 매주 1번 테스트를 통해 예습, 복습

    3. 실무 팀 프로젝트

  • 두 번의 팀 프로젝트를 수행하여 실무에 가까운 경험 및 협업 역량 습득

    4. 팀 스터디

  • 함께하는 스터디를 통해 알고리즘 역량 강화, 전산 이론 학습 등 내게 맞는 학습 목표 달성

    5. 커리어 빌드업 프로그램

  • 진로 탐색부터 설계, 기업 탐색, 포폴 준비 등

    6. 리크루팅 위크

  • 16주간의 결과물을 발표하고 직접 기업에 지원!

👥 이런 분이라면 지원해보시는 걸 추천!

  • 16주간 밀도있게 배우고 Front-End 개발자로 일하고싶은분!
  • 협업과 커뮤니케이션을 잘하는 개발자로 성장하고 싶은 분!
  • 수료 후 개발자 커뮤니티에서 네트워킹하며 성장하고 싶은 분!
]]>