개발 (21) 썸네일형 리스트형 [Javascript] 양수0, 음수0 차이 쉽게 이해하기 +0과 -0 알아보기수학적으로 0은 음수와 양수의 사이에 차이가 없기 때문에 같은 값으로 봅니다.하지만 컴퓨터 세계에서는 `+0`과 `-0`은 엄밀히 말하면 다릅니다.javascript 콘솔에서 `-0`을 입력하면 `-0`을 반환합니다.즉, `+0`과 구분되는 `-0`이 존재한다는 것이죠.`+0`과 `1`을 곱하거나 나누었을 때는 `+0`을 반환합니다.반면 `-0`과 `1`을 곱하거나 나누었을 때 `-0`을 반환해요.`+0`과 `-0`을 비교해 보면 `true`를 반환합니다.그렇다면 `+0`과 `-0`은 왜 구분되어 있을까요?+0과 -0를 구분하는 이유우리가 실생활에서 사용하는 숫자 표기법은 0부터 9까지 사용하는 십진법입니다.컴퓨터가 사용하는 숫자 표기법은 0과 1을 사용하는 이진법입니다. 우리가 컴퓨.. [Next14] 페이지와 레이아웃 : Pages and Layouts 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing/pages-and-layoutsNext에서는 특별한 파일 컨벤션이 있다는 것을 지난 글에서 소개했어요.그 중 layout.js page.js, template.js는 특정 라우트의 UI를 생성하기위해 사용되어요.이 글에서는 이 특별한 파일들을 언제, 어떻게 사용하는지에 대해 알려드리겠습니다.Pagespage.js는 특정 라우트의 고유한 UI를 포함합니다.page.js에서 리액트 컴포넌트를 export 하여 정의할 수 있.. [Next14] 라우트 정의하기 : Defining Routes 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing#file-conventions Creating RoutesNext.js의 파일 시스템은 폴더가 어디에 생성 되어있는지에 따라 결정돼요.각 폴더는 route segment이고, 각 segment는 url segment와 1:1 매칭이 됩니다.nested route를 만들기 위해선 폴더 안에 폴더를 만들어서 중첩된(nested) 구조를 만들어주면 됩니다. 예를 들어, app 하위에 dashboard 폴더가 있고 그 하위에 .. [Next14] 라우팅 기초 : Routing Fundamentals 해당 글은 Next.js 공식문서를 해석한 글입니다.학습하며 제가 이해한대로 작성한 내용이기 때문에 오해석한 부분이 있을 수 있습니다.정확한 내용은 아래의 공식문서를 참고해주세요!https://nextjs.org/docs/app/building-your-application/routing모든 어플리케이션의 뼈대는 routing입니다.이 글에서는 웹 라우팅의 기초 컨셉을 소개하고 Next에서는 라우팅을 어떻게 다루는지에 대한 내용을 다루었습니다. 용어우선, 용어 소개를 간단하게 하고 넘어가겠습니다. - Tree : 위계구조를 시각화하여 부르는 용어- Subtree : tree의 일부분- Root : tree 혹은 subtree에서 첫 번째 노드- leaf : 자식 노드를 갖지 않은 노드 - URL Segm.. [React18] 새로운 기능 : Automatic Batching React 18 부터 Automatic Batching 개념이 새롭게 등장했습니다. Automatic Batching을 한국말로 직역하면 '자동 일괄처리'를 뜻해요. 그렇다면 React에서 Automatic Batching은 어떤 기능을 의미하는 것인지 알아봅시다! 이 글은 react github 문서의 내용을 기반으로 작성했습니다. Batching이란?Batching 기능은 React 17 이하 버전에서 일부 지원하는 기능이에요. 먼저 아래의 코드를 살펴봅시다! Next 버튼을 클릭했을 때, handleClick함수가 실행됩니다. handleClick함수에서는 setCount와 setFlag 함수를 사용하여 count state와 flag state를 변경해주고 있습니다. React에서는 sta.. [React] 컴포넌트 Property type 가져오기 | Get component props type 상황블로그 글 내용을 표시하는 React 어플리케이션을 개발 중입니다. 각 글은 제목, 내용, 고유 ID 등의 다양한 정보를 가지고 있습니다. PostDetail 컴포넌트는 props로 전달받은 글의 제목과 내용을 표시합니다. interface PostDetailProps { post: PostType}function PostDetail({ post }: PostDetailProps) { return ( {post.title} {post.content} );} MyParent 컴포넌트에서 PostDetail 컴포넌트를 사용하고자 합니다. PostDetail의 post 타입은 어떻게 추론할 수 있을까요? // MyParent.tsxfunction MyParent() .. [Javascript] 스크롤 이벤트로 비디오 재생 | 클론코딩 | 인터렉티브 웹 클론코딩 대상토스의 브랜드 스토리 사이트(https://toss.im/new-dimension/brand-story)의 첫 번째 섹션을 클론한다. 새로운 차원의 토스토스의 새로운 로고를 만나보세요toss.im 분석뒷 배경은 비디오로 되어있으며, 스크롤에 따라 재생시킨다. video src : https://static.toss.im/homepage-static/newtoss/intro-video.mp4 글자는 비디오와 분리되어 있다.h1태그를 사용하여 글자를 html에서 입력했다. 텍스트를 비디오에 포함시키지 않은 이유는, 뒷 배경은 그대로 사용하더라도 텍스트는 유연하게 변경하기 위함이라고 예상 "완전히 차원이 다른 토스의 새로운 얼굴" 텍스트는 페이지 진입 시 fade up 되며 나타난다. fade.. React useEffect 제대로 사용해보자! 이 글은 React 공식 문서 중 You Might Not Need an Effect 내용을 바탕으로 작성된 글입니다. You Might Not Need an Effect – ReactThe library for web and native user interfacesreact.dev 불필요한 Effect를 제거하자A1. 랜더링 되는 동안 모든 것을 계산하기상황props로 전달받은 문자열 리스트를 보여주는 컴포넌트가 있다. 그 문자열 중 'filter'라는 문자열은 화면에 보여주고 싶지 않다. 불필요한 Effects 예시아래의 코드에서는 화면에 보여줄 리스트(filteredItems)를 따로 관리하고있다. useEffect가 initialList가 변경되었음을 감지하면 내부 state를 변경한다. 이는.. 이전 1 2 3 다음
