목록2024/05 (21)
훈돌라
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ddAmv5/btsHKEHAsJe/K1PzIQRYH9a1Yb1lkwJ56K/img.png)
우리 팀의 주제는 Our Knowledge " 우리의 지식" 기본적으로 개발자들이 본인들의 코드를 공유하며 피드백을 의도하거나, 정보를 공유하고, 해당 게시글을 조회한 개발자들은 의견을 댓글로 달아 소통을 하는 사이트 입니다. 개발자들은 물론 개발자를 희망하거나, 개발자들이 어떤 코드를 짜고 공유하고 있는 지 궁금해하는 일반인들도 방문하여 정보를 얻어가고, 간혹 개발자들이 생각할 수 없는 아이디어를 타 직종 종사자들이 공유해줄 수도 있다는 기대를 하며 개발하게 되었습니다. (본인 아이디어 채택되서 기분 좋음) 뉴스피드 ( 게시글 간략, 사용자 정보, 좋아요 수, 토글 시 상세페이지 이동) (메인페이지)마이페이지 (프로필 수정, 내 게시글 확인, 게시글 토글 시 상세페이지 이동) (마이페이지)로그인, 회원..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Mlz0l/btsHHdLc1DP/YtZ4MJ1TmcuHOtWKT00BE1/img.png)
과제 해설을 보며 모든 기능을 추가했으나, redux 는 끝내 리팩토링 하지 못했다. 과제를 완성시키지 못하고 제출한건 처음이라 자존감이 많이 떨어지기도 하지만 지금 내가 익힐 수 있는 것들에 집중하려고 한다. 지금까지 구현한것들도 다시 해보라고 하면 버벅거릴 것이 분명하기 때문에. const filteredExpenses = expense.filter( (expenses) => expenses.date.split("-")[1] === month ); 월별 조회 리스트를 구현하며 알게 된 정보 나는 date input type 을 text 가 아닌 date 로 했기 때문에 과제 해설과는 달라 조금 당황을 했었지만, 주위 자문을 구해 해결할 수 있었다. 해결 방법은, date 로 가져온 정보들은..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cvzZUf/btsHG91LqVF/62Q9ZuGVK31m72DFk8FiL1/img.png)
import { useState } from "react";function App() { const [email, setEmail] = useState(""); const handleEmailChange = (event) => { setEmail(event.target.value); }; const [password, setPassword] = useState(""); const handlePasswordChange = (event) => { setPassword(event.target.value); }; const [passwordcheck, setPasswordCheck] = useState(""); const PasswordCheckChange = (event) => { ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/EHQi8/btsHGBJYPXQ/hr3W3YkkIL52wjUcybO9eK/img.png)
지출 CRUD 구현 (작성, 조회, 수정, 삭제)월별 지출 조회 기능 구현 (Home - Read)월별 지출 항목 등록 구현 (Home - Create)지출 상세 화면 구현 (Detail - Read)상세화면에서 지출 항목 수정 구현 (Detail - Update)상세화면에서 지출 항목 삭제 구현 (Detail - Delete) 지출 항목 등록, 지출 항목 상세 페이지 까지 구현했고 월별 조회 및 삭제와 수정은 구현하지 못했다. 상세 페이지로 넘어가서 기존 home.jsx 에 있는 데이터들을 가져오는 것만 해도 너무 힘들었다. 아직 프롭스 드릴링, 라우터 돔에 미숙한 것 같고, 이해하기 어렵다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PQTna/btsHDNYYnWm/2M3mPYIThkZXC8H2ggko00/img.png)
카운트 앱 숫자 증가, 감소 시키기function App() { const [count, setCount] = useState(0); const addCount = () => { setCount(count + 1); } const disCount =() => { setCount(count -1); } return ( Count: {count} div> button onClick={addCount}>+button> button onClick={disCount}>-button> div> );}export default App; 다크모드function App() { const [isDark, setIsDark] = useSt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rwDFL/btsHCszXnNf/ztf1PqB3keOZhkofwF0Lw0/img.png)
const numbers = [1, 2, 3, 4, 5]const double = numbers.map(number => number * 2);console.log(double)const users = [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 24 }, { name: 'Carol', age: 23 } ]const usersName = users.map(user => user.name);console.log(usersName); const users = [ { name: 'Alice', age: 30, city: 'Seoul' }, { name: 'Bob', age: 25, city: 'New York' }, { name: 'Charlie', age: 35,..