Jonny's Place

목표1: input박스에 쓴 글을 글발행 버튼을 눌렀을 때, 맨 위에 글이 추가되도록 하기 목표2: 각 글의 삭제 버튼을 누르면 해당 글이 삭제되도록 하기 html 코드를 조작하는 것이 아니라, state를 조작해야한다. 글 발행 기능 1. 인풋 박스와 글 발행 버튼 디자인하기 (글이 추가될때의 디자인은 이미 되어있기 때문에 따로 디자인 하지 않아도 된다.) { title.map(function(a, i){ return ( { setModal(true); setIdx(i)} }> { title[i] } { e.stopPropagation(); add1Like(i) }}>👍 { like[i] } {removeTitle(i)} }>글삭제 {postDate[i]} ) }) } {//e는 이벤트를 뜻하고, 이..

목표: 글 제목을 누르면 각각의 제목이 모달창에 보이도록 코딩하기 동적인 UI를 만드는 스텝을 따라서 한다. 1. html/css로 미리 디자인 완성 2. UI의 현재 상태를 state에 저장 3. state에 따라 UI가 어떻게 보일지 작성 1. html/css로 미리 디자인 완성 이미 되어있음 2. UI의 현재 상태를 state에 저장 - 나는 글제목을 눌렀을때 글제목의 순서를 입력받아 모달창을 띄워주는 기능을 구현하려한다. - 따라서 글제목의 순서 숫자가 state에 저장되도록 해야하고 초기값을 0으로 둔다. //useState를 생성하고 초기값 0으로 설정 let [idx, setIdx] = useState(0); 3. state에 따라 UI가 어떻게 보일지 작성 return ( Jonny&Jay..

목표: 원소의 초기값이 0인 배열을 useState을 통해 데이터 갯수 만큼 생성하고, 좋아요를 클릭할 때마다 배열의 각각의 값이 1씩 증가하도록 코딩 과정 당연히 많은 삽질이 있었고, 이 글은 예쁜 결과만을 나타낸다. 1. useState로 제목 데이터의 개수만큼 원소 초기값이 0인 배열을 생성 //제목 데이터 생성 let [title, setTitle] = useState([ '캠핑가자', 'FC서울 직관 후기', '바버 레인부츠 후기, 추천!!']); //map함수로 제목 갯수를 길이로 갖고, 각 값이 0인 배열 생성 let [like, setLike] = useState(title.map(function(a){return 0})); console.log(like) //출력결과: [0, 0, 0] ..

동적인 UI 만드는 step 1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state에 저장 3. state에 따라 UI가 어떻게 보일지 작성

1. 컴포넌트 생성하기 컴포넌트는 하나의 HTML 덩어리라고 이해하면 된다. 아래에서는 이 부분이 컴포넌트이다 App.js 코드 /* eslint-disable */ import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [title, setTitle] = useState([ '캠핑가자', 'FC서울 직관 후기', '바버 레인부츠 후기, 추천!!', '오늘의 일기']); let [like, setLike] = useState(0); function changeTitle() { var newArray = [...title]; /*deep copy*/ newArr..

리액트 시작! PM으로 취준을 하면서, 회사를 지원하고 기업 조사를 하는 것은 어느정도 루틴을 잡았다. 그러면서 시간이 조금씩 여유가 생기게 되었는데 그 시간에 게임을 하거나 유투브를 보는 나의 모습을 발견하였다. 이 여유 시간을 어떻게 활용할까 생각하다가, 여자친구가 어떤 아이디어를주었고, 그걸 한번 같이 만들어보면 어떻겠냐고 말해줬다. 듣고보니 난이도가 높지 않았고, 마음속에 품고있던 개발의 열정이 다시 생겨났다! 그래서 피그마를 처음 켜서 2장짜리 프로토타입을 만들어 여자친구와 상의했고, 일단 그렇게 만들어보는 것으로 결정했다. 프로토타입이 만들어졌으니, 프론트엔드 개발을 먼저 해보기로 했고, 1년 전에 잠깐 맛만 보았던 리액트로 구현해보기로 했다. 어떻게 시작할 지 막막해서 유튜브 코딩애플 채널로..