코딩기록

프로젝트 설치 $ npx create-next-app 다이나믹 라우팅 유저마다 폴더를 생성할 순 없다. 변동 값일 떄 [username] , [id](글 주소) 로 설정한다. 왜 page.tsx가 두개냐? 게시글 화면, 프로필 화면으로 두개 📌 만약 다이나믹 라우팅에 사용되는 폴더명과 다이나믹 라우팅이 아닌 폴더명이 동시에 존재한다면, 다이나믹 라우팅의 폴더명은 최후순위가 된다. ✔️ [username] 폴더와 home 폴더가 app 폴더 아래에 존재했을 때 유저명이 ‘home’일 경우 → 동적 세그먼트는 최후순위이기 때문에 유저 프로필 페이지가 아닌 home 페이지가 보여지게 된다. 따라서 동적 세그먼트에 사용되는 params 들이 다른 라우팅과 겹치지 않도록 하는 것이 제일 좋다. 폴더 구조 라우트 ..

🙆🏻‍♀️사용 기술 - React - firebase - swiper - 전에 영화 페이지를 만들어 본 적이 있어서 나름 수월하게 따라 만들어볼 수 있었다. - 하지만 firebase를 쓰는 방법에 대해서 더 알고 싶었는데 로그인 로그아웃 기능만 해서 아쉬웠다. - 스와이퍼에 대한 버그가 있는데 찾는 중이다.

import { RouterProvider, createBrowserRouter } from 'react-router-dom' import Layout from "./components/layout"; import Home from "./routes/home"; import Profile from "./routes/profile"; import Login from "./routes/Login"; import CreateAccount from './routes/CreateAccount'; import { createGlobalStyle, styled } from 'styled-components'; import reset from 'styled-reset'; import { useEffect, useSta..

const food = [1,2,3,4] food.push(5); const food = [1,2,3,4]; [...food, 5]; 리액트 강의 들을 때 헷갈렸던 부분 왜 push를 사용하지 않고 전개 연산자를 사용하는지? 결과가 같아 보일 수 있지만 .push()를 사용하면 food 배열이 [1,2,3,4,5]로 변경되는 반면 전개연산자 ...food를 사용하면 기존의 배열은 변경되지 않음. 기존 배열을 변경하지 않고 불변성을 유지하기 위해 전개연산자를 사용. push와 마찬가지로 slice, pop을 사용하지 않는 것을 권장한다고 함.

새로고침할 때마다 배경 바꾸기 const images = ["0.png","1.png","2.png","3.jpg","4.png"]; const chosenImage = images[Math.floor(Math.random() * images.length)]; //images[내림(랜덤 숫자 * images의 길이)]; const bgImage = document.createElement('img'); //이미지 태그 추가 bgImage.src = `img/${chosenImage}`; //이미지 경로 bgImage.classList.add('bg_img'); document.body.appendChild(bgImage); body 안에 자식요소로 이미지태그 새로고침할 때마다 명언 바꾸기 const qu..

const clock = document.getElementById('clock'); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}` } getClock(); setInterval(getClock, 1000); // function sayHello(){ // clock...

//html 간단한.... form과 h1에 hidden 클래스 넣어주기 //javascript const loginForm = document.getElementById('login_form'); const loginInput = loginForm.querySelector('input'); const greeting = document.querySelector('#greeting') // 이렇게도 가능! // const loginInput = document.querySelector('#login_form input'); // const loginButton = document.querySelector('#login_form button'); const HIDDEN_CLASSNAME = 'hidden'..

const title = document.querySelector("button"); function titleClick() { const clickedClass = "active" if(title.classList.contains(clickedClass)) { title.classList.remove(clickedClass); } else { title.classList.add(clickedClass); } } title.addEventListener("click", titleClick);// title.onclick = titleClick 같은 방법 className을 사용하면 기존에 가지고 있던 클래스도 없애버려서 사용불가 clickedClass 대신에 'active'를 넣어도 되지만 오류의 위험이..

const title = document.querySelector(".hello:first-child h1"); function titleClick() { title.style.color = 'blue'; } function titleMouseEnter() { title.innerHTML = "mouse is here@!" } function titleMouseLeave() { title.innerHTML = "mouse is gone!" } title.addEventListener("click", titleClick); title.addEventListener("mouseenter", titleMouseEnter); title.addEventListener("mouseleave", titleMouseL..

프롬프트 창에 나이를 입력하면 콘솔창에서 확인할 수 있음. const age = parseInt(prompt("your age")); //or 연산자 true || true === true false || true === true false || false === false //and 연산자 true && true === true true && false === false false && false === false // console.log(isNaN(age)); if(isNaN(age) || age < 0){ // age가 숫자가 아니거나 0이하일 때 console.log("0이상의 숫자를 입력해주세요"); } else if(age < 18) { // age가 18 미만일 떄 console.log("..