728x90 코딩40 kyuwitter 클론코딩 (2) .env생성 지난시간 만든 firebase.js의 Config의 키 값들을 .env파일안에 넣고 값은 process.env.~로 대체 깃허브 같은 오픈소 사이트에 올리게 될 경우 적나라하게 볼 수 있기에 .env파일을 사용 애플리케이션 실행 시 .env에 포함된 값들이 내가 사용하려는 파일(나의 경우 firebase.js Config의 값들로 넘어감. 브라우저상에선 내 키값들이 전부 적용되어 실행되기에 완전 보안이라고는 볼 수 없음 내 firebase Config의 value가 있음 깃허브 업로드 시 env파일은 볼 수 없음 (환경변수파일) 2023. 2. 26. kyuwitter 클론코딩 (1) firebase setup - firebase 셋업(web으로 프로젝트 사용) 강의버전에 맞추기 위해 react router dom 5.3.0사용, firebase 9.6.1 사용 불필요한 파일들 ~.css ~test.js등 삭제 firebase.js파일 생성 후 기본설정 + index.js에서 import Memo - git remote add origin 주소 : 새 리모트 주소 추가 - git status : 현재 상태 확인(뭐가 수정되었고 추가 되었는지) -git commit -m "메세지" : 커밋 생성 -git push orgin master : 변경사항 원격 업로드 2023. 2. 26. Js문제 오답노트 반장뽑기(reduce(), 배열값 중복 계산) 여느 때와 같이 문제 푸려던 중 고민 고민해도 어떻게 해야 할지 감이 안 오는 문제가 있었다. 일단 prompt로 입력을 받을테니 "원범 원범 혜원 혜원 혜원 유진 유진" 이런 식으로 긴 문자열이 될 것이고, 그다음은 split(" ")으로 공백 단위로 쪼개 이름 한 개씩 갖는 문자열 배열을 만들었다. (이름 수를 세고 누가 많은지 계산하기 위해) 배열 중복 값 개수 구하기 검색하니 공통적으로 reduce가 검색되었다. reduce( ) arr.reduce(callback[, initialValue]) reduce는 배열의 각 요소에 대하여 주어진 reducer함수를 실행하고, 하나의 결과값을 반환한다. 여기서 이 reduce함수는 4개의 인자를 가진다. 누산기 (acc) : 콜백의 반환값을 누적함 현재.. 2022. 8. 10. 깃허브 여러 파일 업로드 매번 깃허브 파일 여러 개 한 번에 올리는 법을 까먹어서 검색하곤 한다. 한번 정리하면서 제대로 기억하고 + 나중에 잊더라도 내가 쓴 글 보면서 반성하자. step 1. 깃허브 레포지토리 생성(되어있다면 생략) step 2. 레포지토리 주소 기억 + 업로드하려는 파일에서 git bash 실행 step 3. 파일 세팅 + 업로드 git init (git 파일 생성) git add . (우클릭 한 파일 안의 모든 파일 관리 add 띄우고 .인거 잘 작성하자) git status (내가 하려는 파일들이 맞는지 확인) git commit -m "커밋 내용" git remote add origin 위에서 기억한 주소 git push -u origin master (끝) step 4. 업로드된 거 보고 뿌듯해하기 2022. 8. 9. JS문제풀이 (로꾸거배열) + (&, |, 연산자 단축평가) 에이 티 티 이 엔 티 아이 온 유 갓 미 룩킹 포 어텐션~ string을 배열로 바꿔 순서를 거꾸로 바꿔 출력하면 된다. string을 배열로 바꾸는 방법엔 여러 가지가 있다. 1. Spread Operator const str = 'attention'; const arr = [...str]; //빈 array에 attention요소 추가 console.log(arr); // output =>['a''t''t''e''n''t''i''o''n'] 2. Array.from() const str = 'attention'; const arr = Array.from(str); //문자열을 변환해 배열 생성 console.log(arr); //output => ['a', 't', 't', 'e', 'n', 't'.. 2022. 8. 8. 별 탑 쌓기 문제해결 모든 프로그래밍 언어의 반복문 단골 예제 별 탑 쌓기! 순조롭게 진행하던 와중 문제에 봉착했다. const n = prompt("숫자를 입력하세요."); for (var p = 1; p < n+1 ; p++) { const blank = []; const star = []; for (var i = p; i < n; i++) { blank.push(" "); }; for (var j = 1; j 2022. 8. 7. Js복습 pt.6 NPM 티스토리를 정리할 때면 종종 노래를 들으며 정리하곤 한다. 기억을 되짚으며 하기에 가사 있는 노래는 피한다. 그래서 ASMR이나 연주곡을 듣곤하는데 요즘엔 쳇 베이커의 재즈에 빠졌다. 공부하며 들을 새로운 노래를 찾는 중이라면 맛보자. https://youtu.be/keU3J0HHQ4s NPM (Node Package Manager) 나에게 npm은 익숙한 친구이다. 다만, 친하지는 않은 안면이 있는 친구와도 같다. 강의를 듣고 실습을 진행하거나, 무언가 기능일 필요해서 추가할 때면 터미널 창에 항상 npm~ 이런 식으로 사용해 왔었다. npm은 풀네임에서 알 수 있듯이 노드 패키지들을 관리하는 기능을 한다. 좀 더 와닿게 말하면 개발 시 필요한 다양한 모듈들을 다운로드할 수 있게 해주는 도구이다. np.. 2022. 8. 4. Js복습 pt.5 module system 자바스크립트와 리액트를 사용하면서 무심코 사용했던 import와 export 뭐 대충 파일 내보내고 가져오는 의미아닌가? 얼추 맞았다. 하지만, module에 대한 정확한 이해와 기존의 script를 통해 파일을 주고받는 것과 무슨차이가 있는지 보도록 하자. 1. 모듈, 모듈시스템 애플리케이션의 기능들을 추가하다보면 당연히 규모 확장이 될 것이다. 이 경우 한 개의 파일로 통솔하기엔 어려움이 많다.파일을 여러개로 분리하게되는데 이때 이 분리된 파일을 모듈이라고한다.추가로, 이렇게 분리된 파일들을 불러올 수 있게끔 하는 것이 모듈 시스템이다. 자바스크립트 상에선 script태그를 통해 파일을 주고 받는데 이경우 전역스코프를 공유한다는 문제가 발생한다. 예시로, a.js, b.js모두 number라는 변수에.. 2022. 8. 1. (부록)스터디 윗 미 4월 동안 열심히 들은 바닐라 js 정리 내용 + 실습 후 결과물 당시에는 티스토리 안 해서 메모장에 적어놓았는데 더 가독성 좋게 정리 + 한 곳에 내 행보 정리함으로써 통일화하는 김에 업로드한다. (결과물 미리보기) - 노트북으로 들어가길 반응형 작업 1도 안 해서 이리 깨지고 저리 깨질 확률 99% https://minkyu0424.github.io/studyWithMe/ StudyWithMe minkyu0424.github.io 1. variables console을 통해 숫자 또는 문자를 입력받거나 출력하게 된다면, 일일이 숫자를 작성하고 수정해야 한다. 너무 많은 시간과 에너지를 소모하게 된다. 따라서 변수 사용 a+b한 후 매번 a와 b값을 변경하도록 한다. ex) const a=1; / co.. 2022. 7. 31. 이전 1 2 3 4 5 다음 728x90
