분류 전체보기408 [ Next.js ] next/babel 에러 Next.js 개발을 위해 파일 설치 후 아래와 같은 에러가 뜬다 Parsing error: Cannot find module 'next/babel' npm run dev를 하면 실행은 되지만, 파일에 빨간 줄이 나타나는게 너무나도 신경이 쓰인다. 해결 방법.babelrc file을 생성해 주고 아래와 같은 코드를 적고{ "presets": ["next/babel"]} .eslintrc파일 생성우 아래 코드를 적어주면 빨간 줄이 바로 없어진다. { "extends": ["next", "next/babel", "next/core-web-vitals"]} 하지만 더 쉬운 방법!새로운 파일 생성없이 기존에 존재하는 .eslintrc.json파일의 코드만 수정해주면 된다!.eslintrc.json 파.. 2024. 5. 23. [ React ] Ant design Layout 적용해보기 아래 링크로 이동하면 다양한 구조로 적용이 가능하다.https://ant.design/components/layout Ant design 설치npm i antd 제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자. App.jsimport './App.css';import { Layout } from 'antd'; // Ant design의 layout을 가져온다.const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.function App() { return ( Logo content .. 2024. 5. 21. [ Javascript ] Drop Down(드롭다운) 메뉴 만들기 결과물 Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다. codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw dropDown.html 버튼 클릭 시 dp_menu() 함수가 실행된다. Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다. Drop Menu1 Menu2 Menu3 Menu4 dropDown.css body { margin: 10px; padding: 10px; text-align: center; } .dropdown { position: relative; display: inline-block; } .button { padding: 10px .. 2024. 4. 23. [ 프로그래머스 / Javascript ] 추억 점수 https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물.. 2024. 4. 23. [ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25. [ React ] Ant design 설치 방법 Ant design의 장점 여러 가지 기능을 빠르게 만들 수 있다. Customize가 가능하다. 모든 예제에 TypeScript, Javascript 코드가 제공된다. CodePen, CodeSandbox 보기가 제공된다. Animation이 필요한 부분에는 자연스러운 움직임이 적용되어 있다. https://ant.design/components/overview/ Components Overview - Ant Design An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.desig.. 2024. 3. 23. [ React ] VSCode에서 Hello World! 출력해보기 리액트 설치 방법https://codesign.tistory.com/298 [ React ] VSCode에서 리액트 실행하기Visual Studio Code 터미널 열기 1. VSCode를 연다. 2. 맥 기준 VSCode를 연후 상단메뉴에서 '터미널' 선택 후 '새 터미널'을 선택한다. 쇼트컷으로 control + shift + ` 를 누르면 새 터미널이 열린다. 3. 화면하단codesign.tistory.com 리액트를 설치한 뒤 프로젝트 시작하는 방법!리액트를 설치한 뒤 아래와 같은 화면이 떠있다. 리액트를 설치하면 기본으로 생성되는 폴더들은 앞으로 우리가 개발하는데 필요가 없기 때문에 삭제해 준다.아래 폴더들을 선택 후 삭제 한다. 삭제한 뒤 아래와 같이 터미널에 에러가 발생한다. 놀라지 .. 2024. 2. 14. [ Radio Button ] 라디오 버튼 구현 ✨ 결과물 HTML * input 타입을 라디오로 설정해 줌으로써 생성된 버튼 중 하나는 선택이 되어 있다. CSS * { margin: 0; padding: 0; font-family: sans-serif; } body { display: flex; /* 화면 구조 설정 */ align-items: center; justify-content: center; background-color: #ABABAB; /* 화면 뒷 배경 */ height: 100vh; /* 화면 높이 설정 */ gap: 10px; /* 버튼 간격 설정 */ } .radioButton { appearance: none; /* 라디오 모양 보이지 않게 설정 */ display: flex; /* 버튼 구조 설정 */ align-items.. 2024. 1. 31. [ 언리얼엔진5 ] Dark 버튼을 눌러 맗은 하늘에서 흐린하늘로 변하게하는 방법 최종 목표 Dark버튼을 눌러 맗은 하늘에서 흐린하늘로 변하게 하기 1. Content Browser에서 오른쪽 마우스를 클릭해 새로운 블루프린트를 생성해 준다. 2. Actor을 선택해 준다. 3. 새로 생성된 블루프린트의 이름을 BP_Weather로 바꿔준 뒤 BP_Weather을 더블클릭해서 켜준다. 첫 번째는 왼쪽 Components섹션에서 Variables에서 +를 선택해 아래와 같이 세 가지를 만들어준다. 4. Bollean을 선택한 뒤 Sky Atmosphere을 선택한다. 5. 나머지 두 개도 아래와 같이 설정해 준다. 6. Blueprint 화면에서 마우스 오른쪽을 클릭한 뒤, Add Custom Event를 생성한다. 7. Dark로 이름을 바꾼 뒤 Details/Graph/Call I.. 2023. 12. 6. 이전 1 2 3 4 5 6 ··· 46 다음 728x90
