js 함수내부에서의 this 바인딩 자바스크립트에서는 상황에 따라 this 객체에 바인딩되는 값이 다름 1.화살표함수는 자신의 상위객체에 대해 접근함2. 메소드 호출 시 메소드 내부의 this는 해당 메소드를 보유한 객체로 바인딩된다. 3. 일반함수 호출 시 함수 내부의 this는 전역객체에 바인딩된다. 4. 생성자 함수라면 생성자 함수에서 객체를 생성 후, 해당 객체에 this가 바인딩된다. 여기서 메소드는 객체내부에 일부로서 함수의 프로퍼티,값 쌍이 존재할 때그 함수를 메소드라 부름1번 예시this.a = 5;const eee = () => { console.log(this.a) // 화살표함수는 상위 객체인 전역객체를 this에 바인딩함.}eee(); // 5 2번 예시const bbb = { name:'bbb', f.. 2022. 12. 3. [vue] vue build 후 빌드파일 실행하기 npm run build @vue/cli 에서 위 명령어로 뷰 프로젝트를 빌드하면 아래와 같은 폴더가 나온다 (dist) 이 인덱스 파일을 바로 실행하면? 빈 화면의 html 호출됨 이유는 정확히 모르지만 로컬환경, 서버환경에서의 패스설정이 다르다 함 위 문제의 해결법은 - iis앱 사용 (찍먹해봤으나 실패) - 간단하게 웹서버에 올림 ex) 무료호스팅 업체 사용 - 패스설정을 건들기 (어려워보임) 닷홈을 이용하기로 함 어찌저찌 닷홈에서 무료호스팅을 받고, winscp나 filezila같은 앱을 이용하여 무료로 받은 웹서버의 주소에 들어가 /html 경로에 아래와 같이 빌드된 파일들을 넣어주면 끝 완료 2022. 11. 16. npm 패키지 버전관리 틸드와 캐럿 틸드(~)캐럿(^) npm 공식문서에 좋은 계산기가 있었음보는 강의와 구글링해서 나온 블로그의 문서가 다르길래직접 입력해봄1.x : 메이저버전이 1인 버전^2.1.0 : 2.1.0 부터 3.0.0 미만~2.1.0 : 2.1.0 부터 2.2.0 미만 2022. 11. 12. 클라이언트 사이드 렌더링 CSR csr의 가장 큰 장점중 하나는 유저경험적인 면에 있어서, 패스를 이동할때마다 무언가 새로 불러와지는 듯한 느낌을 덜 주고 자연스럽게 보일 수 있단 점임 csr의 html구조는 매우 단순하여 시작 당시엔 빈 깡통이지만 대신 자바스크립트를 이용하여 돔을 생성해줌 이 점을 이용하여 라우트를 이동할 때 마다 새로 서버에서 html파일을 불러오는 것이 아닌, 자바스크립트를 이용하여 필요한 부분만 돔을 새로 그려줌 그래서 매번 주소를 이동 시 마다 서버에서 html파일을 불러왔던 때와는 다르게 비교적 빠르게|자연스럽게 화면이동이 가능 (html을 다시 서버에서 받아올시 빈 html을 먼저 보여주기 때문에 화면이 깜박이는 듯한 효과가 있음) 장점도 있지만 단점도 있음 1. 번들링 크기 기존에는 주소이동 시 마다 필.. 2022. 10. 31. 브라우저 렌더링 렌더링 과정 1. 파싱 chrome과 같은 웹 브라우저에서 html,css, js파일을 읽는다. js파일은 읽는 동시에 파싱작업을 중단한다. (defer속성을 사용한다면 파싱 후에 ) 2. 트리변환 html은 DOM / css에서는 CSSOM 이라는 트리를 만든다. 3. 결합 두 트리를 결합하여 화면에 그려낼 render 트리라는 것을 만든다. 4. Layout render 트리에 따라 화면에 어떻게 각각의 요소를 배치할 것인지 정하는 단계 노드의 정확한 크기,위치 등을 계산하여 render 트리에 반영한다. (모든 값들은 절대수치인 pixcel 단위로 변환된다.) 5. Paint render 트리를 바탕으로 픽셀정보를 이용하여 화면에 그려줌 6. Composition 픽셀정보로 그려진 여러 레이어들을 .. 2022. 10. 31. js Symbol 데이터 타입 심벌이란?다른 값과 중복되지 않는 유일무이한 값이며 주로 충돌위험이 없게 유일한 프로퍼티 키를 만들기 위해 사용함심벌 값의 생성const mySymbol = Symbol();console.log(mySymbol); // Symbol()// 심벌 값은 외부로 노출되지 않아 확인할 수 없다.언뜻 보면 생성자 함수로 심볼객체를 생성하는 것처럼 보이지만new 연산자와 함께 호출하지 않고, 객체대신 원시값인 심볼이 생성된다.Symbom 함수에는 문자열을 인수로 전달할 수 있으며 이 인수는 키 값/설명으로써 사용된다.const symbol1 = Symbol("1");const symbol2 = Symbol("2");console.log(symbol1===symbol2); // false심벌 값의 생성 - for 메.. 2022. 10. 17. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음
