본문 바로가기

전체 글

(112)
this를 이해하기 위해서 20180201 날짜 : 2018. 02. 01.(목) this를 이해하기 위해서 들어가기에 앞서 이 포스트는 하단에 있는 링크의 글들을 읽고 정리한 글 입니다. 제 실력이 부족하여 도움이 못 될 경우에는 아래의 링크를 참고해 주시기 바랍니다. 본문 이글을 작성하게 된 동기 이벤트 처리시 this를 사용하게 되면 제대로 실행이 되지 않는다. bind를 사용해서 처리해야 한다는 것을 알고만 있고 기술부채로 남겨 두었다. (아마 jQuery를 사용했다면 더 빨리 찾아보았을 것 같다.) 그래서 아래의 사전지식을 수정 및 보충을 할려고 한다. 사전지식 : this의 내용은 execution context(실행컨텍스트)에 따라 달라진다. 그리고 개발자가 제어를 하기 위해서 나온 것이 Function.prototy..
Object.prototype 상속과 공유 20180130 날짜 : 2018. 01. 30.(화) Object.prototype 상속과 공유 들어가기에 앞서 이 포스트는 하단에 있는 링크의 글들을 읽고 정리한 글 입니다. 제 실력이 부족하여 도움이 못 될 경우에는 아래의 링크를 참고해 주시기 바랍니다. 본문 새로나오는 용어 object cloning : 함수 생성시 발생하는 동작, prototype Object를 생성 prototype Object : object cloning의 결과로 나온 객체 __proto__ : 상위의 부모 객체를 가리키는 property prototype : prototype Object를 가리키는 property constructor : prototype Object가 가지는 property 개념 객체 생성 방법으로 리..
HTML, CSS 기존코드 개선하기 2 - IR 적용 20180125 날짜 : 2018. 01. 22.(월) HTML, CSS 기존코드 개선하기 2 부제 : IR 적용하기 적용전 코드구조 적용후 코드구조 테스트 이미지 방법1. 글자위에 이미지 덧 씌우기 첫번째 span에 absolute를 적용하여 글자를 숨겨버림 div { position: relative; } span:nth-of-type(1) { position: absolute; width: 100px; height: 100px; background: url('./이미지.jpg') no-repeat; } span:nth-of-type(2) { -- 이미지가 작은 경우 글자를 중앙 정렬을 하여 숨김 --> line-height: 100px; text-align: center; } 방법2. oveflow..
HTML, CSS 기존코드 개선하기 01 20180122 날짜 : 2018. 01. 22.(월) HTML, CSS 기존코드 개선하기 1 부제 : HTML논리구조, pseudo-element 개선하기 HTML 논리적 구조 잡기 기존의 코드 (디자인 중심적으로 생각을 하여 가로/세로를 나눔) 웹 관련 용어 웹 표준 이란? W3 단체에서 규정한 웹기술 사양에 대한 규칙을 말하며 표준 규격은 어리마넝라ㅣ먼ㅇ라ㅣㅓㅁㄴ아ㅣ러마니어림ㄴㅇ라ㅣㅓㅁ나ㅣ어ㅏㅣㅁ넝라ㅣㅓㅁㄴ아ㅣ러ㅣㅏㅇ너라ㅣㅓㅁ나일 새로 만든 코드 웹 관련 용어 웹표준이란? W3C 단체에서 규정한 웹 기술 사양에 대한 규칙을 말하며 표준 규격은... pseudo-element 활용하기 글의 이미지 삽입하기기존코드 이미지 글자 새로만든 코드 글자 div::before { content: ""; back..
HTML, CSS 학습방법 20180121 날짜 : 2018. 01. 21.(일) HTML, CSS 학습 방법 부제 : HTML+CSS 학습을 위한 습작을 하고서 느낀점 습작 결과물 결론 사용해보지 않은 TAG를 연습하고. 다른 페이지 찾아보고 따라 만드는 훈련이 필요. 본문 시간이 부족하다고 생각할 수록 익숙한 방법을 사용한다. 최초 설계시 한꺼번에 모든것을 다 그리지 못 하겠다. 한번에 연속으로 작업을 할 수 있는것이 3시간 이다. 이번 작업을 수행하는데 9시간이 소요 되었다. 앞으로 javascript를 학습하는 것도 중요하지만 지금 기회가 있을때 더 의식적으로 연습하는 것을 훈련할 필요가 있다고 생각. 반응형과 적응형 웹페이지까지 만드는 것을 연습하기. 한개의 웹페이지 만드는 연습과 별개로 작은 부분을 여러번 연습하는 것이..
해커랭크 자료구조 문제풀이 (DynamicArray) algol005 알고리즘 연습노트 오늘의 문제 Hackerank DynamicArray 풀이 성공 by javascript 문제요구사항 seqList[N]`[N] 크기의 2중 배열이 있다. 연산식을 수행하여 나온 결과 값으로 seqList 배열중 1개를 선택 1번 질의 과정 해당 배열에 값 y를 입력 2번 질의 과정 y % 선택된 배열의 길이 연산 해당값을 lastAnswer 입력, 출력 문제를 풀지 못한 원인 분석 문제의 첫번째 요구사항을 잘못 해석하여 단일 배열 생성. 문제풀이 코드
해커랭크 자료구조 문제풀이 (DynamicArray) algol004 알고리즘 연습노트 오늘의 문제 Hackerank DynamicArray by javascript 문제요구사항 입력값에 따른 시뮬레이션 수행 문제가 안풀린 이유? 문제를 처음부터 읽지 않아서 자료형을 잘못 선택 하여서 익숙하지 않은 안티패턴을 사용하여서... var initial = input.split('\n'); var info = initial[0].split(' '); var lastAnswer = 0; var arr, temp, S0=[], S1=[]; initial.splice(0,1); for(var i = 0; i
해커랭크 자료구조&알고리즘 문제풀이 (Hackerrank 2DArray) algol003 알고리즘 연습노트 오늘의 문제 Hackerank 2-d array proglem by javascript문제풀이 코드 문제요구사항 주어진 배열에서 '모래시계'모양의 최대값을 구하라. (모래시계 모양은 문제를 참고해 주세요.) 111 010 111 알고리즘 KeyPoint 모래시계 모양을 계산하기 위해서는 배열 전체를 검색할 필요가 없다. for(var i = 0; i