박재형 / IT 개발 공부

React에서 반복문은 map을 많이 쓴다

1) 개요  - 이벤트 핸들러 (이벤트함수)는 함수 컴포넌트 안에서 정의함             //함수 컴포넌트  ex> function App() {       // 이벤트 함수      function go( ){ }        return (           JSX);}; - JSX에서 이벤트 처리는 카멜표기법(onClick, onChange) 을 사용- 기본문법  onClick={이벤트함수명}    onClick={go}     onClick={arrow함수}      onClick={( )=>go( 값 )} 기본 문법 -명시적으로 함수 호출- 이벤트 객체는 자동으로 전달 안됨. 명시적으로 전달해야 된다.ex>   2) 이벤트 객체 사용 가능  - e.preventDefault( );  - ..

import logo from './logo.svg';import './App.css';import zzang from './assets/zz.jfif' //자식 컴포넌트const Avatar = (props)=>{  console.log(props);   var username = props.username;  var age = props.age;  var children = props.children  // children 안에 h2태그, img 태그 내용이 들어가있음   return (    div className="Avatar">      이름: {username}br>br>      나이: {age}br>br>      {children}br>br>    div>  );};//부모 컴포넌트fu..

속성 이용 props1) 용도   - 화면 레이아웃이 중첩된 형태로 되어있고     이 때 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법  ( 단방향 ) 2) 특징  - 단방향 ( 부모에서 자식으로만 전달 가능 )  - 전달되는 데이터 종류 제한이 없음  - 모든 데이터는 root (한군데)에서 관리한다 부모에서 자식에게 데이터를 전달1. 부모 컴포넌트에서 변수를 선언하고2. 자식 컴포넌트 이름 안에 변수들을 적어준다3. 자식 컴포넌트 파라미터로 props로 받으면 끝 객체분해할당 방식 propsfunction Avatar2(props) {  //객체분해할당  const { username, xxx, address } = props;  return (    div className..

JSX 1) 개요 - JSX ( Javascript XML ) - 웹브라우저에 랜더링되기전에 html로 변환됨 ( babel 도구 이용 )   즉 JSX는 웹브라우저에서 직접 사용이 불가능한 비표준문법  2) 특징 - 반드시 root 태그가 있어야됨root 태그인 className="App" 안에 말고밑에 태그를 붙이면 오류남 태그 여러개 쓰고 싶으면 root 태그를 로 감싸주고 사용한다div가 있어야하면 div로 감싸주면된다  - JSX에서 JS의 변수값등을 출력할 때는 {변수값} 사용  - { 변수값 }는 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능    ( 논리값, null은 안나옴 )  - 논리값 ( true / false )와 null은 { 변수값 } 사용시 출력이 안됨   - C..

리액트 앱 삭제 후 재설치하면 된다npm, npx 구분 잘하기

1. 개요 - facebook 제공 - 프론트엔드 프레임워크 ( React, Vue, Angular )    => JS 기반- MVC 패턴에서 View를 담당- 가상 DOM 이용 ( 복사본 ) 해서 빠른 DOM 처리 가능- 개발방법 2가지  가. 함수형    - 현재 개발 방법    - 일반함수 가능       arrow 함수 가능    - 클래스 컴포넌트에서만 사용가능한 문법들이 있었음      버전업되면서 함수에서도 사용가능하도록 문법지원 (hooks 지원)   나. 클래스    - 과거에 주로 사용  2. React.js 종류 3가지 1) CSR ( Client Side Rendering )     - 웹브라우저에서 랜더링하는 방식   2) SSR ( Server Side Rendering )   ..

위에 두개가 같은거임  최종 정리    Headers에 Authorization 뒤에는 Bearer 띄우고 토큰 복붙

1) 개요 - REST 기반의 어플리케이션에서 사용되는 인증방식 - token은 사용자의 id + pw + 추가정보를 암호화한 것  2) Token 구성요소 - header, payload, signature 3가지로 구성    가. header       type: JWT       알고리즘    나. payload       - 사용자가 원하는 데이터 설정       - 표준속성이 제공          ( sub: 주제,            exp: 만기일            iat: token 생성시간           .. )    다. signature         - 시크릿 정보 ( 토큰이 유효한지 체크 )=> 암호화된 토큰의 decode는 jwt.io 에서 확인 3) Token flow r..

1) 의존성 설정 시큐리티는 csrf 비활성화!! 여긴안했음 Talend API tester 시큐리티 적용 ( 근데 이것만으론 안됌, 리액트에서 로그인했는지 안했는지 알수가 없음, 토큰 사용해야됨 )