본문 바로가기

분류 전체보기353

React(53) 타입스크립트 - 체크박스 약관 선택 이벤트 / 자식에서 부모로 데이터 보내기 여태까지는 부모에서 자식으로 데이터를 내려보내기만 해봤다. 하지만 오늘은 자식에서 부모로 데이터를 올려보내 보자. 여기서 핵심은 자식에서 새로 생성하는 데이터를 부모에게 보내주는 것처럼 보이지만, 사실은 부모가 가진 데이터를 props 로 물려주면 → 자식이 가공한 뒤 → 다시 부모한테 돌려주는 방식 이다. 자, 그럼 한번 실습해보자! 부모가 자식에게 props 전달하는 방법이 궁금하시다면 ? ↓↓↓ React(34) 리액트 훅 - 부모가 자식에게 props 전달하기 사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다. 컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이 devbirdfeet.tistory.com React.. 2021. 11. 16.
Docker(6) 윈도우에서 도커 설치하기 Updated 06/03/24   윈도우에 도커를 설치해려면 세팅을 먼저해주어야 한다. 오늘의 대망의 마지막(이자 이제 시작)인 도커 설치하는 방법에 대한 포스팅이다. 자, 아래는 도커 세팅 과정을 담은 지난 포스팅이다. Docker(4) 윈도우에서 리눅스 환경 세팅하기 Docker - 윈도우에서 리눅스 환경 세팅하기회사에서는 맥북으로 도커기반으로 개발을 하지만 어느 순간 내 데스크탑에도 똑같은 개발환경을 설치하고 싶어졌다. 하지만 데탑 운영체제는 윈도우, 개발환경을 똑같이 맞추려면 리눅스기반devbirdfeet.tistory.comDocker(5) 윈도우에 WSL2 설치하기 Docker(5) 윈도우에 WSL2 설치하기맥북과 같은 도커기반 개발환경을 구축하기 위해서 리눅스로 개발환경 세팅중이다. 지난 시.. 2021. 11. 11.
Docker(5) 윈도우에 WSL2 설치하기 Updated 06/03/24   맥북과 같은 도커기반 개발환경을 구축하기 위해서 리눅스로 개발환경 세팅 중이다. 지난 시간에는 윈도우에 터미널을 깔고 리눅스(Ubuntu)를 설치하였으니,이번에는 도커를 실행할 수 있도록 WSL2 설치를 해보자. ( 지난포스팅 보기 ↓↓↓ ) Docker - 윈도우에서 리눅스 환경 세팅하기회사에서는 맥북으로 도커기반으로 개발을 하지만 어느 순간 내 데스크탑에도 똑같은 개발환경을 설치하고 싶어졌다. 하지만 데탑 운영체제는 윈도우, 개발환경을 똑같이 맞추려면 리눅스기반devbirdfeet.tistory.com WSL2 란 Windows Subsystem for Linux 2의 줄임말이다.윈도우의 가상화 기능을 활용해서 윈도우 위에서 리눅스를 사용할 수 있게 해준다.기존 Wi.. 2021. 11. 10.
Docker(4) 윈도우에서 리눅스 환경 세팅하기 회사에서는 맥북으로 도커기반으로 개발을 하지만 어느 순간 내 데스크탑에도 똑같은 개발환경을 설치하고 싶어졌다. 하지만 데탑 운영체제는 윈도우, 개발환경을 똑같이 맞추려면 리눅스기반 환경으로 세팅을 해야 도커를 설치할 수 있다. 그럼 세팅해보자. 리눅스를 사용하는 이유 리눅스는 쉽게 말해 윈도우 같은 운영체제이다. 리눅스가 인기있는 이유는 무료 공개 소프트웨어 (freeware) 이기 때문이다. 많은 사람들이 자유롭게 프로그램을 변경할 수 있기 때문에 기능 업데이트가 매우 빠르고 거의 매달 새로운 기능과 성능 추가가 이루어지고 있다. 또한 서버 개발에 있어 리눅스를 쓸 경우 서버와 데스크톱이 서로 다른 OS를 쓸 때 발생할 수 있는 문제를 해결할 수 있게 된다. Docker(4) 윈도우에서 리눅스 환경 세.. 2021. 11. 9.
Git(33) 원격저장소에 push 한 마지막 커밋 삭제하기 나날이 성장하고 싶은 새발자의 하루 원격저장소에 push 까지 했는데 마지막 commit 을 잘못해버렸다. 이럴 땐 당황하지 말고 아래와 같이 따라해보자. push 해버린 commit 을 삭제하려면 사실 엄청난 명령어를 사용해야 하는 것은 아니다. 기존에 우리에게 친근한(?) 명령어를 이용해서 commit 을 reset 후 되돌아간 코드를 다시 push 해서 저장해주면 된다. Git(33) 원격저장소에 push 한 마지막 커밋 삭제하기 1. 마지막 명령어 치기 이전으로 되돌리자. 나의 경우에는 commit 이 마지막 명령어이기 떄문에 commit 이전으로 돌아갔다. $ git reset HEAD^ 2. 그리고 내가 commit 을 지웠다는 것을 github 에 알려주어 github 내에서도 해당 comm.. 2021. 11. 8.
CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 버튼 위에 마우스를 올려놓으면(hover) 밑줄이 가운데서 좌우가 양옆으로 펼쳐지는 라인 애니메이션을 구현하고자 한다. 결과화면 미리보기 프로필 버튼 위에 마우스 호버를 하면 밑줄이 좌우가 양옆으로 펼쳐지는 애니메이션이 생긴다. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 HTML 프로필 CSS .spread-underline { color: #2e3248; display: inline-block; padding: 15px 0; position: relative; text-decoration: none; } .spread-underline::after { background: none repeat scroll 0 0 transparent; background: #2e3248; bottom: 0; .. 2021. 11. 5.
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.
반응형

티스토리툴바