Hello World!!

학원 수업 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

인프런 강의 보면서 정리해두기. this는 지난번에 한번에 듣고 2. 실행 컨텍스트에 같이 정리해둬서 3번 없이 4번으로 정리 callback function 다른 함수의 인자로 함수를 전달해서 넘기는 대상에게 해당 함수에 대한 제어권을 위임한다. 특별한 요청(bind)가 없으면 미리 정해놓은 방식에 따라 콜백 함수가 호출된다. 넘기게 되는 제어권 : 실행 시점, 매개 변수, this 콜백함수는 메서드가 아님 객체.함수(); 위의 경우 함수는 메서드로 ‘호출’되어 실행됨 : this = 객체 배열.forEach(객체.함수); // 함수자체를 '전달' = 호출은 forEach가 함... Read More

학원 수업 Day9 String 인덱스 관련 let txt = 'Hello World World'; result = txt.indexOf('Wo'); // 지정한 문자열이 시작되는 인덱스 result = txt.indexOf('Wo', 8); // 지정한 인덱스부터 검색 result = txt.lastIndexOf('Wo'); // 마지막 인덱스부터 (뒤부터) 검색 let txt2 = 'banana, apple, melon'; let result2 = txt2.slice(8, 13); // 9부터 13인덱스까지 반환 result2 = txt2.substring(8, 13); // 9부터 13인덱스... Read More

척척하고 잘 하고 싶다. 언제쯤 그렇게 될까? 시저 암호 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 “AB”는 1만큼 밀면 “BC”가 되고, 3만큼 밀면 “DE”가 됩니다. “z”는 1만큼 밀면 “a”가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. ... Read More

인프런 강의 보면서 정리해두기. 눈이 트이는 느낌이다. Execution context 실행 컨택스트는 코드를 실행하는 데에 필요한 배경이 되는 조건/환경이다. 전역공간 : 자바스크립트가 실행될 때 생성되어 종료될때 종료되어 함수로 볼 수 있음 module : import되는 순간 내부 컨텍스트가 생성되어 모듈코드가 종료될 때 종료되어 함수로 볼 수 있음 결국 실행 컨텍스트는 함수를 실행할때 필요한 조건 또는 환경정보이며, 전역공간, 모듈 또는 함수로 묶인 내부에서는 같은 환경 안에 있는 것이 됨. if/for/switch/while문은 블록스코프로 let, const에 대해 독립된 공간으로의... Read More