본문 바로가기

분류 전체보기

 (92)
IntersectionObserver를 이용한 scroll detector | Javascript IntersectionObserver를 사용하여 스크롤 이동 감지기를 만들어봅니다.IntersectionObserver타겟 요소가 화면에 표시되거나 숨겨지는(뷰포트에 보이거나 사라지는) 이벤트를 감지하여 특정 동작(메소드)를 실행합니다.요소가 표시/숨겨지는 기준 비율(0.0~1.0)을 설정할 수 있습니다.0 : 1px이라도 보이면 invoke1 : 요소 전체가 보여지면 invoke 생성하기new 키워드를 사용하여 IntersectionObserver 객체를 생성합니다.const io = new IntersectionObserver(callbackFn, options); callbackFn function타겟 요소가 보이거나 숨겨질 때 실행될 동작(메소드)입니다.param1 IntersectionObser..
컴포넌트로 UI 만들기 - 컴포넌트 Component | React 컴포넌트로 UI 만들기 - 컴포넌트 Building UI with Component - Components컴포넌트 ComponentsUI는 컴포넌트(component)라는 작은 단위로 분해할 수 있습니다.컴포넌트는 독립성을 유지하고 재사용 가능한 코드를 만들 수 있게 해 줍니다.컴포넌트를 레고 블록이라고 한다면, 각각의 블록들로 더 큰 구조를 구성하기 위해 결합할 수 있습니다.특정 컴포넌트나 블록을 업데이트함으로써 UI의 일부분을 업데이트할 수 있습니다. 이런 모듈화는 코드가 커짐에 따라 더욱 수정이 용이한 코드로 만들어주기 때문에, 애플리케이션의 나머지 부분에 영향 없이 컴포넌트를 추가/수정/삭제할 수 있습니다.React 컴포넌트의 좋은 점은 바로 javascript로 이루어져 있다는 것이죠! 컴포넌트..
React 시작하기 | React React 시작하기새로 만든 프로젝트에서 React를 사용하기 위해서는 unpkg.com 에서 2개의 React 스크립트를 로드해야 합니다.reacthttps://www.unpkg.com/browse/react@18.3.1/React 라이브러리 corereact-domhttps://www.unpkg.com/browse/react-dom@18.3.1/DOM에서 React를 사용할 수 있게 해주는 DOM 관련 메소드 제공 Javascript로 직접 DOM을 수정하지 않을 것이므로 기존에 추가했던 DOM 메소드를 삭제합니다.특정 요소를 타겟팅하고 표시할 React 컴포넌트를 추가하기 위해 ReactDom.createRoot() 를 추가하고,root.render() 메소드로 React 코드를 DOM에 랜더링합니..
SLBS 노티드 크림 버니, 산리오 헬로키티 임프레션 케이스 언박싱 착용샷 with 갤럭시S24 울트라 SLBS 노티드 크림 버니 케이스 SLBS  산리오 헬로키티 케이스언박싱 후기갤럭시S24 울트라 티타늄그레이 착용샷 저는 갤럭시 울트라 유저예요. 웬만하면 핸드폰 액세서리는삼성 정품을 사용하려고 합니다.그런데 정품 케이스는 귀여운 게 없잖아...ㅠ갤럭시의 주요 소비층은귀여운 케이스에 관심이 없어서 그런거라면 이해하지만... 삼성이 여러 캐릭터와 콜라보레이션하여케이스를 출시하는데,그때 SLBS 라는 브랜드를 처음 알게 되었어요.해리포터, 내셔널 지오그래픽, 퀸, 디즈니 등콜라보한 케이스들은SLBS가 많이 만드는 것 같더라고요. 그러다 우연히 공식몰에서 최대 60% 세일 광고를 발견...!너무 귀여운 노티드와 산리오 캐릭터 케이스를판매하고 있었답니다!!사실 보자마자 마음이 뺏긴 것은산리오 헬로키티 케이스였답..
UI 랜더링 및 Javascript로 업데이트하기 | React 유저 인터페이스(User Interface, UI)를 랜더링하고 업데이트하는 방법을 알아봅니다.React가 어떻게 동작하는지 이해하기 위해, 먼저 브라우저가 UI를 만들기 위해 코드를 어떻게 해석하는지에 대한 기본적인 이해가 필요합니다.유저가 웹 페이지를 방문하면 서버는 브라우저에게 아래와 같은 HTML 파일을 반환하고,브라우저는 HTML을 읽고 DOM(Document Object Model)을 생성합니다. DOM이란? What is DOM?DOM(Document Object Model)은 HTML 요소들을 객체로 표현한 것입니다.코드와 UI 사이를 연결하고, 부모-자식 관계인 트리 구조를 갖고 있습니다.DOM 메소드와 javascript를 통해 유저의 이벤트를 listen하고 UI 안의 특정 요소를 검..
React에 대해서 - 웹앱의 기본 요소, 리액트란 | React React에 대해 알아봅니다.웹 애플리케이션의 기본 요소 Building blocks of web application유저 인터페이스 User Interface(UI)유저가 애플리케이션을 어떻게 사용하고 상호작용하는지라우팅 Routing유저가 애플리케이션에서 페이지들을 어떻게 탐색하는지데이터 가져오기 Data Fetching데이터가 어디에 있고 어떻게 가져오는지랜더링 Rendering정적 또는 동적 컨텐츠들을 언제, 어디서 랜더링하는지통합 Integrations서드파티 서비스(CMS, auth, payments 등)들이 무엇이고 어떻게 연결하는지구조 Infrastructure코드들을 어디에 배포하고, 저장하고, 실행하는지(serverless, CDN, edge 등)성능 Performance엔드 유저를 위..
App Routing 규칙과 메타데이터 규칙 | Next.js App Router를 사용하는 Next.js 프로젝트의 라우팅 규칙과 메타데이터(metadata) 규칙을 알아봅니다. 💡Pages Router 라우팅 규칙은 아래 참고 Getting Started: Project Structure | Next.jsA list of folders and files conventions in a Next.js projectnextjs.org App Router에서 예약어처럼 미리 정의된 경로명와 메타데이터를 처리하는 파일명이 있습니다.해당 파일 또는 폴더명으로 생성하면 별도의 설정 없이 자동으로 적용됩니다. 라우팅 파일 Routing Fileslayout화면 레이아웃본인 포함 하위 경로에 공통적으로 적용되는 레이아웃 정의page해당 경로에 표시할 페이지 소스loading로..
Next.js 프로젝트 구조(App Router ver.) Project Structure | Next.js App Router를 사용하는 Next.js 프로젝트의 구조를 알아봅니다. 최상위 폴더 Top-level folders최상위 폴더는 애플리케이션 코드와 정적 리소스들을 구성하는데 사용됩니다.┌ app├ publicor┌ src│  ├ app├ publicapp : App Routerpublic : 정적 리소스src : 소스 분리 위한 폴더(선택) 최상위 파일 Top-level files최상위 파일들은 애플리케이션 설정의존성 관리미들웨어 실행모니터링 툴 통합환경변수 설정등에 사용됩니다.next.config.jsNext.js 설정 파일instrumentation.tsmiddleware.tsNext.js 미들웨어.env환경 변수.env.local로컬 환경에서의 환경 변수.env.production운영 환경에서..
Next.js 시작하기 | Next.js Next.js 애플리케이션을 만들어봅니다.💡 이후 내용은 아래 스펙으로 작성되었습니다.- OS : Windows 11- Package Manager : pnpm- Node.js 20.17.0- Next.js 14.2.13- App Router 시스템 필수 사양 — System RequirementsNodejs 18.18 이상https://nodejs.org/en/download/package-manager패키지매니저 pnpm자동 생성 — Automatic Installation새로운 Next.js 애플리케이션을 시작할 때, 모든게 자동 셋팅되므로 create-next-app 사용하는 것을 추천합니다.명령 프롬프트에서 프로젝트가 생성될 디렉토리 위치로 가 아래 스크립트를 실행하세요.npx create-n..
Next.js가 뭐예요? - Next.js 소개 | Next.js Next.js 에 대해 알아봅니다.  Next.js가 뭐예요? What is Next.js?풀스택 웹 애플리케이션을 만들기 위한 React 프레임워크입니다.UI 생성에 리액트 컴포넌트를 사용하며, 추가적인 기능들과 최적화를 위해 Next.js를 사용합니다.Next.js는 번들링, 컴파일링 등의 React를 위해 필요한 설정을 추상화하고 자동으로 만들어줌으로써 설정하는데 쓰는 시간을 줄여주어 애플리케이션을 구축하는데 집중할 수 있게 해줍니다. Next.js의 메인 기능 Main Features라우팅 Routing화면 랜더링 Rendering데이터 가져오기 Data Fetching스타일링 Styling최적화 Optimization타입스크립트 TypeScript Next.js 안에는 뭐가 있나요? What's..
버즈3/버즈3 프로 하겐다즈 미니컵 케이스 초콜릿 후기 | ACC 갤럭시 버즈3를 구매하였으니 옷을 입혀줘야겠죠 😆 갤럭시 버즈3와 버즈3 프로 모두 사용 가능한삼성전자 정품 케이스하겐다즈 미니컵 케이스 초콜릿 색상데려왔어요 :)왜 버즈는 고급진 가죽 케이스가나오지 않는 것인가......😢 👇👇 짧은 영상으로 보기 👇👇 구매사전구매자 대상으로구매할 수 있는 이벤트몰에서하겐다즈 케이스와 PD 충전기를구매하였답니다. 언박싱  구성박스, 설명서, 케이스, 나무스푼 키링이 들어있어요. 외관헉 하겐다즈랑 똑같이 생겼어요...!!🍫플라스틱에 무광 처리한 재질이에요. 왼쪽 측면에는 키링을 걸 수 있는 고리까지 있답니다.어떤 제품은 USB-C 포트 구멍이 작아서케이스 착용한 상태로케이블 연결이 안되는 제품도 있다던데 요 제품은 널널하게 가능합니다 😊(하지만 무선충전은 ..
랜덤 숫자 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 랜덤 숫자 n번 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (3) 각 자릿수가 랜덤 숫자로 n번 롤링 후 첫 번째 자리부터 맞추는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjQuery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능변수 정의사용할 변수를 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 128374838; // 표시할 타겟 숫자const strNum = targetNum.toString(); // 타겟 숫자의 string 타입const targetNumLen = strNum.length; // 타겟 숫자 자릿수const LOOP_RANDOM_CNT..

티스토리툴바