Hello World!!

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

학원 수업 내용 Day8 js플러그인 (swiper.js, isotope.js)을 활용한 레이아웃 2개, 그리고 js, css를 활용한 갤러리 이미지 아이디어와 마지막으로 vanilla js로 간단한 슬라이드를 제작했다. 그리고 그 과정에서 BOM에 대한 학습을 했다. BOM BOM은 Browser Object Model으로 브라우저에서 제공하는 객체이다. onload, open, alret, screen, location등이 있다. swiper 활용 isotope 활용 갤러리 아이디어 vanilla js slider Read More

자기 전에 문제 풀기 (근데 꽤 오래 생각함…) 3진법 뒤집기 문제 설명 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 n은 1 이상 100,000,000 이하인 자연수입니다. 입출력 예 n result 45 7 125 229 입출력 예 설명 입출력 예 #1 답을 도출하는 과정은 다음과 ... Read More

인프런 강의 보면서 정리해두기 Data Type 기본형 Primitive Type : Number, String, Boolean, null, undefined, Symbol 참조형 Reference Type : Object(Array, Function, RegExp, Set/WeakSet, Map/WedkMap…) stack memory : 변수, 기본형 데이터, 정적 할당 heap memory : 참조형 데이터, 동적 할당 자바스크립트는 변수에 값을 할당 하면 메모리에 값을 바로 할당하는 것이 아니라 메모리의 주소값을 할당한... Read More

학원 수업 내용 Day7 오늘은 지난번에 만든 예제를 완성시키는 수업이었다. 먼저 flex로 만들었던 레이아웃에 js를 입히는 작업을 했다. flex layout 완성 레이아웃을 완성하기에 앞서 target과 currentTarget의 차이점을 먼저 배웠다. currentTarget : 이벤트 리스너가 지정된 요소 target : 실제 이벤트 발생 요소 추가적으로 연산자에 관한 정리도 다시 했다. 단항연산 : n++, n– 1개의 항을 대상으로 연산 수행 2항연산 : n + m 2개의 항을 대상으로 연산 수행 ... Read More

내가 쓰려고 정리해놓는 글.. 기본 명령어 원하는 경로로 이동 cd '폴더경로' sass 관련 설치 sudo npm install sass -g 기존 sass제거 sudo gem uninstall sass 실시간 컴파일 sass --watch scss/style.scss:css/style.css scss 폴더 내 style.scss을 css 폴더 내 style.css으로 자동 컴파일 시키겠다는 의미 실행 전 scss/style.scss가 있어야 하니 cd로 scss 폴더가 있는 경로로 이동해야함 gitHub 관련 깃 시작 git init 저장소 연결 gi... Read More