javascript10 Proxy 💡 내 공부를 위한 Proxy 정리 글이다. 프록시란 무엇인가? 나는 Vue.js를 주로 작업하는 프론트 개발자이다. Vue.js에서 객체를 콘솔로 찍을 때 순수하게 객체가 아닌 Proxy로 만들어진 값들을 마주할 때가 있다. Proxy는 왜 쓰고? 어떻게 쓰는가? 이것에 대한 글이다. Why use it? 대체 왜 프록시를 쓰는가? 프록시에 공부해보니 데이터가 변환되거나 읽어지거나 여러 경우에 프록시 트랩을 통해 제공하는 기능에서 유효성 처리나 변화를 감지할 때 사용 가능하다. 내가 실무에서 프록시를 써야하는 경우라면 어떻게 쓰겠는가? 객체를 set 해야 하는 경우 유효성 처리라던지 get 해야 하는데 객체 내에 값이 없을 경우 default 값을 처리해줘야 한다던지 주요 데이터를 처리할 때 프록시를 .. 2024. 3. 8. Curry pattern 커리 패턴의 가장 중요한 쓰임새는 partially(부분적인) 쓰임이 가능한 패턴이다. **lodash 라이브러리(_.curry)**를 사용하면 편하게 쓰긴 하지만 구현한다고 해서 힘들지 않다. 기본 구현 방법 function curry(f) { return function(a) { return function(b) { return function(c) { return f(a, b, c) } } } } function sum(a,b) { return a + b } const curried = curry(sum) curried(1)(2) // 3 function sum(a,b) { return a + b } const curried = _.curry(sum) curried(1,2) // 3 일반적인 호출 .. 2024. 3. 6. 리액트 라이프 사이클 💡 React@17 부터 `componentWillMount`, `componentWillUpdate`, `componentWillReceiveProps`는 deprecated 되었다. Mount 컴포넌트가 DOM에 붙는 과정. context, defaultProps, state 저장 componentWillMount 메소드 호출 [react@17 deprecated] render메소드로 컴포넌트 DOM에 부착 (여기까지도 마운트 중에 속함) 마운트 완료 지점에서 componentDidMount 메소드 호출 componentDidMount에서 DOM 접근 가능 이 시점에 비동기요청 또는 setTimeout, setInterval 실행 Props Update props가 변경될 때의 과정. 업데이트 발생 .. 2022. 10. 14. 자바스크립트 (기초편) 자바스크립트 쌩기초를 벗어난 당신 대단해. 👏👏👏👏👏 자바스크립트를 알기 전에 알아야 할 몇가지가 있다. 기초 지식 👇👇👇 프로세스 (Process) 사용자가 작성한 프로그램이 메모리 공간을 할당 받아 실행 중인 프로그램 단위를 뜻한다. 프로세스는 프로그램에서 사용되는 데이터, 메모리 등의 자원 + 스레드로 구성 된다. 스레드 (Thread) 스레드란 실제로 작업을 수행하는 주체를 뜻한다. 모든 프로세스에는 한 개 이상의 스레드가 존재하며 수행한다. 한개의 스레드는 싱글 스레드, 두개 이상의 스레드를 가지는 프로세스를 멀티 스레드 프로세스라고 칭한다. 동기, 비동기 동기란 ‘동시에 일어나는’ / 비동기란 ‘동시에 일어나지 않는' 을 뜻한다. 동기적이란 뜻은 쉽게 표한하자면 이렇다. 나는 A사이트에 들어간.. 2022. 4. 29. 자바스크립트 (쌩기초편🤷🏻♀️) 바닐라 자바스크립트 성능 (속도) 비교 자바스크립트란 무엇일까? 이 페이지는 이것에 대한 간단한 소개이다. 초심자 중에도 초초초초초초심자 문서이기 때문에 가볍게 넘어갈 수 있다. 대체 자바스크립트란 무엇인가? 그리고 바닐라JS란 무엇인가? 제이쿼리는 무엇이지? 정말 아무것도 모르는 사람들은 이렇게 궁금해 할 것 이다. 자바스크립트 그것이 궁금해! 자바스크립트는 웹 브라우저에서 주로 사용되는 객체 기반의 스크립트 언어이다. (오잉 함수기반 아닌가?) JAVASCRIPT ? JAVA ? 그거 같은거 아냐? 간단히 말하자면 같은거 아니다. 자바스크립트 왜 만들었나? 자바스크립트의 등장 계기는 다음과 같다. 옛날 옛적에.. 네스케이프사에서 만든 ‘네비게이터’라는 웹 브라우저가 시장을 지배했던 때가 있다. 이때 .. 2022. 4. 29. 기본 타입 정리 오랜만에 다시 정리 포스팅 시작! 이란 말은 공부를 다시 시작했다는 뜻입니다. 요즘 프론트엔드 기술에 기본으로 많이 보이는 타입스크립트를 느즈막히 시작해봅니다. 나란 인간은 기본 정의부터 보고 시작하는 타입이라 기본 타입부터 정리해봅니다. Boolean (true/false) let name: boolean = true; String let name1: string = 'I am Jeon'; let name2: string = `Jeon`; let name3: string = `I am ${ name2 }`; Number let name: Number = 333; Array 방법1. 배열 요소 타입 뒤에 []를 쓰는 것 let array1: number[] = [1, 2, 3]; 방법2. 제네릭 배열 타.. 2022. 2. 14. Youtube API 다중 동영상 제어 Youtube 영상을 다중으로 이리저리 제어하는 프로젝트 중이라. 본의 아니게 Youtube API를 열심히 만지고 있다. 지금까지 내가 알게된 바는.. local 작업시, IE에서는 playVideo()와 같은 명령어가 듣지 않는다. - ftp 에 업로드 후 확인 결과 정상으로 나온다. chrome 은 최근 업데이트를 통해 playVideo()를 막아버렸다. - iframe으로 동영상을 추가한 경우, 웹접근성과 관련하여 이번 업데이트가 이뤄진 것으로 추정된다. 무조건 클릭이 되어야만 재생이 되는데. 한가지 꼼수는 mute (음소거) 상태로 재생시에는 playVideo()가 먹힌다. - iframe 으로 넣어서 api를 연결해준 경우가 아닌, api 내에서 iframe을 만들어버린 경우엔 unMute상태.. 2021. 7. 1. Youtube API - html을 삽입하는 두가지 방법 유튜브 영상을 메인에 거는 일이 많은 편인데 그 유튜브 영상을 제어하기 위해 컨트롤 버튼을 만들어 쓰는 경우가 생겨 정리합니다 . 더 자세히는 유튜브에서 제공하는 API 설명 사이트를 통해 알아보실 수 있습니다. https://developers.google.com/youtube/iframe_api_reference?hl=ko iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API Embed a YouTube player in your application. developers.google.com 1. 첫번째 방법 - 동영상 js 로 넣기 // 유튜브 영상이 자리 할 곳입니다. html 내에 해당 동영상이 들어갈 자리를 만듭니다. 아이디 값.. 2021. 7. 1. Instagram AIP - 웹사이트에 피드 로드하기. instagram API 를 이용해서 내 웹사이트에 피드 로드하기를 구현해볼까합니다. 여기서 전제조건은 해당 인스타그램 계정이 공개계정이여야 한다는 점입니다. 그리고, 아무 계정이나 가져오진 못합니다. 해당 계정의 주인이 계정의 공개 토큰을 가져와야하기 때문입니다. 1. Instagram developer site 로그인 아래 첨부한 사이트에서 인스타 계정 로그인을 합니다. 단, 아무 계정이 아닌 피드를 가져올 해당 계정이여야 합니다. instargraim developer site URL : https://www.instagram.com/developer/ 2. Manage Clients 클릭 예시 캡쳐본에 따라 해당 버튼을 클릭합니다. 3. Register a New Client 클릭 4. 데이터 채.. 2021. 7. 1. 이전 1 2 다음
