익명의 개발노트

CRA로 손쉽게 설치 할 수 있지만, 수동으로 설치를 진행해보고자 한다. 1. 수동 설치 이유 1) 프로젝트 규모가 커지면 eject 해야하는 경우가 발생하는 경우가 생김 2) CRA로 설치하는 것보다 작업하면서 필요한 부분을 추가해 나가는 것이 나중에 빌드시 시간 감소에 유리하다. 2. 수동셋팅방법 1) npm 설정하기 npm init 2) npm package 추가 //웹팩설치 npm install --save-dev webpack webpack-dev-server webpack-cli //바벨설치 npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react babel-preset-es2015 //리액트설치 ..

1. 유튜브 클론간 더보기 클릭시 늘어나고, 다시 누르면 원상복귀 css 기능에 overflow:hidden 을 사용하여 해결. css는 경험이 중요한 듯 하다. 자세한 내용은 내일 멘토님께 리뷰 받고 작성해야겠다. 2. 제이쿼리는 리액트의 등장으로 레거시가 되어버린 시점에서 단순 이벤트 효과나 ui다룰때 매우 효과적이다.

1. git issue commit git commit -m "fixes #이슈번호" 2. HTML 테이블 Tag 사용시 주의사항(양식준수) 1) tr은 무조건 있어야함. 2) tr은 thead 또는 tbody에 있어야함. //코드가 깨지네 -_- 3. 중복되는 path 설정 줄이기 import Title from '../../Components/Title/Title'; 위와 같이 import값 복잡하게 나올 경우, page와 component에 index.js를 만들어서 Title>index.js export {default} from './Title'; 위와 같이 작성해주면 import Title from '../../Components/Title'; 위와 같이 실제로 줄일 수 있다. 4. impor..

리액트 이벤트 핸들러 1. 트윗메인화면에 트윗을 입력하고 버튼 누르면 아래에 트윗 리스트 나오게 한다. 2. 트윗메인화면에서 textarea는 TweetRightBox라는 컴포넌트로 불러와서 메인화면에 조립했다. 트윗메인화면 ...(생략) TweetRightBox에서 이벤트값을 props로 넘겨서 트윗메인 화면에서 받은 다음, 이벤트 구현하였다. onChange는 textarea 내에서 값이 변화하면 브라우져가 인식한다. 최종적으로 넘길데이터는 유저이름, 메시지내용, 프로필사진, 트윗생성날짜이다(유저가 정한다.) handleChange =(e) => { this.setState({ username : this.props.username, //다른 컴포넌트에서 값을 불러왔음. inputMessage : e..

css 작업의 종류에는 몇가지가 있다. 1. 순수 CSS파일로만 작성하는 방법 2. Sass 3. CSS module 4. styled-components 살펴보자. 문법은 약간씩 다르다. css의 JS같은 느낌? 1. Sass 장점 1) 자주쓰는 CSS 스타일 분리해서 사용가능 2) sass-loader 설정 커스텀마이징 가능 : 1) 경우나 여러폴더 안에서 해당 scss 파일 찾아야하는 경우 용이 3) node_modules에서 불러오기 가능 : 파일이 겁나게 많다.. 2. CSS Module 장점 1) className이라는 라이브러리 사용가능 : 클래스 묶어서 사용가능 2) Sass와 혼합해서 사용가능 : Modules.css 를 Modules.scss 로 변경해서 사용가능. 코드 변경 약간 해줘..

라이프싸이클을 보자마자. 안드로이드 라이프싸이클이 생각나는 것은 왜일까.... 위 메서드를 작성 후 실행하면 실행순서는 Constructor → getDerivedStateFromProps → render → componentDidMount 순으로 실행된다. 업데이트시에는 getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate 순으로 실행된다 각 메서드들의 용도. 1. Constructor : 초기 State를 정할 수 있다. 2. getDerivedStateFromProps : props로 받아온 값을 state에 동기화시키는 용도 3. render : 컴포넌트들을 화면에..

컴포넌트 내부에서 DOM에 직접 접근할 경우가 생기면 ref를 사용한다. 먼저 ref를 사용하지 않고 원하는 기능을 구현가능한지 살펴보는게 먼저이다. 1. DOM을 꼭 사용해야 하는경우 1) 특정 input 박스에 포커스 주기 2) 스크롤 박스 조작하기 3) canvas 요소에 그림그리기 등 2. 사용방법 1) props 설정하듯이 하면 된다. 2) 아래처럼 원하는 DOM에다가 ref를 주면된다. (...) return ( {this.box = ref}} //부모꺼에만 ref다니깐 자식 컴포넌트까지 볼수있음. > );

이벤트 방식은 html과 비슷하며, 약간다르다. 1. 이벤트효과이름은 camelCase로 작성해야함. 2. 이벤트에 JS코드 전달이 아닌 함수형태의 값을 전달함. 3. DOM요소에만 이벤트 설정할 수 있음. 우리가 만든 컴포넌트에는 이벤트를 줄수 없음. 우리가 만든 컴포넌트에 이벤트를 줘버리면 단순히 이름으로 인식해서 props를 전달해줌. 4. 이벤트의 종류는 많다. 참고 : https://reactjs.org/docs/events.html 이벤트 효과주는법 2가지 1. 랜더링할때 같이 효과부여 import React, {Component} from 'react'; import PropTypes from 'prop-types'; import './EventPractice.css'; class Event..

JSX는 리액트에서만 사용가능한 자바스크립트 문법이다. 규칙 1. return 받는 컴포넌트들은 하나의 부모컴포넌트로 쌓여있어야함. 2. JS 문법을 사용하고 싶으면 {}를 치고 그 안에 사용해야함. 3. 템플릿 사용시 문법이 약간다름. 아래와 같이 2개 만들어봤다. 속성부여하는 법을 보자. 1. 부모 컴포넌트 class App extends Component{ render() { return ( ); } } export default App; 2. 자식컴포넌트 class MyComponent extends Component{ render(){ return ( 내이름은 {this.props.name}이야. .{/*props사용시 this붙여야함. */} ) } } Props는 3가지 방법으로 컴포넌트에 ..

리액트 JS는 프레임워크가 아닌 자바스크립트 라이브러리이다. 하는 일 : 유저인터페이스를 위해서 사용하는 라이브러리임. 나온 배경 : 기존 js, html, css를 활용해서 구성해도 되지만, 웹 자체가 페이지가 아닌 웹 어플리케이션으로 발전함에 따라서 많은 컴포넌트들을 관리해야하는데, 그런 부분들을 react에서 가상 DOM을 사용하여, 사용자로 하여금, 개발에 집중할 수 있게 해준 라이브러리이다. 일일이 DOM을 만져서 변경하기엔 해야할 일이 너무 많다. 설치는 https://github.com/facebook/create-react-app 페이스북 리액트 깃헙 참고. npx create-react-app my-app cd my-app npm start //yarn을 설치한 사람은 yarn start..