ice rabbit programming

Vue에서 컴포넌트 간에 데이터를 넘기고, 이벤트를 발생시키고 받아서 처리하는 것은 매우 중요하고 또 흔하게 사용되는 방식이다. 자식 컴포넌트에서 emit시킨 이벤트는 주로 v-on, @를 통해서 지정하여 발생한 이벤트에 대한 처리를 많이 하게 된다. 그런데, 같은 컴포넌트를 여러 번 사용하거나 이벤트 명이 겹치는 경우가 발생할 수 있다. (물론, 서로 다른 이벤트의 경우 이벤트 명이 겹치는 일 자체를 먼저 피해야할 것이고, 자식의 자식에서 발생할 때에는 stop이나 prevent를 사용하는 방법도 있다.) 그럴 때 string 구문을 사용해서 dynamic하게 구독할 이벤트 명을 지정해줄 수 있다. 아래에 작성하겠지만, 방법 자체는 꽤 간단한데 구글링 등 검색했을 때 잘 나오지 않아 따로 포스팅으로 정..

자바 스크립트는 오랜 기간 발전하면서 하위 호환성을 유지한 채로 발전해왔다. 하지만 2009년 ES5가 출시되면서, 일부 기능이 변경되고 추가되면서, 하위 호환성 이슈가 발생할 수 있게 되었다. 그래서 이를 해결하고자, 기본 모드에서는 새로운 기능이 동작하지 않고, 'use strict'라는 지시어가 있을 경우에만 동작하도록 적용하였다. 이것이 엄격 모드이다. 'use strict' 지시어는 단순히 string처럼 보이지만, 최상단에 위치하는 경우 해당 스크립트는 모던 자바스크립트로 동작하게 된다. 'use strict' console.log('모던 JS로 실행됩니다') use strict 지시어는 최상단에 위치하지 않을 경우 적용되지 않을 수 있다. 즉, 중간에 넣을 경우 모던 자바스크립트로 동작하지 ..

(아이패드에 필기가 있었는데, 아이패드가 충전하다가 망가지는 바람에 소실되어, 이후 글은 따로 저장해둔 요약본을 참고합니다.) 중요 정보 중요 정보의 기준을 먼저 정해야 한다. 중요 정보는 우선 개인 정보와 같이 법적으로 강제되는 항목들을 반드시 포함해야 하고, 보안등급 분석을 통해 중요 정보를 구분하여 해당 정보의 관리 정책을 수립해야 한다. 네트워크를 통한 중요 정보 노출 - 중요 정보는 서버를 떠나지 않도록 해야 한다. - 부득이하게 전송해야 하는 경우, 반드시 암호화가 필요하다. 중요 정보 암호화 중요 정보를 암호화하기 위해 정책을 수립해두어야 하고, 암호화 구현 시 안전한 키 관리를 해야 한다. 또한 관리되는 데이터에 따라 적절한 암호화 모듈을 적용해야 하고, 각 알고리즘에서 사용되는 암호키의 ..

이전 글에서 CSS에서 변수 사용하는 것을 다룬 적이 있다. 글에서 사용한 방법은 다른 CSS 파일에서 변수를 가져다가 사용할 수 있게 된다. 오늘 포스팅에서는 자바 스크립트 파일에서 사용하는 것에 대해서 소개하고, 타입 스크립트일 경우에는 모듈을 포함하는 걸 추가로 작성하려고 한다. 과정을 요약하면 CSS에서 변수를 export하고, JS/TS 파일에서 import하여 사용하는 간단한 과정이다. CSS에서 변수 선언 및 export하기 첫 번째로는 CSS에서 변수를 정의한 후에, export를 해주어야 한다. 다음과 같이 사용하면 된다. $theme-colors: ( 'someColor': #000, 'anotherColor': #FFF, ); :root { @each $key, $value in $t..

이전 글에서도 몇 번 언급했지만 Vue에서 class 형태로 컴포넌트를 정의하기 위해, vue-class-component를 주료 이용한다(공식 사이트에서도 언급한다). 일반적인 Vue.extend로 사용하는 것과 기능은 같지만 Watch, Prop 등의 사용법이 약간 달라서 헤매는데, 컴포넌트 내부 네비게이션 가드를 사용할 때도 사용법이 조금 다르다. 네비게이션 가드를 통해서 라우터 전후의 이벤트를 정의해줄 수 있다. 추가적으로 컴포넌트 내부에서 사용하는 훅은 다음과 같다. beforeRouteEnter beforeRouteUpdate (2.2 버전에 추가) beforeRouteLeave 메소드명이 명확해서, 사용하기엔 무리가 없으나 vue-class-component를 사용할 경우에는 미리 정의가 필..

윈도우 환경에서 PowerShell 스크립트를 사용할 때, 한글 깨짐이 발생하는 경우가 있다. 인코딩 문제로 발생되는 이슈인데, PowerShell CLI에서는 보통은 다음과 같이 처리하면 된다. $env:LC_ALL='C.UTF-8' 이렇게 입력하면 보통은 해결이 된다. 하지만 ps1로 스크립트를 작성해서 사용할 경우에는, PowerShell 환경에 값을 넣어줄 수가 없다. 스크립트는 어디에서나 이용될 수 있기 때문이다. 이럴 때에는 파일 저장 시에 'UTF-8 With BOM' 형식으로 저장해주면 된다. 리눅스 환경에서는 주로 BOM을 사용하지 않기 때문에 VS Code 등 편집기에서 주로 기본으로 UTF-8로 저장된다. 윈도우 환경에서는 BOM을 사용하는 것이 한글 인코딩에 잘 동작한다. VS Co..

(아이패드에 필기가 있었는데, 아이패드가 충전하다가 망가지는 바람에 소실되어, 이후 글은 따로 저장해둔 요약본을 참고합니다.) 파라미터 변조의 개념과 취약점 파라미터는 클라이언트에서 서버로 작업을 요청할 때 이라는 것을 정의하기 위해 전달하는 변수 값 이미 정해진 값이거나 입력된 값 서버 측에서 사용자가 전송하는 파라미터 값에 대한 검증이 없으면, 허가되지 않은 작업이 수행될 수 있음 이전 글에서 다루었던 것들을 비롯하여, 실제 코드가 실행될 때 파라미터를 대입하여 실행하게 되는데, 이 때 잘못된 정보를 가진 파라미터로 실행되면 위험할 수 있다. 타입 체크를 하거나, 위험한 것은 정규식으로 걸러내는 등의 조치를 취해야 한다. 특히, 서버와 클라이언트를 같이 개발할 때, 클라이언트(프론트엔드) 단에서 접근..

(아이패드에 필기가 있었는데, 아이패드가 충전하다가 망가지는 바람에 소실되어, 이후 글은 따로 저장해둔 요약본을 참고합니다.) 기본적으로 웹 서비스에는 '인증'이 들어가게 되고, 인증과 권한 관리를 위해 계정 관리가 들어간다. 로그인 프로세스는 암호화되지 않은 페이지에서 수행되지 않도록 해야 한다. 또한, 모든 인증 작업은 SSL 통신으로 이루어져야 하고, 모든 자격 증명은 해쉬(hash) 형태여야 한다. 인증 자체 만큼이나 방어나 관리도 중요한데, 가장 단순하고 많은 공격인 무작위 대입 공격 방지를 위해 로그인 시도 횟수 제한을 두고, 세션 쿠키 최신화 및 폐기 등의 관리 프로세스를 가진다. 탈취 방지도 중요한데, URL에 토큰과 같은 정보를 노출하지 않고, 자격 증명 등을 취약한 수단으로 주고받지 않..