BUCLIN 프로젝트 진행중 상품을 하나씩 스크롤 되도록 구현이 필요해서 구글링 중 알게된 css만으로 scroll snap을 구현할 수 있다고하여 기록해본다. scroll snap이란? 스크롤 스냅(scroll snap)은 사용자가 웹 페이지를 스크롤할 때 요소가 일정한 간격으로 자동으로 스냅되는 기능을 말하며, 용자가 스크롤할 때 페이지가 ...

프로젝트를 진행하면서 Login 상태가 아닌 사용자의 특정 page 접근을 제어해야 했기에 그 방법을 기록하려고 한다. App.jsx import { BrowserRouter, Route, Routes } from "react-router-dom"; import { HomePage } from "./pages/HomePage"; import {...

프로젝트 진행중 무한스크롤 기능이 필요해서 구글링중 react-intersection-observer라는 라이브러리를 발견하여 react-intersection-observer란? React 애플리케이션에서 Intersection Observer API를 간편하게 사용할 수 있도록 도와주는 라이브러리로 웹 페이지에서 요소가 뷰포트에 들어오거나 ...

프로젝트 진행중 styled-components 컴포넌트에 prop을 전달하는 과정에서 다음과 같은 error가 발생했다. 첫번재 error문구 같은 경우 스타일드 컴포넌트에서 전달된 스타일 속성 중에서 DOM에 직접 적용되지 않는 속성을 감지했을 때 발생된 것 입니다. 두번재 error문구 같은 경우는 React에서 DOM 요소로 전달되는...

프로젝트 진행중 버튼 컴포넌트를 따로 만들어 재사용성을 높이는 중 props을 통해 theme객체에 속성을 유동적으로 바꾸는 방법을 알아내었다. Button.tsx import React, { ReactNode } from 'react'; import styled from 'styled-components'; interface ButtonP...

점 표기법 가장 기본적이고 자주 사용되는 방법 중 하나인 점 표기법입니다. 이는 객체의 속성에 직접 접근하는 방법입니다. const person = { name: 'taewok', age: 23, job: 'Developer' }; console.log(person.name); // 'taewok' 표기법: 객체이름.key...

alert() 사용자에게 간단한 메시지를 보여주는 기능을 수행하는 함수이며, 함수를 호출하면 브라우저는 경고 창을 띄워서 메시지를 표시하며, 사용자가 확인 버튼을 누르기 전까지는 다른 작업을 진행할 수 없습니다. 간단한 alert() 함수의 사용 예제는 다음과 같습니다. See the Pen Untitled by taewok (...

React-Native를 학습하기 위해 노마드 코더의 왕초보를 위한 React Native 101 무료 강의를 들으며 새롭게 알게 된 React-Native의 지식을 써 내려가며 다시 한번 학습해야겠다. React-Native 컴포넌트란? React와 비슷한 구문 및 컨셉을 사용하지만 React-Native는 HTML태그가 아닌 react-n...

지난 시간 React-Native 개발환경 구축 후 프로젝트 생성과 안드로이드 앱 테스트를 위해 가상 기기를 화면에 만들어야한다. 앱을 개발하며 테스트하는 방법은 여러가지가 있지만 고등학교 시절 Android Studio를 사용해봤기에 Android Studio 에뮬레이터를 채택했다. 테스트 방법 Android Studi...

React-Native 시작하게된 계기 기존 react를 다뤘다면 크게 어렵지 않을 것이라는 지인의 추천으로 react-native에 흥미를 가지게 되어 도전하게 되었다. 그래서 제일 먼저 react-native가 무엇이며 개발 환경을 세팅하려면 어떻게 해야 하는지 알아보았다. React-Native란? 리액트 네이티브(React Na...