본문 바로가기

전체 글350

React(52) 타입스크립트 - 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 리액트와 타입스크립트를 사용하여 메뉴를 클릭했을 때, 페이지의 내용을 변경해보려고 한다. 이때 react-router 을 통하지 않고 즉, url 을 변경하지 않고 컴포넌트의 내용을 변경해볼 것이다. 그럼 시작해보자. React(52) 라우터 없이 메뉴 클릭 시 컴포넌트 내용 변경하기 그룹 메시지를 클릭하면 그룹대화 리스트가 나오고, 개인 메시지를 클릭하면 회원 등급 별로 각각 다른 대화리스트가 보여진다. MsgList.tsx 에서는 전체 맥락을 그릴 것이다. 메뉴를 클릭할 때마다 조건이 변경되며 그에 맞는 통신함수가 실행되고 객체를 받아온다. 그리고그 객체를 자식 컴포넌트인 MsgItem 에 넣어주자. MsgList.tsx (import 구문은 생략하였습니다.) const MsgList = (): Re.. 2021. 11. 1.
Git(32) 원격 브랜치 삭제하기 오늘도 열일하는 새발자 브랜치 작업 뒤 마스터에 merge 후에는 항상 브랜치를 지워준다. 그래야 커밋내역들을 깨끗하게 관리할 수 있기 때문이다. 원래는 빗버킷이랑 연동해서 머지할때마다 브랜치를 자동 삭제해주지만, 가끔 수동으로 지워줘야 할 때가 있다. 로컬 브랜치를 지운 뒤 원격 브랜치를 따로 지워주다가 잊어버릴 미래의 나를 위해 기록으로 남긴다. Git(32) 원격 브랜치 삭제하기 이미 로컬 브랜치는 삭제했고, 이제 원격 브랜치를 삭제해 보려고 한다. 브랜치 목록을 확인해보자. 다쓰고 남겨진 원격브랜치가 여전히 남아있다. $ git branch -a 그럼 딜리트 주문을 외워보자. $ git push origin -- delete "브랜치명" 다시 브랜치 목록을 확인해보니 깔끔하게 삭제 되었다. (짝짝짝) 2021. 10. 25.
React(51) 체크박스 에러 You provided a 'checked' prop to a form field without an 'onChange' handler 문제상황 리액트에서 를 쓸 때, onClick 핸들러를 통해 조건에 따라 checked 값을 주는 식으로 코딩하면 이런 에러 메시지가 발생한다. 이유는 checked 값을 핸들링하려면 onChange 핸들러를 사용해야 하기 때문이다. Warning: You provided a `checked` prop to a form field without an `onChange` handler. 해결방법 - onClick 핸들러를 없애고 onChange 핸들러를 사용한다. - onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다. → 나의 경우에는 리드온리를 붙여줬더니 깨끗하게 해결되었다. 2021. 10. 18.
Git(31) git add 취소하기 (staging 취소) git add 명령어로 staging 한 파일들을 다시 되돌리려면 git reset 을 사용해준다. Git(31) git add 취소하기 (staging 취소) 앗 ! 실수로 git add . 를 하여 변경한 전체 파일을 staging 했다. 😵‍💫 당황치 말고 git reset 으로 다시 unstaged 상태로 되돌리자 🤓 만약, 특정 파일만 unstaged로 되돌리고 싶다면 ? git reset 뒤에 파일경로를 적어주면 해결! Hoxy 저의 미흡한 포스팅이 도움이 되셨다면..? 5랜시간을 해메이다 해결에 도움이 되셨다면..? 광고한번만 눌러주시면 힘내서 더 열심히 포스팅하겠습니다! 감사합니다. (🙇‍♀️꾸벅) -새발자올림- 2021. 10. 17.
JavaScript - Break문 vs Continue문 break문 - 이제 더 이상 반복없이, for문이나 while문 바로 나간다. - 반복문을 쿨하게 나가버린다. let sum = 0; for(const num=1; num 2021. 10. 14.
Styled-components(1) 스타일드 컴포넌트 설치하기 지난 시간까지 코딩앙마 님의 강의를 듣고 타입스크립트로 포팅을 해보며 감을 익혔다. 이번 시간부터는 udemy 에서 프로젝트 실습을 시작하였다. 평소부터 배우고 싶었던 styled-components 를 타입스크립트와 연동할 수 있도록 설치하는 과정을 기록해보았다. Styled-components(1) 설치하기 - Styled-components 설치하기 $ npm install styled-components - Typescript(타입스크립트)와 함께 사용하기 위한 라이브러리 설치하기 $ npm install --save-dev @types/styled-components src/styles/global.ts 설치가 다 되었으니 테스트 코드를 짜보자. 흥미로운 점은 css 가 트리 구조로 짜여있다. .. 2021. 10. 12.
반응형

티스토리툴바