분류 전체보기
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 22WEB Dev/ToyProject 2022. 1. 5. 00:10
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘 할 일은 책에 나온대로 Todo를 삭제하는 함수를 추가해본다. 투두메이트에서의 목표 삭제 버튼은 하단에 있고, 클릭하면 작성한 목표가 삭제된다. 요것은 나중의 자리배치의 문제일 것 같아서 우선 후딱 삭제 기능을 구현해본다. MUI의 ListItemSecondaryAction을 이용해서 삭제 버튼을 구현한다. 이 때 삭제 버튼 컴포넌트가 들어갈 곳은 이전에 만든 Goals.js 컴포넌트의 사이가 되겠다. 그리고 InputBase에 id와 name 속성이 있는지 확인한다. 이 id와 name이 삭제하거나 수..
-
[매일코딩-프로그래머스] 문자열 다루기 기본 01, 02WEB Dev/CordingTEST 2022. 1. 4. 10:39
어제 문자열다루기를 분명 풀어서 글을 올린 것 같은데..! 없어졌다! 저장도 안되어있는거 보니 날린듯 ㅠㅠ [문제] 문자열 다루기 기본 문자열의 길이가 4이거나 6이고, 숫자로만 구성되어있는지 확인하는 함수를 구현하면 된다. 주어지는 문자는 1개부터 8개의 글자로 이루어져 있고, 숫자와 문자가 혼합될 수 있다. 길이가 4이거나 6이고, 숫자로만 되어 있는 조건을 만족하면 true를 출력하면 된다. [풀이] 우선 문자열의 길이가 1~8 인지 확인하는 조건문을 준다. 그리고 문자열의 길이가 4개이거나 6개이면 각각의 문자열이 숫자인지만 확인하면 된다. 먼저 문자열의 길이가 1~8개인지 확인하는 조건문은 다음과 같다. 우선 s.length 그러니까 주어지는 문자열 s 의 길이를 변수에 담고 해당 변수를 확인한..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 21WEB Dev/ToyProject 2022. 1. 4. 00:05
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제는 + 모양 버튼을 누르면 리스트가 추가되어야 한다. 이것도 김다정님의 책을 참고해서 일부분 변형해서 구현해보려고 한다. 지금 문제는 원래 todomate의 추가 버튼이 상단 바 오른쪽에 있어서 나도 그렇게 만들어야 한다면, route 별로 BasicNavBar가 다르게 보일 수 있도록 해야하는건지, 아니면 그냥 화면에 구현하고 위치만 상단으로 옮겨놔도 되는지 이다. 고민하다가 일단 버튼을 만들어서 상단에 올려놓고, 나중에 조건문을 쓰던 뭘 하던 해야겠다고 생각... 1. Todo를 추가하는 컴포넌트 만들..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 20WEB Dev/ToyProject 2022. 1. 2. 14:12
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 이제 즐거운 마크업 시간은 가고 진짜 기능들을 구현해놔야 하는 시점이 된 것 같다. 이제 Main의 Feed 부분을 만들어야 하는데, 이 Feed는 Goal(목표)의 하위에 들어가는 todo를 입력하고, 관리하는 부분이라 Goal 페이지 먼저 만들어야 한다는 사실을 깨달았다. 이런 순서도 없이 마구잡이로 만드려고 하니 오히려 내 Todo가 정리가 안되는 느낌이다. 그래서 회피로 가득차는 바람에 어제도 조금 코드를 건드렸지만 기록을 남기지 못해서 오늘 몰아서 기록한다. 우선 주말 계획은 Goals ▶ Feed ..
-
[Javascript] sessionStorage 사용하기 (setItem, getItem)WEB Dev/Javascript | REACT | Node.js 2021. 12. 30. 16:16
업무가 커머스 페이지 유지보수이기 때문에 세션을 활용해서 화면을 구현해야 하는 일이 생각보다 많다. 로그인한 회원의 정보를 가져다 쓰는 일이 많기 때문에 localStorage 보다 sessionStorage를 사용한다. .setItem으로 세션에 넣고, . getItem으로 가져오는건 아는데 활용법을 가끔 까먹어서 메소드 정리 겸 포스팅한다. 로컬 스토리지Local Storage | 세션 스토리지Sesstion Storage 공통점 - 로컬스토리지와 세션스토리지 모두 '웹 스토리지 객체 Web storage object' 이다. - 브라우저에 키 - 값 (Key - Value) 쌍을 저장해서 데이터로 사용할 수 있다. - 저장되는 값은 객체가 아닌 텍스트다. (객체를 주로 저장하는데 이것도 텍스트로 바..
-
[VSCode] VSCode 개별 창 테마 바꾸기WEB Dev 2021. 12. 29. 18:21
EC2 가상머신을 ssh로 받아서 작업하는 VSCode 하나와 카페24 테마를 받아다 작업하는 VSCode 하나를 번갈아가면서 작업하다보니 뭐가 뭔지 헷갈려서 테마 색을 바꾸고 싶었는데, 왼쪽 하단의 톱니바퀴 설정으로 테마를 변경하면 모든 VSCode 창이 바뀌어버린다. 이럴때 설정하는 법은 '작업영역별' 테마 지정으로 해결! 1. VSCode의 설정으로 들어간다. 파일 > 기본 설정 > 설정 혹은 Ctrl + ,(쉼표) 로 설정창으로 이동한다 2. 설정에서 상단에 원하는 작업 영역을 선택한다. 사용자 : 기본 / 원격 : 나의 경우 ssh로 연결한 EC2 / 작업 영역 : 지금 켜 둔 VSCode의 작업 영역 사용자를 선택하면 현재 열려있는 창은 물론 전역 설정을 바꾸는 것이다. 현재 켜 둔 작업 영역..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 19WEB Dev/ToyProject 2021. 12. 28. 23:12
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 오늘의 할 일은 Explore의 달력부분을 만드는 일이다. 달력의 경우 NHN TOAST에서 제공하는 Calendar UI 라이브러리를 사용하기로 하였다. 그래서 TOAST의 공식문서에서 적용방법을 따라해본다. 1. 설치 npm 이나 bower, CDN을 통해 라이브러리를 이용할 수 있다. 리액트 프로젝트이기 때문에 간편한 CDN 보다는 npm을 통해 패키지를 설치하자. npm install --save @toast-ui/react-calendar 2. Calendar 패키지와 CSS를 import 해온다. ..
-
[회고] 2021 회고록일상 2021. 12. 28. 18:42
개발자라는 명찰을 막 달고 처음으로 써보는 회고입니다. 원래 반말을 쓰지만 조금 더 진중하게 써보기 위해 존댓말을 씁니다. 올해만 좀 길지 않을까 싶습니다. 첫 회고록이니까요. - 퇴사 1월까지는 나름대로 문화/예술계에서 일하던 사람이었습니다. 마지막 직장은 제주도에 있었는데요, 며칠 전 폐업 소식을 전달받았습니다. 운이 좋게 별도로 퇴직금을 정산받을 수 있었지만 나머지 직원(이었던 사람)들은 소송을 해도 못 받은 퇴직금을 받을 수 없을거래요. 회사가 파산, 부도, 아무튼 망했습니다. 이 회사는 망한 전적이 있는 회사인데, 메르스에 한 번 망하고, 코로나에 또 한 번 망했습니다. 저를 오래 본 사람들은 제가 얼마나 공연을 좋아하고, 전시를 사랑하는 사람인지, 하지만 큰 물에서는 놀지 못하고 맨날 이 회사..
-
[매일코딩-프로그래머스] 완주하지 못한 선수 02 + Hash란?WEB Dev/CordingTEST 2021. 12. 28. 10:40
출근하면서 생각해봤는데, sort 하고 순서대로 비교하는 것도 답은 아닌 것 같았다. 우선 partcipant에 값이 두 번 이상 나오는지 확인해야 하지 않을까? 아무리 생각해도 뭘 써야하는지 모르겠어서 우선 배열 관련 메소드를 다 확인해본다. 이러면서 공부하는거지 뭐 배열 객체 메소드 - JavaScript 배열 객체 메소드 2019-08-01 18:35:54 배열 객체 메소드 Array 객체가 갖고 있는 메소드들에 대해 알아봅니다. 함수들을 이용하여 배열을 효과적으로 사용할 수 있습니다. 함수의 종류가 많고, 활용 opentutorials.org 그런데 이 문제가 '해시' 카테고리에 있는 문제이기 때문에 '해시'라는 개념을 적용해야 한다는 조언이 있었다. 해시...? 해시가 무엇인지 알아보자 해시 H..
-
[ToyProject-Todomate] 투두메이트 클론 프로젝트 18WEB Dev/ToyProject 2021. 12. 28. 00:15
🔷 CloneTodo ☑ - Todomate Clone Project | Team CloneMate CloneTodo : 많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트 MainNavBar의 Drawer 메뉴를 만들었으니, 이제 Content 부분의 여러 기능들을 해결해봐야겠다. 이번주는 캘린더와..... ..... 투두.... Feed 부분을.... Explore → Feed 순으로 작업하려고 한다. MUI는 진심으로 미쳤다. 이 부분에 쓸 컴포넌트도 이미 만들어져 있다. 바로 Avatar다. 이 Avatar 컴포넌트에서 Letter Avatar 컴포넌트를 사용해본다. 캘린더 상단의 저 부분은 내가 팔로우한 사람의 닉네임의 앞글자가 표시되는 곳이다. Avatar 패키지를 i..