본문 바로가기

엘리스_이론

 (33)
23.12.08(스타일 컴포넌트2) 아래 엘리먼트와의 여백은 props 속성이 large 인 경우 15px 2차원 타일형 ui 만들기에 가장 적합한 레이아웃 displasy = grid 트랙카드 만들기 //trackCard.jsx import ClassCount from "./icons/ClassCount.jsx"; import Progress from "./icons/Progress.jsx"; import LargeCalender from "./icons/LargeCalender.jsx"; import * as Card from "./Card.js"; TrackCard.defaultProps = { title: "비전공자를 위한 인공지능 기초 트랙", description: "프로그래밍 입문자를 위한 트랙입니다. 파이썬 문법과 구조를 익..
23.12.06(스타일 컴포넌트1) css framework특징에 해당하는 것 > css 파일 작성안해도 html 클래스만 적으면 정해진 규칙대로 스타일 적용됨 react 컴포넌트가 props 기본값 설정하기 위한 프로퍼티 > defaultProps react styling css module class, id 등에 random string 달아줌 > 선택자 겹칠 우려 없음 스타일 충돌 방지, 코드 격리 > 체계적으로 css 설계 가능 스타일링 직접 하나씩 해야 함 css in js library 따로 css파일 만들지 않고 jsx파일 안에서 스타일링 까지 해결 컴포넌트 재사용성 상승 js값을 props로 넘겨 해당 js값에 의도된 스타일링 바로 적용 가능 class 이름에 random string 생성되어 선택자 이름 겹칠 우려 없음 스..
23.12.04(ssr, 배포) ssr과 csr에 대한 설명으로 틀린 것 > csr로 구현해야 seo에 유리함 react 앱 배포 프로세스 > ip부여받은 서버에 react앱 배포 - 앱 빌드 웹 서버 세팅 - 앱 서빙 서버를 통해 앱 전달 - 필요한 데이터 받아 앱 로딩 SSR server rendering js프레임워크 전 초기 웹 환경에서 모든 페이지를 서버에서 빌드 클라는 별도 처리 없이 웹페이지노출 client side rendering ajax 등 기술, js프레임워크 활용해 데이터 받아 js로 페이지를 동적으로 만들 수 있게 됨 데이터는 xml, json형태로 클라에 전송 장점 js로 완전히 페이지 만들 수 있음 js 최대한도로 활용해 html, css 동적으로 생성 컴포넌트 단위로 코드 나눔, 다양한 디자인패턴 적용 > ..
23.12.1(react 테스팅) 테스팅 코드 작성 이점이 아닌 것 > 작성할 코드가 줄어 개발시간이 짧아짐 테스팅 분류 용어에 대한 설명 중 틀린 것 > 유저가 어떤 시나리올를 가지고 그 시나리오 대로 테스트 하는 경우 integration testing 사용함 react 테스팅 코드 테스트가 필요한 경우 코드 작성 후 원하는 대로 동작하는 지 알기 위함 코드에 버그가 았으면 어떤 상황에서 버그가 발생하는 지 알기 위함 코드 리펙토링 후 원하는 대로 동작하는 지 알기 위함 리액트 앱의 컴포넌트가 늘수록 컴포넌트끼리 영향 미치는 경우 많아짐 특정 코드 수정 후 어떤 컴포넌트에서 에러 발생 가능 테스팅 코드 작성 이점 미연의 에러 방지 tdd(test driven development) 등 방법론 적용해 생산성 향상 테스트 증가로 테스트 ..
23.11.29(redux) 리덕스를 쓰는 이유로 적절하지 않은 것 > 단일 페이지의 1~2개의 상태를관리할 때 리덕스에서 사용되는 용어로 틀린 것 > store - action을 받아 새로운 state 만드는 함수 redux를 활용한 상태관리 redux 앱 전체 상태를 쉽게 관리하기 위한 라이브러리 리덕스의 많은 개념들이 flux pattern에서 차용됨 > 주로 react앱과 같이 사용 쓰는 상황 앱 전체 상태관리 필요 복잡한 비동기 처리가 있는 상태 관리 필요 앱 상태 복잡하고 이것을 체계적으로 관리 필요 상태관리 패턴 도입해 협업 시 logger, devtool등을 활용해 상태 관리 필요 핵심원칙 single source of truth - store는 딱 하나이고 모든 앱의 상태는 이곳에 보관됨 immutability - ..
23.11.27(상태관리) 상태관리 기술의 장점으로 틀린 것 > 파악할 로직과 레이어가 줄어듬 flux구조 데이터 흐름 순서 > dispatcher - store - view 상태ui 변경과 관계 없어 변경되어도 리렌더링 되지 않는 상태 제작하는 훅 > useRef 상태관리 상태관리 기술 - 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터 공유 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간 상태, 전체 앱 상태관리 모두 포함 mpa, spa 에서의 상태관리 mpa에서는 서버의 데이터를 이용해 페이지를 렌더링함 > 클라의 데이터와 서버의 데이터는 큰 차이를 가지지 않음 spa에서는 자체적으로 데이터를 갖고 서버와의 동기화가 필요한 데이터만 처리 > 그 외 데이터는 클라만으로 유지 상태관리 기술 도입 상태가..
23.11.24 (react 비동기통신) 동기와 비동기에 대한 설명으로 틀린 것 > 비동기가 항상 동기 방식보다 효율적이다 비동기 처리를 위한 promise객체가 가질 수 있는 상태로 틀린 것 > pending다른 작업 수행 막으며 비동기 실행 종료 기다림 mph에 대한 설명 중 틀린 것 > promise.race - 프로미스 중 하나라도 rejected되길 기다림 비동기 통신과 promise js는 single threaded language로 서버 요청을 기다려야한다면 멈춰있는 브라우저 봄 > 비동기 처리 필요 비동기 요청 후 main thread는 유저 입력을받거나 페이지 그림 (작업 처리) 비동기 응답 받으면 응답 처리하는 callback함수를 task queue에 넣음 event queue는 main thread에 여유가 있을 때 ta..
23.11.22(spa, 라우팅) spa - 하나의 페이지 요청으로 전체 웹앱 사용하는 방식 > 페이지 이동 시 리도르 안거치고 라우팅 가능, 페이지 간 스타일 컴포넌트 재활용 가능 private route - 페이지에 접근하는 사용자가 조건을 충족하지 못할 경우 404 not found페이지로 redirect함 spa와 라우팅 spa - single page application 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 유저는 웹페이지 사용하며 모바일 앱 느낌을 받음 mpa - multi page application 서버에 미리 여러 페이지를 두고 유저가 네비게이션 요청 시 적합한 페이지 전달 미리 서버에 전체 페이지 빌드 후 브라우저로 전송 서버에 라우팅 처리 기능이 있고 서버에서 여러 페이지 관리함 페이지 요청마다 모든 ..

티스토리툴바