Front-End/Next.js(React | Ts|Js)12 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. [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. 호이스팅 / var,let,const 차이 -기술면접대비 호이스팅이란.. - 코드가 실행하기 전에 선언한 변수/함수등을 해당 스코프의 최상단에 미리 끌어 올리는 것 var,let,const 모두 호이스팅은 발생하지만 var는 선언과 함께 undefined로 초기화 되어서 메모리에 저장되지만 let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장되서 참조 에러가 발생 변수는 3단계에 의해 생성 1단계: 선언 단계(Declaration phase) ex) var i , let a 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2단계: 초기화 단계(Initialization phase) ex)var i //선언과 동시에 undefined로 초기화 let a 초기화 안됐음 변수 객체에 등록된 변수를 위한 공간.. 2023. 5. 7. React-hooks기본 사용법 -프론트엔드개발 1. useState - useState 는 state(상태)를 업데이트 해주는 함수형 컴포넌트 import React, { useState } from 'react'; //useState를 임포트해서 불러옴 const Counter = () => { const [value, setValue] = useState(0); //초기값 0 setValue를 통해서 value값을 변환 return ( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}>+1 //1증가 버튼 setValue(value - 1)}>-1//1감소 버튼 ); }; 2.useEffect - 컴포넌트가 렌더링 될 때마다 특정 작업을 할수 있도록 설정 하는 Hook 입니다. 클래스형 컴포넌트의 componentDi.. 2023. 5. 2. [Next.js]13 typescript 추가 프로젝트 생성 - 프론트엔드개발 시작 기본적으로 Node.js 및 개발Tool이 필요합니다. 1.Node.js 설치 - https://nodejs.org/ko/download 2.Visual Studio Code 설치 - https://code.visualstudio.com/?wt.mc_id=vscom_downloads 1. NextJs 새 프로젝트 Typescript로 만들기 cmd 창에 새 프로젝트를 코드 typescript를 추가해서 설치 명령어. npx create-next-app --typescript [프로젝트명] Next.js에서 기본적으로 제공되는 ESLint(JS문법검사) / Tailwind CSS / 'src/'(src폴더를 사용할건지) 등등 우선 기본설정으로 설치했습니다. 설치 후 package.json { "nam.. 2023. 5. 1. 이전 1 2 다음
