[React 학습하기] 컴포넌트에 props 전달하기

JSX 전개 구문으로 props 전달하기때때로 우리가 전달하는 props는 반복적이다.function Profile({ person, size, isSepia, thickBorder }) { return ( );}반복적인 코드는 가독성을 높일 수 있다는 점에서 잘못된 것은 아니지만 때로는 간결함이 중요할 때도 있다.Profile 컴포넌트가 Avatar 컴포넌트에게 그런 것처럼, 일부 컴포넌트는 그들의 모든 props를 자식 컴포넌트에 전달하기도 한다. 이 경우 Profile 컴포넌트는 props를 직접적으로 사용하지 않기 때문에, 간결하게 전개구문(Spread)을 사용하는 것이 합리적이다.function Profile(props) { return ( ..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

[React 학습하기] Quick Start

학습 목적React의 기초 지식이 모자라다는 생각이 들어 직접 학습하기로 마음먹음어떤 강의보다도 리액트 공식 문서가 믿음직스럽기 때문에 선택이 페이지에선 당신이 매일 사용하게 될 React 개념의 80%를 소개합니다.Creating and nesting components리액트 앱은 컴포넌트로 만들어진다.컴포넌트는 고유한 로직과 외형을 가진 UI의 일부이다. 컴포넌트는 버튼만큼 작기도 하고 전체 페이지만큼 크기도 하다.리액트 컴포넌트는 마크업을 반환하는 Javascript 함수이다.function MyButton() { return ( I'm a button );}우리는 MyButton 컴포넌트를 선언했기 때문에, 또다른 컴포넌트에 중첩할 수 있다.export default function My..

• format_list_bulleted React-Next.js
• · 2024. 8. 7.
• textsms

디바운스와 스로틀

scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생한다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다. 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.다음 예제의 버튼을 짧은 시간 간격으로 연속해서 클릭했을 때 일반적인 이벤트 핸들러와 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도가 어떻게 다른지 살펴보자! click me 일반 클릭 이벤트 카운터 0 디바운스 클릭 이벤트 카운터 0 스로틀 클릭 이벤트 카운터 0 일반적인 이벤트 핸들러'click me' 버튼을 누를때마다 카운..

• format_list_bulleted HTML
• · 2024. 8. 7.
• textsms

CSS 우선순위

학습 목적웹페이지 클론 코딩 중 CSS를 입력해도 적용이 되지 않는 경우가 발생. 이 문제를 빠르게 고치기 위해강의를 들으며 프론트엔드 개발자에게 CSS도 많이 중요하다 느낌개발중인 블로그에 잘 적용하기 위해CSS란?CSS(Cascading Style Sheets)는 HTML, XHTML, XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 글꼴, 배경색, 너비와 높이 등을 지정하는 역할을 한다.웹사이트를 제작하다보면 하나의 태그에 여러가지 CSS를 적용시켜야할 상황이 오게된다.이때 특정한 규칙에 따라 CSS에 우선 순위가 부여되어 적용되는데 지금부터 알아보도록 하자.CSS 규칙!important > 인라인 스타일 > ID 선택자 > CLASS 선택자, 속성 기반 선택자, 가상 클래스, ..

• format_list_bulleted CSS
• · 2024. 8. 7.
• textsms

웹팩으로 Vanila JS 프로젝트 번들링하기/CSS 파일 만들기

학습 목적웹페이지 클론 코딩 과제를 하던 중 확인 가능한 CSS파일이 포함되어있는 조건이 있어 구현하기위해SCSS -> CSS 파일 만들기mini-css-extract-plugin 설치하기먼저 필요한 라이브러리를 설치하자npm install --save-dev mini-css-extract-pluginwebpack.config.js 파일 수정const MiniCssExtractPlugin = require('mini-css-extract-plugin');//맨 위에 추가하기module.exports = { ... module: { rules: [ { "test": /\.s[ac]ss$/i, "use": [ ..

• format_list_bulleted Webpack
• · 2024. 8. 7.
• textsms

웹팩으로 Vanila JS 프로젝트 번들링하기/이미지 번들링 with. file-loader

학습 목적웹팩에서 이미지 파일사용을 하기 위해과제를 성공적으로 끝마치기 위해놀랍게도 웹팩에서 이미지를 사용하려면 이미지 번들러를 따로 추가해줘야 한다..이를 몰랐기 때문에 이미지를 적용하는데 시행착오가 좀 많았지만 해결했으니 이 과정을 글로 남겨본다.웹팩에서 이미지가 정상적으로 사용될 때파일 상단에 사진을 import 해준 뒤 태그의 src에 "사진 이름.확장자"를 입력해주면 된다.import "..사진 경로/사진.jpg";... 하지만 아직 이미지 번들러를 사용하지 않았다면 이미지의 경로를 찾을 수 없다는 에러메시지와 함께 적용이 되지 않을것이다.이는 우리가 웹팩에서 dist 폴더에 bundle된 파일들을 위치시켜놨었는데 이 폴더에서 이미지를 찾을 수 없기 때문이다.아래에 어떻게 하면 되는지 방법을 ..

• format_list_bulleted Webpack
• · 2024. 8. 7.
• textsms