분류 전체보기
패스트캠퍼스 챌린지 9일차 - 리액트 컴포넌트 생명주기
리액트의 컴포넌트 생명주기는 굉장히 유명한 도표로 한눈에 알수있다. 이 도표는 클래스 컴포넌트에 맞게 표기되어있고 강의 또한 리액트 공식문서에 나와있는대로 클래스 컴포넌트를 기준으로 설명한다. 요즘 강의를 들으면서 vscode 세팅이 귀찮을거 같아서(CRA를 이용한 세팅) repl.it을 이용하고 있는데, 클래스 컴포넌트의 this에 대한 특이점을 설명해 주었는데, 그것을 좀더 쉽게 arrow-function을 이용하면 binding을 따로 하지 않아도 해당 클래스 내의 함수인 것을 인지한다는 내용의 코드를 적용했더니 @babel/plugin-proposal-class-properties 를 install 해야된다는 에러가 떠서 install 했는데 제대로 작동하지 않아 강의로 의미만 설명듣고 넘겨버렸다..
패스트캠퍼스 챌린지 8일차 - 리액트 Props, State
Props 이번 강의에서는 Props의 정의라기보다는 사용방법, 컴포넌트를 추출해서 활용하는 이유(재사용성) 등을 강조했다. - Props는 속성, Property의 약자이다. 이는 jsx를 사용하여 커스텀 컴포넌트가 다른 컴포넌터에서 사용되는 구조를 보면 왜 Property라고 명명했는지 쉽게 알수 있다. 위와 같은 표현법을 사용하고 있는데 그냥 한눈에 봐도 html 태그와 유사하다. 컴포넌트는 React 엘리먼트를 return 함으로 props는 자식요소들에 영향을 미친다. props 이름은 컴포넌트 관점에서 명명하는 것을 권장한다. 이는 props를 name, age, hobby로 명명하는 것이 아닌 user로 유의미하게 짓는 것을 말한다. 컴포넌트를 추출할 때 어떤한 의미를 가지고 있는 것이 개별..
패스트캠퍼스 챌린지 7일차 - 리액트 JSX 알아보기
JSX 없이 사용하는 React React는 자바스크립트 라이브러리로 JSX 를 사용하지 않아도 모든 것을 자바스크립트로 구현할수 있다. 그러나 리액트를 사용하면서 자바스크립트보다 JSX를 선호하는 이유는, 기존에 자바스크립트로 구현할수 있음에도 JQuery를 많이 사용했던 이유 중 하나, 자바스크립트로 작성된 코드가 JSX로 작성한 코드보다 길고 복잡하기 때문이다. /* JSX */ class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , document.getElementById('root') ); /* JAVASCRIPT */ class Hello extends Rea..
패스트캠퍼스 챌린지 6일차 - 리액트 상태 끌어올리기, 데이터 fetch하기
See the Pen state lifting by BEGINNERWW (@beginnerww) on CodePen. State 끌어올리기 형제컴포넌트가 존재하고 어떠한 액션을 취할때 형제컴포넌트의 state(값, 데이터 등)이 필요할 때, 해당 상태값을 각각의 컴포넌트 내에서 관리하는 것이 아닌 부모컴포넌트로 lifting up 하여 관리하는 것을 말한다. 단순한 구조(연관된 컴포넌트가 몇 되지 않을때)일 경우 lifting up(상태를 부모가 관리), Props drilling(props를 자식 컴포넌트로 하달)을 함에 있어 큰 문제가 되지 않으나, 과도할 경우 어디서 전달되어온 값인지 추적하기가 어려워져 유지보수에 문제가 생긴다. 이를 보완하기 위해 Context Api나 상태관리 라이브러리(red..
패스트캠퍼스 챌린지 5일차 - 리액트 Key와 리렌더링
key와 리렌더링 효율적으로 변화를 감지하고 리렌더링 하기 위해 리액트에서는 key라는 엘리먼트 리스트를 만들때 포함해야되는 특수한 속성을 지원한다. key는 기존 트리와 이후 트리의 자식들이 일치하는지 확인해주는 역할을 하기 때문에, 전역에서 유일할 필요없이 형제요소에서만 유일성을 유지하면 된다. See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen. key는 고유하게 식별할 수 있어야 하기 때문에 대부분의 경우 데이터의 ID 값을 사용한다. 유일하게 사용할 수 있는 값이 없을 경우 인덱스를 key로 사용할 수 있으나, 인덱스를 key로 사용하게 되면 재배열이 일어날 경우 컴포넌트에 예기치않은 문제가 발생할 수 있기때문에 주의해야한다. (여기서 인덱..
패스트캠퍼스 챌린지 4일차 - 리액트 element 다루기
Element에 style 입히기 - 이미 html 태그로 정의되어있는 element는 class 를 인식하지만, 커스텀 element는 class를 인식하지 못하기 때문에 className으로 사용한다. - style 적용은 className을 사용하여 css를 작성하는 것과 인라인으로 주입하는 방법이 있다. - 인라인으로 주입할 때는 객체형식으로 작성해야하며, 속성명은 카멜케이스로 작성해야한다. - 커스텀 컴포넌트 형식으로 작성하여 적용할때는 태그 내에 모든 것들이 props로 전달되기 때문에, 전체를 사용할때는 파라미터 객체로 받고, 부분 사용시에는 비구조할당으로 받는다. { className } 등 Ref로 DOM 다루기 강의에서 useRef에 대한 설명이 너무 간단해서 공식문서를 참고했다. DO..
패스트캠퍼스 챌린지 3일차 - 리액트 Hooks
리액트는 컴포넌트 단위로 사용되는데 여기서 컴포넌트란 element의 집합을 의미한다. ex) input 여러개~, form 등등을 요소로 칭한다. 지난 강의에서 바닐라js로 구현한 검색입력창을 리액트 훅(useState)을 이용하여 구현해보았다. See the Pen 검색입력창 vjs by BEGINNERWW (@beginnerww) on CodePen. 컴포넌트 상태관리 : useState (함수형 컴포넌트에서 변수 관리) const [keyword, setKeyword] = useState("") useState의 return값이 배열형태이기 때문에 변수 선언시 배열의 비구조화 할당(destructuring) 기법을 이용해 두 개의 변수를 선언한다. (물론 const keywordState = Re..
패스트캠퍼스 챌린지 2일차 - 리액트의 리렌더링
오늘은 리액트의 리렌더링에 대한 내용과 이벤트 핸들링에 대해 공부하였다. 리액트의 장점 으로 많이 화자되는 것 중 리렌더링에 대한 부분이 있다. 리액트는 가상돔을 통한 컴포넌트 비교로 변경된 내용을 파악하고, document 전체를 리렌더링하는 것이 아니라 변경된 내용이 사용되는 컴포넌트만 리렌더링한다. 이는 웹개발에 있어서 성능 최적화와 직결되는 장점이다. 성능 최적화하면 리플로우(reflow), 리페인트(repaint)의 개념을 알아야된다. 브라우저가 동작할때 리플로우는 배치, 리페인트는 그리기에 해당하는데, 리플로우는 플로우작업(DOM트리 + css/javascript 를 합쳐주면서 해당 돔요소의 크기와 위치에 배치하는 것)을 다시 하는 것을 의미한다 렌더트리를 기반으로 화면을 그리는 작업을 다시 ..
패스트캠퍼스 챌린지 1일차
최근 회사에서 리액트, node.js(koa.js) spec으로 프로젝트를 진행했었는데(외주??였나 그랬음) 리액트 기본 강의(벨로퍼트님, John Ahn님 등)만 듣고 실제 리액트에서 자주 사용하는 상태관리 라이브러리, ui라이브러리 등 실전에 필요한 내용은 거의 전무하다시피 했다보니 한달내내 생고생하고 프로젝트는 빠그러지게 되었던 경험이 있었다. 리액트 처럼 생태계가 활성화 되어있고 광범위할 때에는 활용능력에 따라 완성도의 차이가 결정되는데 경험이 전무하다시피하니 프로젝트 진행속도도 더뎠고 구현한 기능 자체의 state 관리가 어려웠었다. (상태관리 라이브러리가 redux만 있는 줄 알았었고 mobx는 처음 들어봤는데 심지어 중간에 스택이 바뀌는 참사도 있었다.) 그렇다보니 회사에서 리액트 실무 코드..
[Javascript] 날짜와 관련된 <input> 요소의 type(date, month, week) 활용하기 (유효성, 포맷전환, 데이터 핸들링)
See the Pen onChangeInputType by BEGINNERWW (@beginnerww) on CodePen. 목적 - 기간설정으로 파라미터값을 전달하여 범위에 해당하는 데이터값을 가져온다. 과정 1. 태그에 일간, 주간, 월간, 연간을 선택할 수 있게 option을 주고 값이 변할때마다 이벤트를 실행한다. 2. select 태그의 값이 변할때마다 onChange이벤트로 기간 범위 템플릿을 변경해준다. (function onChangeCal(event)) 3. 범위값이 변경될때 마다 유효성 검사를 실시한다. (시작일 : startValidity(event) / 종료일 : endValidity(event)) 연도별 월별 주별 일별 ~ 태그의 기본 값을 설정하려면 태그의 속성으로 selecte..
[Javascript] 리덕스(Redux) 알아보기
리덕스(Redux)란? - 자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구 리덕스 devTools 사용하기 - 리덕스를 이용하여 중앙집중식 state 관리를 할때 리덕스 devtools(크롬 확장 프로그램)을 설치하면 해당 웹애플리케이션을 사용할때의 state 변화를 구동 시작부부터 확인할수 있다.(서버 내리기전 언제든지) - 데이터를 json형태로 받거나 아니면 반대로 데이터를 임의적으로 넣어 보는 것도 가능하다. ✔ 기본개념 - 리덕스에서 사용되는 키워드 숙지하기 var store = Redux.createStore( reducer ); var state = store.getState(); 1. 스토어(Store) 직접 액세스하거나 변경할 수 없는 단일 중앙 집중식 상태(..
[Javascript] table에 동적으로 행(row), 열(column)추가, 삭제하기, td 너비 일정하게 유지하기
See the Pen Dynamic generation Table Row by BEGINNERWW (@beginnerww) on CodePen. 태그에 동적으로 row(행) 추가하기 - 본 코드는 10줄씩 출력되고 페이징 기능을 고려하여 작성하였다. 추가 클릭 이벤트 onClick="userAdd()" 1. var trCnt = document.getElementsByTagName('tr').length; - tr 태그의 갯수를 구한다. 2. 기존에 입력되어있는 데이터가 있을 경우 해당 데이터의 index를 담고 있는 변수 baseCamp를 trCnt에 대입한다. 3. row가 10줄이상이 된 시점(즉, 11행)이 되었을때 첫번째 row 를 숨긴다. 4. $('#tbHead').after(inner); ..