spa10 [TIL] 내일배움캠프 React 과정 2023.01.31_Next.js Today I Learned Next.js 기초 강의 수강 Throttling and Debouncing 강의 수강 Next.js Next.js란? Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해 주는 리액트 프레임워크 개발 환경 설정이 쉽고 간단하다. SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다. 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다. Next.js 프로젝트 시작하기 npx create-next-app 개발 모드와 프로덕션 모드 // package.json ... "scripts": { "dev": "next dev", "build": "next build", "sta.. 2023. 1. 31. [TIL] 내일배움캠프 React 과정 2022.11.27 오늘 수정한 부분 메인 페이지 최신순 정렬 게시물 수정, 삭제 기능 구현 내가 작성한 글에만 수정, 삭제 버튼이 보이도록 설정하기 프로필 페이지에 내가 작성한 글만 불러오기 + css 작업 회원가입 후 프로필 이미지를 업로드하지 않고 게시물을 올렸을 때 프로필 이미지가 null로 뜨던 문제 해결 로그인하지 않으면 메인 페이지에 데이터가 불러오지 않던 문제 해결 게시물 수정 페이지에서 이미지를 새로 업로드하면 페이지 안에서 기존 이미지를 새로운 이미지로 교체하기 수정 페이지 css 작업 메인 페이지 css 작업 해결하는 경험 프로필 이미지가 null로 뜨는 문제 회원가입 후 프로필 이미지를 업로드하지 않으면 DB에 저장된 프로필 이미지 URL이 null로 떠서 게시물 상세 페이지에서 프로필 이미지를 불러오.. 2022. 11. 28. [TIL] 내일배움캠프 React 과정 2022.11.26 주말 동안 해결해야 할 부분을 정리해 봤다. 소셜 회원가입 기능이 정상적으로 작동하는지 확인하기 회원가입 시 입력한 닉네임이 user DB에 저장되게 연결하기 로그인하지 않았을 때 글 쓰기, 프로필 페이지 등 접근 차단 메인 컬러 정하기 메인 페이지 스크롤 어떤 방식으로 구현할 것인지 (더보기/페이지네이션 등) alert CSS 통일하기 AW3 도메인 연결하기 프로필 페이지에서 내가 작성한 글만 불러오기 카테고리 별로 네비게이션 바? 이미지 파일 업로드하지 않으면 글 작성 못하도록? 게시물 수정 페이지에서 input 창에 데이터 카테고리, 제목, 내용 불러오기 해결하는 경험 github으로 협업하기 원래는 팀원들마다 개인 브랜치를 만들어서 각자 담당한 페이지 작업을 하고 있었는데 중간에 모든 페이지를 연.. 2022. 11. 28. [TIL] 내일배움캠프 React 과정 2022.11.25 Today I Learned 헤더에 프로필 이미지 뜨도록 수정, 함수 기능 추가 CRUD 중 Read, Delete 공부하기 팀원들이 개별 작업한 모든 페이지 모아서 merge하기 해결하는 경험 프로필 이미지 저장 경로 수정하기 const imgRef = ref(storageService, `${authService.currentUser.uid}/${uuidv4()}`) 프로필 이미지를 업로드할 때 원래는 내 계정의 uid 폴더 안에 uuid 형식으로 이미지가 저장되는 방식이었다. 그런데 이렇게 되면 storage에 계정마다 폴더가 무한으로 생성되고 게시물 작성 시 업로드한 이미지와도 구분되지 않을 거 같아서 폴더명을 보기 좋게 수정하기로 했다. const imgRef = ref(storageServic.. 2022. 11. 25. [TIL] 내일배움캠프 React 과정 2022.11.22 Today I Learned firebase에 저장된 프로필 정보 가져오기 닉네임 변경 시 새로고침 없이 변경된 닉네임 보여주기 프로필 변경 javascript 함수 분리 닉네임 수정 버튼에 토글 기능 구현 해결하는 경험 firebase에서 user email 정보 가져오기 마이페이지에 가입할 때 firebase에 저장된 이메일 주소를 불러오고 싶었다. 프로필 이미지와 닉네임을 불러올 때 사용했던 코드를 그대로 사용하면 될 거 같아서 일단 console.log로 이메일 정보가 어디에 저장되어 있는지 확인했다. document.getElementById("profileEmail").textContent = authService.currentUser.email ?? "이메일 없음"; email이 담긴 위치를.. 2022. 11. 22. [TIL] 내일배움캠프 React 과정 2022.11.21 Today I Learned 마이페이지에서 프로필 이미지와 닉네임 변경하는 기능 구현하기 해결하는 경험 에러를 해결하는 방법 SPA가 정상적으로 작동되다가 main.js에 loginpage.js를 import 하기만 하면 헤더 아래 부분이 나타나지 않는 문제가 발생했다. import { handleAuth, onToggle, logout, socialLogin } from "./pages/loginpage.js"; 혼자서 해결하기 어려워서 튜터님께 질문을 드렸는데 크롬 console창을 확인하는 방법으로 문제를 해결할 수 있었다! console 창을 확인해 보면 'logout'이 export 되지 않고 있다는 에러 메세지가 뜨는데 이것을 해결하기 위해서 main.js import 부분에서 사용하지 않는 .. 2022. 11. 21. [WIL] 내일배움캠프 셋째 주_SPA와 Firebase 금요일부터 새로운 팀 프로젝트가 시작됐다. 이번 프로젝트의 목표는 뉴스피드 사이트를 구현하는 것. 우리 팀은 다양한 아이디어를 두고 고민하다가 오늘 먹은 음식을 게시물로 올려서 자랑하는 사이트를 만들기로 했다. 나는 마이페이지와 AW3를 이용한 배포를 맡았다. 일단 프로젝트 첫날에는 마이페이지의 기본적인 틀을 잡았고 주말에는 SPA와 Firebase 특강을 다시 들으며 프로젝트를 준비했다. Firebse를 이용하지 않은 SPA 구조는 그렇게 어렵지 않았는데 Firebase까지 연결해서 SPA를 구현하려니 어렵다. 이제 이번 주에는 마이페이지의 디자인을 조금 더 수정하고 Firebase를 연결해서 유저의 닉네임과 이메일 주소를 띄우고 프로필 이미지를 변경할 수 있는 기능을 구현해야 한다. 프로젝트 발표가 .. 2022. 11. 21. [TIL] 내일배움캠프 React 과정 2022.11.20 Today I Learned FIREBASE 특강 다시 보기 BEM 문법에 따른 전체적인 마이페이지 코드 수정 github에서 폴더 삭제하기 로컬 저장소와 원격 저장소 모두에서 삭제하는 방법 git rm -rf ex) git rm -rf TEST 그리고 커밋과 푸시까지 하면 된다. git commit -m "delete folder" git push origin main Firebase 공부하기 input이 버튼 모양이 된다. 이벤트 리스너 이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 이벤트 리스너를 이용하면 특정 DOM에 위에 말한 Javascirpt 이벤트가 발생할 때 특정 함수를 호출한다. 이벤트 리스너 등록하기 특정 DOM요소에 이.. 2022. 11. 20. [TIL] 내일배움캠프 React 과정 2022.11.19 Today I Learned CSS BEM 표기법 Javascript로 하는 SPA 공부 CSS BEM(Block Element Modifier) 표기법 기본 구조 .header__navigation--navi-text { color: red; } 이름을 연결할 때는 block-name과 같이 하이픈 하나만 써서 연결한다. BLOCK 블록. block 재사용 가능하며 기능적으로 독립적인 페이지 컴포넌트. 한 페이지 안에 구현되는 요소들을 영역으로 구분 짓고 이에 따른 이름을 붙인다. 블록은 블록을 감쌀 수 있다. ex) header, container, menu, input, button Example ELEMENT 요소 .block__element 엘리먼트는 블럭을 구성하는 단위이다. 블록은 독립적인 .. 2022. 11. 19. [TIL] 내일배움캠프 React 과정 2022.11.16_SPA, DB 특강 JS로 하는 SPA 정리 SPA와 MPA의 차이점 SPA MPA 개념 Single Page Application 한 개의 페이지로 구성됨 Multiple Page Application 여러 개의 페이지로 구성됨 렌더링 방법 Client Side Rendering 최초 한 번만 전체 리소스를 다운받음 Server Side Rendering 매번 전체 페이지가 렌더링됨 장점 1. 필요한 리소스만 부분적으로 로딩함 2. 자연스러운 페이지 이동이 가능함 (깜빡임X) 3. 컴포넌트별 개발이 용이함 1. 검색엔진최적화(SEO)가 유리함 (검색엔진이 크롤링하기 좋음) 2. 첫 로딩이 짧음 단점 1. 초기 로딩 속도가 느림 2. 검색엔진최적화(SEO)가 어려움 3. 보안 이슈 (핵심 비즈니스 로직 최소화 필요) 1. .. 2022. 11. 17. 이전 1 다음
