목록전체 글 (172)
언젠간 진화하겠지!
꽤나 흥미로운 태그를 알게 됐다. 라는 태그인데 적혀진 그대로 표현이 되는 그런거다 어떻게 쓰일지는 정확히 잘 모르겠지만, 몇문장을 적을 때 아래 예처럼 ` `이렇게 할 필요 없이 pre로 하면 되지 않을까 싶다. 예를 들면 어서오세요! 즐거운 코딩월드에 오신 걸 환영합니다! 이런거를 어서오세요 여러분! 코딩월드에 오신 걸 환영합니다! 이렇게 하는것과 다름없지 않남? 코드펜으로 해보니 See the Pen Untitled by Yunjin Lee (@sweesweett) on CodePen. 조금은 다른걸 알 수 있는데 뭐...직접 css 해준다면 별차이는 없을 것 같다. 참고자료 https://developer.mozilla.org/ko/docs/Web/HTML/Element/pre - HTML: Hy..
dnd는 결국 완성을 하긴했는데 문제가 발생했다. 미리 어디 자리에 생길지 보여주는 미리보기의 조건값을 어떻게 해야할 지 모르겠다. 현재 다른 state(예: todo->inProgress) 일 때 이동은 알맞게 잘 되는데 같은 state나 맨 아래로 이동할 떄는 잘 되지 않는다. 지금 따로 div를 줘서 했는데 ::after로 변경하고 그냥 조건에 따라 위치를 다르게 줘야하지 않나 싶기도 하다. ---- 다음주는 chatGPT가 짜준대로 살아보려한다^^ 월요일 아침: 토이 프로젝트 구상하기 오후: HTML, CSS, JavaScript 문법 복습하기 저녁: 면접 질문 예상 답변 작성하기 화요일 아침: 프로젝트 구상한 아이디어를 바탕으로 UI 설계하기 오후: CSS 레이아웃 관련 실습하기 저녁: 포트폴리..
과제를 하면서 알게 되었는데 리액트에서는 생각보다 간편하게 사용할 수 있다. 간편 정리 1. react-daum-postcode 설치하고 2. 원하는 곳에 import 하고 3 임포트해온 컴포넌트를 배치하고 원하는 상황에 맞는 prop를 넣어서 한다.(해당 내용 아래 참고자료에있음) npm install react-daum-postcode # or yarn add react-daum-postcode 우선 이걸 깔고, 원하는 위치에 임포트하면 된다. 나 같은 경우는 input창을 클릭했을 시에 이 주소찾기 페이지가 떠야 했다. 처음엔 주소입력 컴포넌트에 하위에 넣었는데, 모달로 하는게 나을 것 같아서 모달로 띄우게 했다. 포탈 사용해서 그냥 띄우고싶을 때 컴포넌트 내에서 띄울수 있도록 했다. const S..
같은 모달을 수정/ 등록 할 때 같이 쓰고 있기 때문에 어떻게 통신을 할까, 모드에 따라 해야할 것 같은데 따로 빼는게 좋을까 아님 두개 다 불러오고 해야하는걸까 이리 저리 고민을 많이 했다. 그러다가 동적 임포트가 기억이 났고 검색을 통해 커스텀 훅을 구현하였다. 처음에는 React.lazy도 컴포넌트를 동적으로 import를 할 수 있다고 해서 검색해 보다가 컴포넌트만 적용되는 듯 하고(정확하진 않음), export default만 가능하다고 해서 다른 방법을 찾아봤다. import()는 promise로 반환된다고 해서 아래와 같이 async 함수 내에서 await 처리하였다. 모드(얘도 다른 훅에서 받아온다)가 변경될 때 동적으로 원하는 모듈을 임포트 할수 있도록 했다 import { Request..
커스텀 훅을 만드려다가 알게 되었는데, 처음 커스텀훅에 input의 id값을 배열로 받아서 forEach나 for문을 돌려 값에 대한 validation을 하려고 했다. 근데 formData가 버젓이 있는데 굳이 그럴 필요없이 방법이 있지 않을까 싶어서 찾아보던 중 알게 되었다. 우선 콘솔로 찍어보느라 그냥 함수를 실행했는데 나중에 변경할 예정이다 const submitHandler = (e: FormEvent) => { e.preventDefault(); getFormData(e.currentTarget)//여기서 e.CurrentTarget을 사용해 form element }; 여기서 바로 FormData해서 FormData 객체를 만들어도 되지만, 나는 따로 함수로 빼서 했다 const getFor..
리액트 라우터의 useSearchParams 와 유사한 커스텀 훅을 만들고싶었다. 근데 작동을하지않네.... 커스텀 훅 자체에서 바로 searchParams를 받아서 하고싶었는데, 렌더링이 되지 않음을 확인했다. 그래서 전역 상태관리 라이브러리인 recoil을 사용해 selector를 하나 만들어서 searchParams변수에서 window.location.search를 받아오게 했는데 생각해보니 상태가 아니기때문에 새로 초기화되잖아!! 좀 답답해져서 리액트라우터 깃허브에 갓다와서 힌트좀 얻어야겠다. 이거로 계속 씨름중.... import { useRecoilState } from 'recoil'; import { useEffect, useState, useRef } from 'react'; import..
input을 따로 컴포넌트를 만들었었는데 가독성이 떨어지는것 같아 조금 고민이다. Input 컴포넌트 고작 이것뿐인데 const Input = ({ type, name, label, options }: { type: string; name: string; label: string; options: {} }) => { return ( {label} ); }; 너무 많은 prop때문에 더 복잡해진게 아닌가 싶기도 하고... 모달 컴포넌트가 너무나 더러워졌다... 근데 label과 input을 분리하지 않더라도 저렇게 복잡하게 attribute가 붙을텐데, 상태 {stateSelect?.map((option) => ( {option} ))} 내용 저장 navigate('/')}> 취소 우선 모달쪽 완성 후 수..
모달 컴포넌트를 재활용하고 싶었다. searchParams를 통해 add일때와 edit일때를 구별해서 가져오게 하고 싶었는데, useQuery가 훅이다 보니까, 쉽지가 않았다. react-router-dom을 사용할 경우에도 get메서드를 사용하는건 같길래, 커스텀 훅으로 만들어서 사용하려고 했다. import { useEffect, useState } from 'react'; interface AnyObj { [index: string]: string | null; } const useSearchParams = (arr: string[]) => { const [newObj, setNewObj] = useState({}); //변수명 네이밍에 신경쓰지못했다ㅠㅠ useEffect(() => { const ..