Yejin Buljumeok 's 개발 스토리

* 스터디 인증 겸 기록용 - react 공부하려고 들어온 분이면 다른분 블로그를 참고해주세요..:) 이 글은 인증용 day 1 - 10.21 day 2 - 10.23 - Redirect import {Redirect} from 'react-router-dom'; 로 사용 - Style Loaders - css import './App.css' - css module import styles from './App.module.css'; - Sass import './App.scss'; import './App.sass'; - Sass module import styles from './App.module.scss' import styles from './App.module.sass' Day 2 - App..

* 그냥 스터디 인증겸 기록용 - JSX 링크로 라우팅 이동하기(1) : Link 사용 - links.jsx import {Link} from "react-router-dom" export default function Links(){ return ( Home profile profile/1 about about?name=mark ) } - app.js import './App.css'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from "./pages/Home" import Profile from './pages/Profile'; import About from './pages/About'; import N..

- Switch 여러 route 중 순서대로 먼저 맞는 하나만 보여줌 exact를 뺄 수 있는 로직을 만들 수 있음 가장 마지막에 어떠한 path에도 맞지않으면 보여지는 컴포넌트를 설정해 'not found' 페이지 설정 가능 - app.js : switch 내에서 순서대로 맞는 것을 찾아감 => exact를 써주지 않아도 순서대로 찾아가게 됨 => switch 내에서 순서대로 적어줘야함 * / -> root는 다 걸릴 수 있기 때문에 exact를 써줘야함 import './App.css'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from "./pages/Home" import Profile from './..

- SPA 라우팅 과정 1) 브라우저에서 최초에 '/' 경로로 요청을 하면, 2) react web app 을 내려줌 3) 내려받은 react app에서 '/'경로에 맞는 컴포넌트를 보여줌 4) react app에서 다른페이지로 이동하는 동작을 수행하면 5) 새로운 경로에 맞는 컴포넌트를 보여줌 npm i react-router-dom : 가장 대표적인 라우팅 패키지 ex) 실습 - about, profile, home component 생성 - 각자 경로 지정(home - '/' , profile - '/profile' , about - '/about' - browserrouter로 라우터들을 감싸줌 - 브라우저에서 요청한 경로에 route의 path가 들어있으면 해당 컴포넌트를 보여줌 -> '/abo..

* 그냥 라이브러리 설명 - ESLint : 코딩 스타일을 맞출 수 있음/ 규칙을 설정해 잘못된 부분을 알려줄 수 있음 ex) formatting : ';'를 사용하지 않으면 발견할 수 있도록 -> eslint 설치하고, node_module에서 확인 가능 npx eslint --init - Prettier : an opinionated code formatter - husky : git hooks made easy git 사용을 설정하는 것 - lint-staged : run linters on git staged files npm i husky -D npx husky install -> hook installed

- props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터 - state : 컴포넌트 내부에서 변경할 수 있는 데이터 둘다 변경이 발생하면, 랜더가 발생 - render 함수 : props와 state를 바탕으로 컴포넌트를 그림 -> props와 state가 변경되면 컴포넌트를 다시 그림 => 렌더함수에 정의해 놓는것 - props 사용 function Component(props) { return {props.message} } //class component class Component extends React.Component { render() { return ( {this.props.message} ); } } //default props //함수에서도 사용 가능 Component.defaul..

*패캠 리액트 3강 - 리액트의 핵심 모듈 2개 1) import ReactDOM from 'react-dom'; => 만들어진 리액트 컴포넌트를 htmlelement에 연결할때 사용 2) import React from 'react-dom'; => 리액트 컴포넌트 만들기 ex) ReactDOM.render{ , document.getElement~ } -------------------- * 패캠 2-3강 - 작성한 코드를 순수 실행할 수 있는 자바스크립트로 변경해주는 것 -> babel - JSX : jsx문법으로 작성된 코드는 순수한 javascript로 컴파일 ex) hello // => React.createElement("div", null, " hello") https://babeljs.io..

component 만들기 - Subject, TOC, Contents 라는 컴포넌트를 만들어 사용함 import { className } from 'postcss-selector-parser'; import React, {Component} from 'react'; import './App.css'; class Subject extends Component { render(){ return ( web world wide web ) } } class TOC extends Component { render(){ return ( html css javascript ) } } class Contents extends Component { render(){ return ( html html is hypertext..

* 그냥 헷갈릴까봐 써놓는 글.. * 기존에 이미 기본 설치는 다 된 상태에서 다른 프로젝트를 생성하려고 할때, - 프로젝트 폴더로 들어가 npm init react-app "프로젝트 이름" 으로 설정해주면 된다. - 다음, 해당 디렉터리로 들어가 npm run start해서 실행

200년만에 블로그에 들어왔다... 신입주제에 뭐가 바쁘다고 블로그를 소홀히 하다 정신차리고 공부를 시작하는 중이다.. 과장님이 리액트로 프로젝트 ui 개발을 하자고 하셔서 시작하게 되었는데 나름 재밌어서 좀 꾸준히 하다가 이것도 소홀해졌다..ㅎㅎ 우선 공부한거 적어놔야지 * 여기는 두서없이 우선 적어 놓을 예정 - 우선 코딩애플 강의를 참고했고, 코딩애플은 7강부터인가 유료여서 이후는 생활코딩 강의를 통해 진행할 예정이다. - state state: component 내부적으로 사용되는 것들, props에 따라 component를 실제로 구현하는 것 state로 변경하면 재렌더링이 일어남 state를 변경하고 싶으면 복사해서 사용해야함 / 바로 사용할 수 없음 deep copy: 단순 값공유가 아닌 서..