오물오물 개발일기

🙏 useEffect란? class Component의 Lifecycle처럼 functional Component에서 Hook을 사용하여 특정 상황에 작업 처리를 가능하도록 해줍니다. 1. class Component Lifecycle 먼저 상대적으로 잘 사용하지는 않지만 이해를 위해 class Component의 Lifecycle를 알아보겠습니다. 사진에서 추가적으로 React 17.0버전 이후 componentWillMount()와 componentWillUpdate()는 폐기되었습니다. 👀 코드로 알아보기 전체의 파일 구조는 아래와 같습니다. 📂 src>App.js 테스트를 위하여 App.js의 코드는 아래와 같습니다. import { useState } from "react"; import "./..

Variable & Constant (with scope) 어플리케이션을 실행하면 쓸 수 있는 메모리가 할당됩니다. 메모리는 비어있는 박스와 같고 어플리케이션에 제한적으로 할당되어 있습니다. 때문에 변수를 선언하는 작업은 신중히해야합니다. 1. 변수(Variable) 변수란 변경될 수 있는 값을 말합니다. (mutable) 1-1. let let은 ES6부터 생겼습니다. 참고 let food = "sushi"; 위와같이 let을 이용하여 선언하게되면 아래와 같이 됩니다. let food라는 변수를 정의하면 메모리에 값("sushi")이 저장이 되고 그 값을 가르키는 포인터가 생깁니다. let food = "sushi"; food = "curry"; 이때 값을 다시 변경해 준다면 본래의 값은 삭제가 되고 ..

Vanilla JS를 이용한 DropDown Menu 만들기 - 선택창이나 메뉴를 숨길시 필요한 DropDown 형식의 메뉴 - dropdown__toggle 을 클릭시 dropdown__items 에 show라는 클래스가 추가된다. .dropdown__items { max-height: 0; overflow: hidden; border: 1px solid rgba(224, 226, 231, 0.75); border-radius: 3px; transition: max-height 300ms ease-in-out; } .dropdown__items.show { max-height: 100vh; } - dropdown__btn 을 클릭 하면 dropdown__toggle에 선택 메뉴가 표시되고 dropdow..

Vanilla JS를 이용한 Tab Menu 만들기 - 자주 쓰이고 기본적인 TabMenu 만들기이며 기본 원리는 탭에 따른 내용은 display : none -> block .tab-container__item.active { border-bottom: 2px solid #369fff; } - 메뉴가 선택 될 시 active라는 클래스를 추가적으로 가지며 border-bottom에 변화를 준다. .content-container__content { display: none; } .content-container__content.target { display: block; } - 메뉴 선택시 해당하는 content에 target라는 클래스를 추가적으로 가지게 하고 display를 활용하여 표시한다. Ta..

* title 문서의 대제목을 나타낸다. 검색 최적화(SEO)에 제일 중요하다. 키워드를 단순히 나열하는것은 좋지않다. 페이지마다 맞게 변경해준다. 무엇에 관한내용인지 적어준다. hi * link 외부와 리소스를 연결할때 사용한다. rel attribute를 사용하여 요소와의 관계를 명시해두는것이 좋다. * 관련 링크 https://developer.mozilla.org/ko/docs/Web/HTML/Element/link : 외부 리소스 연결 요소 HTML link 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. link는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있 developer.mozilla.org * scri..

* abbr 준말이나 머리글자를 나타낸다. title attribute를 사용하면 전체 뜻이나 설명을 제공할 수 있다. 상당수의 미군들은 외상 후 스트레스 장애 즉, PTSD로 인한 고통이 심각하다. * address 지리적위치, 경도, 위도, 메일, URL, 전화번호, SNS 등의 주소를 나타낼때 사용한다. href attribute를 통해 연락 링크를 걸 수 있다. molly.daleo3o@gmail.com 010-1234-5678 * pre 작성자가 표시한대로 표현이 된다. console.log("hello");

* video & audio 비디오 파일이나 오디오 파일을 실행 시키기위한 태그 , controls, loop attribute를 공통적으로 사용한다. * video 두가지 방식으로 사용할 수 있다. autoplay attribute를 사용가능 하다. 소리가 있는 영상은 autoplay muted를 사용하고 소리가 없는영상은 muted를 사용하지 않아도된다. 죄송합니다. 현재 브라우저에 지원가능한 형식이 없습니다. * audio 이전에는 autuplay attribute를 사용 가능했지만 현재는 불가능하다. 현재 브라우저에 지원하는 오디오 형식이 없습니다. * iframe html 문서안에 또다른 html문서를 embed하고 싶을때 사용한다. 보통은 유튜브 영상등을 embed할때 사용

* table 엑셀과같은 표 형식을 만드는 태그 table, tr, th, td로 구성된다. tr : 테이블 세로줄을 의미한다. th : 타이틀을 명시할때 사용한다. td : 테이블 한셀의 데이터를 명시한다. rowspan과 colspan을 이용하여 셀병합을 한다. scope attribute를 사용하여 row, col value를 사용하여 명확히 명시 할 수 있다. , 월 화 수 목 금 1교시 HTML CSS Web MySQL node.js 2교시 HTML 3교시 Web의 역사 Web의 역사 점심시간 4교시 CSS node.js 컴퓨터 공학이론 Javascript Javascript 5교시 MySQL 컴퓨터 공학이론 6교시

* button 버튼기능을 하는 태그 submit : 폼양식을 제출하기 위한 type button : 단순 버튼의 기능을 하며 보통 Javascript와 연동을 하여 event를 발생시킨다. reset : 입력값을 초기화하기 위한 type * 과 똑같은 기능을 한다. 하지만 열고닫는 태그사이에 이미지등의 커스텀적인 부분이 좀더 가능하다. 물론 input또한 가능함으로 어느 태그를 쓰느냐의 차이는 없는듯 하다.

* textarea 많은 내용의 텍스트를 받기 위해 사용된다. (글 제목, 본문내용 등등) name, placeholder 등의 attribute를 사용 할 수 있다. rows(줄) cols(칸) attribute를 사용하여 사이즈를 수정 할 수 있으나 css에서 대부분 변경을 한다.