Frontend

React Lifecycle mounting -> 태어나는 것 , component가 화면에 표시될 때  render 후 componentDidMount실행 updating -> update의 원인, state를 변경하는 것이 update 이다.  (setstate)unmounting - > 페이지를 바꿀 때 component 가 죽는 것   React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다. 마우스에 움직임을 감지하는 js코드를 react에 집어넣으려고 했더니 그냥 ..

📌next.js - favicon 기본 설정 npm run dev로 실행시키면 위의 title과 아이콘이 저렇게 기본설정 되어있다. 나는 저것을 이렇게 바꿔주었다. 아주아주 간단하다. 📌next.js - favicon 수정 export const metadata = { title: "도이 포트폴리오", description: "Generated by 도이", icons: { icon: "/tree.png", }, }; public파일 아래 사진을 추가한뒤 layout.js 에서 파일에서 metadata 객체에 icons 속성을 추가해주면 된다. 이 사진은 지워줘야 적용이 된다. 📌13버전 이후 바뀐 메타 태그 방식 라우팅 규칙이 변경됨에 따라 SEO에서 필수적인 메타태그 적용 방법도 달라졌다. 기존 Pa..

📌next.js 구조 next.js에서 url과 페이지를 만들고 싶으면 app 폴더 안에 url이름과 같은 폴더 만들고 그 안에 레이아웃 넣기 함수 안에 있는 {children} -> page.js가 들어가는 부분이다. 페이지변경과 상관없이 계속 보여줄 ui는 layout.js쓰면 편하다 !! html 사이에 for, if 사용이 불가능하다. map 반복문 사용시 key = {유니크한값} 넣으면 좋음 / 똑같은 요소들이 반복되면 구분하기 헷갈려하니깐 !! public폴더 안에 있는 이미지를 가져올 때는 경로가 /부터 시작이다. 📌img 넣는 법 1. img 최적화 방법 - lazy loading - 사이즈 최적화 - layout shift 방지 : 이미지 떄문에 레이아웃이 밀리는 현상을 방지한다. - 최..

✔️RoutingNext.jsnext.js는 직접 url을 적어줄 필요없이 파일 시스템을 통해 url이 표현된다.직접적인 page.tsx(jsx)파일이 없는 폴더는 실제 페이지가 없다. 사용자가 url로부터 보게 될 요소는 page.tsx다!! React수동적이 방식이다.  이 url 은 저 컴포넌트, 이 url은 이 컴포넌트 : url은 직접 적어주는 방식 /Home -> /about-us -> /movies/:id -> : id값에 따라 동적으로 해당하는 Moive 컴포넌트를 렌더링 한다.   usePathname : react hook으로 user가 머물고 있는 url을 알려준다.  ✔️Rendering우리의 react component(javascript function)를 가져와서 브라우저가 이..

📌Next.js 란 ? React는 라이브러리이고, Next.js는 리액트의 프레임워크이다. 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 - 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 - react 프레임워크 - 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 - next.js 라이브러리는 “어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임”이고, 프레임워크는 “코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경”이다. 즉..

📌indexOf() string.indexOf(searchvalue, position) indexOf 함수는, 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 return 한다. 문자열을 찾으면 문자열의 첫 번째 위치를 반환하고 찾지 못하면 -1을 반환한다. var str = 'HTML,CSS,JavaScript'; var pos1 = str.indexOf('JavaScript'); // 결과 : 9 var pos2 = str.indexOf('Kotlin'); // 결과 : -1 찾을 문자열이 여러 개인 경우 첫 번째 찾은 문자열의 위치를 반환한다. 찾을 문자 쉼표(',')가 2개이지만 첫 번째 찾은 쉼표의 위치를 반환했다. v..

추상클래스의 인스턴스는 만들 수 없다. 상속받는 클래스가 어떻게 동작해야할지 알러주기 위해 추상클래스를 사용한다. 추상클래스는 클래스에게 어떻게 구현할지를 알려주는 것이 아니라 무엇을 구현해야 할지에 대해 알려준다. 그러나 자바스크립트에는 추상클래스의 개념이 없다. 우리는 왜 추상클래스를 만드는 걸까? 다른 클래스들이 표화된 속성과 메소들르 갖도록 해주는 블루 프린트를 만들기 위해 추상클래스를 사용한다. 인터페이스는 컴파일하면 js로 바뀌지 않고 사라진다. 인터페이스를 쓸 때 클래스가 특정 형태를 따르도록 어떻게 강제할까? 추상클래스 -> 인터페이스 인터페이스는 자바스크립트에서 존재하지 않아 코드가 보이지 않아 훨씬 간단해졌다. 인터페이스를 상속할 때는 속성을 private로 만들지 못한다. public..

[key:string] Words 타입이 string만을 속성으로 가지는 객체라는 것을 말한다. [key:number] 도 될 수 있다. 그러면 "potato" 가 에러가 난다. [key:string] 이 형식(객체)은 제한된 양의 속성만 가질 수 있다. 속성에 대해서 미리 알지 못하지만 타입을 미리 알고 있을 때 쓰면 된다. 클래스를 타입처럼 활용하는 것이 가능하다.!! 이런식의 지정된 특정 값을 갖는 type을 사용하는 것도 가능하다! interfaces 인터페이스는 오브젝트를 설명하는 또다른 방법이다. type -> interface로 바꿔도 에러가 나지 않는다. typescript에서 object의 모양을 알려주는 방식 2가지가 type과 interface이다. 하지만 interface는 오직 o..