[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

Vue로 영화 검색 페이지 만들기 학습을 하며 어려웠던 점 모음

https://omdbapi.com/위 사이트의 API를 이용해 영화 검색 웹을 만들고 있는 중이며 어려웠던 점을 하나씩 기록하려 한다.Key 은닉을 위해 서버리스 함수 사용을 위해 vercel이용!만약에 key 은닉을 하지 않는다면....network를 살펴보면 내가 사용한 key가 그대로 드러남을 알 수 있다.. 😭원래는 서버에서 처리를 해줘야하지만 현재로선 서버에서 처리해줄 수 없기 때문에 vercel을 대신 사용했다.이때 나는 axios 사용을 했다.get에 데이터를 전송해야했기 때문에 처음엔 get에 데이터를 어떻게 넣지...? 하며 아무것도 모르는 상태라 검색을 해봤더니params를 이용해 전송함을 알고 적용해보았다.완성된 코드는 아래와 같다.//src/store/movie.vueimport..

• format_list_bulleted 기타 (프로젝트)
• · 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