본문 바로가기

프론트엔드로 가는 길121

1. Next.js 설치와 개발환경 셋팅 1. Next.js 설치와 개발환경 셋팅 1) 프로젝트 생성 (1) 프로젝트 생성 코드 npx create-next-app@latest * Page가 메인 여기에다 코드 작성 (2) 프로젝트를 실행 npm run dev page.js : 메인페이지 layout.js : 메인페이지 감싸는 용도의 페이지 2) 페이지 라우팅 (1) 방법 nextJs는 폴더 경로만 작성해줘도 링크 이동이 가능하다. home list페이지 (2) 라우팅을 하는 과정에서 의문점 import Link from "next/link"; 이렇게 안뜨고 하단의 코드 처럼 import가 된다. import Link from "@/node_modules/next/link"; 이유 : 프로젝트 또는 빌드 도구에 의해 커스텀 경로 별칭을 설정한 .. 2023. 10. 19.
10. 자살예방웹사이트 - 속성오류 이 경고는 React가 인식하지 못하는 isOpen 속성(또는 prop)이 DOM 요소에 전달되었을 때 발생합니다. React는 커스텀 속성을 자동으로 인식하지 않으며, 컴포넌트에서 사용해야 합니다. const NavWrapper = styled.div` /* 스타일과 위치 설정은 필요에 따라 조절하세요. */ width: 80%; height: 100%; padding: 20px; position: fixed; top: 0; left: ${({ isOpen }) => (isOpen ? "0" : "-80%")}; background-color: ${({ theme }) => theme.color.mainWhite}; transition: left 0.3s ease-in-out; z-index: 1000.. 2023. 10. 4.
2. 문자열을 교대로 병합 https://leetcode.com/problems/merge-strings-alternately/?envType=study-plan-v2&envId=leetcode-75 LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com You are given two strings word1 and word2. Merge the strings by adding letters.. 2023. 9. 19.
1. 문자열의 단어 반전 프로그래머스 문제를 100문제를 풀었다! 그래서 Leet 코드 75를 풀고자한다 https://leetcode.com/problems/reverse-words-in-a-string/description/?source=submission-ac LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Given an input string s, reverse the ord.. 2023. 9. 18.