본문 바로가기

개발일지 TIL(Today I Learned)

[2023.07.12] 개발일지
[2023.07.12] 개발일지 2023. 7. 12. 모달창을 열어도 background div태그가 전체화면을 덮지 않는 문제가 있었다. 해결하는데 꽤나 시간을 잡아먹어 굉장히 어려운 문제인가 싶었지만 너무 간단하게 해결되는 문제였다. BlackBackground의 스타일 요소에 1 2 3 4 5 top: 0; left: 0; display: flex; justify-content: center; align-items: center; cs 맨 위와 맨 왼쪽끝에 div요소를 맞추고 display를 flex 해버리면 전체 화면을 뒤덮는 div가 된다. 이것말고도 한 가지 다른 문제가 발생했다. select의 option 요소들은 styled-components로 스타일 변경할 수가 없다는 것이다. 도저히 styled-components로 할 수 있는 방법이 ..
[2023.07.11] 개발일지 2023. 7. 12. input 태그 중 숫자만 입력가능하고 입력한 숫자를 천 단위로 콤마(,)를 찍어서 렌더링해주는 input 태그를 만드는 과정에서 내가 원하는 결과와는 다른 상황이 벌어졌다. 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 40 41 42 43 44 import React, { useState } from 'react' import Input from '../components/input/input'; function FeatureInput() { const [name, setName] = useState(''); const [price, setPrice] = ..
[2023.07.10] 개발일지
[2023.07.10] 개발일지 2023. 7. 10. 여러가지 기능의 UI요소들을 만들어보는 도중 UI를 눌렀을 때 alert창이 뜨고 창 안에서 input값을 입력하면 console.log로 출력해주는 버튼을 만드는 과정에서 어려움을 겪었다. 그다지 어려운 기능이 아님에도 내가 어려움을 느낀 이유는 alert창 안에 어떻게 input 태그를 집어넣지 하는 기본적인 고민때문이었다. 처음에는 alert() 함수에 태그를 집어넣을 생각만 하고선 이런저런 방법을 시도하며 고생했다. 그러나 찬찬히 고민해보니 컴포넌트의 return문에 추가하는 것도 아니고 alert() 안에 태그를 넣는 것은 불가능하다는 것을 알고는 구글링을 포함해 이곳 저곳에 돌아다니기 시작했고 이윽고 아주 간단한 방법을 찾아내었다. 그건 alert() 함수 말고 prompt() 함수를 사용하면..
[2023.07.07] 개발일지 2023. 7. 9. styled-components를 이용해 style를 꾸며보았다. 그러나 쉽사리 한 번에 되지는 않는다. 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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 import React, { useState } from 'react' import { addTodo } from '../redux/modules/todos'; import { useDispatch } from 'react-redux'; import { styled } from 'st..
[2023.07.06] 개발일지 2023. 7. 9. 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 import { useNavigate, useParams } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { styled } from 'styled-components'; function Detail() { const todos = useSelector((state) => { return state.todos }); const todo = todos.filter((todo) => todo.id === id)[0]; const navigate = useN..
[2023.07.05] 개발일지
[2023.07.05] 개발일지 2023. 7. 9. 리듀서 부분에 액션 함수 title_INPUT과 body_INPUT을 각각 하나의 객체 title, body로 작용하는 것을 하나의 input액션 함수로 합쳐보았다. 1 2 3 4 5 6 7 8 9 10 11 switch (action.type) { case INPUT: return [ ...state, { id: shortid.generate(), title: action.payload.title, body: action.payload.body, isDone: false, } ]; cs 리듀서 부분을 이렇게 짜고 1 2 3 4 5 6 7 { dispatch(addTodo({ title, body })); setTitle(''); setBody(''); }}>추가하기 Colored by Color Scr..
[2023.07.04] 개발일지
[2023.07.04] 개발일지 2023. 7. 9. 여전히 todo list를 만드는 중 문제가 하나 발생했다. title input값과 body input값이 화면에 출력되어야하는데 title input값밖에 출력되지 않는 문제였다. todos의 리듀서 부분에 state 데이터를 넣어주어야 값이 반영되는데 그것을 넣지 않은 것이 문제였다.
[2023.07.03] 개발일지
[2023.07.03] 개발일지 2023. 7. 9. 드디어 Level 2 과제를 시작!! map() 메서드를 사용해서 input태그에서 받아온 값을 todo list 객체에 추가하고 그 업데이트된 todo list 값을 화면에 출력헤보려고 하는 과정에서 에러가 발생했다. 내가 짠 코드는 이러한데 문제가 되는 것은 map() 메서드를 사용해 title 요소의 값을 출력해주려면 고유 key값이 필요하다는 것이다. 그래서 나는 고유 key값을 입력해 코드를 짜 보았다. 1 2 3 {data.map((item) => { {item.title} })} Colored by Color Scripter cs 고유 key값을 지정하니 원활하게 출력이 되는 것을 확인할 수 있었다. Map() 메서드를 사용해 화면에 배열의 값을 차례로 출력하려고 할 때 고유 Key값을 지정..

티스토리툴바