분류 전체보기 753

[TIL] 210707 리액트 인스타그램 클론코딩(?)하려고 노력..

https://www.notion.so/563290d0c2fb4c15b255989e077d882e 오늘의 TIL 심화반 순한맛 프로젝트 새로 만들어보기 - 컴포넌트 별로 나눠서 뷰를 설계하기 - 로그인, 회원가입 구현 - 로그인 유지하기 - 게시물 작성하기 (텍스트) - 게시물 작성하고 메인에서 불러오기 오늘 영상을 봤다. https://youtu.be/hehPTOmn6vE 이 영상에서는 사람들이 집중력이 보통 20-30분이라고 한다. 그런데 그 집중력이 잘되는 시간을 초과해서 무작정 오래 앉아있는다고 해서 공부가 잘되는 것이 아니라고 한다. 오히려 집중력이 점점 떨어져서 0으로 수렴한다. 그런데 중간에 5분정도 휴식을 취한다면?! 계속계속 집중력을 100%로 유지할 수 있다. 집중이 안되지만 계속 앉아..

TIL 2021.07.07

[TIL] 210706 리액트 심화반 강의 , 배포 , 새로운 프로젝트

WEEK1 ** 컴포넌트 쪼개서 뷰 만들기 완전 이해! WEEK5 프로젝트 배포하기 (파이어베이스) SEO란? Pre-rendering react-snap Meta tag 성능 지표 보기 React.memo()로 렌더링 횟수 줄이기 리액트를 배운지 2주차. 익숙하지 않고 아직 배운지 오래 되지도 않았는데 완벽하게 이해못하는 건 당연한거지! 라는 말이 맞겠지만 계속 조급해진다. 어디서나 나는 뭔가를 잘하는 사람이었고 빠르게 하는 사람이었다. 같이 시작한 사람과 비교했을때 비교적 빨리 이해하는 편이었다. 어제 사람들과 이야기하다가 자기를 똑똑한 사람, 잘하는 사람 이렇게 고정된 존재로 인식하면 그것이 깨졌을때 쉽게 좌절을 한다고 들었다. 사실 그게 바로 나다. 나는 어디서나 잘하기 위해서 그렇지 않은 사람보..

TIL 2021.07.07

[REACT] React로 캘린더 만들기 (2) - month이동하기, 요일써주기

1. Header에서 달을 이동시키자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import React from "react"; import { Header, Calendar } from '../components'; import moment from "moment"; import styled from "styled-components"; function FullCalendar() { const [calendarYM , setCalendarYM] = React.useState(moment()); const [today , setToday] = React.u..

WEB/REACT 2021.07.05

[REACT] React로 캘린더 만들기 (1) - Header에서 현재 날짜와 달을 표시하기

이런 캘린더를 한번 만들어보자! 1. 프로젝트 생성 yarn create react-app calendar 프로젝트를 생성한다. 2. styled-components , moment 설치 yarn add styled-components yarn add moment 3. 폴더구조 일단 이렇게 만들어줬다. pages -> 한 페이지 components -> 중간 단위의 컴포넌트 elements -> 최소 단위 컴포넌트 4. 최소단위 컴포넌트 일단 text 컴포넌트와 버튼 컴포넌트를 만들어보겠다. Text 컴포넌트 elements/Text.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 import Re..

WEB/REACT 2021.07.05

[WIL] 항해 99 4주차 회고록 (21.06.28~ 21.07.04) 리액트 심화 시작!

1. 수면패턴이 망가졌다. 완전 아침형 인간이었던 나는 4시30분 5시 30분에 기상을 했었는데 이제는 4시에 자고 11시에 일어나는 패턴이 들어버렸다. 이 패턴을 다시 되돌리고 싶어서 일찍 자려고 하면 머릿속에서 이 그림처럼 내가 나를 계속 깨운다. 2. 심화수업 리액트 심화수업은 너무나 너무나 어렵다. 시간을 많이 많이 들이는게 답이다! 지금은 어려울 지라도 나중에는 쉬울 것이라고 믿는다!!!!!!! 3. 체력관리 산책을 종종 나갔다. 그런데 강의 들어야한다는 생각때문에 멀리 나가지 못하고 다시 돌아오게 된다 ㅠㅠ 마음이 컴퓨터 앞을 떠나지 못한다. ㅠㅠ

TIL 2021.07.05

[TIL] 210704 리액트 심화반 수업 week3, week4

내가 편하게 써왔던 페이지와 앱들이 얼마나 잘만든 것이었냐를 알게된다... WEEK3 게시글 수정하기 WEEK4 무한 스크롤 동작 원리 무한 스크롤 만들기 스크롤 계산하기 Spinner 붙이기 상세페이지 연결하기 댓글작성하기 댓글 가져오기 엔터키로 댓글 추가하기 댓글 작성하면 알림 뱃지 울리기 알림페이지에서 알림확인하기 엔터했을때 로그인되게 하기 오늘의 나는 이 내용이 너무너무 어려웠고 60퍼센트만 이해된다고 생각했다. 일주일 후의 나는 완전히 이해하는 내가 되길!

TIL 2021.07.04

[TIL] 210703 리액트 심화 수업 WEEK2, WEEK3

WEEK2 로그인 하기 -리덕스와 컴포넌트 연결 Firebase Authentication 회원가입 구현하기 로그인 구현하기 로그인 유지하기 로그아웃 구현하기 로그인 시에만 보이는 글쓰기 버튼 포스트 작성 페이지 만들기 포스트 상세 페이지 만들기 이메일 형식 체크하기 WEEK3 포스트 목록 가져오기 파이어스토어 연동하기 포스트 작성하기(로그인 후에만 접근) firebase Storage(이미지 업로드) 리덕스에 image 모듈 만들고 연결하기 Preview 만들기 게시글 작성할 때 이미지를 업로드 Debounce와 Throttle lodash로 이벤트 관리하기 알림 페이지 만들기

TIL 2021.07.04