카테고리 전체102 [인프런 강의] zerocho Slack 클론 코딩 (9) - 커스텀 훅 만들기 이전 포스팅은 회원가입 페이지 만들기에 대해 포스팅하였다. 2022.10.24 - [개발 공부 시리즈/Slack클론코딩] - [인프런 강의] zerocho Slack 클론 코딩 (8) - 회원가입 페이지 만들기 이번 포스팅에서는 커스텀 훅을 만들어보겠다. ※ 이 포스팅은 zerocho님의 slack 클론 코딩 강좌를 따라 하면서 정리해놓은 포스팅입니다. 1. 중복 코드 제거하기 alecture/pages/SignUp/index.tsx const SignUp = () => { const [email, setEmail] = useState(''); const [nickname, setNickName] = useState(''); const [password, setPassword] = useState('').. 2022. 10. 26. 13:33 [RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기 [RTK] Typescript todoList 만들기 - (2) 기본적인 디자인하기 이전 포스팅에 이어서 기본적인 디자인을 진행하겠다. 2022.10.25 - [개발 공부 시리즈/Redux-ToolKit] - [RTK] Typescript todoList 만들기 - (1) 라이브러리는 Meterial UI 를 사용하여 진행하겠다. Meterial UI는 React를 좀 더 직관적이게 보여줄 수 있는 라이브러리이다. 이전 포스팅에서는 addTodo 기능 구현까지 진행하였다. 전체적인 디자인을 구성한 후, 컴포넌트를 분리해야겠다. 1. 디자인 틀 만들기 App.tsx를 다음과 같이 변경한다. //App.tsx import React,{ useState } from 'react'; import { AppDis.. 2022. 10. 26. 01:40 [RTK] Typescript todoList 만들기 - (1) [RTK] Typescript todoList 만들기 Redux-Toolkit과 Typescirpt를 사용한 TodoList를 정리하며, 만들어 보는 시간을 가져보겠다. 1. 프로젝트 설치 typescript 템플릿을 이용하여 다운로드하도록 하겠다. 자신이 원하는 디렉터리로 cmd 창을 열고 다음과 같은 명령어를 입력하면 된다. npx create-react-app rtk-todo-list --template typescript 설치가 완료되면 만들어진 디렉토리로 이동하여 vsCode로 프로젝트를 연다. 자세한 Redux-Toolkit 설치방법은 이 포스팅을 참고하면 된다. 2022.10.03 - [개발 공부 시리즈/Redux-ToolKit] - [React] Redux-Toolkit 초기 설치 [Rea.. 2022. 10. 25. 02:30 [인프런 강의] zerocho Slack 클론 코딩 (8) - 회원가입 페이지 만들기 이번 포스팅은 회원가입 페이지 만들기에 대해 포스팅하겠다. ※ 이 포스팅은 zerocho님의 slack 클론 코딩 강좌를 따라 하면서 정리해놓은 포스팅입니다. 1. 프로젝트 시작하기 - selact/back 폴더로 이동해 "npm run dev" 명령어로 백엔드 서버를 실행시켜 준상태에서 시작한다. 터미널을 새로 열고. leacture 폴더로 이동하여 frontend 코드도 실행한다. 이 강의는 HTML과 CSS의 설명은 중점으로 다루지 않는다. 2. index.html 링크 추가 슬랙 홈페이지에서 index.html 안에 있는 Link들을 가져와 추가한다. aleacture/index.html 이 태그들이 동작을 할 수도 있고 동작하지 않을 수도 있다. 동작하지 않는다면 슬랙 홈페이지에서 개발자 도구를.. 2022. 10. 24. 15:28 [ReactNative] 공식 문서 보기 (1) - 기초 ReactNative를 배우며, 기존 React와 사용방법이 약간 동일한 것 같지만, Html 요소가 아닌 나 와 같은 ReactNative만의 독자적인 태그를 사용하는 것을 보았다. 그래서 다시 처음으로 돌아가, 공식문서의 내용을 간단히 정리해 볼 것이다. ReactNative 공식문서는 다음과 같은 링크에서 볼 수 있다. 나는 간단히 내가 기억해야 될 부분만 순차적으로 정리해 보고자 한다. https://reactnative.dev/docs/getting-started Introduction · React Native This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting .. 2022. 10. 24. 01:12 [ReactNative] expo 메모장 앱 만들기 (3) 이전 포스팅 2022.10.21 - [개발/ReactNative] - [ReactNative] expo 메모장 앱만들기 (1) 2022.10.23 - [개발/ReactNative] - [ReactNative] expo 메모장 앱만들기 (2) 이전에는 데이터 저장 / 불러오기, useEffect를 활용하여 데이터 불러오기까지 구현하였다. 이번 시간은 메모장을 리스트 형태로 제작하는 방법을 배워보겠다. 기존에 있던 코드에서 추가해주며 진행 해주겠다. 1. 리스트 뷰와 작성글 뷰 분리하기 App.js useState로 writeMode 의 여부를 표시할 state를 선언해 주었고 return 문을 두 가지로 나누어서 분기시켜주었다. writeMode가 true 이면 글쓰기 화면이 보이고, false 이면 리스.. 2022. 10. 23. 01:53 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음 728x90
