- [ 공부/클론코딩 ]Day 7 - CSS 작업 (完)2024-09-12 19:47:12누이터 스타일링하기버그 수정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":"..
- [ 공부/클론코딩 ]Day 7 - 깃허브 작업2024-09-12 18:14:38코드 정리깃허브로 누이터 호스팅에러발생 ,보안정책 수정하기 1.코드 정리 1)home 정리 Home.js는 여러기능을 포함하고있어서 기능단위로 정리하여 컴포넌트로 나누려한다.하단의 form 부분이 트윗 생성 역할을 하므로 이 부분을 컴포넌트화 하자.컴포넌트 폴더 하위에 NweetFactory.js 생성const NweetFactory = () =>{};export default NweetFactory; Home.jsreturn ( {/* 기존 폼을 컴포넌트화 함 */} {nweets.map((nweet)=>( ))} );기존 폼에서 사용하던 함수들이..
- [ 공부/클론코딩 ]Day 7 - 누이터 서브 기능 만들기2024-09-12 16:33:15내가 쓴 트윗만 보기프로필 페이지 기능 보완프로필 실시간 업데이트 1.내가 쓴 트윗만 보기파이어스토어에서 로그인한 사람의 아이디와 트윗 작성자 아이디가 같은 경우에만 해당 트윗을 화면에 출력한다. 1)파일 정리하기-routes 폴더의 EditProfile.js 삭제-Profile 컴포넌트에는 로그아웃 기능만 있는데 이 기능은 파이어베이스에 모든 연결을 그냥 끊어버리는 방식이었다. 그래서 Profile 컴포넌트에는 다른 데이터가 필요하지 않았었다.하지만 Profile 컴포넌트에 로그인한 사용자의 프로필을 보여주려면 사용자 정보가 필요하다.즉, userObj를 프롭스로 받아와야함. 라우터에서 프로필로 userObj 값을 넘겨주자그리고 Profile.js에서는 전달받은 인자를 userObj로 지정하면된다. R..
- [ 공부/클론코딩 ]Day 5 - 로그인 기능 구현하기 12024-09-09 15:07:19파이어베이스 로그인 준비파이어베이스 로그인 설정 누이터와 파이어베이스 로그인 시스템 연동하기파이어 베이스를 사용 장점?:서버를 집적 구축한 상태면 회원가입,로그인 등의 기능을 직접 만들어야 하지만파이어 베이스를 연동한다면 이 기능을 간단하게 적용할 수 있다.1.파이어베이스 로그인 준비1)useState 함수 위치 이동하기useState함수의 위치를 바꾸고 AppRouter 컴포넌트에 isLoggedIn 프롭스 추가AppRouter 컴포넌트가 라우터 역할을 하면서 코드의 가독성까지 챙기려면 상태는 App 컴포넌트에서 관리하는것이 좋다. App.jsimport { useState } from "react";import AppRouter from "./Router";function App() { const ..
- [ 공부/클론코딩 ]Day 4 - 클론 코딩 시작 22024-09-09 00:03:06라우터 준비하기라우터 적용하기 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..
- [ 공부/클론코딩 ]Day 3 - 클론 코딩 시작2024-09-07 21:24:43파이어베이스 비밀키 숨기기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파일은 깃허브에 업로드 되지 않도록 설정해야함...
- [ 공부/클론코딩 ]Day 2 - 설치 및 준비 22024-09-06 16:11:13비주얼 스튜디오 프로젝트 폴더 설정리액트 설정(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..
- [ 공부 ]안드로이드 폰 - 개발자 모드 활성화2024-07-25 17:11:22이번달 초 6년만에 핸드폰을 교체하면서...이것저것 만져보다 문득 개발자 모드가 생각나서 활성화 해보기로 했다.이전 폰인 노트8 과는 메뉴가 조금 달라서 여러 메뉴를 돌아다니다가 찾게 되었는데 빌드 번호를 연속으로 탭(클릭)하면 활성화 되는건 변함 없었다!갤럭시 울트라s23기준 1.설정 > 휴대전화 정보 > 소프트웨어 정보빌드 번호를 가볍게 톡톡 탭한다.탭할 때마다 개발자 모드가 n단계 남았다고 toast메시지가 팝업된다.한 4,5번 누르면 활성화 되었다고 알려줌. 2.설정으로 다시 돌아오면 휴대전화 정보 밑에 히든이었던 개발자 옵션이 나타난다 3.여러 옵션을 사용 할 수 있다.예전에 화면단 처리를 할 때 레이아웃 범위 표시 옵션을 사용했던 기억이 나서 on해봤더니 ..요렇게 나온다. :) 그 외..
- [ 공부/front-end ]css3 반응형 웹2024-07-11 02:27:31https://www.nextree.co.kr/p8622/ CSS : 반응형 웹(Responsive Web)태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제www.nextree.co.kr 쉽게 말해서 현재 사이트를 보고 있는 기기에 따라 최적의 화면을 제공한다는 것이다.사람이 늘 pc로만 웹사이트를 보는게 아니다. pc도 해상도가 다 다르고, 태블릿, 모바일로도 웹사이트를 많이 보기 때문에반응형웹에 대한 관심이 생겼다.내가 만든 개인홈페이지나 포트폴리오를 모바일에서 보면 당연히 레이아웃이 원하는 대로 출력되지 않는다.pc - 크롬 웹 기준으로 제작했기 때문이다. ..
- [ 공부/front-end ]html5 드래그 앤 드롭 기능2024-07-11 02:14:11https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는inpa.tistory.com 학원 수료 시절 다른 팀의 파이널 프로젝트를 테스트해봤는데 드래그앤 드롭 기능이 있었다..박스안에 일정목록이 쌓여있는데 원하는 일정을 다른 공간에 드래그하고 드롭할 수 있도록 만들었다.웹사이트를 보면 사..