fullfish의 개발자 도전기

npx create-react-app 내 앱 이름 --template typescript npm i --save-dev @유형/styled-components npm i styled-components // index에서 root에러가 난다면 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) //이렇게 수정 interface : object shape(객체모양)을 TypeScript에게 설명해주는 개념 interface PlayerShape { name: string age: number } const sayHello = (playerObj: PlayerShape) => `Hello ${playerObj.nam..

오늘의 키포인트 리액트- Props, State 나의 이해 Props : 외부로부터 전달받은 값 // 바꾸기 힘든 값 State : 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 // 내부에서 변화하는 값 변경되면 리렌더링됨 상위 컴포넌트도 문법 및 중요 ex) Props : 이름, 성별 // 바꾸기 힘든거 State : 나이, 주소, 취업 여부, 결혼 여부 Props 특징 컴포넌트의 속성(property) 의미 상위 컴포넌트로부터 전달받은 값 // 컴포넌트가 최초 렌더링 될때 화면에 초기값으로 사용가능 객체 형태 // 어떤 타입 값도 받기 위해서 읽기 전용 // 변경 막기 위해 React에서 속성 및 값 할당 // text라는 속성 선언 1번 방법 텍스트 할당해보기 // 이건 변수나 문자열 둘..

오늘의 키포인트 리액트 - SPA 나의 이해 SPA(Single Page Application) : 서버로부터 페이지의 모든 부분을 받아오지 않고 중복되는 부분을 제외한 필요한 부분만 받아 페이지 업데이트 문법 및 중요 spa 장점 : 사용자와의 interaction에 빠르게 , 서버 과부하 줄어듦, 전체 페이지 렌더링 안해도되서 더 나은 유저 경험 단점 : js파일이 큼 = 첫 로딩이 긺 (html파일은 거의 비었고 대부분 코드가 js에 들어있음), 검색 엔진 최적화(SEO)가 좋지 않음 (html에 정보가 별로 없어서 검색 로봇이 동작못함) wireframe : 디자인 전에 선을 이용해 윤곽선 잡는것 라우팅(Routing) : 주소에 따라 다른 화면 보이는거 React SPA에서 라우팅을 위해 Rea..

오늘의 키포인트 리액트 나의 이해 리액트 : html에 쓸 내용들을 js에 씀, 전체 새로고침을 안해서 페이지 넘어갈때 빠름 문법 및 중요 리액트 : 프론트 앤드 개발을 위한 js 라이브러리 / 선언형, 컴포넌트 기반, 범용성 JSX( Js XMl ) : React에서 ui를 구성할떄 사용하는 문법//js를 확장한 문법 Babel : JSX를 브라우저가 바로 실행 못시켜서 브라우저가 이해하게끔 js로 컴파일해주는거 컴포넌트 : 하나의 기능구현을 위해 여러 종류의 코드를 묶어놓은것 컴포넌트 기반으로 작성시 서로간의 의존성이 없어서 독립적, 재사용 가능 JSX문법 여러 엘리먼트를 작성하고자하면 하나의 태그로 감싸줘야함 // return하려면 하나의 태그로 감싸줘야함 , 배열도 리턴 됨 CSS class 속성..