전체 글

[JS] Constructor 메서드와 prototype 메서드의 차이

※ 멋쟁이사자 강의, 코어 자바스크립트 책, 자바스크리브 deep dive 정리 블로그 등을 참고해 수업예제에서 생성자함수, prototype, this 관련 부분을 이해한 내용을 기록하기위한 포스팅입니다 개인적인 이해를 기록하기 때문에 정확하지 않을 수 있으니 잘못된 부분이 있으면 지적해 주세요 생성자 (Constructor) 프로그래밍적으로 '생성자'는 구체적인 인스턴스를 만들기 위한 틀 입니다 해당 클래스의 공통 속성들이 미리 준비돼 있고 구체적인 인스턴스의 특징을 더해 개별 인스턴스를 만들 수있습니다 따라서 생성자는 생성자를 통해 생성된 객체에 같은 프로퍼티와 메서드를 공유할 수 있게 해준다는 것입니다 자바스크립트에서는 함수에 생성자로서 역활을 함께 부여했습니다 new 명령어와 함께 함수를 호출하..

[05/03 TIL] JS, CSS특강

array, slice, splice, sort array pop,push 실습 slice, splice 실습 sort 실습 sort 의 compareFunction 을 활용한 여러가지 방법들 공부 sort 함수는 원본을 변경하는 함수이기 때문에 잘 생각해야 한다 기본적으로 문자열로 변환하고 유니코드 값으로 비교한다. 따라서 compareFunction 없이 숫자랑 sort 해보면 정렬이 잘 안되는걸 실습해 볼 수 있음 유니코드는 - 연산이 불가능하기 때문에 람다함수를 넘겨줘야한다 ex ) 객체a.string값 > 객체b.string값이 양수가 리턴이 된다면 a > b (오름차순) 을 의미한다 return 0 은 a = b 를 의미함 https://developer.mozilla.org/ko/docs/W..

[05/02 TIL] Null, undefined, NaN

Null, undefined 차이와 용도 undefined 와 null 은 없음을 나타내는 의미지만 미세하게 다르고, 사용하는 목적도 다릅니다 undefined는 사용자가 명시적으로 지정할 수있고 값이 존재하지 않을 때 엔진이 자동부여 하는 경우도 있습니다. 사용자가 값을 지정할 것같은 상황에도 지정돼지 않은 다음 세 경우에 엔진은 자동으로 undefined를 반환합니다 값을 대입하지 않은 변수, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 - 정확히는 아무것도 할당하지 않고 끝나지만 변수a 에 접근하고자 할 때 엔진에서 undefined를 반환 객체 내부의 존재하지 않는 프로퍼티에 접근하려고 할 때 return 문이 없거나 호출되지 않는 함수의 실행 결과 undefined는 어떤 변수..

[04/28 TIL] JS 기초, CSS특강

JS기초 복습할 내용 스크립트언어와 컴파일언어의 차이 원시자료형과 참조자료형 리터럴, Constructor, 프로퍼티 의 뜻 typeof null 이 Object 객체인 이유 == 이랑 === 의 차이 parseInt 와 Number 의 차이와 용도 자주 쓰이는 Math 함수들 + Math.random() 을 활용한 복권번호 뽑기 실습 빔캠프 CSS 특강 항상 반응형, 확장성, 수정에 용이 하도록 구현 큰덩어리(header, main) 를 잡고 content 를 하나의 통일된 wrapper 로 시작 wrapper 를 기준점으로 negative margin 등으로 나머지 스타일을 구현 wrapper는 넓이를 고정값으로 주고 자식들은 width 를 주지 않는다(상황에 따라 다름) 마크업이나 CSS나 큰것부터..

[04/27 TIL] Tailwind CSS , 이력서, CSS특강 과제

Tailwind CSS 사용법 & 이력서 작성 큰 틀을 잡고 하나 구역 나누고 하면 되는데 엄청 헤매느라 완성도 다 못하고 제출했다.. 주말에 복습하면서 완성할 것 Tailwind 뿐만이 아니라 일단 div 로 다 묶고 나중에 시멘틱하게 바꾸는게 맞는것같다 빔캠프 CSS 특강 과제 월요일 특강 때 배운 negative 마진 등등 을 활용해서 포토샵 역사 페이지를 구현하는 과제가 있었다 좀 시간 걸렸던 부분은 PHOTOSHOP 중간에 가상요소로 선 긋는 부분이랑 letter-spacing 할 때 간격이 늘어남으로 정렬이 안된것처럼 보이는 현상이 있었다 가상요소부분은 z-index: -1 을 사용해서 선을 photoshop 아래로 놔두는걸로 해결했다 쌓임 맥락 부분은 추가로 공부 해야할 듯 https://d..

[04/26 TIL] sass, bootstrap, 영화 정보 페이지 구현 과제

Sass 추가적으로 공부할 내용 mixin 과 extends 차이와 어느 상황에서 사용하는 게 좋은지 mixin 실사용 (따로 mixin 모음도 있고 mixin 라이브러리도 있어서 뜯어보면서 공부 Bootstrap 유료 템플릿을 구매해서 이용한다고 생각하라고 하심, 기본 사용 태그들 실습 이건 나중에 무료(or 유료) 템플릿으로 페이지 하나 구현하면서 공부 해보면 좋을 것 같음 영화 정보 페이지 구현 과제 신경쓸부분 - 앞 과제에서 정리한 피드백 내용들 적용해서 마크업 짜기 - 반응형 고려하기 - Sass 적용하기 - Readme 작성 그래도 계속 구현해서인지 전체 구조자체는 빠르게 짰는데 Sass 복습도하고 어떻게 사용해야 좋을지 고민하는데 시간을 많이 쓰고있다 nesting 은 사용하는데 문제 없어서..

[0419/TIL] CSS Image Sprite 기법 + Retina 디스플레이 대응

CSS Sprite 기법 여러가지 이미지를 하나의 이미지 파일안에 배치해서 이미지 로드 부담을 줄이는 방법입니다 서버요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 이미지 크기도 줄여주는 최적화 효과를 얻을 수 있습니다 https://www.toptal.com/developers/css/sprite-generator/ CSS Sprites Generator CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.) www.toptal.com 직접 작업하는 경우도 많지만 위 사이트같은 생성기로 생성해서 가져다 쓸 수도 있습니다 이렇게 개..

[04/19 TIL] CSS select 커스텀 구현 실습

Select , input 커스텀 네이티브 셀렉트 박스의 디자인상 한계로 디자인적인 개성을 주기 위해 select 박스의 구조를 div 와 ul 요소등으로 치환해서 커스텀으로 구현하여 사용합니다 여러 CSS 플러그인에서 이렇게 커스텀으로 구현되어 나옵니다 과제와 수업으로 실습을 통해 select box 커스텀 구현을 진행 했습니다 최애 프로그래밍 언어를 선택해 주세요 최애 프로그래밍 Python JavaScript C/C++ C# Java article 태그로 전체 범위를 묶고 접근성을 위해 h2 태그로 제목을 붙여줍니다 이 h2 태그는 txt-hide 클래스로 숨겨줄겁니다(IR 기법) select, option 대신 div, ul, li 로 구현해줍니다 select list 구현 시 되도록 ul 태그에..