거인의 코딩일지

JS 에서의 페이지 이동 방식?? 페이지 이동 종류?? location.herf location.replace location.reload history.go location.herf()란?? 다른페이지로 이동하는데 사용된다. 이전 페이지의 히스토리가 남는다. () 안에는 인터넷의 url 이 들어올 수 있고 서버안에 있는 파일의 경로가 들어올 수 있다. 상위 디렉토리 내의 파일로 이동하는 경우 ../ 을 적어주면 되는데 ../ 이란 현재 위치의 상위 폴더를 의미한다. 만약! 두단계 상위 폴더로 가고 싶다면 ../../ 을 작성해 주어야 한다. location.herf("url 경로") location.herf("www.naver.com") location.herf("/test/hello/wow") loc..

자바 스크립트 패키지 매니져?? (Javascript Package Manager) npm 과 yarn 은 자바스크립트 패키지 매니저 이다. 패키지란?? npm 에 업로드된 노드 모듈을 이야기 한다. 다양한 자바스크립트 프로그램이 패키지라는 이름으로 npm에 등록되어 있다. 패키지가 다른 패키지를 사용할 경우 의존관계를 가지기도 한다. 이러한 패키지들을 사용하기 위해서 다운로드, 설치, 업데이트 의존성관리, 제거 등 복잡한 상황이 많이 생기는데 패키지 매니저를 사용하면 이러한 과정들을 자동화 하여 편리하고 안전하게 수행할 수 있도록 해준다. npm(node package manager) 이란?? npm은 이름 그대로 노드 패키지 매니저 이다. 런타임 동안 노드환경에서 쓰이는 다양한 패키지들을 관리한다. ..

SetTimeout() 란?? setTimeout() 메서드는 만료된 후 함수나 지정한 코드조각을 실행하는 타이머를 설정하는 함수이다. 즉, 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 존재하는데 이럴때 setTimeout() 함수를 사용한다. 첫번쨰 인자로 실행할 코드를 담고있는 함수를 받고, 두번째 인자로 지연시간을 밀리초(ms) 단위로 받는다. 세번째 인자부터 가변인자를 받는데, 첫번쨰 인자로 넘어온 함수가 인자를 받는 경우 이 함수에 넘길 인자를 명시해서 사용해야 한다. setTimeout(() => { console.log("첫 번째 메시지"); }, 5000); setTimeout(() => { console.log("두 번째 메시지"); }, 3000); setT..

ref() 란??? 전달된 값을 갖게 되고, 이것을 가리키는 단일 속성 .value가 있는 변경 가능한 반응형 ref 객체를 반환 ref 객체는 반응형이며, .value 속성에 새 값을 할당할 수 있다. 즉, .value 에 대한 모든 읽기 작업이 추적되고, 쓰기 작업은 관련 이펙트를 트리거한다. 객체가 ref의 값(.value)으로 할당되면, reactive()로 내부 깊숙이(deeply) 반응한다. 객체 내부 깊숙이 ref가 포함되어 있으면, 언래핑됨을 의미 내부 깊숙이까지 변환되는 것을 방지하려면,shallowRef()를 사용 ref 의 장점? 타입 제한 없이 사용 가능하다. 템플릿에서 단일 변수로 사용할 수 있다. 래핑, 언래핑의 개념이 혼란스러울 경우?? 어떤 값이 ref에 할당되어 있다고 가정..

원하는 색상 코드를 가져오는 방법 알아보기!! 프로젝트를 하면서 색상이 맘에 들지 않고 다른곳에 있는 색상이 맘에드는 경우 색상 코드를 알아야 사용할 수 있는데 어쩌다가 방법을 알게 되어서 잊어버리기 전에 작성! 물론 다른 다양한 방법이 있을 수 있겠지만 내 기준 간단했던 방법 한개만 기술함... PPT 를 사용 한 색깔 코드 확인방법 원하는 색상이 있는 부분을 캡쳐 PPT 파일안에서 네모 상자 하나 생성 상자를 누르고 오른쪽 마우스 클릭 한 후 채우기 선택! 채우기에 마우스가 올라간 뒤 나오는 곳에서 스포이트로 원하는 색상을 선택한 후 적용 적용된 네모 박스에 다시 오른쪽 마우스 클릭 후 채우기로 이동한 후 다른 채우기 색을 클릭 하면?? 이렇게 코드를 알 수 있게 된다!! 번거롭지만 쉽게 접근할수 있..

네비게이션 가드 란?? 뷰 라우터로 특정 URL에 접근할 때 해당 URL의 접근을 막는 방법이다. 이름에서도 알 수 있듯 vue - router 가 제공하는 네비게이션 가드는 주로 리다이렉션 하거나 취소하여 네비게이션을 보호하는데 사용됨 네비게이션 가드의 종류?? 애플리케이션 전역에서 동작하는 전역가드 특정 URL 에서만 동작하는 라우터 가드 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역가드 router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다. const router = new VueRouter({ ... }) router.beforeEach(async (to, from, next) => { if (to.name === 'login' || to.name === 'sig..

for...in ? for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복한다. 객체 자체의 모든 열거 가능한 속성들과 프로토타입 체인으로부터 상속받은 속성들에 대해 반복할 것 객체의 반복을 위해 만들어졌지만 배열의 반복을 위해서는 추천되지 않음 객체의 속성을 확인할 수 있기에 실질적으로 디버깅을 위해 사용될 수 있음 var obj = { a: 1, b: 2, c: 3 }; for (var item in obj) { console.log(item) // a, b, c } var arr = [1, 2, 3]; for (var item in arr) { console.log(item) // 0, 1, 2 } for...in 문에 객체가 아닌..

프록시(Proxy) Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있다. 프록시란?? Proxy 객체를 사용하면 원래 Object 대신 사용할 수 있는 객체를 만들지만, 이 객체의 속성 가져오기, 설정 및 정의와 같은 기본 객체 작업을 재 정의 할 수 있다. 프록시 객체는 일반적으로 속성 액세스를 기록하고 입력의 유효성을 검사하고 형식을 지정하거나, 삭제하는데 사용된다. 두개의 매개변수를 사용하여 Proxy 를 생성한다. target : 프록시할 원본 객체 handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체 const target = { message1: "hello", message2: "everyone", }; const h..

Array.prototype.filter() Array인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. ex1) 모든 작은 값 걸러 내기 function isBigEnough(value) { return value >= 10; } const filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // 필터링된 값은 [12, 130, 44] ex2) JSON 에서 유효하지 않은 항목 고르기 const arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, {}, { id: null }..

Array.prototype.sort() 배열의 요소를 적절한 위치에 정렬한 후 반환 기본 정렬 순서는 유니코드 코드 포인트 //ex) 숫자 배열 sort() 하는 법 [숫자배열].sort((prev, curr) => prev - curr) 역순) [숫자배열].sort((prev, curr) => curr - prev) Array.prototype.from() 유사배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 생성한다. // ex) Map 에서 배열 만들기 const mapper = new Map ([ [ ' 1 ' , ' a ' ] , [ ' 2 ', ' b ' ] ] ) Array.from(mapper.value()) // [ ' a ', ' b ' ] Array.from(ma..