누이터 스타일링하기버그 수정1.누이터 스타일링하기css를 중점으로 다루는 프로젝트는 아닌만큼 최대한 간결하고 깔끔하게만 설명한듯 하다.(저자 역시 그렇게 말했다.) 1)package.json  수정스타일적용을 위해 맨 먼저 할 것은 스타일 관련 패키지를 설치 하는 것이다.폰트어썸의 아이콘을 사용 (유료,무료 모두있음) package.json"dependencies": { "@fortawesome/fontawesome-free":"^5.14.0", "@fortawesome/fontawesome-svg-core":"^1.2.30", "@fortawesome/free-brands-svg-icons":"^5.14.0", "@fortawesome/free-regular-svg-icons":"..

코드 정리깃허브로 누이터 호스팅에러발생 ,보안정책 수정하기 1.코드 정리 1)home 정리 Home.js는 여러기능을 포함하고있어서 기능단위로 정리하여 컴포넌트로 나누려한다.하단의 form 부분이 트윗 생성 역할을 하므로 이 부분을 컴포넌트화 하자.컴포넌트 폴더 하위에 NweetFactory.js 생성const NweetFactory = () =>{};export default NweetFactory; Home.jsreturn ( {/* 기존 폼을 컴포넌트화 함 */} {nweets.map((nweet)=>( ))} );기존 폼에서 사용하던 함수들이..

내가 쓴 트윗만 보기프로필 페이지 기능 보완프로필 실시간 업데이트 1.내가 쓴 트윗만 보기파이어스토어에서 로그인한 사람의 아이디와 트윗 작성자 아이디가 같은 경우에만 해당 트윗을 화면에 출력한다. 1)파일 정리하기-routes 폴더의 EditProfile.js 삭제-Profile 컴포넌트에는 로그아웃 기능만 있는데 이 기능은 파이어베이스에 모든 연결을 그냥 끊어버리는 방식이었다. 그래서 Profile 컴포넌트에는 다른 데이터가 필요하지 않았었다.하지만 Profile 컴포넌트에 로그인한 사용자의 프로필을 보여주려면 사용자 정보가 필요하다.즉, userObj를 프롭스로 받아와야함. 라우터에서 프로필로 userObj 값을 넘겨주자그리고 Profile.js에서는 전달받은 인자를 userObj로 지정하면된다. R..

파이어베이스 로그인 준비파이어베이스 로그인 설정 누이터와 파이어베이스 로그인 시스템 연동하기파이어 베이스를 사용 장점?:서버를 집적 구축한 상태면 회원가입,로그인 등의 기능을 직접 만들어야 하지만파이어 베이스를 연동한다면 이 기능을 간단하게 적용할 수 있다.1.파이어베이스 로그인 준비1)useState 함수 위치 이동하기useState함수의 위치를 바꾸고 AppRouter 컴포넌트에 isLoggedIn 프롭스 추가AppRouter 컴포넌트가 라우터 역할을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는것이 좋다. App.jsimport { useState } from "react";import AppRouter from "./Router";function App() { const ..

라우터 준비하기라우터 적용하기 1.라우터 준비하기라우터?my.site.com/amy.site.com/b 와 같은 주소를 입력 시, 어떤 컴포넌트를 보여줄지 결정하는 역할.구글링하면 네트워크 데이터 패킷 위치를 추출하여 전송할 최적의 경로를 지정하는 역할이라 함.즉, 길라잡이라 생각하면 편할 것 같다. 1)누이터 뼈대 만들기페이지는 routes 폴더에(총 4개의 js 파일을 새로 만들어서 넣어둠)페이지를 이루는 구성 요소들은 components폴더로.  2)이동한 파일을 참조하는 파일 수정App.js의 위치를  components 하위로 옮겼으니, App.js를 참조하는 파일들을 수정해야 한다.현재 index.js가 이를 참조하고 있으므로 index.js 수정.import App from './compon..

파이어베이스 비밀키 숨기기1.파이어베이스 비밀키 숨기기day 2에서 작성한 아래의 코드 firebaseConfig에서 보안상의 문제로 키값을 감춰야함.import firebase from "firebase/app"; const firebaseConfig = { ..생략..}; export default firebase.initializeApp(firebaseConfig);  How?.env 파일 생성.env 파일에 비밀키 변수 등록비밀키가 필요할 때 참조하도록 하기.env파일 업로드만 하지 않는다면 노출을 방지할 수 있음 1).env파일로 환경 변수 설정하기.env파일을 package.json 루트에 생성하기 (반드시 점 포함)2).env파일 숨기기.env파일은 깃허브에 업로드 되지 않도록 설정해야함...

비주얼 스튜디오 프로젝트 폴더 설정리액트 설정(create-react-app)깃허브에 초기 프로젝트 업로드파이어 베이스 설정  1.vs 프로젝트 폴더 열기 및 터미널 확인  2.CRA 로 리액트 프로젝트 생성npx create-react-app nwitter설치는 3~5분 소요 설치 완료 후 아래와 같이 설치되었는지 확인. 폴더 열기 - nwitter 선택  - 여기서 작업 진행 예정 3.github 저장소와  nwitter 폴더 연결터미널git remote add origin https://github.com/깃헙아이디/nwitter명령어 입력했는데 아무 반응이 없어 다시 입력했더니 이미 존재한다 알려줌.error: remote origin already exists. 4.기초 파일 수정1)README..