WEB Dev(161)
-
[매일코딩-프로그래머스] 완주하지 못한 선수 01
드뎌 좀 바쁜 일정이 지나서 아침 짬 코테연습 시작! 문제는 배열 participant (이하 p) 에는 있고 배열 completion (이하 c)에서는 없는 그러니까 p - c 의 차집합을 구하면 된다. 그러나 동명이인이 있을 수 있기 때문에 두 번 뺄 수는 없다. 어쨌든 배열에서 값을 찾아서 제외해야 하기 때문에 우선 find 나 filter 메소드를 써본다. 1. find( ) array.find((el, idx [,array])=>{ }[,thisArg]); find 메소드는 - 배열에서 특정 값을 찾는 콜백함수 필요 - 조건에 맞는 값 중에 첫번째 값을 리턴 - 만족하는 값이 없으면 undefined 리턴 2. filter( ) array.filter((el, idx [,array])=>{ }[..
2021.12.27 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 17
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 내가 하고 싶은 것은 MainNavBar 컴포넌트 안에 버튼을 클릭하면 DrawerMenu가 실행되는 것이다. 따라서 Main > MainNavBar > DrawerMenu가 되어야 하기 때문에 태그의 위치를 그렇게 바꿔준다. Main.js import React from 'react'; import Box from '@mui/material/Box'; import MainNavBar from './MainNavBar'; import Content from './Content'; export default f..
2021.12.26 -
[React] useState 사용하기
리액트는 상태관리가 다 인거 같은데... state 개념은 지금까지 몇 번 반복해도 쉽게 이해가지 않는다. 거기에 props까지 더해지면 갑자기 머리가 팽 돌아버리는 느낌이 든다 (⌐■_■) 코딩애플 강의를 글로 정리한 적이 없어서 글로 정리하면서 참고자료를 만들어본다. State란? *중요한 데이터는 변수말고 리액트 state! 아마 나처럼 아직 변수에도 익숙하지 않은 사람은 state라는 개념을 왜 쓰는지 조차 이해할 수 없을 때가 있다. 그냥 변수인데, 변경되는 변수인 state는 useState라는 hook을 통해 쉽게 조작할 수 있다. 리액트에서 State를 쓰는 가장 큰 이유는 리액트는 state가 변경될 때 그 state가 포함된 HTML을 자동으로 재렌더링한다. var, let, const..
2021.12.26 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 16
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 어제 문제가 있던 부분은 CSS flex와 min-width 적용하고 캘린더를 Explore 컴포넌트 안에 넣어서 해결했다. //Content.js import React from 'react'; import Calendar from './Calendar'; import Explore from './Explore'; import Feed from './Feed'; import Box from '@mui/material/Box'; export default function Content() { return ( ..
2021.12.26 -
[ToyProject-Todomate] 투두메이트 클론 프로젝트 15
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 레이아웃 배치까지는 해야겠지... 싶다. sx props를 사용하기 위해서 (스타일을 적용하려고) 를 로 바꿔준다. import Box from '@mui/material/Box'; 상단에는 Box 패키지를 적용해줘야 한다. 우선 Main은 import React from 'react'; import Content from './Content'; import Box from '@mui/material/Box'; export default function Main() { return ( {/* main ..
2021.12.22 -
[Javascript] 간단한 링크 주소 복사 버튼 만들기
이벤트 등을 할 때 링크 주소 공유 기능을 만들어야 하는 경우가 있는데 스크립트를 길게 쓰지 못하는 경우에 사용하려고 저장한 방법이다. 만약 이미지를 클릭했을 때, 지금 현재 url이 복사되도록 하고 싶다면 아래 함수를 사이에 넣고 을 써주면 해결된다. 만약 특정 url을 복사하게 하려면 아래 함수의 url = "window.location.href" 에 원하는 url을 넣으면 된다. function clip(){ var url = ''; var textarea = document.createElement("textarea"); document.body.appendChild(textarea); url = 'window.location.href'; textarea.value = url; textarea.s..
2021.12.22