에이미의 성장기록

링크 React App mydict-ce0dd.firebaseapp.com 구현 목적 모르는 단어 적어놓고 보여주려고 만들었으나, 배포 후 친구들의 장난으로 친구들 이름이 들어가게 되었습니다^^; 구현한 기능 1) 게시물 목록 화면에 그리기(뷰 만들기) 2) 게시글 목록 리덕스에서 관리 3) 게시글 목록 파이어스토어에서 가져오기 4) 게시글 로드,추가,수정,삭제 구현 5) 무한 스크롤 붙이기

1) 프로젝트 만들때 yarn create-react-app 폴더명 2) 프로젝트 들어갈때 cd 폴더명 //나올때 cd .. 3) 리덕스 설치하기 //이건 리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 히스토리, 라우터와 히스토리를 엮어줄 모듈까지 한번에 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 //불변성관리를 위한 immer 설치 yarn add immer redux-actions 4) 파이어베이스 설치 yarn add firebase 5) material UI 설치 yarn add @material-ui/core @material-ui/icons 6) loadsh ..

템플릿 리터럴 : 자바스크립트 ES6에서 새로 도입한 문자열 표기법. '' "" 로 표기하지 않고 백틱을 사용해 표현하는 방식 - 백틱(``)사용 - var/let/const로 정의한 값을 ${} 로 불러올 수 있음 let name = "amy"; //기존방법 let name = "Hello" + name ; //템플릿 리터럴 let name2 = "Hello `${name}`; - styled-component에서 사용

- 리액트 훅이란? life-cycle, state관리를 해주고 클래스형 컴포넌트의 기능을 사용할 수 있는 함수형 컴포넌트 -useState state(상탯값) 관리 가능 import React, {useState} from 'react'; const [name, setName] = useState(''); 배열에 두 값을 넣는다. 첫번째 원소는 상탯값 = state 두번째 원소는 상태값을 변경할 수 있는 함수 - useEffect 함수형 컴포넌트에서 life-cycle함수를 사용할 수 있게 해준다. 예시출처 import {useEffect} from 'react'; unction MyComponent() { const [count, setCount ] = useState(0); useEffect( ()..

1) 서버리스란? 서버를 신경쓸 필요가 없는 것. 누군가 구축해둔 서버의 일부분을 빌려서 쓰는 것(서버가 없다는 뜻이 아님!) 2) Firebase는? 흔히 백엔드 하면 떠올리는것을 빌려온다! 데이터베이스,소셜서비스연동/파일시스템 등을 API형태로 제공해주는 곳 3) Firestore는? realtime-database 제공하는 서비스, 실시간으로 데이터가 추가되고, 삭제되는것을 우리 클라이언트에게 알려준다. 리액트와는 react-firebase라는 패키지를 통해 연결할 수 있다. 4) 리액트에 파이어베이스 패키지 설치 yarn add firebase 5) src 폴더 아래에 firebase.js 파일 생성 파이어스토어에서 발급받은 SDK영역을 붙여넣어준다. import firebase from "fir..

1) 리덕스 개념과 용어 리덕스: 데이터 한군데 몰아넣고 여기저기에서 꺼내볼 수 있게 해줌! 전역에 저장한 데이터 모음들을 아무데서나 참조할 수 있다. - State: 리덕스에서 저장하고 있는 상태값=데이터, 딕셔너리 형태임 ({[key]: value}) - Action: 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할때) 발생하는 것. 액션은 객체, type은 이름 - ActionCreattor: 액션생성함수, 액션을 만들기 위해 사용! 액션을 리턴한다 - Reducer: 리덕스에 저장된 상태(데이터)를 변경하는 함수 컴포넌트의 액션생성함수 호출 -> 액션을 만들면 -> 리듀서가 현재상태(데이터)와 액션객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴 - Store: 프로젝트에 리덕스를 적용..

이번주는 처음으로 리액트를 배우고, 캘린더앱까지 만들었다.... 컴포넌트가 뭔지 처음배운 상태에서 당장 컴포넌트를 쓰고 리덕스와 파이어베이스까지 배우는걸 1주일만에 했더니 머릿속이 아주 복잡했다ㅠㅠ 그래도 이렇게 당장 실행되는 앱을 만드니 좀 재밌긴 했었다. [배운것] 함수형/클래스형 컴포넌트 state / props 라우팅 리덕스 firebase/firestore middlewares hosting material UI [느낀것] 순서 정리해가면서 해야하는 점, 강의 들으면서 틈틈히 강사님이 하셨던 말씀 주석으로 달아놔야 다음번에 봤을때 이해가 됨 자바스크립트 문법 익혀야하는 것(틈틈히는 안되겠고 이제 매일 하루에 1개씩이라도 찾아보거나 유튜브 보기!) 리액트로 모든것을 다 할 수 있다... 함수 하나..

달력링크 React App calendar-233c4.web.app firebase를 사용하여 서버리스 방식으로 캘린더를 만들었다. [구현기능] 1) 우측 하단 연필 버튼(일정추가) 을 누르면 일정을 추가할 수 있다. 해당 일정은 날짜에 맞게 기입된다. default 값은 미완료(파란색)이다! 2) 해당 스케쥴을 눌러서 모달창을 볼 수 있다(나중에 라이브러리써서 수정해야겠다 ㅎㅎ). 완료값을 누르면 빨간색으로 변한다. 삭제는 삭제, 뒤로가기는 다시 캘린더 페이지로 이동한다. 3) 일정완료값들은 완료일정 버튼으로 볼 수 있다. 다시 전체일정 누르면 모든 일정을 볼 수 있다. 4) fullcalendar 라이브러리써서 달력틀은 쉽게 구현할 수 있었다. 좀 정리해서 깃헙에도 올려야겠다! 4일간 만들었는데 구현..

3주차는 알고리즘 2번째 주간이었다. but 난이도는 1주간이랑 비슷했으나, 실력이 늘은건지 개념을 한번씩 돌려서 그런지 수월했다. [배운것] - 다양한 모듈을 활용하면 빨리 풀 수 있다는것! 순열/조합의 permutaions / combinations , 최빈값 구할 때 쓰는 Counter 등. 문제를 풀면서 다양한 모듈을 배울 수 있었다. - 이항계수란? mCn 구하는 함수 만들기! - 3차원, 2차원 배열 이해하고 만드는 것 [느낀것] - 모듈로 빠르게 풀것이냐? 재귀나 함수를 이용해 정석대로 구할것이냐의 갈등... 어차피 코테에서는 numpy만 안쓰면 웬만한 모듈에는 제한이 없을 것 같아서 모듈로 문제를 빠르게 풀어보는 연습을 택했다. - 코드리뷰에서 다른 사람이 내 코드를 빠르게 이해하려면 주석..

내일 목,금 2일을 끝으로 드디어 퇴사를 하게 된다. 퇴사를 결심하고 얘기했던 2월 2일부터 퇴사하기까지 약 한달반이 걸렸다. 좋아하지도 않은 반복적인 일을 욕심없이 더 할 것인지... 30 이라면 늦지도 빠르지도 않은 애매한 나이에 새로운 시작을 하는게 맞는지, 너무 많은 고민을 했지만 과감하게 그만두기로 결정한지 1달 반이 되었다. 코딩, 공부를 하면서 2주간 어마어마한 양의 공부를 했는데, 고3때 이후로 이렇게 공부해본적이 없다. 11년만이다. 허리도 아프고, 어깨 목도 너무 아픈데 그래도 2주정도하니까 나름 버틸만한 것 같다. 체력보다 더 힘든것은 사실 멘탈하고 자괴감인데, 알고리즘 풀면서 진짜 내가 바보인가? X 백만번 생각 한 것 같다. 그래도 이제 백준 난이도 하 문제들은 괜찮다. 처음엔 '..