분류 전체보기 (39) 썸네일형 리스트형 [Next14] To Do List 만들기 with Supabase (1) 프로젝트 세팅 요즘에 Next를 사용하는 회사가 많아짐에 따라 어떤 것인지 궁금해졌어요. Next는 SSR이라서SEO에 유리하고, 렌더링 속도가 빠릅니다.특히 API도 직접 만들 수 있다는 것이 흥미로웠어요! 실무에서 과연 Next API를 사용할 일이 있을까?라는 생각이 들었지만,사이드 프로젝트로는 아주 적합하다는 생각이 들었어요!혼자 개발할 때 서버도 만들고 클라이언트도 만들려면 아주 귀찮기 때문.. 그래서 새로운 기술을 접할 때 시도해 보기 좋은(만만한)To Do List를 만들어보려고 합니다! Next API도 사용해볼 예정인데, 그러면 또 database가 필요하겠죠.database를 직접 구축하는 것은 귀찮아서supabase라는 서비스를 사용하기로 했습니다. UI도 예쁘고 사용법도 쉬워서 사이드프로젝트할 .. [HTML] 시맨틱 태그(Semantic Tag) : section, article, div 차이 이번 글에서는 문서의 영역을 구분하는 HTML 태그 중``, ``, ``에 대해 알아보려고 합니다! 태그 설명섹션은 동일한 내용의 요소들을 하나의 그룹으로 묶어주는 역할을 해요.일반적으로 섹션의 주제를 지정하기 위해 h태그(`` ~ ``)를 사용하는데 필수는 아닙니다. A회사 프론트엔드 모집공고 필요한 역량 React, typescript 코드 품질 향상, 테스트 코드 작성 반응형 웹 개발에 대한 이해 원활한 커뮤니케이션 능력 주요 업무 PC 웹 / 모바일 웹 서비스 개발 웹 성능 최적화 테스트 코드 작성위의 예시를 볼까요?A회사의 프론트엔드 모집공고 페이지입니다. 소제목으로 "필요한 역량"과 "주요 업무"가 있는데요,``이 소제목에 해당하는 요소들을 하나로 묶어주고 있습니다. 이처럼 .. [HTML] 시맨틱 태그 (Semantic Tag) : h1 & header 시맨틱 태그에는 아주 많은 종류가 있어요.그 중 이번 글에서는 과 에 대해 알아봅시다! 태그가 속해있는 섹션의 제목을 나타냅니다. 제목1 에 포함되어있는 내용도 과 같은 섹션으로 묶여있기 때문에 "제목1"에 관한 내용으로 분석되어요. --> 내용1 내용2 `` 부터 `` 까지 있으며, 뒤의 레벨(1~6)는 제목의 위계를 의미해요.``은 가장 최상위 섹션의 제목,``는 서브 섹션의 제목,``는 서브 섹션의 부제목 등의 순서로 사용됩니다. 제목 요소는 하위에 따라오는 내용을 하나의 섹션으로 묶어요. 자신보다 높은 위계의 제목 요소를 만나기 전까지 하나의 섹션으로 구분해요. 시맨틱 태그 공부하는 방법 학습하기 MDN에 나와있는 시맨틱 태그 정의를 학습한다. 예시 찾아보기 .. [HTML] 시맨틱 태그(Semantic Tag)로 좋은 사이트 만드는 방법 시맨틱 태그 설명 시맨틱 태그란 의미 있는 태그를 뜻합니다. 평소에 어떻게 마크업을 작성하시나요?만약 아래와 같은 페이지를 구현한다고 할 때, 어떻게 마크업 하실 건가요? div만 사용한 경우이미지, 텍스트, 모달, 버튼 등 어떤 요소이든 간에 `` 태그만 있으면 작성할 수 있습니다.다음과 같이 말이죠. 제목입니다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.. [Javascript] NaN 알아보기 NaN에 대해 알아보기Javascript에서 숫자를 처리하는 방법NaN에 대해 본격적으로 다루기 전에,Javascript에서 숫자를 저장하는 방법에 대해 알아볼 필요가 있어요!위의 이미지는 [ECMA]에서 정한 Number에 대한 정의입니다.설명을 통해 다음과 같은 정보를 알 수 있어요.Javascript는 IEEE754라는 표준에 따라 Number value를 처리한다.`Not-a-Number(NaN)`, `양수 무한`, `음수 무한`도 Number value에 속한다. IEEE754란?전기전자공학자협회(IEEE)에서 정한 표준 중 하나입니다.Javascript는 숫자를 다룰 때 IEEE754에서 정한 표준에 따라 처리하고 있어요.더 알아보고 싶다면 이전 포스팅을 참고해주세요![양수0, 음수0 차이 쉽.. [Javascript] 0.1 + 0.2가 0.3이 아닌 이유 쉽게 이해하기 지난 글 복습하기지난 포스팅에서 javascript에서 `-0`이 존재하는 이유에 대해 알아보았어요.[양수 0, 음수 0 차이 쉽게 이해하기] 위의 글에서 이야기했던 `-0`이 존재하는 이유와 오늘 글의 주제와 관련이 있기 때문에다시 한번 리캡해볼까요?Recap!- javascript는 숫자를 저장할 때 IEEE754표준에 따라서 64개의 비트(bit, 0 또는 1)를 사용한 부동소수점으로 저장한다.- 이때 가장 앞에 오는 비트가 부호를 의미한다. 양수면 `0`, 음수면 `1`을 저장한다.- `+0`을 저장할 때는 `0`을 저장하고 `-0`을 저장할 땐 `1`을 저장하기 때문에 차이가 발생합니다. 이 내용을 잘 이해해야 오늘의 이야기도 쉽게 이해할 수 있으니,아직 잘 모르겠다 싶다면 지난 포스팅을 먼저.. [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 하여 정의할 수 있.. 이전 1 2 3 4 5 다음
