분류 전체보기250 (내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 (내돈내산/웹) 리액트를 다루는 기술 리뷰/ 리액트 책 추천 제가봤던 모든 교과서(?)중에 구성이 제일 잘되어 있습니다. 앞에는 이해할만 했는데 뒤에 가서는 너무 어려워서 이해가 잘안갔어요 ㅠㅠ 아직 한번 밖에 못봤지만, 작은 프로젝트들 진행하면서 복습해봐야 겠네요!! 리액트를 다루는 기술을 읽기 전에... 1자바스크립트에 대한 이해도가 높아졌을때 보시는거 추천드립니다!! (HTML, CSS는 당연히 알아야 됩니다 !!) 책 전체적인 구성 이론 -> 앞에 설명한 이론을 토대로 실습진행 -> 실습한 내용의 코드 개선 *이론 부분에서 포함된 내용: 1) 기본적인 리액트의 이론과 원리 2) 리덕스, 미들웨어, Koa, 코드 스플리팅, 비동기 로딩, SSR과 같은 대규모 프로젝트를 위한 이론과 원리 좋았던 점... 2021. 8. 21. (React) 리액트 useState 사용해서 계산기 프로그램 만들기 (React) 리액트 useState 사용해서 계산기 프로그램 만들기 * 아직 코드에 주석 설명을 달지 않았습니다. 계산기 하나 만드는데 이렇게 어려운가.....?! 엄청 간단한줄 알았는데... 몇시간이나 걸렸다 ㅇㄴ.... 계산기를 눌렀을때, 복잡한 사칙 연산 까지 가능한 계산기를 구현 하기 위해 머리를 잔뜩 굴렸다. 분명 더 간단하게 하는 방식이 있겠지만, 리액트 초보자인 나로서는 아래 풀이 방법이 최선이다... ㅠ_ㅠ 혹시 계산기를 만드는 더 좋은 방법이 있다면 꼭 코드 공유해주세요.... ㅠㅠㅠㅠ... 1. 복잡한 사칙연산 가능 2. 일의 자릿수 이상 자릿수의 계산 가능 3. 기호는 먼저 클릭한 것부터 계산. (ex. 13+17*2 => 13+17=30, 30*2=60) 어려웠던 점 예를들면 (1.. 2021. 8. 20. (React) 리액트 state를 사용한 더하기 프로그램 만들기(초간단) State 직접 사용해보기 아무리 이론을 봐도 직접 사용해보지 않으면, 잘 와닿지 않아서 state를 사용하여 초간단 더하기 프로그램을 만들어 보았습니다. - 초기화 버튼 눌렀을시 & 초기화면 - 더하기 및 result 버튼 클릭시 Counter.js import React, { Component } from 'react'; import './Counter.css'; class Counter extends Component { state = { number1: '', number2: '', number: 0, }; result = (e) => { //클릭시 결과값이 나옴. //number1과 number2둘다 문자이므로 //parseInt를 사용하여 number로 형변환을 해줌. this.setState.. 2021. 8. 18. (React) 리액트 props, 컴포넌트에게 값 전달하기 (React) 리액트 props, 컴포넌트에게 값 전달하기 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 1. App에서 Props값 지정 *App컴포넌트에서 값을 지정하는 경우입니다. App.js import React from "react"; import Component from "./Component"; const App = () => { return ; }; export default App; Component.js import React from "react"; const Component = (props) => { return 안녕하세요, 제 이름은 {props.na.. 2021. 8. 18. (React)리액트 : 함수형 컴포넌트 VS 클래스형 컴포넌트 (React)리액트 : 함수형 컴포넌트와 클래스형 컴포넌트에 대해서 *이 포스팅은 "리액트를 다루는 기술"을 복습하는겸 정리한 포스팅입니다. 현재 리액트가 업데이트 됐거나 수정된 사항, 삭제된 사항이 있다면 꼭 말씀주시면 감사하겠습니다 :) 함수형 컴포넌스 VS 클래스형 컴포넌스 함수형 컴포넌트 클래스형 컴포넌트 state X O 라이프사이클 X O Hook O X 장점 1. 클래스형 컴포넌트보다 선언하기 편함 2. 메모리 자원이 클래스형 컴포넌트보다 덜 사용함. 3. 파일크기가 클래스형보다 더 작음 ... 간편한 코드 생성 단축키 에디터에서 rsc 입력 후, Tab누르기 에디터에서 rcc 입력 후, Tab누르기 코드 형식 import React from 'react'; const TodosContain.. 2021. 8. 18. (VsCode)Visual Studio Code 저장할 때 자동 코드정렬/자동 코드정렬 prettierrc 사용하기 Visual Studio Code 자동 코드 정렬 포스팅 요약 1. 저장 시 자동 코드 정렬 설정법 2. prettierrc 사용하여 원하는 형식으로 코드 정렬 Vscode 열은 후 > code > Preferences > Settings 검색창에 format on save 입력 > Format On Save의 체크박스 체크 이렇게 설정하면 저장할때마다 코드가 자동으로 정렬됩니다. Prettier 다운로드 프로젝트 폴더에 .prettierrc폴더 생성 .prettierrc 사용전 코드 .prettierrc 적용 * 아래 옵션말고도 많은 옵션들이 있습니다. 아래 링크를 참고해 주세요. https://velog.io/@kyusung/eslint-prettier-config { "singleQuote": tr.. 2021. 8. 17. 이전 1 ··· 11 12 13 14 15 16 17 ··· 42 다음
