전체 글 (203) 썸네일형 리스트형 리액트 빌드시 환경(개발/테스트/상용)에 따라 API 주소 설정하기 1. 명령어로 구분 package.json에 script : start/build/test 각각의 스크립트가 있음 -> 배포시 build.gradle에 npm build 명령어가 들어있음 2. .env 파일에서 환경변수 사용 두개의 분리된 dotEnv 파일 생성 .env.development : 개발용 환경변수 .env.production : 상용 환경변수 원리) Creact-React-App으로 리액트를 만들고 npm 스크립트를 실행할 때 스크립트 명령어별로 env 파일의 적용 우선순위가 있다. script 명령어 별 env 파일 우선순위 npm start : .env.development.local, .env.local, .env.development, .env npm build : .env.prod.. display:none, visibility:hidden, opacity: 0 차이점 브라우저의 렌더링 과정 ( DOM Tree + CSSOM Tree -> Render Tree -> Reflow(Layout) -> Paint(Repaint) 조건부 렌더링이 최적화에 최고 -> 연산도 아예 안함 display : none 자리 차지 안함 DOM 트리까지만 가져가고, Render Tree에서 제외-> 레이아웃에 포함되지 않는다 하지만 DOM 트리까지는 해당 요소가 Node로 만들어 지기 때문에, 컴포넌트를 생성하기 위한 계산과정은 전부 거쳐야 한다 -> 리렌더링에 따른 자원 소모는 피하지 못함. 검색엔진이 아예 접근 못함 Reflow, Repaint 안함 opacity : 0 자리 차지함 클릭이벤트를 가지고 있어서 본인이 클릭됨 Reflow, Repaint 안함 visibility : hi.. [HTML&CSS] pseudo Class & pseudo Element 활용 슈도 클래스와 슈도 엘리먼트.. 사실 많이 썼던 건데, 이런 명칭은 처음 들어봤다. 혼나고 배우면 더 기억에 오래 남는법 Pseudo Class & Pseudo Element 알아보자! pseudo : 가짜 Pseudo Class & Pseudo Element : 가상 클래스 & 가상 요소 이 가상요소들을 잘 사용하면 인터렉티브한 웹 페이지를 만들 수 있다. Pseudo Class 단순한 선택자로는 표현할 수 없는 것을 선택하는 선택자이다. 특정한 상태 말고 규칙에 따라 상태가 바뀌는 요소를 선택할 때 사용하는 것이다 1) Dynamic pseudo-class :hover :visited :link :active :focus 태그에 자주 쓰이고, focus는 태그에 자주 쓰인다. 2) UI element.. 이전 1 ··· 30 31 32 33 34 35 36 ··· 68 다음
