minnote29 님의 블로그

🍎 코틀린코틀린(kotlin)은 IntelliJ, PyCharm 등 다양한 IDE를 선보인 것으로 유명한 JetBrains 사에서 오픈소스 그룹을 만들어 개발한 프로그래밍 언어이다.기존에는 안드로이드 앱을 자바로 개발했지만, 코틀린의 등장으로 점점 대체 되어 가는 추세다.2017년 구글에서 안드로이드 공식 언어로 지정되었고,2021년 신규 앱 개발시 코틀린으로 개발할 것을 권장되고 있다.코틀린은 어떻게 Java를 대체할 수 있었을까? 바로 JVM 기반 언어라는 특성 때문이다. JVM 기반 언어를 다르게 얘기해보자면, 어떠한 언어도 자바 바이트 코드(.class)로 컴파일할 수 있다면 동작할 수 있는 것이다. jvm - 자바 프로그램을 실행하기 위한 실행 환경을 만들어 주는 소프트웨어다.이러한 JVM은 ..

이번 회원가입 폼은 저번에 한 공용 훅 useForm을 잘 만들어 놨지만, 리액트 훅 폼 같은 것을 활용해서 처리할 것이다. (라이브러리) 그리고 타입 안전성을 더 고려할 수 있게 처리하도록 할 것이다. 타입스크립트 계열에서 유효성 검사할 때 많이 쓰는 zod라는 라이브러리를 쓸 것이다. yup도 있지만, zod를 써볼 것이다. 토큰 불러오는 과정도 처리해줄 것이다.$ pnpm i react-hook-form$ pnpm i @hookform/resolvers $ pnpm i zod설치를 해주고, 스키마 파일을 만들어준다. signup page 에 정의해도 좋을 것 같아서 내부에 스키마를 정의해준다. 스키마는 zod에서 가져오는 것.그 다음, useForm을 제공을 해주는데, 이 useForm은 저번에 ..

🍎스웨거를 일단 켜놓는다. 로그인 같은 경우는 email, password를 입력을 해줘야 한다.아마도 아래 사진처럼 작성을 했을 것이다. 하지만, 로그인 사이트가 대부분 이렇게 허접하지는 않을 것이다. -> 백엔드와의 유효성 검사를 맞춰서 유효성 검증 부분도 해주는 것이 좋다. 훅을 사용해서 로그인 관련 유효성 검증을 할 것이다. 🍎일단은 구조를 먼저 잡는다. 그 다음, input 태그를 쓸 건데 타입은 email, 스타일로는 border를 준다. width도 강제로 픽셀을 주고, 패딩도 10픽셀 정도 준다. 포커스가 됐을 때, border를 다른 색이 되도록 하고, 약간 둥글게 처리한다. 비밀번호도 똑같이.그리고 버튼도 만들어주는데 handleSubmit 함수를 API 요청 시 작동되도록 처리..

🍎 새 프로젝트 생성umc 강의를 참고해서 정리를 했다. 일단, 로그인/회원가입 페이지를 만들기 위해서 폴더를 이동해주고, $ pnpm create vite를 해서 새 프로젝트를 생성해줬다.그 다음, $ cd UMC-8th-mission-FE$ pnpm i해서 pnpm 다운로드를 해준다. 비주얼 스튜디오를 활용하고 있기 때문에, $ code . 해서 해당 프로젝트로 이동을 해준다. 이렇게 실행을 완료하면 페이지가 필요하니까 $ pnpm i react-router-dom깔아주고, tailwind css 활용을 위해서 다운로드 해준다.$ pnpm install tailwindcss @tailwindcss/vitesrc의 vite.config.ts가서import { defineConfig } from 'vi..

🍎 프롤로그UMC의 데모데이를 하게 되면 실제로 서버에서 노션으로 된 API 문서를 만들어서 줄 수도 있고, 보통은 스웨거라는 문서 등을 제공해서 이걸 활용해서 프로젝트를 참여한다. 그래서 그 스웨거 문서를 보고 프론트 개발자들은 서버가 어떠한 API 응답을 주는지 어떤한 body나 header에 어떤 것들을 담아서 요청을 보내야 하는지에 대한 것 등을 보면서 프론트 개발자들이 실제로 API 완료 이전에 개발을 하면서 꼭 서버가 다 개발이 돼야 프론트가 개발을 할 수 있는게 아니라 그것을 활용해서 목 서버 이런 것 등을 활용해서 가상 서버 환경을 구축해서 개발을 진행할 수 있다. 이를 통해 백엔드와 프론트엔드의 속도 차이가 많이 나지 않게 할 수 있다는 것을 보여주기 위한 강의이다.-> swagger를..

🍎 리액트의 동작 과정main.tsx를 보면, import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.tsx'createRoot(document.getElementById('root')!).render( ,)document.getElementById('root')! - 루트에 해당하는 아이디 값을 가져온다? 이 말은 일단 index.html 가면 root 태그가 있다. 실질적으로 우리는 자바스크립트 코드를 다운을 다 받은 다음에 루트 태그 안에 값을 넣어준다고 생각하면 된다. div id="root">div> 🍎3주차에 배웠던..

🍎 컴포즈 예제 프로젝트안드로이드 스튜디오를 실행하고 앞 장에서 만든 composeDemo  프로젝트를 연다. 프로젝트 로드 후 MainActivity파일을 더블클릭해서 코드 편집기에서 연다.그 다음, MainActivity 파일 내부 @Composable 관련 템플릿 코드를 삭제한다. 🍎 컴포저블의 계층 구조 사용자 인터페이스를 보완할 컴포저블 함수를 만들기 전에, 이 컴포넌트들 사이의 관계를 시각화하면 도움이 된다.한 컴포저블이 다른 컴포저블을 호출하면 자연스럽게 컴포저블 트리가 만들어지고, composeDemo의 메인 액티비티에 대한 컴포저블 게층 트리를 다음과 같다. -> 이 부분은 책의 28p 그림4-1을 확인해보면 된다.이 사진을 보면 ComponentActivity를 제외한 모든 요소는 ..

미션 2까지는 영상을 통해서 해결을 했고, 미션 2의 스타일 적용 같은 경우는 tailwind css를 활용하여 변경하고, 미션 3에도 추가적으로 스타일을 적용했다. 또한, MoviePage에서 useEffect를 통해 api를 호출한 내용을 참고하여 MovieDetailPage.tsx 를 생성했고, 코드가 길어짐에 따라 컴포넌트 분리를 했다. 이번 정리는 미션 3를 어떤 식으로 완료했는지 정리를 하려고 한다.더보기더보기📁 폴더 구조├── components/ │ ├── MovieHero.tsx // 영화 정보 │ ├── MovieCredits.tsx // 출연진 프로필│ └── LoadingSpinner.tsx ├── pages/ │ └── MovieDetailPage.t..

더보기영화 데이터 불러오기를 통해 데이터를 호출하는 방법에 대해서 알아보면서 그라데이션 효과를 넣은 UI를 만들어봤는데 이번에는 추가적으로 데이터를 불러올 때(데이터 용량이 클 때, 로딩 스페너를 보여준다거나 스켈레톤 UI 등) 로딩이나 잘못 불러왔을 때의 에러 처리 등을 해볼 생각이다. 추가적으로, 처음 마운트에서 useEffect가 사용되는 것은 맞지만 데이터를 불러오고, dependency 같은 의존성 배열 부분이 변경되면 useEffect가 리렌더링 될 때 다시 동작을 한다는 것을 알아야 한다. 본격적으로 실습으로 들어가보자.일단은, 기존의 MoviePage는 영화 페이지가 성공적으로 받아온다의 케이스로만 처리를 해줬었기 때문에 수정을 해줘야 한다. 📌 로딩, 에러 처리 (try-catch-..

보통 useEffect에서 에러가 발생한다. 이 부분에 대해서는 많이 신경을 써야 한다. 먼저, 스타일 적용 방식 중 tailwind css를 쓰기 위해 다운로드를 해준다.$ pnpm install tailwindcss @tailwindcss/vite그 다음, vite.config.ts에 추가해준다.import { defineConfig } from 'vite'import react from '@vitejs/plugin-react-swc'import tailwindcss from '@tailwindcss/vite'// https://vite.dev/config/export default defineConfig({ plugins: [react(), tailwindcss()],}) 그 다음 index.ts..