나는 오늘도 멋있다

useRef란? 렌더링시 변하지 않는 값을 사용할수 있게 해주는 hook이다. 일반적으로는 DOM요소를 보유하는데 사용된다. useRef 왜 사용해야 할까? React의 함수형 컴포넌트에서 렌더링과는 상관없이 독립적으로 값을 저장하고 유지할수 있게 해주는 Hook이다. 일반적으로 DOM요소에 대한 참조를 유지하는데 사용되지만, 권장되지 않지만 렌더링에 영향을 주지않고도 데이터를 저장하고 업데이트할 수 있는 장점이 있다. useRef 구문 const ref = useRef(initValue) initValue: ref객체의 current프로퍼티에 초기에 지정되는 값이다. 모든유형의 값이 될수 있으며, 초기렌더링 후에는 무시된다. useRef는 단일 프로퍼티를(current) 가진 객체를 반환한다. DOM에..

useEffect란? React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다 부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등) useEffect 왜 사용해야 할까? React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. useEffect 구문 useEffect(callback,[dependencies]) callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다...

useState란? 기존의 클래스 컴포넌트보다 간결하고 명확한 문법을 가지는 함수형 컴포넌트에서 상태변수를 추가할수 있게 해주는 hook이다. 상태변수: 프로그램이나 애플리케이션의 현재 상태를 나타내는 변수다. React에서의 상태변수는 주로 컴포넌트의 상태를 나타낸다. useState 왜 사용해야 할까? React의 함수형 컴포넌트에서 useState는 핵심 hook이라고 볼수 있다. 왜 핵심일까? 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많다. 즉 여러가지 상태변수를 간단하게 정의하고 업데이트하는데 사용된다. useState 구문 const [state, setState] = useState(initValue) initValue: 컴포넌트가 처음 마운트될때 사용되는 초기값 state: ..

오늘은 일찍부터 프로젝트부터 시작을했다. 조금씩 밖에 할수없지만.... 아직 데이터에 따라 처리해주는것이아닌 기본적인 ui를 잡아 놨다. 그런데 문제는 코드가 말도 못하게 더럽다... Tailwind 때문도 있지만 컴포넌트를 분리하지 않아서 그런것도 있다. 빠르게 컴포넌트를 분리해야겠다.

프로젝트를 진행하는 텀이 길어지고있다... 다른 부트캠프를 시작했더니 준비할게 있다보니 늦었다. 이외에도 여러가지가 있었지만 핑계.. ? 여전히 Tailwind는 적응 되지않는다. 있는 그대로를 사용해야하는데 적시모드를 사용하다보니 Tailwind를 잘활용하지 못하는거 같아서 공식홈을 보고 css속성을 여러번 바꾸기도 했더. 이왕이면 존재하는 유틸리스 클래스를 사용하기위해서... 또한 flexbox만 사용하다보니 간단한것도 코드가 길어지는 부분을 수정하고자 Grid를 공부하면서 적용해보는중이다. 좀더 분발하자

Container 속성 속성 의미 grid-template-columns 명시적으로 아이템들의 열(가로) 크기를 지정 grid-temaplte-rows 명시적으로 아이템들의 행(세로) 크기를 지정 gird-template 명시적 행(세로), 열(가로)의 단축속성 grid-auto-columns 암시적으로 아이템의 열(가로) 크기를 정의 grid-auto-rows 암시적으로 아이템의 행(세로) 크기를 정의 grid-template-areas 영역(Area)이름을 참조해 템플릿 생성 column-gap 아이템들 열(가로)셀 간격설정 row-gap 아이템들 행(세로)셀 간격설정 gap 열(가로), 행(세로) 셀간격의 단축속성 justify-items 아이템들의 가로방향 정렬 aligin-items 아이템들의 ..

개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어 놓은 문서 HTML구조 // 문서의 형식을 지정하여 브라우저는 해당문서를 HTML5 문서로 해석한다. // 문서의 시작을 알리며, lang속성은 문서의 언어를 지정한다. // body태그를 읽기전에 정보들 // html 파일의 기본정보(문서정보, 메타데이터, 스타일시트, 스크립트) // 문서의 본문으로서 화면에 표시되는 모든내용이 들어감 시멘틱 태그(Semantic Tag) 태그 설명 용도 문서나 섹션의 헤더를 정의 로고, 제목, 네비게이션 네비게이션 링크를 정의 메뉴, 링크목록 문서의 주요콘텐츠를 정의하며, 하나만 사용해야함 독립적으로 구분되거나 재사용가능한 콘텐츠 블록 뉴스, 기사, 블로그 포스트 문서의 섹션을 정의 제목, ..

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 1. 다른 웹 프레임워크나 라이브러리와 혼용해서 사용할 수 있음 2. 라우팅, 데이터 모델링, AJAX등은 외부 라이브러리를 사용해서 구현해야함 3. JSX(JavaScript 확장문법)을 사용하여 브라우저에서 실행되기 전 일반 JS형태의 코드로 변환됨 4. 최소한의 단위, 데이터함수, UI를 재사용 가능한 여러조각을 컴포넌트 기반으로 나누어 사용한다. 5. React의 개발핵심은 상태값을 효율적으로 관리하는것 리액트 라이프사이클(React LifeCycle) 리액트 가상 돔(React Virtual DOM) 리엑트에서 실제 DOM에 직접 접근하여 조작하는 대신, 적은 연산 시간을 위해 추상화한 자바스크립트 객체로서 실제 DOM의 가벼운 사본..