Front-End16 [Next.js] 13 Image 태그 사용법 및 특징 -프론트엔드개발 Next/Image 컴포넌트의 기능 Next/Image 컴포넌트에서 제공하는 대표적인 기능은 3가지 입니다. lazy loading 이미지 사이즈 최적화 placeholder 제공 1.lazy loading lazy loading이란 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다. 예를 들면 유저한테 보이는 이미지들은 로드하고 보이지 않는 화면의 이미지는 지연시켜서 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading을 구현하기 위해서는 Intersection Observer 혹은scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현해야 합니다.(img 태그.. 2023. 6. 20. 자바스크립트(JS)문자열 자르기 함수(split, substr, substring, slice) JavaScript에서 문자열을 자를 때 사용하는 방법을 소개합니다. 1. split() : 구분자로 문자열을 잘라서 배열로 리턴 2. substr() : 특정 Index에서 원하는 길이만큼 잘라서 문자열로 리턴 3. substring() : 시작 Index에서 끝 Index 전까지 문자열을 잘라서 리턴 4. slice() : substring과 비슷하지만 약간의 차이점이 있는 메소드 1. split() : 구분자로 문자열 분리하여 배열로 리턴 split()의 Syntax는 다음과 같습니다. 인자로 구분자와 limit을 받습니다. limit은 구분자로 분리할 문자열의 개수입니다. 예제와 함께 어떻게 동작하는지 확인해보겠습니다. let str = 'Hello, World, Javascript'; conso.. 2023. 6. 13. URL 확장자 숨기기ex).html dAWS S3에서 .html 확장자를 없애려고 했다. home-1.html에서 .html을 없애기 위해서 - aws s3 해당 버킷으로 이동 - 먼저 작업 버튼을 눌러서 content type 이 text/html 로 되어있는 지 확인한다. 안 되어 있으면 text/html 로 바꾸어주거나 추가해준다. (기본적으로 선택이 되어 있을 것이다) - 그러고나서 다시 작업에서 이름 바꾸기를 눌러 이름을 home-1.html → home-1 로 변경해준다. - 개요를 보면 url 이 home-1 로 변경된 것을 확인할 수 있다. - 이름 변경 후 잠시 기다린 후 해당 url 로 접속을 해본다. 바로 적용이 안 될수도 있으니 10분 정도까지는 기다려본다. (10분보다 훨씬 빠르게 적용된다) 이렇게 하면 되는 걸로 .. 2023. 6. 12. HTML 기본 - 프론트 엔드 HTML (Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 그래서 HTML은 무엇일까요? HTML은 콘텐츠의 구조를 정의하는 마크업 언어 입니다. HTML은 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소 로 이루어져 있습니다. 태그로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어) My cat is very grumpy -> My cat is very grumpy 이런 식으로 문단 태그를 둘러싸서 하나의 문단임을 명시 할 수 있다. HTML 요소 분석 My ca.. 2023. 5. 12. [Next.js] 13 폴더 구조 및 특징 - 프론트엔드개발 Next.js 13버전부터 변화가 생겼습니다. 변경 사항에 대해서 알아보겠습니다. Next.js 12까지는 pages 폴더에 파일을 만들면 자동으로 라우팅을 지원해 줬는데 Next.js 13부터는 Nested Layout을 위해 app 폴더 구조로 되었습니다. app 폴더를 사용하기 위해서는 우선 pages 폴더가 아니라 page.tsx 파일을 작성해야 됩니다. 그리고 아래와 같이 작성 하시면 됩니다.import React from 'react'type Props = {}function Home({}: Props) { return div>Homediv>}export default Home그리고 next.config.js에서 app를 사용하도록 수정을 해야 합니다./** @type {import('nex.. 2023. 5. 10. [JS]영어 대문자, 소문자 변 문자(영어)를 대문자 및 소문자 변환하는 방법 소문자 > 대문자 "문자".toUpperCase() 대문자 > 소문자 "문자".toLowerCase() let 소문자 = "abc" let 대문자 = "ABC" let result = "" result = 소문자.toUpperCase() //abc소문자를 toUpperCase함수를 통해서 대문자로 변환 console.log(result) result = 대문자.toLowerCase() //ABC대문자를 toLowerCase함수를 통해서 소문자로 변환 console.log(result) 2023. 5. 8. 이전 1 2 3 다음
