분류 전체보기 62

null 체킹시 유용한 문법(Truthy and Falsy)

이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(person); 만약에 이러한 상황에서, 만약 print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해보겠습니다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(); 이 코드는 다음과 같은 에러를 뱉습니다. TypeError: Cannot read property 'name' of undefined 만약에 print 함수에서 object 가 주어..

개발/javascript 2022.10.02

배열 내장함수 정리

forEach : 각원소들을 반복적으로 호출할 수 있는 함수 const superheros = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지']; superheros.forEach(hero => { console.log(hero); }); map: 각원소들을 다른 형태로 변환해야할 때 사용하는 함수 const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); indexOf: 특정 원소가 어디있는지 알아내는 함수 const superheros = ['아이언맨', '캡틴아메리카', '토르', '닥터스트레인지']; const index ..

개발/javascript 2022.10.02

Firebase v9부터 달라진 사용법 정리

'클론코딩 트위터'로 리액트와 파이어베이스의 감을 익히고 있던 중 이상하리만큼 잦은 오류가 발생했습니다. 알고보니 파이어베이스의 버전이 바뀌면서 사용법들이 교재와 많이 달라졌기 때문이였는데, 버전을 다운그레이드하면 되지만 9버전부터 SDK로 바뀌면서 용량도 작고 효율성이 증가됐다고 하여 그냥 진행하기로 했습니다. 다음은 코딩을 하며 발생한 오류들을 구글링과 공식문서를 통해 수정한 내역들입니다. 첫번째 오류 not found in 'firebase/app’라는 오류 메시지가 출력됐습니다. 검색해본 결과, 파이어베이스 버전이 업그레이드 되면서 import경로가 변경되었습니다. (Firebase/app => firebase/compat/app) 내가 설치한 파이어베이스버젼은 "firebase": "^9.9.4..

개발/Firebase 2022.09.28

Firebase 설정하기

1. Firebase 프로젝트 만들기 파이어베이스 홈페이지 firebase.google.com에 접속합니다. 그다음 를 누르고, 이어서 를 누릅니다. 그러면 프로젝트 이름을 지정할 수 있는 화면이 나옵니다. 프로젝트이름은 리액트 프로젝트 이름과 동일하게 지어줍니다. '약관에 동의합니다'에 체크한 후 을 눌러줍니다. 다음으로 나온 화면에서 Google애널리틱스 사용설정을 정할 수 있습니다. 사용할 경우 사용국가와 인증절차 후 프로젝트를 만들 수 있습니다. '새 프로젝트가 준비되었습니다' 문구가 나오면 프로젝트가 잘 만들어진 것입니다. 버튼을 눌러 다음으로 진행합니다. 2. Firebase에 웹 애플리케이션 등록하기 이미지에 보이는 모양의 버튼을 눌러 웹어플리케이션을 등록합니다. (버튼 종류에서 보득 ios..

개발/Firebase 2022.09.28

GitHub와 프로젝트 연동하기

React로 개발한 프로젝트를 GitHub에 연동하여 관리해보려합니다. 1. GitHub에 저장소 만들기 우선, github.com에 로그인하여 왼쪽 상단에 있는 버튼을 누릅니다. 저장소에 필요한 항목을 입력합니다. Repository name에는 프로젝트명을 입력하고, Description에는 프로젝트의 간단한 설명을 입력합니다. 주의해야할 사항은 'Public' 'Private' 설정인데, 여기서 Private설정을 하지 않도록 주의합니다. (Private으로 설정하면 올린 프로젝트를 배포할 수 없습니다.) 마지막으로 버튼을 클릭합니다. 2. GitHub 저장소와 프로젝트 연동하기 GitHub저장소와 프로젝트 폴더를 연결하기 위해 다음과 같은 명령어를 터미널에 입력합니다. 본인같은 경우엔 git re..

개발/Git 2022.09.28

create-react-app으로 손쉽게 프로젝트 만드는 방법

Create React App React로 개발 프로젝트를 시작하려면 웹팩, 바벨 등 배워야하는 기술들이 많습니다. 초보개발자들이 React를 시작하기전 벽에 부딪혀 개발을 포기하는 경우를 막기위해 create-react-app이라는 도구가 존재하는데, 이는 React를 만든 페이스북에서 제공하는 CLI도구로써 React의 세부설정이 필요하지 않은 프로젝트를 진행할때 아주 유용합니다. 프로젝트 생성 create-react-app은 Node.js가 설치된 컴퓨터에서 npx커맨드를 이용해서 부담없이 사용할 수 있습니다. (node.js, npx설치방법 : https://r-o-p.tistory.com/16) 비주얼스튜디오코드에서 프로젝트들을 담는 폴더열기 터미널 > 새터미널을 눌러 터미널을 열기 이때 터미널..

개발/React 2022.09.27

Firebase란 무엇인가?

1. 파이어베이스란? 파이어베이스는 2011년 파이어베이스사가 개발하고 2014년 구글에 인수된 모바일 및 웹어플리케이션 개발 플랫폼이며, 구글 애널리틱스와 구글 패브릭에서 제공하는 기능들을 포함한 다양한 기능들을 제공합니다. 한마디로 운영체제에 상관없이 앱을 만들수 있도록 해주는 개발Tool이라고 할 수 있습니다. 구글 드라이브와 애널리틱스를 적용해 어떤 기기에서나 개발할 수 있는 환경을 만들어주고, 방문자수 및 이용횟수, 광고효과, 문제발생 빈도 등을 분석해 개발자들이 쉽게 활용할 수 있도록 지원합니다. 이렇듯 파이어베이스는 앱개발 기간을 단축시켜주고, 개발 난이도를 낮춤으로써 효율적인 개발을 할 수 있도록 도와줍니다. 2. 파이어베이스 개발 기능 파이어베이스의 개발기능은 크게 인증 / 실시간데이터베..

개발/Firebase 2022.09.25

Git의 기본 명령어 정리

#현재 directory 의 모든 파일을 Staging Area 로 이동 git add . # file 들의 tracking 상태 보기 git status # Staging 의 파일들 commit 하기 git commit -m "messsage" # 저장소에 commit 반영하기 git push git push origin master # 저장소에서 commit 가지고 오기 git pull # remote origin의 development branch merge git merge origin/development # 한 줄로 그래프 형태로 commit 히스토리 보기 git log --oneline --graph # remote에서 삭제된 brach를 local 에서도 깔끔하게 삭제 git fetch -..

개발/Git 2022.09.25

Mac에서 Git설치하기

Git은 Github와 같은 저장소 서비스에 코드를 올리거나 내리는 저장소 관리 도구를 말합니다. Homebrew 설치 1. https://git-scm.com/ 링크를 클릭하여 깃홈페이지에 들어갑니다. 2. Download for Mac 클릭합니다. 3. homebrew 클릭합니다. 4. 설치명령어 복사합니다. 5. command + space 로 Spotlight창을 열고 터미널을 검색해서 터미널을 실행합니다. 6. 터미널에 명령어 붙여넣기해줍니다. 패스워드를 입력하라는 창이 뜨고 맥 로그인 비밀번호를 입력하면 설치가 시작됩니다. Git 설치 1. 터미널에 brew install git 명령어 입력하여 설치합니다. 2. 터미널에 git --version 명령어를 입력하여 버전이 잘 출력되는지 확인합니다.

개발/Git 2022.09.25

node.js, npm, npx 설치하기

React로 코딩을 하기위해서는 첫번째로 개발에 필요한 도구를 설치해야합니다. 우선 설치해볼 것은 node.js입니다. node.js란 브라우저 외의 환경에서 자바스크립트를 실행할 수 있게 해주는 도구입니다. 원래 자바스크립트는 웹브라우저에서만 사용할 수 있는 언어였지만 node.js 덕분에 브라우저가 아닌 곳에서도 자바스크립트를 사용할 수 있게되었습니다. 1. node.js 설치하기 혹시라도 node.js가 이미 설치되어 있을 수도 있으니 node.js 버전을 확인합니다. macOS를 사용한다면, 터미널을 열고 node -v를 입력합니다. 설치가 되어있을 경우엔 버전번호가 출력되고, 설치가 되어있지 않을경우엔 '명령어가 동작하지 않는다'는 오류메시지가 출력됩니다. 오류가 출력됐다면 node.js 공식홈..

개발/React 2022.09.15