본문 바로가기

WEB28

[CSS] Normalize.css vs Reset.css (작성중_20221229) Normalize CSS or CSS Reset?! : 상단의 그림, 본문:영어 https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e CSS Tools : Reset.css https://meyerweb.com/eric/tools/css/reset/ Normalize.css - CSS 초기화 : 한글 주석해석이 달려 있다. https://webdir.tistory.com/455 CSS Normalize 와 CSS Reset : 비교가 잘 되어 있고 예시가 있다, https://www.daleseo.com/css-normalize-reset/ CDN - Normalize 👉옆 사진 https://cdnjs.com/libraries/normaliz.. 2022. 12. 29.
[CSS] Chrome창으로 CSS보는법 [스타일 | 계산됨 ] 2022. 12. 28.
◆인터페이스와 클래스 Contents 01 인터페이스 02 클래스 03 추상 클래스 ㅇㄹㅇ 인터페이스는 자바스크립트 코드로 컴파일되지 않는다.✨ 유의할 점 : 인터페이스는 객체에서만 사용할 수 있다. (너무나 당연하게 받아들이면 된다.) 👉 중괄호로 설계할 것이기 때문에. 2022. 12. 15.
◆TypeScript 시작하기 Contents 01 TypeScript란? 02 프로젝트 생성 03 TypeScript 문법 01 TypeScript란? ES5 에는 클래스가 없었다. ES6 ⊂ ESNext TS로 코 드를 만들면 JS 로 변환을 시켜주면 브라우저도 TS는 브라우저가 이해할 수 없기 때문에 컴파일 과정을 거쳐야 하는데, 컴파일이란? : 특정 언어의 코드를 다른 언어로 바꿔주는 과정을 말한다. 따라서 브라우저는 TS를 바로 해석하지 못하고 컴파일러를 별도로 설치해야한다. -g : 글로벌로 설치한다 : 컴퓨터 전역에 설치하겠다. , 즉 다른 곳에서도 타입스크립트 컴파일러를 설치한다. (다른 프로그램을 설치할 때도 들어갈 수 있는 옵션인다. ) 02 프로젝트 생성 npm install -g typescript : 타입스크립.. 2022. 12. 14.
display : inline vs inline-block vs block 1️⃣ display : inline 태그 안의 글자 길이만큼의 영역만 화면에 표시한다. inline을 default값으로 가지고 있는 tag: , , , , , , width, height 속성에 영향을 받지 않는다. 2️⃣display : inline-block inline과 같이 양 옆으로 화면에 나열할 수 있다. inline과 다른점은 width, height 속성을 통해 사이즈 조절이 가능하다. inline-block을 default값으로 가지고 있는 tag: , , , 3️⃣display : block inline과 달리, 새로운 줄로 시작하며 해당 줄의 가로를 다 차지한다. block을 default값으로 가지고 있는 tag: , , , , 2022. 12. 13.
[REACT] 16. Firebase [REACT] 16. Firebase Contents 01 Firebase란? 02 프로젝트 생성 03 Cloud Firestore 데이터 추가하기 어플리케이션 등록하기 KEY 저장하기 데이터베이스 연결 확인하기 전체 데이터 가져오기 - getDocs() 일부 데이터 가져오기 - doc() , getDocs() 조건 검색하기(1) - query() 조건 검색하기(2) - where() 데이터 추가하기 - setDoc() 데이터 수정하기 - updateDoc() 데이터 삭제하기(1) - deleteDoc() 데이터 삭제하기(2) - updateDoc(), deleteField() 01 Firebase란? ❖ Firebase • 구글의 모바일 및 웹 어플리케이션 개발 플랫폼입니다. • 백엔드 서버 기능을 클.. 2022. 12. 13.
[REACT] 15. 네트워크 통신 [REACT] 15. 네트워크 통신 Contents 01 동기 vs 비동기 02 async와 await 03 fetch() 함수로데이터 가져오기 01 동기 vs 비동기 ❖ 동기 방식(synchronous) • 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있 는 방식 • 특징 : 설계가 간단하고 직관적 • 요청에 대한 응답을 받을 때까지 대기해야 하는 단점 ❖ 비동기 방식(Asynchronous) • 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행 하는 방식 • 특징 : 동기 방식보다 복잡함 • 요청에 대한 응답을 받기까지의 대기 시간에 다른 작업을 할 수 있음 👉 자원을 효율적으로 이용할 수 있다. 비동기 : 일해! 나는 다른 일(다른코드 실행중) 하고 있을게! + 기본적으로 fetch.. 2022. 12. 12.
HOOKS 6가지정리 [ 1️⃣useState() 2️⃣ useRef() 3️⃣ useEffect() 4️⃣ useMemo() 5️⃣ useCallback() 6️⃣ useReducer() ] HOOKS 6가지정리 1️⃣ useState() - const [state, setState] = useState(초기값) - 값이 변경되면 재렌더링 2️⃣ useRef() const state = useRef(초기값) state => 객체 state.current => 값 저장 - 값이 변경되면 렌더링 x 3️⃣ useEffect() - useEffect(콜백함수, 의존성배열) - 의존성배열 : 옵션 - useEffect(()=>{ 하고 싶은 일 }) : 렌더링 될 때마다 콜백함수 실행 - useEffect(()=>{ 하고 싶은 일 }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행 - useEffect(()=>{ 하고 싶은 일 }, [value]) : value 값이 변경되었을 때 콜백.. 2022. 12. 12.
React란, React특징, 컴퍼넌트 내 주요 키워드 1) React(리액트)란? - 페이스북사에서 만든 자바스크립트 라이브러리이다. - 페이스북에서 자체적으로 사용하기 위해 만들었고, 많은 웹 어플리케이션에 적용하고 있다. - 유저 인터페이스를 만드는 라이브러리이다. - React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(PC 어플리케이션) 2) 리액트의 특징 - 컴퍼넌트로 이루어진 UI 라이브러리 - 컴퍼넌트는 한 가지의 기능을 수행하는 UI 단위를 말한다. - 리액트 어플리케이션은 꼭 하나 이상의 컴퍼넌트로 이루어져 있다. - 최상위 컴퍼넌트는 Root 이다. - virtual DOM tree 를 가지고 있다. 3) 컴퍼넌트 내 주요 키워드 1. state - 데이터의 상태를 나타내는 객체 2. re.. 2022. 12. 9.
728x90
반응형

티스토리툴바