emayom.log

구구절절 더보기 노마드코더 바닐라 JS로 크롬 앱 만들기 강의를 진행하다가 ,,, 등록한 todo-list에서 삭제 버튼을 누르면 해당 리스트(li)가 삭제가 되도록 버튼에 addEventListener("click", deleteTodo)를 등록했다. 그런데 엔터키를 누르자 todo-list가 등록되지 않고 다른 addEventLisenter의 click 이벤트로 인식해 자꾸 첫 번째 todo-list에서 deleteTodo()를 실행했다 ㅠㅠㅠ 혹시나 해서 event.type === "click"일 경우에만 삭제하도록 추가해봤는데 그대로였다 ㅠㅠ 다음은 todo-list 등록 이벤트를 "submit"이 아닌 "keydown"으로 수정하고, event.keyCode === 13 일 때만 실행하도록 했더..

태그는 내에 혹은 최하단에 위치할 수 도 있지만 보통 태그의 최하단에 를 위치하는 것이 좋다고 한다. 그렇다면 왜일까? 1. 첫번째 이유를 알아보기 전에 우선 브라우저 동작 과정을 간단하게 다시 한 번 상기시켜보자. HTML parser -> DOM tree CSS parser -> CSSOM DOM + CSSOM => Render tree Layout Paint 일련의 과정 중, HTML 파싱 과정에서 script 요소를 만나게 되면 ? HTML 파서는 파싱을 멈추고 자바스크립트 코드를 로드 후 파싱이 완료되고 나서야 다시 HTML 파싱을 재개한다. => 이렇게 중단되며 화면 표시에 지연이 생기는 것을 방지하기 위해 body 최하단에 작성한다. 2. 두번째 이유는 자바스크립트 코드 내에서 DOM을 조작..

오늘은 리액트가 무엇이고 왜 리액트인지를 알아보는 시간을 가지려고한다. 👨🏻‍🎨 리액트 == 자바스크립트 라이브러리 React, Angular, Vue 알지 못하더라도 셋 중 하나 이상은 꼭 들어봤을 것이다. 얘네들을 자바스크립트 라이브러리 / 프레임워크라고 부르는데 자바스크립트로 쉽고 편리하게 개발할 수 있도록 도와주는 공통 목적을 가지고 있다. 라이브러리 vs 프레임 워크 여기서 라이브러리와 프레임워크의 차이점에 대해 간단히 짚고 넘어가자면 라이브러리 : 개발의 편의를 위한 도구의 모음, '공구'에 비유할 수 있고 프레임워크 : 기반 구조까지 짜여져있는 거기에 다양한 도구들이 모여있는 공장에 비유할 수 있다. 이 중 리액트는 사용자에게 선택의 여지가 주어지는 자유도가 높은 라이브러리의 성격을 띄고 있..

처음 리셋을 하지 않은 상태에서 스타일을 적용했을 때 생각과는 조금은 다르게 적용이 되었다. 뭔가 시작점이 (0,0)이 아닌 느낌! 오늘은 우리가 CSS의 디폴트 값을 초기화, 무효화할 때 유용하게 사용할 수 있는 사이트를 몇 가지 적어보려고 한다. 왜 사용할까? #크로스브라우징 우리가 적용한 그대로 반영되지않는 이유는 브라우저마다 기본 값으로 설정된 여백, 들여 쓰기 등의 값이 존재하기 때문이다! 즉, 같은 스타일 요소라도 브라우저에 따라서 조금씩 다르게 보일 수 있다는 이야기이다. 그래서 다른 브라우저를 사용하더라도 동일하게 보이도록 초기화나 재설정 과정을 거치는 것이다. 아래는 CSS Reset과 CSS Normalize의 차이점을 그림으로 쉽게 설명해준다. 뭐가 뭔지 헷갈린다면 한번 보는 것을 추..

오늘은 어제 나눠서 만들어 본 발가락 담군 그리드를 수정하려고 한다. 우선 아래와 같은 배경 그리드를 만들고, 어제와 비슷한 가로 그리드 아이템들을 위에 배치해보자! 컨테이너(Container)의 사이즈는 1200px, 거터(Gutter)는 8px, 8단(Column의 그리드 글로는 헷갈릴 수 있으니 완성된 모습을 먼저 확인해보자! 8 Column Grid 8-column-grid.emayom.repl.co 큰 구조를 먼저 잡아보자. ① 컬럼과 거터를 보여주기 위한 배경 그리드를 바닥에 깔고 ② 그 위에 아이템들을 보여주기 위해 전체 컨테이너로 우선 묶어주고 시작했다! (이유는 뒷 부분에 가면 알게된다 🤔) 우선 ① 부터 해결하자. 8개의 칼럼과 거터를 보여줄 배경 그리드를 제작하기위해 col_conta..

이전에 태그의 유형과 속성에 대해 알아봤다. 오늘은 text 타입, password 타입, submit 타입으로 간단한 로그인 폼을 만들어 보자. LOGIN TO YOUR ACCOUNT LoginForm.emayom.repl.co 'Login Form'으로 구글링을 해보면 다양한 시안을 찾아볼 수 있다! input의 요소들을 비운 채 제출할 수 없도록 하는 것 => required / HTML 자동으로 포커스를 알려주는 것 => autofocus / HTML 포커스가 될 경우에 입력하는 부분은 진하게 표시하는 것 => input:focus / CSS submit 버튼에 마우스를 올리면 색이 진해지는 것 => input:hover / CSS 태그의 하이퍼링크 밑줄 ,,,, 싫어 ,,,, (대신에 커서 바꿔..

개인적으로 Grid가 익숙하지 않다 보니 자꾸 사용하지 않게 되길래 오늘 아아주 기초적인 그리드로 발을 담가보려 한다....ㅎㅎㅎㅎㅎ 극극극초급용이다! 😎 🏖 CSS GRID LAYOUT grid.emayom.repl.co 우선 따로 reset.css 파일을 @import해 기본 값들을 초기화해주었다. CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this ..

HTML을 작성하다보면 꼭 쓰게 되는 태그 중에 하나가 바로 태그이다. 오늘은 태그의 유형과 속성에 대해 알아보려한다. 해당 태그의 속성만 잘 사용해도 HTML에 작성된 input을 어느 정도 제어할 수 있다! input input 태그는 정보를 입력하기 위해 사용하는 태그이다. 태그의 기본 값은 text이지만, 어떤 유형을 지정해주냐에따라 다양한 형태로 사용할 수 있다. (아래는 repl.it 에 미리 작성해놓은 input type들이다. 링크를 통해 체험해보자! 👇🏻) repl.it inputtype.emayom.repl.co #1 Type 한눈에 파악하기위해 임의로 유형에 따라 묶어서 크게 분류했다 ! 하나씩 알아보자. - button 타입 button submit : 입력한 값들을 전송해주는 버튼..

정렬 ? 정렬이란 순서 없이 나열된 자료들을 조건/기준을 가지고 일정한 순서가 되도록 재배열하는 것을 의미한다. 우리가 자료를 찾을 때 정렬이 되지 않은 상태에서는 탐색 자체가 어려울 뿐만 아니라 효율이 매우 떨어지게 된다. 그렇기 때문에 자료가 커질수록 반드시 효율적인 알고리즘의 사용이 필요하다! 정렬 알고리즘의 종류에 대해 알아보기 전에 용어와 고려사항에 대해 먼저 알아보자. 레코드(Record) ? 키 (Key) ? 레코드(record) 란, 리스트의 각 원소를 의미하며 필드로 구성된 정렬의 대상이다. 키(Key) 란, 레코드의 한 서브 필드로 정렬의 기준이 된다. +) 예를 들어, 교실의 학생들을 일정한 순서로 정렬시키려고 하는 경우 이름이라는 필드를 키 값으로 정렬할 수 도 있고, 생년월일이라는..

[Data Structure] 자료구조의 분류 : #1 선형구조 자료구조를 잘 이용하면 저장 공간을 효율적으로 이용하고, 신속하게 실행하는 효율적인 프로그램을 작성할 수 있다. 자료구조는 크게 아래와 같이 분류한다! 단순 구조 선형 구조 비선형 구조 emayom.tistory.com 이전 포스팅에서는 선형구조를 알아봤다. 오늘은 비선형 구조인 트리 / 그래프에서 유의해야 할 특징에 대해 하나씩 정리해보려고 한다. (트리도 그래프의 일종!) 비선형구조 선형구조는 데이터가 연속적으로 연결되어있는 1:1의 구조로 하나의 데이터 뒤에는 하나의 데이터가 존재하지만, 비선형구조는 데이터가 비연속적으로 연결되어있는 1:n의 구조로 하나의 데이터 뒤에 여러개의 데이터가 존재할 수 있다. 트리 (Tree) 트리 또한 방..