[JS] $(function() {}) vs (function() {})()
$(function() {})- jquery 구문- DOM이 준비되었을 때 실행되는 함수를 정의한다.- 즉, HTML 문서의 요소가 모두 로드되고 DOM이 생성된 후 실행된다.- return 이 없어도 정상적으로 동작하며, 반환값을 활용하지 않는 것이 일반적이다.- javascript의 DOMContentLoaded 이벤트와 유사하다.document.addEventListener("DOMContentLoaded", function() { console.log("DOM이 준비되었습니다!");}); *실행조건- 브라우저가 HTML 구조를 모두 파싱한 후 실행된다.- javascript가 DOM에 접근 가능해진 시점에서 실행된다.(function() {})() - javascript 구문- 즉시실행함수-..
1. ctrl + shift + p (명령 팔레트 열기) 2. File: compare Active File With... 선택 > 현재 열려 있는 파일과 선택한 파일간에 코드 비교후 다른 부분 표기해줌. File: compare Active File with Clipboard 선택 > 현재 열려 있는 파일과 복사 되어있는 코드랑 비교 후 다른 부분 표기해줌. File: compare Active File with saved 선택 > 현재 열려 있는 파일에서 수정작업 후 파일 저장전이라면, 저장전 파일과 저장후 파일을 비교해줌.
# SCSS 폴더 구조 @/assets/scss ㄴabstracts ㄴ_mixins.scss ㄴ_variables.scss ㄴbase ㄴ_reset.scss ㄴ_typography.scss ㄴcomponents ㄴ_buttons.scss ㄴ_dropdown.scss ㄴlayout ㄴ_footer.scss ㄴ_forms.scss ㄴ_header.scss ㄴ_navigation.scss ㄴpages ㄴ_contact.scss ㄴ_home.scss ㄴ_index.scss// _index.scss // 위에 모든 SCSS를 한 곳으로 모으는 css @import "abstracts/mixins"; @import "abstracts/variables"; @import "base/reset"; @import "ba..
vue.js 에서 이미지 파일 접근 방식은 2가지가 있다. - 정적 파일 접근 - 동적 파일 접근 동적 파일 접근 시 이미지가 나타나지 않을 경우에 대한 해결방법을 정리한다. (require 로 받을 수 있다.) export const footerText = [ { title: "github", desc: "사이드 프로젝트 및 포트폴리오에 대한 정보들이 기록되어 있습니다.", logo: require("../assets/img/logo_github.png"), link: "https://github.com/sgpark94", } ]
[Javascript] 서버없이 이메일 전송하기 (email.js)
1. email.js 사이트 접속 후 로그인 https://www.emailjs.com/ Send email directly from your code | EmailJS No server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier! www.emailjs.com 2. Service ID (초기 셋팅 시 Add New Service 버튼 클릭해서 생성하기.) 2. USER_ID 3. Template ID 4. 템플릿 코드
https://joo-dev.tistory.com/m/3
SCSS 에서 button component 만들 때 사용한 것 정리!! @each $key변수, $value변수 in 데이터 { 실행문 } # 개발환경 vue.js / vuetify / scss e.g. // button.vue button 100 button 50 button 10 // variable.scss $main—100: rgb(12, 31, 41); $main—50: rgb(14, 14, 31); $main—10: rgb(143, 214, 31); $main—: ( ‘100’: $main—100, ‘50’: $main—50, ‘10’: $main—10 ) // buttons.scss .v-btn { &.c-button { @each $name, $value in $main— { &.main..
프로젝트를 하면서 웹폰트 설정 관련해서 이전엔 안 써본 font 속성에 대하여 정리! - 웹 폰트 최적화 방법 : 텍스트가 항상 보이게 하기 * 웹폰트 적용시 텍스트 번쩍임 현상 발생 1) FOIT (Invisible) (Firefox, Chrome) 웹폰트가 적용되지 않은 “텍스트”가 보이지 않는 상태에서 폰트가 바뀌면 텍스트 번쩍임 현상 발생. 2) FOUT (Unstyled) (Internet Explorer) 웹폰트가 적용되지 않은 “폴백 폰트 상태”에서 폰트가 바뀌면서 텍스트 번쩍임 현상이 일어나는 현상 발생. * CSS의 font-display 속성을 사용하면 외부 라이브러리를 사용하지 않고도 웹폰트의 로딩 상태에 따른 동작 설정이 가능함. (현, IE 미지원.) font-display : a..
[기초개념] 가변(mutable) / 불변(immutable) 데이터 : 참조관계
가변(mutable) 데이터 - 재사용 시 참조하는 데이터 전체가 모두 바뀌게 된다. (같은 곳은 참조하고 있기 때문에.) - 객체, 배열 불변(immutable) 데이터 - string, number, boolean, undefined 참고강의(유료) : 패스트캠퍼스 - Vue.js 압축 완성 올인원 패키지 Onlne. 2강 Vue 가이드 문서 따라하기 Ch 03. Vue 가이드 - 23. 컴포넌트 - 컴포넌트 사용하기 - data 속성이 함수인 이유
[비교] computed / methods (Vue.js)
computed - "캐싱" 기능을 갖고 있기 때문에 반복되는 연산으로 인한 사이트 과부화를 줄여줄 수 있다. (특히 사이트가 커질수록!) - 함수가 아니므로 (함수로 구현할 순 있으나) 결과적으로는 하나의 데이터로 사용되기 때문에 ()가 붙지않는다. 참고강의(유료) : 패스트캠퍼스 - Vue.js 압축 완성 올인원 패키지 Onlne. 2강 Vue 가이드 문서 따라하기 Ch 03. Vue 가이드 - 06. computed 캐싱
[개념] 라이프 사이클 (Life-Cycle) 정리 (Vue.js)
반응성(형) : vue instance 내 data 옵션에 미리 정의되어 있는 값만 가지게 된다. -> 당장 필요하지 않은 data 라도 반응성을 가지게 하려면, vue instance가 생성될 때 정의가 되어 있어야 한다는 점! 라이프 사이클 (Life-cycle) * 표기 : 많이 쓰임. 1) beforeCreate vue instance 생성 전 상태이므로, "data" 정의 시 undefined가 선언된다. - 이 사이에 반응성(형)이 주입된다. - 2) * created vue instance 생성 후 상태이므로, "data" 정의 시 선언한 값이 나타난다. 3) beforeMount html과 vue instance가 연결되기 직전인 상태로, html의 요소가 무엇인지 모르므로 refs의 값이..