이안의 평일코딩

지난 블로깅에서는 state를 저장하고 사용하는 방법만 알아보았고, 이번시간에는 데이터 수정하는 방법에 대해서 알아보도록 하자. reducer 함수 state 데이터의 수정방법을 미리 정의하는 함수이다. state 초기값과 데이터 수정방법을 넣는다. function reducer(state = 초기값, 액션) 1. '수량증가'라는 데이터 수정방법 이름을 작명해서 넣어준다. (액션.type === 수정방법이름) 2. if문 안에 '수량증가'라는 요청이 들어올 경우 else if문에는 '수량감소'라는 요청이 들어올 경우 수정방법 정의. 3. else문 안에는 둘 다 안들어온 경우 기본 state를 결과값으로 가져올 것을 수정방법 정의. index.js let 초기값 = [ {id: 0, name: '멋진신발..

Redux란? Redux라는 라이브러리는 모든 컴포넌트 파일들이 같은 값을 공유할 수 있는 저장공간을 생성가능케 해주고 state 데이터를 관리하는 기능을 가지고 있다. Redux를 쓰는 여러가지 이유 중 하나는 props 전송없이 모든 컴포넌트가 state를 가져다 쓰는 것이 가능하기 때문에 컴포넌트가 매우 깊숙히 있다면 state를 전달하기 위해 props를 수십번 써야하고 귀찮은데 redux를 세팅하면 Context API와 같이 props를 수십번 쓸 필요없이 바로 꺼내쓸 수 있게 해준다. 설치방법 터미널에 yarn add redux react-redux 를 쳐서 2개의 라이브러리를 설치한다. (또는 npm install redux react-redux) 세팅하기 index.js에 를 import..

SASS란? CSS를 프로그래밍 언어스럽게 작성가능한 Preprocessor로 CSS에서 변수, 연산자, 함수, extend, import 등을 사용가능하게끔 해준다. 브라우저는 SASS문법을 모르기 때문에 SASS로 작성한 파일을 다시 CSS로 컴파일해야하는데 node-sass를 설치하면 알아서 해준다. node-sass 설치 설치는 npm install node-sass 또는 yarn이 있을 때 yarn add node-sass을 터미널에 치면된다. 그리고 SASS문법을 쓰고싶다면 .CSS 파일이 아닌 .SCSS로 만들면 된다. 그리고 import './파일명.scss'으로 불러온다. SASS 문법 1. 변수에 데이터를 저장 $변수명 : 변수에 넣을 값 Detail.scss $메인칼라 : #ff000..

리액트를 시작하다! 리액트 입문 수업으로 생활코딩을 이틀에 걸쳐 완강했다. (수업링크 : opentutorials.org/module/4058) TMI이지만 사실 국비 과정이 풀스택인줄 알았는데 강의 중간 쯤 알고보니 백엔드 반이라는 사실을 깨달았다. 1차, 2차, 3차 프로젝트를 거치면서 점점 백엔드보다는 프론트엔드에 강력한 매력을 느끼게 되었고 독학을 결심. 이 글은 생활코딩님의 리액트 강의를 듣고 복습 겸 다시 정리해보는 글이오니, 글의 설명이 부족하다고 느낀다면 위의 수업링크를 통해 한 번 수강할 것을 적극 추천하며, 복습용으로 또는 오랜만에 상기용으로 빠르게 훑고 싶은 분들을 위한 글이라고 생각하면 될 것같다. 개발환경 npm run start public > index.html (메인페이지) ..

constructor 컴포넌트가 새로 만들어질 때 호출 getDerivedStateFromProps props값을 state와 동기화시키고 싶을 때 shouldComponentUpdate 컴포넌트가 update할 지 말 지 정할 때 (false은 호출이 안되며 true일 때 호출됨) render 렌더 함수 호출 getSnapshotBeforeUpdate 실제로 브라우저에 반영되기 바로 직전에 값을 확일할 때 componentDidMount Mounting이 끝날 때 componentDidUpdate Updating이 끝날 때 componentWillUnmount Unmounting이 될 때 componentDidCatch 에러발생 시 잡을 때

자바스크립트란? HTML은 구조, CSS는 디자인, 그리고 자바스크립트(JavaScript)는 동작을 담당한다고 생각하면 쉽다. 자바스크립트 프레임워크인 리액트(React), 뷰(Vue.js), 앵귤러(Angular)를 제대로 활용하기 위해서 자바스크립트의 이해는 필수이며 프론트엔드 뿐만 아니라 백엔드 개발자에게도 중요하다고 말하기에 입아픈 언어라고 할 수 있다. HTML 외부에 자바스크립트를 기술하고 싶을 때는 하기와 같이 불러옵니다. 변수 let과 상수 const let은 데이터 값 변경이 가능한 변수이며, const는 데이터 값의 수정이 불가능한 상수이다. 둘 다 데이터 값에 이름을 지정하여 사용하고 싶고 데이터 값을 반복해서 사용하기 위해서 사용한다. // 변수 초기화는 변수 let만 가능하며 상..

2020.11.19(목) 콘솔창에 하기와 같이 입력해줘서 패키지들을 다운로드 받는다 install.packages("rJava") install.packages("Rserve") install.packages("multilinguer") library(multilinguer) install_jdk() install.packages(c('stringr', 'hash', 'tau', 'Sejong', 'RSQLite', 'devtools'), type = "binary") install.packages("remotes") remotes::install_github('haven-jeon/KoNLP', upgrade = "never", INSTALL_opts=c("--no-multiarch")) library(..

2020.11.19~20(목~금) PROCEDURE, FUNCTION => 재사용을 위해! SQL -- 게시판 테이블 1 2 3 4 5 6 7 8 9 10 11 12 -- 게시판 CREATE TABLE project_board( no NUMBER, name VARCHAR2(34) CONSTRAINT pb_name_nn NOT NULL, subject VARCHAR2(1000) CONSTRAINT pb_sub_nn NOT NULL, content CLOB CONSTRAINT pb_cont_nn NOT NULL, pwd VARCHAR2(10) CONSTRAINT pb_pwd_nn NOT NULL, regdate DATE DEFAULT SYSDATE, hit NUMBER DEFAULT 0, CONSTRAINT..