Hello World!!

학원 수업 Day14 자바스크립트 활용도가 점점 높아져서 좋다. 만드는 페이지가 기능적으로 업그레이드 되는 게 보여서 만족스럽다. 더 많이 배워서 많은 곳에서 활용할 수 있게 되면 좋겠다. 비밀번호 validation 입력 비밀번호 보여주기 토글 버튼을 만들어서 클릭시 input type변경해서 입력중인 비밀번호를 확인할 수 있게 한다. toggleBtn.addEventListener('click', ()=>{ if ($pwd.type === 'password') { pwd.type = 'text'; toggleBtn.classList.add('hide'); ... Read More

포트폴리오 제작하느라 살짝 소홀했던 문제풀기. 두 개 뽑아서 더하기 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] ... Read More

학원 수업 Day13 flickr 갤러리 적용 어제 한 flickr API를 기존에 만들었던 기업형 레이아웃에 적용했다. 새로운건 크게 없고 예외 처리에 대해 복습했다. 회원가입 validation 데이터 검증 요소 text 길이 email @ 포함 체크박스 선택 select 선택 비밀번호 길이, 특수문자, 숫자 포함 함수 별 조건 만족 여부에 따라 return true / return false 이후, 에러 값 true 있으면 e.preventDefault()로 페이지 이동 막음... Read More

인프런 강의 보면서 정리해두기. 해당 코드는 ES6 이전에 사용하던 방법으로, ES6에서는 class가 생겨서 직접 함수처리 하지 않아도 됨. class 공통적인 속성들을 모은 추상적인 개념. 정의하는 객체. superclass > subclass instance 공통의 속성을 지니는 구체적인 대상. 정의된 구체적인 데이터를 지닌 실체. 상위 클래스가 정의되어야 하위 클래스를 지정할 수 있고, 인스턴스 또한 만들 수 있다. static new 생성자 없이 함수(객체)로써 호출할 때에만 의미가 있다. 해당 클래스 소속의 인스턴스들의 개별적 동작이 아닌, 소속여부 등의 공동체... Read More

학원 수업 Day12 플리커 API 활용 플리커 API키를 받아 플리커 사이트 내 정보를 받아올 수 있다. 리스트 디자인을 위해서 isotope 플러그인을 활용했다. 오늘은 단순히 API 정보를 받아오는 것 뿐만 아니라, 실제 서비스 같은 페이지 구현이 주 목표였다. 로딩 모션 이벤트 addEventListener('load', func) 추가 load error시 대체 이미지 지정 addEventListener('error', func), setAttribute('src', 'imgUrl') 용도, 기능 별 함수 패키징 직... Read More

학원 수업 Day11 iframe관련 <iframe src="#url1" name="site" frameborder="0">이 브라우저는 iframe을 지원하지 않습니다.</iframe> <a href="#url2" target="site">쿠팡</a> name 속성 주 사용 : name속성은 form 전송 이벤트 발생 시 서버로 데이터를 전송하기 위한 식별자 파라미터를 전송하기 위해 지정하는 것으로 중복 가능 id 속성 name과 비슷한 용도로 사용이 가능하지만 고유값을 가져서 한번만 사용이 가... Read More

인프런 강의 보면서 정리해두기. prototype 생성자 함수가 있을 때 new 연산자로 instance를 만들면, 그 instance 안에는 constructor의 ‘prototype’이라고 하는 프로퍼티의 내용이 [[Prototype]]이라고 하는 프로퍼티로 참조를 전달한다. 즉, constructor의 prototype과 instance의 [[Prototype]]는 같은 객체를 바라본다. 이때 [[Prototype]]은 접근 가능한 것이 아니라 정보를 보여주기만해서, 실제 동작상으로는 instance와 동일시 된다. null, undefined를 제외한 모든 데이터는 기본형, 참조형에 상관 없이 ... Read More

인프런 강의 보면서 정리해두기. closure A의 LexicalEnvironment와 내부 함수 B의 조합에서 나타나는 특별한 현상 컨텍스트 A에서 선언한 변수를 내부함수 B에서 참조할 경우에 발생하는 특별한 현상 const outer = function() { let a = 1; const inner = function() { return ++a; } return inner; } const outer2 = outer(); console.log(outer2()); console.log(outer2()); outer 내에서 선언된 변수가 inner 내에서 참조가 되고 있다... Read More

척척하고 잘 하고 싶다. 언제쯤 그렇게 될까? 문자열 내 마음대로 정렬하기 문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 [“sun”, “bed”, “car”]이고 n이 1이면 각 단어의 인덱스 1의 문자 “u”, “e”, “a”로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 ... Read More

학원 수업 내용 Day10 DOM 구조 변경 문서와 기존 구조를 js를 통해 변경 부모 요소명.append(자식요소) – 부모요소 안쪽 가장 뒤에 자식요소 삽입 부모요소명.prepend(자식요소) – 부모요소 안쪽의 사장 앞쪽에 자식요소 삽입 data-속성 data-식별자 HTML5부터 적용 브라우저는 data 속성에 대해 관여하지 않음 개발자가 특수하게 사용할 용도 css에서 사용 요소[data-식별자="값"] js에서 사용 요소.dataset.식별자 = '값' ... Read More