개발 34

리액트 1일차 : map함수를 이용한 개별 좋아요 구현

위와 같은 간단한 블로그 예제 좋아요를 눌렀을 때 각 게시글에 따라 좋아요가 각각 올라가게 하라는 과제를 받았다. import { useState } from 'react'; import './App.css'; function App() { let nickName = "kglim"; let [title, setTitle] = useState(['혜화 갈비 맛집', '홍대 라멘', '강남 소주 맛집']); let [like, setLike] = useState([0, 0, 0]); let [day, setDay] = useState(['2월 11일', '8월 18일', '12월 26일']) let [count, setCount] = useState(10); function change(){ setLike(..

개발 2022.12.26

스프링부트 시작하기

스프링부트를 설치하기 위해 아래 링크에서 STS를 다운받는다. https://spring.io/tools Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or Theia IDE. spring.io contents를 압축해제 해야하는데 알집으로 하면 계속 오류가 나서 반디집을 깔았더니 오류없이 잘 풀림 exe파일 실행 Launch누르면 잘 켜진다 ..

개발 2022.08.23

210829 트위터 클론코딩 중 메모

노마드코더의 트위터 클론코딩 강좌를 모두 수강하고 내가 개인적으로 조금 더 꾸며보려고 하는 중. 트윗을 작성하면 이름인 userObj.displayName과 nweetObj.createdAt을 출력하도록 하였다. createdAt은 Date.now()로 정의되어 있기 때문에 저런 숫자가 나왔다. Date.now()는 1970년 1월 1일부터 지금까지 지난 밀리초를 반환하기 때문이다. 이를 날짜 포맷으로 바꾸기 위해 Moment 라이브러리를 설치하였다. moment(nweetObj.createdAt).format('YYYY/MM/D h:mm a') 내가 원하는 포맷으로 날짜가 출력된다. 트윗이 여러개일 때 랜덤하게 부여되는 doc.id에 따라 정렬되기 때문에, 시간 순서대로 정렬되도록 firebase에서 ..

개발 2021.08.29

210828 트위터 클론코딩 중 메모

useEffect() 함수 리액트 훅으로, 컴포넌트가 렌더링 될 때마다 특정 행동을 실행하는 함수. useEffect( 함수, [배열] ) 배열은 특정한 값이나 혹은 빈 배열 []이다. effect가 실행되는 것을 마운트 될 때 한 번만 하고 싶을 때 빈 배열을 사용한다. map() 자바스크립트의 map() 메소드는 배열 내 모든 요소에 대하여 주어진 함수를 호출한 결과를 모아, 새로운 배열로 반환한다. props나 리액트 훅 등이 이제 이해가 되기 시작한다 !! 처음엔 너무 난해하게 느껴졌는데! firebase 쿼리로 creatorId가 현재 로그인한 유저와 같은 데이터만 받아오는 작업을 하였다.

개발 2021.08.29