본문 바로가기

전체 글

 (66)
[CSS] reset.css vs normalize.css reset.css 모든 브라우저의 형태에서 내장스타일을 모두 없애버려 스타일이 0인 상태에서 시작되는 초기화 스타일 기법이다. 장점 초기화 : 모든 브라우저의 기본 스타일을 초기화하므로, 브라우저 간의 차이를 최대한 줄일 수 있다. 전체 커스터마이제이션 : 초기 스타일을 완전히 커스터마이즈하고 자체 디자인 스타일을 빠르게 적용하려는 경우에 유용하다. 예측 가능한 동작 : 모든 요소의 스타일을 명확하게 초기화하므로 예측 가능한 결과를 얻을 수 있다. 단점 과도한 초기화 : 너무 많은 스타일을 초기화할 경우 웹 페이지가 기본 스타일을 완전히 잃을 수 있으며, 모든 스타일을 처음부터 정의해야 한다. 관리의 어려움 : 프로젝트가 커질수록 초기화 스타일 시트를 관리하기 어려워질 수 있다. 대표적인 reset.cs..
[JS] var, let, const의 차이 var의 특징과 한계 1. 함수 레벨 스코프만을 가지며, 블록 스코프는 지원하지 않는다. → 함수 레벨 스코프 이외에 생성한 변수는 모두 전역 변수가 되어 의도치 않은 변수 충돌이 발생할 수 있다. function foo() { var x = "Function-level scope"; } if (true) { var y = "Block-level scope"; } foo(); console.log(x); // 에러: 함수 스코프 외부에서 변수에 접근할 수 없음 console.log(y); // 접근 가능, "Block-level scope" 출력 2. 중복 선언이 가능하며, 같은 변수 이름으로 여러 번 선언해도 오류가 발생하지 않는다. → 변수 값이 덮어 씌워지는 현상이 일어날 수 있다. var x = ..
[JS] Scope 스코프란? 모든 식별자(변수, 함수 등)는 자신이 선언된 위치에 의해 다른 코드가 자신을 참조할 수 있는 유효 범위가 결정되는 데 이를 스코프라고 한다. 전역 스코프 코드 전체에서 접근할 수 있는 가장 넓은 스코프다. 전역 스코프에서 선언된 변수는 코드의 어디에서나 사용할 수 있다. var global = 10; // 전역 스코프 변수 function foo() { console.log(global); // 전역 스코프 변수에 접근 가능 } foo(); console.log(global); // 전역 스코프 변수에 접근 가능 지역 스코프 특정 함수나 블록 내에서 변수가 정의되고 사용될 수 있는 스코프다. 지역 스코프에서 선언된 변수는 해당 함수나 블록 내에서만 유효하며, 외부 스코프에서는 접근할 수 없다..
[CSS] Grid 1. Grid란? Grid란 웹 페이지의 레이아웃을 디자인하고 구성하는 데 사용되는 CSS 레이아웃 시스템이다. 그리드 레이아웃을 사용하면 웹 페이지의 요소들을 행과 열의 그리드로 배치할 수 있으며, 복잡한 레이아웃을 더 쉽게 관리할 수 있다. 2. Grid Container Grid Items를 포함하는 부모 요소다. 속성을 설정하면 각각의 아이템들이 설정한 형태로 배치된다. .container { display: grid; } container에 display: grid; 설정해야 한다. 2.1 grid-template-columns 및 grid-template-rows 그리드의 열과 행을 정의하는 속성이다. 각 열과 행의 크기는 여러가지 값과 단위로 설정할 수 있다. .container { grid..
[새싹x코딩온] 웹 퍼블리싱 과정 13주차 - 2 | map, style 적용 방법, SASS map 배열 데이터를 좀 더 효율적으로 그리기 위해서 map을 사용한다. {배열.map((요소, 인덱스) => { return {요소}; })} div 같은 태그가 아닌 만들어준 컴포넌트와 함께 사용할 수도 있다. key 기존 요소와 업데이트 요소를 비교하는 데 사용되는 속성이다. 다른 요소와 겹치지 않는 고유한 값이어야 한다. key는 고유한 값을 가져야 하기 때문에 배열의 요소 중 고유한 값(id 등)이 존재하지 않는다면 index로 사용해도 된다. style 적용 방법 inline style 적용 object 형태의 css 스타일을 만들어서 style 속성에 object를 대입한다. → 불편함이 많아 실제로는 잘 사용되지 않는다. css 파일을 만들고 적용하기 css 파일은 반드시 src 폴더 내부..
[새싹x코딩온] 웹 퍼블리싱 과정 13주차 - 1 | React - useRef, useEffect Ref와 useRef() Reac의 DOM 접근 1. HTML에서와 마찬가지로 id/className 등으로 접근 → 하지만 하나의 컴포넌트를 여러 번 사용한다면 id가 중복될 수 있다. 2. ref 이용 → 컴포넌트 내부에서만 동작해서 중복되지 않는다. → Class형 컴포넌트의 기본 기능 / 함수형 컴포넌트에서는 useRef import 해서 사용한다. ref 컴포넌트가 리렌더링 되어도 값을 유지하고 싶을 때 사용한다. (vs. variable) ref의 값은 변경되어도 리렌더링되지 않는다. (vs. state) DOM을 직접적으로 접근할 때 사용한다. ex) 컴포넌트의 input 태그의 값을 받거나, focus 주기, 스크롤 조작 useRef() useRef() 훅은 특정 컴포넌트에 접근할 수 있는..
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 3 | React - 이벤트 핸들링 이벤트 핸들링 React의 Event 주의점 React의 이벤트는 소문자가 아닌 카멜 케이스를 사용한다. JSX를 사용해 이벤트 핸들러를 전달한다. 기본 DOM 요소에만 이벤트 설정이 가능하다. React 합성 이벤트 (Synthetic Event) 합성 이벤트란 브라우저 이벤트들을 포함하고 있는 리액트 고유 이벤트 객체이다. 객체를 모든 브라우저에서 이벤트를 동일하게 처리한다. ※ 리액트가 DOM이아닌 VirtulDOM을 사용하는 것처럼 웹 브라우저의 nativeEvent가 아닌 nativeEvent를 감싼 SyntheticEvent를 사용한다. 버튼을 클릭하면 text가 'Goodbye World'로 바뀌는 이벤트 import { useState } from "react"; function Pract..
[새싹x코딩온] 웹 퍼블리싱 과정 12주차 - 2 | React - props props props란 부모가 되는 컴포넌트에서 자식 컴포넌트에게 보내는 데이터이다. 여러 번 쓰이는 컴포넌트에서 내부 데이터만 다르게 사용하고 싶을 때 사용한다. 형제끼리는 직접 전달할 수 없고 부모를 통해서만 전달할 수 있다. props 사용 방법 하위 컴포넌트에서 props 함수의 인자에 전달받을 props 이름을 작성한다. 상위 컴포넌트에서 text라는 값을 전달받아서 h1 내부에 넣어준다. 상위 컴포넌트에서 props 하위 컴포넌트 생성 시 만들어준 props의 이름을 태그의 속성처럼 사용한다. Hello, ~라는 문자열이 하위 컴포넌트로 전달된다. 컴포넌트를 중복 사용해서 사용할 때, 데이터만 다르게 넘겨줄 수 있다. 상위 컴포넌트에서 받은 데이터를 다시 하위 컴포넌트로 전달할 수 있다. pr..

티스토리툴바