post-thumbnail

JavaScript CSV download

회사에서 기능을 만들다가 javascript로 처음 csv 파일 다운로드 기능을 만들어 보았다.처음엔 와... 어떻게 하지... 구글구글... 역시 구글엔 많은 정보가 있었다.push를 할때 replaceAll(',','')을 하여 아이템 안에 ,이거를 다 제거해주고

2021년 11월 22일
·
0개의 댓글
post-thumbnail

React-Redux #2

Action을 하기 전에 state가 구상되어 있어야 한다.액션은 사실 그냥 객체 입니다. (플레인 객체)두 가지 형태의 액션이 있습니다.{type:'TEST'} // payload없는 액션{type: 'TEST', params: 'hello'} // payload 있

2021년 4월 29일
·
0개의 댓글
post-thumbnail

React - Redux Basic #1

이전에 공부했던게 ContextApi를 배웠다. 리덕스는 context에 의해서 우리가 어떻게 하면 프로그램 복잡도를 최소한으로 하고 규칙화된 코드를 짤 것이냐에 집중을 하면 보면 된다.하위 컴포넌트에서 최상위 컴포넌트에 있는 메서드를 이용해서 데이터를 set해서 렌더

2021년 4월 20일
·
0개의 댓글

React- 컴포넌트 간 통신 , Context API

컴포넌트 간 통신 컴포넌트를 많이 만들면 컴포넌트 안에서의 로직을 만드는 것도 중요하지만 컴포넌트 간에 통신하는 것도 골머리를 아프게 된다... > 프로젝트를 진행하면서 Atomic Design을 사용했었는데....힘든 기억이 새록새록 들었던 기억이 있다.. 하위

2021년 3월 28일
·
0개의 댓글
post-thumbnail

JS- Intersection Observer

무한 스크롤을 구현할때 가장 아래 요소를 관찰하는 방법이다.(리플로우가 안일어 나서 성능이 좋다.)처음에 관찰자를 만들자 교차로 관찰자를 만들고 2개의 인수로 콜백과 옵션이 필요하다.그리고 무엇을 관찰하고 싶을 거를 설정하자.console에 찍히는것은 $containe

2021년 3월 20일
·
0개의 댓글

React Key와 index, props그리고 State

리엑트에서 배열을 렌더링 했을때 어떤 요소에 변동이 있을때 key를 사용한다. key또는 index를 넣어도 돼는데 index를 넣는 방는데 index를 넣는 방식은 선호하지 않는다.key는 React가 어떤 항목을 변경 추가 또는 삭제할지 식별하는 것을 돕는다. 성능

2021년 3월 18일
·
0개의 댓글

React- Hooks #2

나만의 훅을 만들어 보자.파일 하나를 생성하자. useWindowWidth.js파일을 만들자.useWindowWidth.jsExample5.jsx이렇게 하면 name 옆에 현재 가로값이 나올 것이다. 위에서 하고 싶었던 거는 가로값을 줄었다 늘렸다 하면 가로값이 화면에

2021년 3월 12일
·
0개의 댓글

React- Hooks #1

Hooks New in React 16.8 컴포넌트 간 통신 Context APIuseState 보통 class 컴포넌트에서 state를 쓰는 것 처럼 function 컴포넌트에서 쓸려고 나온것이다.useEffect: 보통 함수에서는 라이프스타일을 사용할 수 없다.co

2021년 3월 12일
·
0개의 댓글
post-thumbnail

React Hoc

inputselecttextarea ...등이 있다.input 태그에 상태가 어디에 있나? value값이 어떻게 변하는지 상태를 가지고 있다.특정 상태가 있다.( 유저의 행동에 의해서 바뀐다)상태를 가지고 있는 특정 엘리먼트와 그 엘리먼트를 가지고 있는 컴포넌트의 관계

2021년 3월 11일
·
0개의 댓글

React 컴포넌트

리엑트는 컴포넌트를 만들어서 웹 사이트를 잘 만드는게 우리의 목적이다.Hooks 이전에는 컴포넌트 내부에 상태가 있다면 class를 이용해서 만들고 라이프사이클을 사용해야 한다면 class를 오버라이징 해서 사용한다. 관계가 없다면 function을 사용한다.Hooks

2021년 3월 11일
·
0개의 댓글

React

리엑트 세계에서의 컴포넌트는 오직 랜더링과 업데이트만을 한다.Component Based Development \- 독립적인 코드 블럭(HTML + CSS + JavaScript)작업의 단위Virtual DOM직접적으로 DOM을 직접 다루지 않음JSXNOT Templ

2021년 3월 11일
·
0개의 댓글

Ajax

Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest객체를 기반으로 동작

2021년 1월 8일
·
0개의 댓글

자바스크립트 비동기 프로그래밍

실행 컨텍스트에서 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성이 된다. 그리고 함수 실행 컨텍스트는 실행컨텍스트 스택에 푸시되고 함수 코드가 실행된다. 그리고 종료하면 스택에서 제거된다. 이게 동기적으로 할 수 밖에 없다. 자바스크립트 엔진은 단 하

2021년 1월 7일
·
0개의 댓글

자바스크립트 타이머

함수를 명시적으로 호출하면 함수가 즉시 실행된다. 근데 만약 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이 후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다.타이머 함수는 ECMAScript사양에 정의된 빌트인 함수가 아니지만 브라우저 환경과 No

2021년 1월 7일
·
0개의 댓글

자바스크립트 이벤트

이벤트 브라우저는 처리해야할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다. 예를 들어 클릭, 키보드 입력, 마우스 이동등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라고 하고

2021년 1월 7일
·
0개의 댓글

#1 DOM part.2

자식 노드 탐색 이전에 NodeList와 HTMLCollection에 대해서 공부했었다. 이제 DOM 트리의 노드를 옮겨 다니며 부모, 형제, 자식 노드 등을 탐색 해야 할 때가 있다. 다음 예제를 살펴보자. ul요소는 3개의 자식 요소를 갖는다. 이때 부모의 i

2021년 1월 7일
·
0개의 댓글

#1 DOM part.1

DOM이란 DOM이란 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API,즉 프로퍼티와 메서드를 제공하는 트리 자료 구조이다. > 트리

2020년 12월 22일
·
0개의 댓글

브라우저 렌더링 과정

브라우저가 HTML,CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링을 할까? 일단 파싱이란건 무엇일까? 파싱은 프로그래밍 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해 > 토큰은 문법적

2020년 12월 14일
·
0개의 댓글

디스트럭처링 할당

디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개이상의 변수에 개별적으로 할당 하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.ES5에서 구조화된 배열을 디스트럭처링하여 1개 이

2020년 12월 11일
·
0개의 댓글

Rest 파라미터와 스프레드 문법

Rest 파라미터는 매개변수 이름앞에 세개의 점...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달 받는다.일반 매개변수와 Rest파라미터는 함께 사용할 수 있다.일반 매개변수 앞에 Rest 파라미터는 못 쓴다.이처

2020년 12월 9일
·
0개의 댓글