그럴만두!

https://ojm1484.tistory.com/84 [TOY] Firebase 비용관리 페이지 만들기 (1/2)남편의 사업으로 인해 비용관리 엑셀을 만들다가 웹으로 만들면 참 편할 것 같은데.. 라는 생각으로 시작근데 같은 데이터를 봐야하는데 DB, 서버없이 어떻게 하지? 결국 만들어도 공유하지 못하ojm1484.tistory.com firebase 연동 방법은 위 게시물 참조 페이지 소개를 해보겠다. 창업비용에 대한 금액관리와, 운영비용에 대한 금액관리를 하는 페이지이다. 여기 입력한 데이터는 firebase db에 저장된다. import { addDoc, // 새로운 문서를 컬렉션에 추가 (Create) collection, // Firestore의 특정 컬렉션을 참조 ..

남편의 사업으로 인해 비용관리 엑셀을 만들다가 웹으로 만들면 참 편할 것 같은데.. 라는 생각으로 시작근데 같은 데이터를 봐야하는데 DB, 서버없이 어떻게 하지? 결국 만들어도 공유하지 못하는거 아닌가? 처음에는 localStorage에 저장하려다가 이러면 데이터에 대한 소스와 서로가 보는 데이터가 달라질 수도 있어서다른방법을 찾아보는데... 근데 이런게 있네!!?!?!?!!Firebase Google이 만든 백엔드 플랫폼.주요 기능:Firestore: 실시간 NoSQL 데이터베이스Authentication: 로그인/회원가입 (Google, 이메일 등)Storage: 이미지, 파일 업로드Hosting: 앱 배포도 가능Functions: 서버리스 백엔드 코드 실행 가능장점:실시간 데이터 동기화 가능 (ex..

친구들과 매년 크리스마스 마니또를 하는데, 종이를 찢어 뽑기를 몇 년째....드디어 개발을 해보았다. 처음 마니또 뽑기를 만들 때,단순하게, 리스트에서 본인을 제외 한 다른 사람 뽑기를 상상하고 코딩을 했는데아니나 다를까. 랜덤 뽑기다 보니 undefined 가 나와 버렸다. 찾아보니 sattoloCycle 이라는 알고리즘이 있다. sattoloCycle 은 모든 항목이 한 번씩만 등장하고, 자기 자신과 짝이 안 되도록 섞는 알고리즘.이걸 쓰면 마니또처럼 “서로 다른 사람을 1:1로 매칭해야 하는 경우”에 완벽하게 들어맞는다.function sattoloCycle(arr: T[]): T[] { const a = arr.slice(); // 원본 배열 복사 for (let i = a.length - ..

프로그래머스 LV.1 문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 입출력 예arr1arr2return[[1,2],[2,3]][[3,4],[5,6]][[4,6],[7,9]][[1],[2]][[3],[4]][[4],[6]] -> 2차원 배열인 것을 확인할 수 있음 1. 뇌정지 한 번 와주고2. 끄적function solution(arr1, arr2) { let result = []; for(let i=0; i -> 내가 푼 풀이는 이렇게다. 사실 풀다가 머리가 안굴러가서 도움을 좀 받았다.. 다 풀고나서 더 좋은 방법을 ..

문제 : 영어 알파벳으로 이루어진 문자열 str이 주어진다. 각 알파벳을 대문자는 소문자로, 소문자는 대문자로 변환해서 출력하는 코드를 작성하세요 정답: result = str.split('').map(ch =>{ if(ch === ch.toUpperCase()){ return ch.toLowerCase(); } else { return ch.toUpperCase(); } }).join(''); console.log(result); split('') → 문자열을 문자 배열로 분해map() → 각 문자의 대소문자를 판별해서 반전join('') → 다시 문자열로 합치기

터미널로 리액트 프로젝트 생성하기 프로젝트 폴더를 만들고 거기서 터미널을 연다. npm create vite@latest  -> Vite 라이브러리 빌드 툴 (소스코드 사이즈 압축 가능, 자바스크립트로 컴파일가능, 빠른 미리보기)열고 위 명령어를 쳐보자 근데 나는 에러가 났다.   SyntaxError? 머지 모듈 문제인가 흠냐뤼,, 고민중하다가버전을 확인해보았다. npm version 을 확인해보니 6. 대 버전이었다.   nvm 도 12 버전이라 22 로 높이니 npm이 22로 알아서 높아졌다. 이후 명령어를 실행하니 설치가 되었다. 이 명령어는 설치를 위함이 아닌 프로젝트 이름과 설정을 위함인데,  아까 과정을 겪고 나면 위 사진 처럼 프로젝트 네임을 적고,  프레임워크를 고르고,  사용할 스크립트..

https://www.npmjs.com npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Javawww.npmjs.com위 주소를 들어간다. 여기는 라이브러리 백화점!쓰고싶은 라이브러리를 찾아서 갖다 쓰면 된다.   설치완료 후 package.json에 들어가보면 추가한 라이브러리의 버전이 d..

간단 모듈 만들어보기먼저 CJS common jsmath.js 파일 만든다.  아래 module.exports로 이 모듈에서 꺼낼 수 있는 키와 값들을 정의 해준다. (키 값이 이름이 같다면 저렇게 하나씩만 적어도 됨) index.js 파일에서는 require기능을 이용하여 해당 기능을 가져온다.  결과 : 객체로 출력된다. 인자를 전달해보자. 결과:   근데 modeData.add 이런식으로 하지 않아도 되고 선언당시 구조분해할당으로  아예 이렇게 해버려도 된다. 결과는 똑같다. 다음은 ESM(ES 모듈 시스템) 이게 훨씬 최신식으로 리액트에 사용된다.  package.json 파일에 "type":"module"을 추가해준다. 이게 ESM을 쓰겠다고 한건데, 이제 이걸 쓰게된 이상 위에 썼던 cjs를..

길을 잃어따 따따ㅏ다따따다다..갑자기 Node.js 를 대충 훑습니다. 예 그 https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.orgLTS 버전으로 다운로드 받습니다. 다음. 터미널을 실행 후 node -v 로 node 가 설치 잘 되었나 확인해봅니다.음.. 짝수버전이면서 20버전 이상이 나와야합니다. 뭔가 잘못되었죠?아마 전 프로젝트영향같습니다. 전 node 버전 리스트가 있죠 하하!흠냐리 아무튼 20 버전은 깔리지 않았군요 다운 받아줍니다.nvm install version lts/iron 생겨났군요 여기서 nvm..

뜬겁새로 돌아온 살찐만두 ㅋㅎ VsCode 를 쓴다면 설치해두면 좋을 플러그인 1. Prettier - 정렬 플러그인2. Material Icon Theme - 파일 아이콘 테마 플러그인  각 플러그인 설정 방법 레츠고Prettier1. VsCode 에 확장팩 Prettier를 설치한다.  2. mac 이라면 cmd + ,  window 라면 ctrl + , 를 누른다.   3. 설정 영역에 진입 후 검색창에 'format on save' 를 검색한다.4. Editor: Format On Save 체크버튼 클릭  결과 효과: 같이 그지같이 썼거나 정렬이 그지같아 졌더라도 파일을 수정을 저장하면 알아서 이뿌게 정렬됨~! Material Icon Theme1. 확장팩 설치 : materail icon the..