![]()
useEffect 1. useEffect - React 라이브러리에서 제공하는 훅(Hook) 중 하나 - 함수형 컴포넌트에서 부작용(side effect)을 처리하기 위해 사용 ※ 여기서 부작용이란? 컴포넌트 외부와의 상호작용을 의미 - useEffect를 사용 시, 컴포넌트가 렌더링되고 난 후, 특정 작업을 수행할 수 있음 - 컴포넌트의 생명주기와 관련된 작업을 처리 ※ 컴포넌트 생명주기 : 컴포넌트가 생성되고 소멸될 때까지의 과정 - useEffect 함수는 두 개의 매개변수를 받음 - 첫 번째 매개변수는 작업을 담은 콜백 함수 (컴포넌트가 렌더링될 때마다 실행됨) - 두 번째 매개변수는 의존성 배열(dependency array)로, 배열에 지정된 값이 변경될 때만 콜백 함수를 실행 2. 사용방법 ..
![]()
useState 1. useState - React 라이브러리에서 제공하는 훅(Hook) 중 하나 ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수 2. 사용법 - Counter.js import React, { useState } from "react"; const Counter = () => { // 변수 선언 const [value, setValue] = useState(0); return ( 현재 카운터 값은 [{value}]입니다. {/* 버튼 클릭 시,..
![]()
외부 컴포넌트 파일을 이용한 출력 1. 외부 컴포넌트 파일을 이용한 출력 - React는 외부 컴포넌트 파일을 이용하여 출력할 수 있음 - 효율성이 높고, 수정이 용이함 2. 사용방법 - 외부 파일을 하나 생성 (ex : HelloWorld.js) - 외부 파일에 다음과 같이 입력 - HelloWorld.js에 다음과 같이 입력 import React from "react"; const HelloWorld = () => { return ( Hello World!! ); }; export default HelloWorld; - App.js에 다음과 같이 입력 import React from "react"; // import로 외부 컴포넌트를 불러옴 import HelloWorld from "./HelloW..
![]()
React 1. React - 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리 - 컴포넌트 기반 아키텍처를 사용하여 웹 및 모바일 애플리케이션의 UI를 구축하는 데 사용 - JSX라는 문법을 제공하여, JavaScript와 HTML을 조합하여, 컴포넌트를 작성할 수 있도록 함 ※ JSX : JavaScript XML의 약자로, React와 함께 사용되는 JavaScript 확장 문법 - 다양한 확장성과 유용한 라이브러리 및 도구를 제공 2. React 설치 - npx를 사용하기 위해 node.js를 설치함 - 원하는 폴더에 cmd로 접속한 후, npx create-react-app . 이라고 입력 - 그 후, VScode에 들어간 뒤, 터미널에 npm run start 라고 입력 - 그러면..
![]()
@mixin 1. @mixin - 재사용 가능한 코드 블록을 정의하는 데 사용되는 기능 - 스타일 규칙을 그룹화하고 필요할 때 재사용할 수 있음 2. 형식 - 스타일 규칙은 중괄호('{ }')안에 작성되며, CSS 속성과 값을 포함할 수 있음 @mixin 믹스인 이름 { // 스타일 규칙 } See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 by NewBean0312 (@newbean0312) on CodePen. See the Pen Tistory_Front-End Study_Sass_@mixin_2. 형식 2 by NewBean0312 (@newbean0312) on CodePen.
![]()
Variables (변수) 1. Variables (변수) - 재사용 가능한 값을 저장하고, 참조하기 위해 사용 - 변수를 사용하면, 동일한 값이 반복되는 것을 방지하고, 유지보수성을 향상시킬 수 있음 2. 정의 방법 - '$' 기호를 사용하여, 변수명을 지정하고 값을 할당 See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.
![]()
Sass 7-1 패턴 1. Sass 7-1 패턴 - Sass 가이드라인에서 제시한 모듈화 방식 ※ 파일명에 _가 붙는 경우, @import 되어 사용될 것으로 파 sass/ | |- abstracts/ ||- _variables.scss# Sass 변수 ||- _functions.scss# Sass 함수 ||- _mixins.scss# Sass 믹스인 ||- _placeholders.scss# Sass 플레이스홀더 | |- base/ ||- _reset.scss# 리셋/정규화 ||- _typography.scss# 타이포그래피 규칙 | -# 기타. | |- components/ ||- _buttons.scss# 버튼 ||- _carousel.scss# 캐러셀 ||- _cover.scss# 커버 ||- _..
![]()
Sass 1. Sass(Syntactically Awesome Style Sheets) - 웹 개발에서 사용되는 CSS 전처리기(Preprocessor) - CSS의 기능을 확장하고, 개발자가 더 효율적으로 스타일을 작성할 수 있도록 도와줌 2. Sass의 특징 - 기존의 CSS 구문을 확장하여 변수, 중첩 규칙, 믹스인(mixin), 상속 등의 기능을 제공 - 시타일 시트 작성을 간소화 - 코드의 재사용성과 유지보수성을 향상 - 복잡한 스타일 구조를 간결하게 표현하여, 프로젝트의 개발 속도를 향상 3. Sass의 문법 - Sass는 두가지 문법을 제공 - SCSS (Sassy CSS) - 기본의 CSS와 비슷한 문법을 사용하며, 확장된 기능을 적용할 수 있음 - 중괄호('{ }')와 세미클론(';')을..
![]()
CSS 기술 순서 1. mozilla 에서 제안한 CSS 속성 기술 순서 - #1. display - #2. list-style - #3. position - #4. float - #5. clear - #6. width / height - #7. padding / margin - #8. border / background - #9. color / font - #10. text-decoration - #11. text-align / vertical-align - #12. white-space - #13. other text - #14. content
![]()
시맨틱 웹 (Semantic Web) 1. 시맨틱 웹 (Semantic Web) - 웹 페이지의 구조와 의미를 명확하게 설명하여, 웹 콘텐츠를 이해하고 해석하는 것을 돕는 웹 개발의 접근 방식 - 이를 통해, 검색 엔진 or 웹 에이전트 등이 웹 페이지의 내용을 이해, 분류 등에 효율적 - 또한, 시각 장애인 or 보조 기술을 사용하는 사용자들에게 웹 콘텐츠를 더욱 쉽게 접근 가능하게 함 2. 시맨틱 웹 구조 요소 설명 웹 페이지 or 섹션의 헤더를 정의 내비게이션 링크를 정의 문서의 주요 콘텐츠를 정의 문서의 섹션을 정의 독립적인 콘텐츠를 정의 웹 페이지 or 섹션의 푸터를 정의
![]()
엔티티 (Entity) 1. 엔티티 (Entity) - HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋 2. 엔티티의 종류 엔티티 문자 엔티티 명 16진수 엔티티 숫자 (띄어쓰기) > > & & & " " " ' ' '
![]()
콘텐츠 카테고리 1. 콘텐츠 카테고리 - HTML5 부터 비슷한 특징을 가진 요소끼리 묶어 7가지 카테고리로 세분화함 콘텐츠 설명 메타데이터 콘텐츠 (Metadata Content) 문서의 메타 데이터(정보), 다른 문서를 가리키는 링크 등을 나타내는 요소 플로우 콘텐츠 (Flow Content) 웹 페이지상에 메타데이터를 제외하고 거의 모든 요소. (보통 텍스트 or 임베디드 콘텐츠를 포함) 섹션 콘텐츠 (Section Content) 웹 문서의 구획(Section)을 나눌 때 사용 헤딩 콘텐츠 (Heading Content) 섹션의 제목(Heading)과 관련된 요소 프레이징 콘텐츠 (Phrasing Content) 문단에서 텍스트를 마크업 할 때 사용 임베디드 콘텐츠 (Embedded Content..
![]()
타이머 함수 1. 타이머 함수 - 특정 시간에 코드를 실행하거나 일정한 간격으로 코드를 반복 실행하는 기능 제공함 2. setTimeout 함수 - 일정 시간 경과 후, 특정 코드 블록 or 함수를 실행하는 기능 제공함 setTimeout(callback, delay); - callback : 지정된 시간이 경과 후, 실행할 콜백 함수 - delay : 콜백 함수를 실행하기까지의 지연 시간을 밀리초(Millisecondes) 단위로 나타냄 (지연 시간 후, 콜백 함수 실행) - clearTimeout(id) 함수를 사용하여 실행되고 있는 timeout을 중지 - 예시 - setTimeout 함수로 인하여 그 뒤의 console.log가 먼저 실행한 후, 지연시간 4초 뒤에 Callback함수에 있는 a ..
![]()
● counter-reset 속성 - 카운터를 초기화하기 위한 속성 - counter-reset : [카운터명] [정수] ● counter-increment 속성 - 카운터를 증가시키기 위한 속성 - counter-increment : [카운터명] [정수] - 정수값은 카운터의 증가 배율임 ● counter( ) 속성 - 카운터를 사용하기 위한 속성 - 함숫값에는 카운터명, 카운터 스타일, 문자열이 들어올 수 있으며 쉼표로 구분
![]()
● order 속성 - display: flex 일 때, 출력 순서를 변경하기 위해 사용
