Kenna Kenna

전체 글

• [매일코딩-프로그래머스] 완주하지 못한 선수 01

  WEB Dev/CordingTEST 2021. 12. 27. 11:07

  드뎌 좀 바쁜 일정이 지나서 아침 짬 코테연습 시작! 문제는 배열 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])=>{ }[..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 17

  WEB Dev/ToyProject 2021. 12. 26. 18:39

  🔷 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..

  Read More
• [React] useState 사용하기

  WEB Dev/Javascript | REACT | Node.js 2021. 12. 26. 14:21

  리액트는 상태관리가 다 인거 같은데... state 개념은 지금까지 몇 번 반복해도 쉽게 이해가지 않는다. 거기에 props까지 더해지면 갑자기 머리가 팽 돌아버리는 느낌이 든다 (⌐■_■) 코딩애플 강의를 글로 정리한 적이 없어서 글로 정리하면서 참고자료를 만들어본다. State란? *중요한 데이터는 변수말고 리액트 state! 아마 나처럼 아직 변수에도 익숙하지 않은 사람은 state라는 개념을 왜 쓰는지 조차 이해할 수 없을 때가 있다. 그냥 변수인데, 변경되는 변수인 state는 useState라는 hook을 통해 쉽게 조작할 수 있다. 리액트에서 State를 쓰는 가장 큰 이유는 리액트는 state가 변경될 때 그 state가 포함된 HTML을 자동으로 재렌더링한다. var, let, const..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 16

  WEB Dev/ToyProject 2021. 12. 26. 13:46

  🔷 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 ( ..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 15

  WEB Dev/ToyProject 2021. 12. 22. 23:51

  🔷 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 ..

  Read More
• [Javascript] 간단한 링크 주소 복사 버튼 만들기

  WEB Dev/Javascript | REACT | Node.js 2021. 12. 22. 13:04

  이벤트 등을 할 때 링크 주소 공유 기능을 만들어야 하는 경우가 있는데 스크립트를 길게 쓰지 못하는 경우에 사용하려고 저장한 방법이다. 만약 이미지를 클릭했을 때, 지금 현재 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..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 14

  WEB Dev/ToyProject 2021. 12. 21. 23:50

  🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘은 퇴근 - 회의하고 - 메인페이지에서 사용할 커다란 컴포넌트 덩어리들 만들기 를 해본다. 1. 메인페이지로 사용할 Main.js 파일을 만든다. 이제는 export default를 뒤에 붙이지 않고 함수명 앞에 붙여서 한 덩어리로 보이게끔 하는 법을 배웠다. import React from 'react'; export default function Main () { return ( ); } 2. App.js에서 라우터 설정을 해준다. 3. MainNavBar 옮기기 path="/"에 있던 MainNavB..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 13

  WEB Dev/ToyProject 2021. 12. 19. 22:10

  🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 두 개 뿌심... 오늘의 todo ☑ 가입하기 컴포넌트 ☑ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 3. 메인 NavBar 컴포넌트 메인은 기본보다 조금 더 복잡한데 햄버거 버튼을 클릭하면 Drawer 컴포넌트가 나타나야 한다. 그리고 메인페이지에서는 메인 NavBar가 나타나고 나머지 페이지에서는 아까 만든 BasicNavBar 가 나타나야 한다. - Route 마다 NavBar 적용하기 삼항연산자를 쓸까 했는데, 그냥 R..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 12

  WEB Dev/ToyProject 2021. 12. 19. 19:49

  🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 그럼 계속 진행해보기! 오늘의 todo ☑ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 2. 기본 NavBar 컴포넌트 NavBar를 만들기 위해 새로운 MUI 컴포넌트를 찾아본다! 기본 NavBar는 각 페이지의 제목이 표시되고, 뒤로가기가 있으면 되기 때문에 특별한 기능은 필요없지만 메인 NavBar의 경우 오른쪽에 팝업되는 메뉴가 등장해야 한다. MUI에서 Bottom Navigation이랑 App Bar가..

  Read More
• [ToyProject-Todomate] 투두메이트 클론 프로젝트 11

  WEB Dev/ToyProject 2021. 12. 19. 15:06

  🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 사흘동안 리액트를 만지지 못했다. 회사 일이 많아서 집에 오면 지쳐 쓰러짐 😒 오늘 할 일은 최대한 많은 페이지 구현하기! 마크업과 CSS는 동시에 만지되, CSS는 아주 간단하게 구성만 잡는 것으로 하고 추후 SCSS 를 적용해볼까 한다. MUI가 기본적인 CSS는 잡아주기 때문에 레이아웃만 수정하면 될 것 같은데.. 오늘의 todo □ 가입하기 컴포넌트 □ 기본 NavBar 컴포넌트 □ 메인 NavBar 컴포넌트 □ 메인 Feed 컴포넌트 ➕ 가능하면 깃헙 호스팅으로 배포까지 1. 가입하기 컴포넌트 1) ..

  Read More