본문 바로가기

분류 전체보기72

2. 실전 프로젝트: TodoList 웹앱 개발하기 이제는 실제로 TodoList를 만들어보겠습니다. 프로젝트 준비, UI구성, 기능 구현의 순으로 개발을 진행할게요. 2.1 프로젝트 준비 todo-app 이라는 이름의 프로젝트를 만들겠습니다. $ npx create-react-app todo-app 이라고 터미널에 입력하면 todo-app 이라는 디렉토리가 생기고, 그 아래에 리액트 프로젝트가 생기는 것 정도는 이제 아실거라고 생각합니다. 스타일링은 Sass를 사용할 것이므로, 다음과 같이 입력하여 Sass도 설치합니다. $ yarn add sass classnames react-icons Prettier를 사용하여 코드 스타일을 정리해보자구요. 최상위 디렉토리에 .prettierrc 파일을 생성하고 다음과 같이 작성합니다. { "singleQuote".. 2023. 7. 19.
1. Hooks React를 공부할 때면 Hook이라는 말이 꼭 나오곤 한다. '아 이런게 존재하는구나~' 정도만 알고 있다가 드디어 공부하게 되었다. 멋사 과제를 진행하면서 useState()라는 것을 사용한 적 있는데, 이것이 Hook의 한 종류라고 한다. 나도 모르는 새 Hook을 쓰고있었다니! 아무튼 이 포스팅에서는 Hook에 대해 알아볼 것이다. useState는 함수 컴포넌트 내에서 상태 관리를 할 수 있게 해주고, useEffect는 렌더링 직후 작업을 설정합니다. 이런식으로, 기존의 함수 컴포넌트에서 할 수 없던 일들을 하게 해줘요. React 내장 Hooks를 배우고 이후에는 커스텀 Hooks를 만들어 보겠습니다. 1.1 useState 함수 컴포넌트 내에서 가변적인 상태를 지닐 수 있게 해줍니다. St.. 2023. 7. 12.
1. DRF 시작하기 DRF는 Django REST Framework의 줄임말이다. 이제부터 DRF에 대해서 공부해 볼 것이다. 그럼 DRF가 무엇인지 부터 알아야 하는 것이 당연하다. 본인이 지금 무엇을 공부하고 있는지도 모른다면 큰 문제이니까.. 미안합ㄴ디ㅏ 지금 살짝 정신을 놓은 상태라 아무말이나 막 하는 것 같네요 하하 DRF는 Django REST Framework, 말 그대로 장고를 기반으로 REST API 서버를 만들기 위한 라이브러리 이다. 데이터를 JSON 형태로 바꾸어서 장고 외의 여러 프로젝트에 데이터를 보낼 수 있게 되는 것이다. DRF 설치는 간단하므로 생략하겠다. 1.1 DRF 구조 살펴보기: hello API 만들어보기 뷰 이번 예제 api를 만들 때는 모델이 필요없이 바로 뷰를 작성한다. 기본적으.. 2023. 7. 7.
이벤트 발생 시 특정 컴포넌트를 다른 컴포넌트로 바꾸는 방법 개인 프로젝트를 하고 있을 때였습니다. '이 버튼을 누르면 다른 페이지가 아니라 다른 컴포넌트가 보였으면 좋겠는데 어떻게 해야하지?' 다른 페이지로 이동하는 것은 React router의 useNavigate()를 사용하면 된다고 배웠는데, 컴포넌트만 교체하려면...? 난감했지만 저에겐 든든한 선생님이 있습니다. useState를 사용해서 조건에 따라 렌더링하는 방법이 있군요. 그리고 router를 사용하는 방법은 다른 페이지로 바꾸는 방법을 알려주는 것 같아요. 제가 하고싶은 것은 Category/Review/Exhibition 버튼을 눌렀을 때, 페이지를 바꾸지 않고 버튼 하단의 내용들을 교체하는거에요. 어떻게 해야하지.. 하다가 멋사 같은 팀의 멤버분께 여쭤봤는데요. 태그 바깥쪽의 내용들은 그대로 .. 2023. 5. 26.

티스토리툴바