목록elice/토끼성장일지 (21)
치악산 복숭아
1. useState 단순한 하나의 상태를 관리하기에 적합함 const [state, setState] = useState(initState | initFn) 리액트는 state가 바뀌면 state를 사용하는 컴포넌트를 리렌더함 useEffect와 함께, state에 반응하는 hook을 구축 패턴 상위 컴포넌트에서 state와 state 변경 함수를 정의 그 state나 변경 함수를 사용하는 컴포넌트까지 prop으로 내려줌 state가 변경되면 중간에 state를 넘기기만 하는 컴포넌트들도 모두 리렌더링됨 ➡️ 상태와 상태에 대한 변화가 단순하거나, 상대적으로 소규모 앱에서 사용하기에 적합 2. useRef 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 ➡️ 상태가 UI의 변경과 관계없을 때 사용 리..
1. 리액트와 사용하기 좋은 Styling 도구 종류 1) CSS Module CSS 파일의 확장자를 .module.css 로 지정해서 사용 장점 단점 class, id 등에 random string을 달아주기 때문에 선택자가 겹치지 않음 스타일 충돌을 방지하고 코드를 격리하여 CSS 설계가 가능 스타일링을 일일히 직접 해야함 //App.jsx import styles from "./app.module.css" export default function App() { return ( Pink Hello world Normal Hello world ); } /* app.module.css */ h1 { font-size: 1.5rem; } .title { font-size: 2.5rem; color: pa..
1. 데이터베이스 여러 사람이 공유해 사용할 목적으로 통합하여 관리되는 데이터의 모음 ex) Maria DB, Oracle DB 등 SQL: 데이터베이스에 접근, 조작하기 위한 표준 언어 Structured Query Language 1) 관계형 데이터베이스 / 비관계형 데이터베이스 관계형 데이터베이스: 하나 이상의 테이블로 이루어지며 서로 연결된 데이터를 가지고 있음 SQL을 통해 제어 가능 비관계형 데이터베이스: 데이터들간의 연결이 없음 2) 테이블의 구성 요소 ⬇️컬럼(Column, 열)⬇️ ⬇️컬럼⬇️ ⬇️컬럼⬇️ 레코드(Record)➡️ 사번 이름 성별 레코드➡️ 001 철수 남성 레코드➡️ 002 영희 여성 컬럼: 주제, 제목 레코드: 내용, 값 모든 테이블은 고유의 이름으로 구분 명령어 1)..
1. 자바스크립트 비동기의 등장 초기 웹 환경에서는 서버에서 모든 데이터를 로드하여 페이지를 빌드했기 때문에 JS에서는 별도의 비동기 처리가 필요하지 않았음 AJAX(Asynchronous Javascript And XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 옛날옛날...에는 브라우저가 정보를 요청하면 서버는 해당 정보를 포함한 페이지 전체를 전달 ➡️ 브라우저는 서버로부터 받은 HTML을 새롭게 렌더링했다고 한다 😮💨 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨 2. 자바스크립트는 single-threaded language 자바스크립트는 메인 스레드가 하나인 single-threaded 언어이기..