Array.prototype.map()
배열내의 모든 요소 각각 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환. 매개변수 콜백: 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가집니다. currentValue: 처리할 현재 요소. index(옵션): 처리할 현재 요소의 인덱스.
Vue 장단점 (feat. 리액트)
Vue의 장점:Template와 Render Function을 모두 사용할 수 있는 옵션 간편한 Syntax와 프로젝트 설정빠른 렌더링과 더 작은 용량React의 장점:큰 규모에서 더 빛을 발하고, 테스팅이 수월Web과 Navtive 앱 개발에 모두 사용 가능더 큰 개
브라우저의 렌더링 과정
렌더링 엔진의 시작 통신으로부터 요청한 문서의 내용을 얻는 것으로 문서의 내용은 보통 8kb 단위로 전송 된다. 렌더링 엔진 동작 과정 HTML 파싱 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기
[WEB] HTTP 쿠키
HTTP 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각. 브라우저는 그 조각을 저장해 놨다가 동일한 서버에 재요청이 들어오면 저장된 데이터를 함께 전송한다. 쿠키의 3가지 목적 세션관리 서버에 저장해야할 로그인, 장바구니, 게임 스코어 개인화 사용
IE에서 flex-direction: column 사용시 주의사항 ⚠️
문제 flex-direction: column이 문제가 되었는데 자식 영역의 height가 잡히지 않아서 전부 겹치는 문제가 생김. Chrome환경에서는 문제가 없던 것이 IE에서 문제가 되었다. 해결 flex: 1을 flex: 1 0 auto로 바꾸니까 문제가 해결되었다. IE10에서 flex의 기본값은 최신 사양에 정의 된대로 0 1 auto가...
VSCODE 유용한 단축키 모음 (for macOS)
맥 키보드 심볼 |심볼|의미| |:---:|---| |⌘|커맨드| |⌃|컨트롤| |⌥|옵션(alt)| |⇧|쉬프트| |⇪|캡스락| 텍스트 편집편 |명령|단축키| |---|:---:| |단어 자동 완성|컨트롤 + 스페이스바| |현재 커서에서 왼쪽 문자 삭제|컨트롤 + H| |현재 커서에서 오른쪽문자 삭제|컨트롤 + D| |현재 커서에서 줄의 끝까지 삭제...
offset().top
정확히 이해하고자 정리해두는 글. offset() 가장 많이 사용하는 메서드는 top이 있다. 이 메서드를 사용해서 window창으로부터 거리계산을 할 수 있다. offset.jpg stop point계산은 해당 스탑포인트의 offset().top에서 해당 엘리먼트의 전체 height크기를 빼준다. 플로팅할 대상을 어느정도 스크롤 내린 위치에서 스...
📝 Floating menu script 참고
주문결제 > 결제예정금액 플로팅 처리 image.png 플로팅 박스가 특정 영역에 도달시 CSS 아래 처럼 처리할 것. : 부모 영역 height 잡아주고, bottom은 0px으로 고정. 작업하다보니 예외사항이 생겼다. fixed는 부모영역이 따로 없다 fixed는 브라우저창 전체를 부모영역으로 인식한다. 따라서 해당 엘리먼트의 크기를 고정해주...
[ES6] filter, map, reduce 정리
환경 VS code ESLint 이 문서는 유튜버 Traversy Media님의 영상을 보고 filter, map, reduce 메서드의 사용법을 익히고자 정리하였습니다. 위의 더미데이터를 활용해서 각 메서드의 특징을 알아보겠습니다. 기존에는 for문을 사용해 데이터를 가공했습니다. 이제는 for문 대신에 아래 메서드를 이용해 더 세련된 문법을 구...
✨ESLint에서 AutoFixOnSave 설정하기
환경 VS code ESLint (VS code 플러그인) VS code 프로그램에 설치된 ESLint플러그인을 사용해 저장시 자동으로 포맷을 정리해주는 환경 설정을 해보려고 합니다. 우선, 아래 명령어를 입력하여 초기 세팅을 해줍니다.: cmd + shift + p 명령어 팔레트를 열고 setting.json파일을 열어주고 아래 코드 추가해줍니다....