본문 바로가기

분류 전체보기

 (76)
Styled-Components 개념 정리하기 • Styled-Components의 개념과 장단점컴포넌트가 많은 경우 스타일링을 하다보면class 만들어놓은걸 까먹고 중복해서 또 만들거나갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나CSS 파일이 너무 길어져서 수정이 어려운 경우이와 같은 불편함이 발생할 수 있습니다.이때 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있는 또 클래스명을 중복되지 않게 자동으로 만들어지기 때문에 따로 지정하지 않아도 되기에 편리합니다.styled-components 라이브러리를 사용할 수 있습니다.npm install styled-componentsyarn add styled-components//사용하고자 하는 컴포넌트에 추가import styled from 'styled-components'• CSS-..
SCSS 개념정리 SCSS 중첩 사용 시 발생하는 장단점장점:HTML 구조와 유사하게 작성할 수 있어 가독성이 높아짐.코드가 간결해지고 유지보수가 용이해짐.단점:중첩이 깊어지면 코드가 복잡해지고 유지보수가 어려워질 수 있음.높은 중첩은 CSS 성능에 부정적인 영향을 줄 수 있음.$font-big: 18px;$font-mid: 13px;$font-sml: 12px;@mixin practice($font) { display: flex; font-size: $font;}.header-container { @include flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: black; ul { ..
강아지 정보 제공 사이트 프로젝트 prettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 환경도구이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드품질을 가질 수 있게 된다. 설치방법 :yarn add --dev prettier npm install -D prettier 이용하고자 하는 프로젝트 폴더에 .prettierrc 파일을 생성 후 아래 코드 저장!{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuo..
함수형 컴포넌트 생명주기 • useEffect의 배열 형태에 따른 실행시점 차이 +• 마운트, 언마운트, 리렌더링, 특정 상태값 변화 마운트마운트는 컴포넌트가 처음으로 DOM에 삽입되는 시점을 의미합니다. 이 단계에서 컴포넌트의 초기 설정이 완료되고, 초기 데이터 페칭, 이벤트 리스너 등록 등의 작업을 수행할 수 있습니다.// 1. 컴포넌트가 최초 렌더링 되는 경우에 실행되는 useEffect 함수를 구현. (마운트)useEffect(() => { console.log('컴포넌트가 마운트됨!'); }, []); 빈 배열 []로 인해, 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다.  업데이트리렌더링은 컴포넌트의 상태가 변경되거나 부모 컴포넌트로부터 새로운 props를 받을 때 발생합니다. 이 과정에서 컴포넌트는 새로운 상..
클래스 컴포넌트 생명주기 React 클래스형 컴포넌트에서는 컴포넌트가 특정 시점에 어떤 작업을 해야 할지 제어할 수 있는 생명주기 메서드가 제공됩니다. 이번 글에서는 componentDidMount, componentDidUpdate, componentWillUnmount 메서드가 각각 언제 실행되며, 어떤 용도로 사용되는지 알아보겠습니다.componentDidMount이 실행되는 시점componentDidMount() { // 초기 데이터 로드 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => this.setState({ data })); // 이벤트 리스너 등록 window.addEventListener..
강아지정보 페이지 import {data} from "../assets/data/data";import {Link} from "react-router-dom";function Main() { return( {data.map(el => {el.name} )} );}export default Main;  import { useParams } from "react-router-dom";import {data} from "../assets/data/data";function Detail() { const params = useParams(); con..
SPA & MPA 와 CSR & SSR 이란?? MPA(Multi Page Application)-여러개의 개의 페이지로 구성된 애플리케이션MPA는 서버로 요청을 하면 클라이언트로 완성된 HTML을 보내주게 됩니다.사용자가 사이트 내에 버튼을 하나 눌러 상태가 바뀐다면 다시 서버로 요청을 보내 완성된 HTML을 받습니다.이때 화면을 완성하는 주체가 서버이기 때문에 MPA를 서버 사이드 렌더링(SSR, Server Side Rendering) 이라고 합니다. SPA(Single Page Application)-한 개의 페이지로 구성된 애플리케이션- 대표적인 SPA 라이브러리 => React클라이언트가 요청을 하면 서버에선 빈 HTML과 그 주소에 해당하는 JS코드를 보내줍니다.그럼 클라이언트 쪽에서 빈 HTML과 JS코드를 조합해서 브라우저에 표시합니다..
모던 자바스크립트 Deep Dive 13장 모든 변수는 스코프를 가지게 됩니다. 따라서 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있습니다.전역 스코프지역 스코프변수 선언 위치에 따라서 스코프를 가지게 되는데, 전역에서 선언된 변수의 경우에는전역 스코프를 가진 전역 변수가 되는 것이며, 지역에서 선언이 되면 지역 스코프를 갖는 지역 변수가 되는 것입니다. 자바스크립트 스코프의 특징 자바스크립트의 스코프는 타 언어와는 다른 특징을 갖게 됩니다. 대부분의 C 기반 언어들은 블록 레벨 스코프(block-level scope) 를 따릅니다. 하지만 자바스크립트는 함수 레벨 스코프(Function-level scope) 를 따릅니다. 주의할 점은 화살표 함수는 함수 스코프가 아니라 블록 스코프를 따릅니다. ※ 여기서 블록이란? 블록은..

티스토리툴바