STUDY61 뷰 에셋 컴포넌트 (VAC, View Asset Component) 개요 JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데, 목적을 둔 컴포넌트 설계 방법론이다. Normal Pattern 특징 Business Logic과 UI 처리를 바인딩 하여 개발을 하게 된다. jsx, view logic, business logic 이 혼합(같이)하여 사용 FE 데이터 작업 과정에서 단순한 props 나 state 를 수정함에 있어서도, JSX 영역에 대한 수정이 필요하다. 이때, UI 처리와 바인딩 부분이 같은 페이지였을 경우, 영역 겹침으로 인한 코드 충돌이 발생한다. VAC Pattern 특징 view logic과 JSX 와 컴포넌트로 분리에 대한 가이드를 제공하는 디자인 패턴. 반복, 조건부 노출 등 스타일 제어 렌더링에 관련된 처리만 수행 props 를 통.. 2022. 12. 27. [CS] Proxy Server (프록시 서버) Proxy Serve? 원래는 서버(back) 와 클라이언트 (fornt) 의 양방향 통신을 하지만, 실행 주소가 달라 주고 받는 요청이 다르기 때문에, cors err가 뜨고 요청이 막히게 된다. 그럴 때, font 의 target 을 바꿔 받는 주소를 맞춰주는 역할을 해주는 게 proxy server 이다. proxy의 기능 아이피 주소를 임의로 바꿔 접근 하는 사람의 ip를 모르게 하고, back과 font 의 주소 값을 맞춰주는 역할 ( 데이터도 가능) 방화벽 기능 웹 필터 기능 캐시 데이터, 공유 데이터 제공 기능 ( 캐시 데이터에 담아두어 유저 에게 전달 하기도 함) proxy server 사용 이유 사람들의 인터넷 사용 제어 캐시를 통한 빠른 인터넷 서비스 제공 보안 제공 제한 사이트 접근 .. 2022. 12. 26. [JavaScript] Array.prototype.reduce() | 리듀서 함수 Array.prototype.reduce() 배열의 요소들을 하나의 결과 값을 반환합니다. let arr =[ 1, 2, 3, 4 ]; console.log( arr.reduce((a,b) => a + b) ); // 10 console.log( arr.reduce((a,b) => a - b) ); // -8 리듀서 함수는 4개의 인자를 가진다. 누산기 (acc) accumulator → 콜백의 반환 값을 누적한다. 콜백의 이전 반환 값은 initialValue 이다. 현재 값 (cur) currentValue → 처리해야 할 요소 값. 현재 인덱스 (idx) → 처리해야 할 현재 요소의 인덱스. initialValue 를 제공한 경우 0, 아니면 1이다. 원본 배열 (src) array → reduce.. 2022. 12. 2. [Study] nextJS 입문 - 노마드코더 강의 정리 복습 [ nextJS | 기초 ] 강의 URL - https://nomadcoders.co/nextjs-fundamentals Next JS 특징 React 라이브러리의 프레임워크 이다. Next.js 는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 서버 사이드 렌더링(SSR) 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 됩니다. [작동 원리] - (SSR) Hydration - 빈 DOM 을 사용 하는것이 아닌 컴포넌트가 HTML 로 렌더링 된 후 빌드된 기존 DOM 에다 렌더링을 시키는 것. 브라우저에서 JavaScript를 다운로드하고 React를 실행함. 사용자, 페이지가 서로 상호 작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함. SEO 검색 엔.. 2022. 11. 29. [JavaScript] 서버사이드 렌더링 개념정리 서버사이드 렌더링 개념정리 출처 [ https://www.youtube.com/watch?v=iZ9csAfU5Os ] Sites history Static Sites ( 1990s ) 서버에 html 문서를 저장하고, 도메인 주소로 접속 시 , 그 html 문서를 보여주는 형식. 문제점 페이지 내의 다른 링크를 클릭 하면 서버에서 다시 해당 페이지 html 문서를 받아와서 업데이트를 해 출력 해주기에 사이트가 클 수록 사용성이 떨어진다. iframe ( 1996 ) 문서 내에서 또 다른 문서를 문서를 담을 수 있는 iframe 태그가 도입이 되었다. 부분적으로 문서를 받아와서 업데이트를 할 수 있게 되었다. XMLHttpRequest ( 1998 ~ ) fetchAPI의 원조이다. HTML 문서 전체가 .. 2022. 11. 28. [JavaScript] Array(배열) JS 함수 정리(2) 배열(Array) 이란? 배열은 연관된 데이터를 모아서 관리하기 위해서 사용되는 데이터 타입. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 저장하기 위한 것이라고 할 수 있다. 배열은 순서가 있는 값들을 의미 한다. 배열의 값은 요소(element) 이다. 배열의 순서는 인덱스(index) 이다. 배열의 순서는 0부터 시작한다. 배열의 정의는 대괄호 [] 로 한다. 배열 안에 요소는 쉼표로 구분한다. 배열에 접근하는 방법 배열을 조회 하려면 index 를 이용한다. // 두번째 인덱스 번호 값을 가지고 온다. let array = [1,2,3,4,5]; console.log(array[2]) // 3 // 세번째 인덱스 번호 값을 변경 array[3] = 200 console.. 2022. 11. 28. [Study] KakaoBank-gsap / 클론코딩 [ KakaoBank-gsap / 클론코딩 ] 사용 기술 HTML5 SCSS/ CSS javascript 주요 라이브러리 Swiper - 슬라이더 라이브러리 Font Awesome - icon [Gsap](https://greensock.com/gsap/) - 애니메이션 라이브러리 GSAP 이란? GSAP는 GrennSock에서 만든 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다. GSAP의 Tween을 만드는 방법 ( 기본 메서드) gsap.to() gsap.from() gsap.fromTo() 간단한 애니메이션(의 경우 위의 방법만 알면 쉽게 사용이 가능.. 2022. 11. 28. [JavaScript] 문자열 함수 실행 eval() , new Function() eval() eval()은 문자로 표현된 JavaScript 코드를 실행하는 함수이다. MDN 사이트를 확인해보면 해당 문제로 사용을 권장하지 않는다. 절대 사용하지 말라는 문구까지 사용 할 정도이다. 그럼 eval()의 대체를 알아보자 new Function() 새 함수 객체를 만든다. 이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나, 보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있다. 하지만 eval과 달리, Function 생성자는 전역 범위로 한정된 함수만 생성하기에 대체로 사용한다. const icon1 = 'hi1' const icon2 = 'hi2' const icon3 = 'hi3' const icon4 = 'hi4' for(let i = .. 2022. 11. 27. [JavaScript] ID , Class 제어 Element.id Element.className Element.id 요소의 식별자를 나타내며, HTML의 전역적인 id 속성을 반영한다. Element.ClassName 특정 엘리먼트의 클래스 속성의 값을 가져오거나 설정할 수 있다. 사용 방법 Element.id = '아이디명' Element.className = '클래스명' 2022. 11. 27. 이전 1 2 3 4 5 6 7 다음 728x90
