minnote29 님의 블로그

1. tsconfig.json 생성더보기더보기$ npx tsc --init2. App.tsx 함수 변경더보기더보기const App = () => {} → const App: React.FC = () => {}3. compilerOptionsTypeScript가 JSX를 사용할 수 있도록 설정되지 않아서 발생하는 문제 [ "message": "Cannot use JSX unless the '--jsx' flag is provided."] tsconfig.json 파일을 열고, "compilerOptions" 내부에 다음 설정을 추가-> "jsx": "react-jsx",  4. reportWebVitals.js를 ts로 변경더보기더보기$ npm install --save-dev @types/react @t..

React Native + Expo를 통해 초기세팅 진행더보기1. Node.js 설치 2. React Native 설치, Expo Cli 설치3. Expo Go 설치 1. Node.js 설치https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org  2. React Native를 쓰기 위해서 프로젝트를 생성해준다. ( My-App은 자신이 하려는 프로젝트 이름.)-> Expo Cli 설치 및 프로젝트 생성 $ npx create-expo-app My-App  3. My-App 즉, 내가 직접 만든 프로젝트 폴더로 이동한다..

타입을 지정해서 원하는 답을 AI에서 직접 얻어내기 위해 사용.   Text generation프롬프트를 사용하여 텍스트를 생성하는 방법.OpenAI는 ChatGPT를 사용하는 것처럼 프롬프트에서 텍스트를 생성할 수 있는 간단한 API를 제공한다. 프롬프트를 기반으로 모델은 코드, 수학 방정식, 구조화된 JSON 데이터, 인간과 같은 문장 등 거의 모든 유형의 텍스트 응답을 생성할 수 있다.    Quickstart텍스트를 생성하려면 REST API의 Chat Completions 엔드포인트를 사용할 수 있다. 밑 예제는 HTTP 클라이언트를 사용하여 REST API를 직접 호출하거나 OpenAI의 공식 SDK를 활용하여 원하는 프로그래밍 언어에서 사용할 수 있다.Ex. 텍스트 생성하기 (Prose 생성..

전역 상태관리를 하면, 모든 코드가 전역 상태에 접근할 수 있지만, 전역 상태로 관리됨으로써 불필요한 메모리를 사용하게 되고, 의도치 않은 상태 변경이 발생하게 되면 디버깅이 매우 어려워진다. -> 한마디로, 이미 여러 데이터가 담겨있는 상태를 불러왔는데 다시 새로고침을 하면 전부 그 데이터를 다시 불러와야 한다는 것이다. 그렇기 때문에 zustand와 react-query를 써서 상태관리를 하기 위해 store를 통해 전역 상태관리를 하려던 것을 useForm으로 유효성 검사를 하고, useController, zod, schema를 이용해서 컴포넌트 별로 상태관리를 하려는 생각을 하게 됐고, 이 글을 작성하는 계기가 됐다.  폼 형식을 간단하게 말하면 데이터들의 모음이라고 할 수 있음 -> 그렇기에 ..

SearchPage라는 폴더를 만들어 장소를 찾는 페이지를 구현했다. 일반적인 모바일 앱에서 주소입력할 때 쓰는 주소찾기 화면을 찾고 했고, 이를 확장하여, 카카오 키워드 기반 주소 검색하기&우편번호 API를 불러오는 작업을 했다. 처음에는 우편번호와 주소찾는 것을 별개로 불러와서 작업할 생각을 했는데 중복되는 코드가 있고, 화면에 제대로 나타나지 않았었다. 그렇기에 좀더 생각을 해봤고 서치를 하면서 해결책을 찾아나갔다.일단, 중복되는 일이 없게 searchZip, SearchPlace 폴더를 만들어 주고, index.ts로 파일로 api를 불러와서 처리할 수 있게 했다. searchPlace사용 라이브러리: @tanstack/react-query, axios -> 환경변수에서 KAKAO_API_KEY ..

CORS는 함축 단어로써 이를 풀면 Cross-Origin Resourse Sharing 이라는 단어로 이루어져 있다. 이는 "교차 출처 리소스 공유 정책"이라고 해석할 수 있다. 교차 출처는 엇갈린 다른 출처를 의미한다. 출처(origin) 출처는 Protocol과 Host 그리고 Post까지 모두 합친 URL을 의미한다. 아래를 통해 현재 origin을 알 수 있다.console.log(location.origin);  동일 출처 정책 (Same-Origin Policy) - SOP이 정책은 단어 그ㄹ대로 동일한 출처에 대한 정책을 말한다. -> 동일한 출처에서만 리소스를 공유.=> 동일 출처 서버에 있는 리소스는 자유로이 가져올 수 있지만, 다른 출처 서버에 있는 리소스는 상호작용이 불가능하다.출처..

변경하기 쉬운 프론트엔드 코드를 위한 지침서공용 컴포넌트를 만들기 위해 frontend fundamentals를 참고했다. 유용해보여서 따로 정리해보고자 한다. 변경하기 쉬운 코드좋은 프론트엔드 코드는 변경하기 쉬운 코드. -> 코드 변경을 쉽게 하기 위한 4가지 기준 #1 가독성코드가 읽기 쉬운 정도. 쉽게 변경하기 위해 어떤 동작을 하는지 이해하는 게 필요하다.코드 flow가 자연스러워야 한다.전략 => 중복 지양해야 한다. 맥락 줄이기: 같이 실행되지 않는 코드를 분리하고, 구현 상세를 추상화하고, 로직 종류에 따라 합쳐진 함수를 쪼개야 한다.이름 붙이기: 복잡한 조건에 이름을 붙이고, 매직 넘버( 정확한 뜻을 밝히지 않고 소스 코드 안에 직접 숫자 값을 넣는 것 )에 이름을 붙여야 한다. ex) ..