Sub's playground

문제 설명n명의 사람이 일렬로 줄을 서고 있습니다. n명의 사람들에게는 각각 1번부터 n번까지 번호가 매겨져 있습니다. n명이 사람을 줄을 서는 방법은 여러가지 방법이 있습니다. 예를 들어서 3명의 사람이 있다면 다음과 같이 6개의 방법이 있습니다.[1, 2, 3][1, 3, 2][2, 1, 3][2, 3, 1][3, 1, 2][3, 2, 1]사람의 수 n과, 자연수 k가 주어질 때, 사람을 나열 하는 방법을 사전 순으로 나열 했을 때, k번째 방법을 return하는 solution 함수를 완성해주세요.제한사항n은 20이하의 자연수 입니다.k는 n! 이하의 자연수 입니다.입출력 예시n: 3k: 5result: [3,1,2]내가 생각한 풀이 전략팩토리얼을 활용해야 될 것 같다. (모든 경우의 수를 정의하고..

문제 설명선행 스킬이란 어떤 스킬을 배우기 전에 먼저 배워야 하는 스킬을 뜻합니다.예를 들어 선행 스킬 순서가 스파크 → 라이트닝 볼트 → 썬더일때, 썬더를 배우려면 먼저 라이트닝 볼트를 배워야 하고, 라이트닝 볼트를 배우려면 먼저 스파크를 배워야 합니다.위 순서에 없는 다른 스킬(힐링 등)은 순서에 상관없이 배울 수 있습니다. 따라서 스파크 → 힐링 → 라이트닝 볼트 → 썬더와 같은 스킬트리는 가능하지만, 썬더 → 스파크나 라이트닝 볼트 → 스파크 → 힐링 → 썬더와 같은 스킬트리는 불가능합니다.선행 스킬 순서 skill과 유저들이 만든 스킬트리1를 담은 배열 skill_trees가 매개변수로 주어질 때, 가능한 스킬트리 개수를 return 하는 solution 함수를 작성해주세요.제한 조건스킬은 알파..

글 작성 기능 만들기글을 작성하고 저장하는데 있어서 사용자가 작성한 글이 바로 DB에 저장되면 위험 요소가 많다. ex.) 값을 입력하지 않고 null로 DB에 저장하려고 하는 경우따라서 DB에 저장하기 전에 중간에 서버에서 사용자가 작성한 글을 한번 거치고 저장해야 한다. (3 tier architecture)서버개발자는 각각의 기능마다 고유의 url과 method를 작성한다.method는 총 5가지 종류가 있다.GET (유저에게 데이터 전송시)POST (새로운 데이터 추가시)PUT (DB에 있는 데이터 수정)DELETE (DB에 있는 데이터 삭제)PATCH (DB에 있는 데이터 수정)서버기능은 app 안에 api이름의 폴더를 만들거나 pages라는 폴더를 root위치에 만들어서 안에 api폴더를 만들..

Dynamic RouteDynamic Route를 사용하면 비슷한 페이지를 여러개 만들 필요가 없다.Dynamic Route 만드는 방법폴더명을 지을 때 [] 를 붙여서 이름을 짓는다.ex.) [Register]하위에 page.js 생성DB에서 게시물 1개만 가져오는 방법import { connectDB } from "@/util/database"const db = (await connectDB).db("forum")let result = await db.collection('컬렉션이름').findOne({찾을 document정보})유저가 URL에 입력한 내용 가져오는 방법export default async function Detail(props) { console.log(props) (생략)

import { connectDB } from "@/util/database"const db = (await connectDB).db("forum")let result = await db.collection('컬렉션이름').find().toArray()object 자료형이란?let data = { name: 'kim', number : 20} // array랑 비슷한데 모든 자료마다 이름을 부여해준 차이가 있다.console.log(data.name)데이터를 console.log로 출력해봤는데 시작괄호가 '['라면 array 자료형임

프로젝트 배포하기npm run build클라우드에 올린 다음에 클라우드 cmd에서 다음 명령어 실행npm run startNext.js에서의 페이지 종류static rendering pagedynamic rendering page기본적으로 Next.js에서 페이지를 생성할 경우 디폴트는 static rendering page이다.static rendering page는 npm run build 할 때 만든 html 페이지를 그대로 유저에게 보낸다. (O 기호)dynamic rendering 페이지는 유저가 페이지를 접속할 때마다 html을 새로 만들어서 보낸다. (람다 기호)static rendering page를 dynamic rendering page로 바꾸는 방법해당 페이지의 코드로 가서 다음을 추..

Map 함수 사용 방법 (HTML에서 반복문 사용하기)let array = [2,3,4];array.map(()=>{ console.log('안녕')});let array = [2,3,4];array.map((a,i)=>{ console.log(a) // 어레이에 있는 값들을 출력해준다.});HTML에 적용해보자반복생성 예시export default function List() { let 상품 = ['Tomatoes', 'Pasta', 'Coconut'] return ( 상품목록 { 상품.map((a,i)=>{ return ( { a } $40 ) ..

Props 문법함수 파라미터랑 비슷하다.막간을 이용한 Javascript 개념function 안에 만든 변수는 function 안에서만 사용 가능하다.props 문법부모함수에서 자식함수는 ()안에 (props)처럼 props 변수를 받고, 데이터가 필요한 곳에 props.작명 으로 기입.

Component란?길고 복잡한 html을 한 단어로 축약한 것.Component를 작성하는 방법function 작명(){} //보통 영어 대문자로 시작한다.return (축약할 긴 html)여기서 주의할 것: return안에는 여러개의 html태그를 넣을 수 없다. 사용Component의 단점Component간 데이터 공유가 어렵다.Next.JS의 컴포넌트 종류server component아무데서나 만드는 컴포넌트는 기본적으로 server component이다.html에 자바스크립트 기능 넣는 것이 불가능하다.React에 있는 useState, useEffect등 사용이 불가능하다.로딩 속도가 매우 빠르다. (페이지를 로드할 때 자바스크립트 기능이 없기 때문)검색엔진 노출에 유리하다.client co..

Next JS 프로젝트 생성 방법npx create-next-app@latest잠깐!! 여기서 React 프로젝트를 생성하는 방법npm init react-app '프로젝트 명'프로젝트 파일 구조page.js가 메인 파일이다.app 폴더: 코드를 작성할 폴더layout.js: 메인페이지 감싸는 용도의 페이지public 폴더: 이미지나 static 파일 보관용api 폴더: 서버기능 만드는 폴더next.config.js: nextjs 설정 파일node_modules 폴더: 설치한 라이브러리 보관용 폴더package.json: 설치한 라이브러리 버전 기록용 파일npm run dev // locathost에서 실행하는 명령어