전체 글

📌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 방지 : 이미지 떄문에 레이아웃이 밀리는 현상을 방지한다. - 최..

✅문제설명 두 정수 a, d와 길이가 n인 boolean 배열 included가 주어집니다. 첫째항이 a, 공차가 d인 등차수열에서 included[i]가 i + 1항을 의미할 때, 이 등차수열의 1항부터 n항까지 included가 true인 항들만 더한 값을 return 하는 solution 함수를 작성해 주세요. ✅입출력 예 최대의 난제 ! boolean형은 앞선 문제처럼 각각 하나씩 매칭 되는 것이 안된다. Newin라는 객체를 만들어서 넣었는데 제일 마지막에 넣은 값만 출력되는 문제가 발생한다. 그러다가!! 여차저차 풀이를 완성해보았다. 💡내가 작성한 코드 function solution(a, d, included) { let sum = 0; for ( let i = 0 ; i < included..

✅문제설명 문자열 code가 주어집니다. code를 앞에서부터 읽으면서 만약 문자가 "1"이면 mode를 바꿉니다. mode에 따라 code를 읽어가면서 문자열 ret을 만들어냅니다. mode는 0과 1이 있으며, idx를 0 부터 code의 길이 - 1 까지 1씩 키워나가면서 code[idx]의 값에 따라 다음과 같이 행동합니다. mode가 0일 때 code[idx]가 "1"이 아니면 idx가 짝수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 0에서 1로 바꿉니다. mode가 1일 때 code[idx]가 "1"이 아니면 idx가 홀수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 1에서 0으로 바꿉..

✔️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..

✅문제설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

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