Front-End(Web)
-
[React.js] React FormsFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 22:55
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 4 지난 포스팅에서는, PropTypes라는 props의 type을 검증하는 라이브러리에 대해 공부했다. 이번에는 React Form에 관해 공부한 내용이다. 기존 React를 쓰지 않은 환경에서는, HTML에 태그내 , 등 태그에 정보를 입력하였다. 또한, 이 정보를 을 통해 Submit하여 업데이트 처리했지만, 이는 React에서 선호하는 방법이 아니다. 하지만, React Form에선 매 입력/삭제의 순간순간을 서버에서 확인에서 확인하고 스크린을 업데이트 해야하며, 그렇기에 Form과 rest App들이 실시간 연동되어있는게 이상적이다. 📒 Event Listener : onChange 지금까지 에 종종 적용해온 onChange이다. rende..
-
[React.js/Side Lib.] PropTypesFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 20:56
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 3 지난 포스팅에서는, 거대한 컴포넌트를 프레젠테이션(표현) 사이드와 컨테이너(로직) 사이드로 분할하는 법을 공부했다. 이번엔, propTypes라는 props의 확인 및 검증용 라이브러리에 대해 공부했다. 📒 PropTypes 개념 및 사용목적 props를 확인하는 라이브러리이다. Parent로부터 전달받은 props가 적합한지 점검하는 등 아래 2가지 목적으로 쓰인다. prop validation: props가 적합하게 하달되었는지 확인하는 용도. 없거나 부적합하면 console에 경고 메세지 발생. documentation: props가 컴포넌트들에 전달되기 전 미리 확인하는 속도를 높이는 용도. 📒 PropTypes 사용방법 - 설치: 터미널..
-
[React.js] Components SeperationFront-End(Web)/React - 프레임워크(React, Next) 2020. 12. 1. 18:44
🤷 React.js 프로그래밍을 위한 다양한 스킬들 - 2 저번 포스팅에서는, React에서 사용하는 Inline Styles과, 객체를 변수에 저장하여 활용하는 방법을 공부했다. 이번엔, 랜딩페이지부터 세세한 컴포넌트까지 다양한 JS파일을 분할하는 패턴에 대해 다뤄보고자 한다. 📒 Presentational Component & Container Component 아래 코드는, 기니피그 제목 및 사진(5초마다 바꿈)을 표현하는 페이지이다. 여기서 표현을 위한 페이지(Parent, Container)에서 각각의 기능을 분할(Child, Presentational)하려고 한다. import React from 'react'; import ReactDOM from 'react-dom'; const GUINE..
-
[React.js] Inline StyleFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 30. 19:19
🤷 React.js 프로그래밍을 위한 다양한 스킬들 JSX는 과 매우 유사하지만, 100% 일치하다고 보긴 힘들다. (props 지정 및 할당을 위한 inline-JS{}) 여기에는, CSS 스타일링도 들어가야 할 것이고, 또 각각의 컴포넌트들을 어떤 파일구조로 제작하는게 효율적일지 아래 포스팅하겠다. 📒 Inline CSS Styles JSX에서 기본적인 CSS 스타일링을 첨가하며, 이는 다음과 같이 작성된다.(double {{}}에 주의하자!) Please style me! I am so bland! 스타일하고자 하는 속성이 많을 경우, 이를 Object 형태로 변수에 저장해도 된다. import React from 'react'; import ReactDOM from 'react-dom'; // 속..
-
[React.js] Stateful vs Stateless ComponentsFront-End(Web)/React - 프레임워크(React, Next) 2020. 11. 29. 19:21
🤷 Component의 다른 분류방법 우리는 컴포넌트의 형식에 따라, 클래스형 컴포넌트 & 함수형 컴포넌트로 분류해서 공부했다. 이 둘의 가장 큰 차이는, 구문형식과 더불어 state의 사용가능 여부에 있었다. (클래스는 가능, 함수는 불가) 이러한 단점의 보완을 위해, 함수형 컴포넌트에는 Hooks 기능이 추가되었다. 반대로, 클래스형 컴포넌트라고 해서 반드시 state를 가지고 있는 것은 아니다. 이에 따라, 컴포넌트를 stateful / stateless 두 종류로도 나누는 것 같다. 이에 대해 공부해보았다. 📒 Stateless & Stateful Component Stateless 컴포넌트(Child)와 Stateful 컴포넌트(Parent)를 클래스형으로 각각 코드해보았다. //📂Child.j..
-
[Javascript] 제어문 - 반복문Front-End(Web)/Javascript 2020. 11. 29. 19:12
Wecode 2주차(Javascript) 미션 겸, for, while 등 반복문의 복습을 위함. 📒 반복문 - 반복문이란? 똑같은 명령을 일정횟수 혹은 조건 내에서 반복하는 제어문이다. 반복되는 코드를 이터레이션(iteration) 이라 칭한다. - 반복문의 종류 1. for 반복문 조건문을 불충족할 때 까지 반복하는 반복문이다. for (let i = 0 ; i < 10 ; i++) { console.log(i + '번째 실행'); } 먼저 for 안의 조건에는, ([초기문] ; [조건문] ; [증감문]) 순으로 들어간다. 초기문은 최초값, 증감문은 최초값의 제어(+ or -)방법, 조건문은 최초값의 증감에 따른 만족여부를 검사한다. 조건문이 false가 되는 순간, Loop가 종료되는 것이다. 2...
-
[Javascript] 제어문 - 조건문Front-End(Web)/Javascript 2020. 11. 29. 18:45
Wecode 2주차(Javascript) 미션 겸, if-else 조건문, switch 조건문의 복습을 위함. 💛 조건문 - 조건문이란? 특정조건을 만족할 시 실행하기 위한 명령어의 집합이며, 종류로는 if 조건문, switch 조건문, 삼항연산자 등이 있다. - 조건문의 종류 1. if 조건문 let score = 96; // if statements if (score >= 70) { console.log('pass'); } else if (score >= 60) { console.log('test again'); } else { console.log('fail'); }; if 조건문의 기본 형식이다. if (조건) { statements }로, 조건이 true일 때 statements를 실행한다. 조..
-
[React.js] Hooks - useEffect()Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 28. 16:58
🤷 Rendering 후에 사용되는 코드들 컴포넌트가 렌더링된 후에 사용되는 코드들이 있다. 이러한 코드들이 쓰이는 이유는 다음과 같다. 백앤드 사이드에서 변경된 데이터를 패치 데이터의 변동을 확인하기 위함 Timers(setTimeout 등) 및 Intervals(setInterval) 의 운용 위 조건들에 따라 필요시 DOM에 변화를 주기 위해 useEffect() 역시 렌더링 후의 동작을 위해 사용되는 Hooks로, 클래스형 컴포넌트의 Lifecycle 중 componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 기능을 담당한다고 생각하면 된다. 📒 useEffect() useState와 마찬가지로 React 라이브러리에서 import..