본문 바로가기

전체 글

[vue & python & Mac & axios] ㅎㅏㄴㄱㅡㄹㄲㅐㅈㅣㄹㄸㅐ 한글 이렇게 깨질때 (한글자모분리)
100000202001152366_고객정보.txt api 연동 중에 다른건 다 잘되다가 위 텍스트에서만 백엔드(python) 쪽에서 한글이 자음과 모음이 분리되며 깨진다고 했다. 내가 요청한 api parameter 백엔드에서 디코딩한 문자 100000202001152366_ㄱㅗㄱㅐㄱㅈㅓㅇㅂㅗ.txt 그리고 해당 문자를 복사해서 메모장이나 다른곳에 붙여넣으면 또 정상적으로 나온다 해결방법 & 원인 이런 현상이 나타나는 이유는 Mac OS에서 유니코드를 처리하는 방식 때문이라고 한다. 백엔드 쪽에서 NFD 형식을 NFC(Normalization Form Composition) 로 바꾸면 끝난다. import unicodedata file_name = '100000202001152366_고객정보.txt' f..
vue router 네비게이션 가드
순서 beforeEach 어떤 페이지든 간에 이동할 때 제일 먼저 실행되는 훅 (전역가드) beforeEnter 이동하려는 라우트에 진입하기 전 호출되는 훅 / 라우터마다 각각 다르게 가드를 지정할 수 있음 beforeRouteEnter 새로운 컴포넌트를 만들기 전 호출 (next이용하여 dom업데이트된 이후 실행가능) beforeRouteUpdate 컴포넌트를 재사용할 경우에만 발생 (/shop/goodsList/1 > /shop/goodsList/2) beforeResolve 네비게이션 작업을 완료하기 전 호출하는 훅 (전역가드) afterEach 네비게이션 작업이 완료된 후 호출하는 훅 (전역가드) beforeRouteLeave 기존 컴포넌트 제거 전에 호출 (폼 작성 데이터 유실 방지용)
React vs Vue
공통점은? React와 Vue는 컴포넌트 기반이고 Virtual Dom 방식이라는 공통점이 있고 가볍고 빠르다. virtual dom 으로 빠른 렌더링 경량 라이브러리 reative component SSR 라우터, 번들러, state management 차이점은? react는 jsx / vue는 html기반 템플릿을 사용한다. react 커뮤니티가 훨씬 크다. vue가 learning curve가 낮다 react는 단방향으로만 데이터를 전달한다. vue는 양방향 데이터 전달이 가능하다. react는 class형과 함수형이 있다
hasOwnProperty & hasOwn & (key) in 차이점
hasOwnProperty란? hasOwnProperty() 는 객체가 특정 프로퍼티를 가지고 있는지를 알려주는 메소드이다. 사용법은 객체.hasOwnProperty(’확인할 프로퍼티’)이고, 리턴되는 값은 **boolean**이다. const object1 = {}; object1.property1 = 123; console.log(object1.hasOwnProperty('property1')) // true console.log(object1.hasOwnProperty('property2')) // false object1이라는 객체를 만들고, 그 후에 property1이라는 프로퍼티에 123을 담았다. hasOwnPropery를 이용해 콘솔을 찍어 property1이 있는지 체크해보면 true가 ..
Prototype 프로토타입
Prototype 프로토타입 javascript의 모든 객체는 자신의 원형이 되는 객체를 가진다. 이를 프로토 타입이라고 한다. 보이지 않는 속성이 [[Prototype]] 이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있지만 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야한다. .prototype 과 [[Prototype]] 위에 말했듯이 모든 객체는 은닉 객체인 [[Prototype]] 을 갖는다. 그리고 함수 객체는 접근할 수 있는 속성인 .prototype 을 갖는다. 이름만 보면 같은것으로 보이기 때문에 관계를 명확히 파악하여야한다. [[Prototype]] : 자신의 프로토타입 객체를 참조하는 속성이다. .proto..
new 연산자
new의 동작방식 javascript에서는 new 연산자를 통해 함수를 생성자로 호출할 수 있고, 그에 따라 새로운 객체를 생성할 수 있다. function Func() {} const makeNew = new Func(); 빈 객체 생성 {} [[Prototype]] 속성을 생성자 호출할 함수의 prototype 속성으로 지정 > 여기서는 해당 객체의 [[Prototype]] 을 Func.prototype으로 지정 객체를 생성하고 이 객체를 this로 지정 함수를 호출하고 해당 함수의 this로 위에서 지정한 객체를 사용 > Func() 을 호출하고 이 함수에서 this를 위 객체로 지정 함수의 리턴값이 원시값이라면 새로 만들어진 객체가 리턴되고, 리턴값이 객체라면 해당 객체를 리턴 > 함수의 리턴값이..
Closure 클로져
Closure클로저란? 클로저란 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 떄도 그 스코프에 접근할 수 있게 하는 기능을 말한다. function outer() { var a = 2; function inner () { //현재 a를 참조하고 있음 console.log('inner함수실행! a는? ', a); //함수가 속한 렉시컬 스코프 기억 (outer에서 a를 찾아서 기억) } //결국 inner가 클로져임 return inner; } var test = outer(); // 여기서 콘솔을 찍어보면 function inner()가 담겨있음 test(); //inner()가 실행되면서 기억된 a였던 2가 찍힘 inner함수실행! a는? 2 여기서 GC(Garbage Co..
Hoisting 호이스팅
‘ var와 함수식은 위로 끌려올려진다. ’ var의 경우 1. 내가 짠 코드 console.log(a); var a = 2; 2. 실제 컴파일된 자바스크립트 var a console.log(a); //undefined a = 2; 3. 실행결과 💡 undefined 내가 짠 코드의 소스를 보면 변수 a가 선언되기전에 a를 콘솔로 찍었다. 그렇지만 오류가 나지 않는다. (물론 값을 제대로 찾지는 않는다.) 이유는 var와 함수식이 최상단으로 끌어올려지기 때문이다. 이걸 바로 Hoisting이라고 한다. 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데, 이 때 var a = 2; 를 var a 와 a = 2 2개의 구문으로 본다. var a 선언문을 컴파일을 할 때 처리하고, 실제 실..
Scope 스코프
Scope란? 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 그 식별자를 검색하는 구조라고 이해하면 된다. Lexical Scope 렉시컬 스코프 렉시컬 스코프는 변수, 함수의 스코프이다. 변수, 함수를 어디에 썼는가를 보고 그 스코프가 판단이 된다. Scope chain 스코프 체인 현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식을 말한다. 실행컨텍스트가 생성될 때 마다 Lexical Environment가 만들어지고, 그 안에 밖을 참조하는 outer 참조값이 있는데, 이 outer 참조값이 상위 스코프의 Lexical Environment를 가리키기 때문에 체인처럼 연결이 된다...
Event Loop 이벤트 루프 (태스크큐 & 마이크로 태스크 큐)
‘이벤트 루프란 ?’ 자바스크립트 엔진 > 요청을 동기적으로 처리 javascript는 단일스레드 기반 언어로 자바스크립트 엔진이 단일 콜스택을 갖는다. 즉, 요청이 동기적으로 진행된다는 의미이다. 비동기 요청 처리는 브라우저나 Node.js가 담당 자바스크립트 엔진이 비동기로 처리할 수는 없다. 비동기 요청은 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행환경을 연동시켜주는 장치가 이벤트 루프이다. 따라서 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다. 태스크 큐 Task Queue & 마이크로태스크 큐 Microtask Queue 자바스크립트 실행환경은 2가지 큐를 가지고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크(Task 할일)이 담기..

티스토리툴바