전체 글 154

animation 반복과 반복 사이 delay

animation이 1초 동안 진행이 되지만 반복되기 전 4초 정도의 딜레이를 주고 싶다고 가정해보자. 말로는 쉽지만 하려고 하니까 참 생각처럼 되지 않았다. animation-delay라는 속성이 있지만 이 속성은 animation이 처음 시작하기 전 딜레이를 주는 속성으로 내가 원하는 효과에는 도움이 되지 않았다. Solution. animation: shinig 5s infinite; animtion의 during 시간을 5초로 설정한 후 keyframe에서 4초동안 아무 움직임이 없도록 하는 편법을 사용했다. @keyframes shinig { 0% { // 아무 움직임 없음. } 80% { // 내가 원하는 값을 입력 } 100% { // 내가 원하는 값을 입력 } } 내가 너무 허술하게 설명하..

프론트엔드/css 2022.03.11

[Error] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

React-router-dom이 v6.0.2로 업데이트 됨에 따라 문법을 사용할 수 없게 되고 제목처럼 에러가 발생하게 된다. 업데이트 전 코드 const App = () => { return ( ) } 업데이트 후 코드 const App = () => { return ( ) } useHistory 또한 오류가 나는데 useNavigate로 변경해서 사용하면 된다~ 업데이트 전 코드 import { useHistory } from "react-router-dom"; const history = useHistory(); 업데이트 후 코드 import { useNavigate } from "react-router-dom"; const history = useNavigate();

[error] firebase 오류 - firebase import가 안됨

firebase에 프로젝트를 등록하고, 진행중인 React 프로젝트에 등록한 후 npm run start 실행했더니 index.js에서 error가 떴다 검색해봤더니 firebase 버전에 따라 import를 달리 써주더라 firebase 8버전 이하 import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/firestore'; firebase 9버전 이상 import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; package.json 파일에서 확인한 firebase가 9버전이길래 버..

[Programmers] x만큼 간격이 있는 n개의 숫자

Description. 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자 n개를 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. function solution(x, n) { var answer = []; return answer; } Solution. function solution(x, n) { var answer = []; for (let i = 1; i

[Programmers] 직사각형 별찍기

Description. 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. n과 m은 각각 1000 이하의 자연수입니다. process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(''); const a = Number(n[0]), b = Number(n[1]); console.log(a); console.log(b); }); Solution. 입력받은 값을 spilt를 사용하여 return한 후, 변수에 할당한다. split는 아래 링크 참고. https://docs.microsoft.com/ko..

정규 표현식 Regex

정규 표현식은 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴으로 자바스크립트에서 정규 표현식 또한 객체이다. 1. 정규식 만들기 // 정규식 리터럴 const re = /ab+c/; // 생성자 함수 호출 const re = new RegExp("ab+c"); 생성자 함수 사용 시 정규식이 실행 시점에 컴파일된다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에 생성자 함수를 사용하면 된다. 2. 정규식 패턴 작성하기 정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순문자 + 특수문자의 조합으로 구성될 수 있다. 특수문자의 사용에 대해서는 아래의 ..

[Vue.js + Nuxt.js] - 기본 프로젝트 구조

Nuxt.js에 스캐폴딩된 디렉토리 구조를 파악해보자. (기본 템플릿 사용)nuxt├ assets├ components├ layouts├ middleware├ pages├ plugins├ static├ storeassetscss, image, font 나 LESS, SASS, Javascript 같은 컴파일되지 않은 에셋들을 포함한다.componentsVue.js 컴포넌트를 포함하는 디렉토리로 애플리케이션에서 사용될 컴포넌트를 포함한다.해당 경로에 위치된 컴포넌트들은 Nuxt.js의 비동기 데이터 함수인 asyncData 또는 fetch를 사용할 수 없다.layouts애플리케이션 전체에 대한 레이아웃을 포함한다.기본으로 default.vue가 생성되어 있을 것이고 상황에 맞게 layout을 생성할 수 ..

페이지 전환 효과

페이지 전환(이동) 시 Transition effect 주기 - 구조 list 페이지 detail 페이지 2 list 페이지의 메뉴 클릭 시 각각의 detail 페이지로 이동하는데 이때 페이지 전환 시 transition 효과를 주고자 함. 메뉴에는 href로 detail 페이지를 지정해주었다. function isSameAsLocation(uriString) { const uri = new URL(uriString); return ( uri.origin === window.location.origin && uri.pathname === window.location.pathname ); } function pageTransition(ulList) { ulList.forEach((el) => { if (!..

Nuxt.js - 설치하기

특징자동 변환 및 번들링 (웹팩 및 바벨 포함)코드 Hot reloadSSR, SPA, 정적 생성 선택 가능정적 파일 제공 (./static/은 /에 매핑됩니다)nuxt.config.js 파일로 구성 가능사용자 정의 레이아웃 (layouts/ 디렉토리 )미들웨어 제공모든 페이지에 대한 코드 분할중요한 CSS 만로드 (페이지 수준)전 처리기 지원 : SASS, LESS, Stylus 등 요소 관리 (, , 기타)ES2015+ 지원전제조건Node - 최소 v10.13 최신 LTS 버전텍스트 편집기 - VS Code(Vuter 확장) 또는 WebStorm터미널 - VS Code의 통합 터미널 또는 WebStorm 터미널 1-1. Create Project commandnpx create-nuxt-app orn..