FrontEnd85 [RN] xcode 초기 셋팅 시 시뮬레이터가 실행 되지 않을 때 https://de-code.tistory.com/3 Xcode로 ios simulator 사용하기React Native 앱 개발을 하면서 핸드폰으로만 개발상황을 확인하는 게 불편해서 가상 simulator를 설치하게 됐다. Xcode는 Mac OS환경에서만 사용할 수 있다. expo simulator 실행방법 먼저 Xcode앱을 설치한다.de-code.tistory.com해당 블로그에서 제시한 방법 순서대로 진행하더라도 6번째에서 i 키를 누르면 사용가능한 시뮬 앱이 없다는 에러 문구가 터미널에 나온다.지피티한테 물어보니 아래와 같은 에러 원인들을 제시해줬고 나는 첫번째 문제를 통해 해결할 수 있었다.이전에 시뮬레이터에 직접 접근하여 새로운 시뮬 앱을 생성할려고 할 때는 os version 에서 클릭이.. 2025. 3. 27. 모노레포의 공통 ui 컴포넌트에 tailwind 적용 안될 때 (turborepo, tawilwind) 이전 포스팅에서 공통된 tailwind-config을 생성하여 apps/web에 적용시키는 것을 학습하였다.똑같은 방식으로 packages/ui에 컴포넌트를 생성한 후 tailwind 들을 적용시킨 뒤 webs 에서 사용할려고 하는데 공통 컴포넌트에 작성해두었던 tailwind가 먹히지 않는 사례가 생겼다.packages/ui 에 tailwind config도 똑같이 적용시켰는데 안되는 것에 대해 여러 삽질을 해본 결과 apps/web/tailwind.config.ts의 content에 /packages/ui에 있는 요소들에게도 tailwind를 입혀줘야한다고 설정하지 않아서였다.즉, // apps/web/tailwind.config.jscontent: [ "./pages/**/*.{js,ts,js.. 2024. 12. 11. 모노레포로 공통 된 tailwind config를 생성하기(turborepo, next.js, tailwind) - 2024.12.11 기준 turborepo에서 제공하는 with tailwind 옵션을 통해 초기 셋팅을 한다면 tailwind-config가 자동으로 추가되지만 학습 목적을 가지고 기본 셋팅을 통해 추가해 봄. pnpm dlx create-turbo@latest --example with-tailwind( 옵션을 통해 추가하는 방법은 위 cli를 입력해주면 됨. 링크)목적 - 공통으로 쓰일 tailwind config 을 만들어서 각 패키지에 적용시키기turborepo의 공식 문서에서는 패키지 매니저를 pnpm을 추천하여 pnpm으로 진행1. turbo 전역 설치 pnpm install turbo --global2. 초기 셋팅pnpm dlx create-turbo@latest위 명령어를 실행하면 packages 와 apps .. 2024. 12. 11. Next.js에서 data를 받아오는 방식에 따른 장단점 Next.js에서 서버로부터 data를 받아오는 방식으로는 크게 5가지가 있다고 생각한다.서버 컴포넌트에서의 바로 데이터 페칭api/route.ts를 활용한 Route Handlers 사용server actions를 사용SWR 사용React Query 사용각 방식의 특징과 주의점을 우선 살펴본다1. 서버 컴포넌트에서의 데이터 페칭// app/page.tsxasync function getData() { const res = await fetch('https://api.example.com/data') return res.json()}export default async function Page() { const data = await getData() return {data.title}}이 방식을.. 2024. 12. 9. 클로저에 대해 알아보기 with useState 클로저란 실행 컨텍스트와 렉시컬 스코프의 조합으로 함수가 선언 되었을 당시에 환경을 기억하여 상위 스코프내의 변수에 접근 할 수 있게 해주는 문법이다.아래 함수를 실행해보면 10이 출력되는 것을 통해 inner 함수가 상위 스코프인 outer의 _var를 참조하는 것을 알 수 있다.이는 클로저에 의해 접근 가능한 것.const outer = () => { let _var = 10; const inner = () => console.log(_var); inner();};outer(); // 10아래 함수를 예측해보면 어떻게 출력될까const outer = () => { let _var = 10; const setVar = (newVal) => { _var = newV.. 2024. 10. 9. 브라우저 엔진의 작업 처리 우선순위 (feat. 마이크로 테스크 큐, 테스크 큐, 렌더 큐) 브라우저는 렌더링 엔진과 자바스크립트 엔진의 혼합으로 작업이 처리된다.이벤트 루프에 의해 콜 스택이 비워져 있다면 큐에 담겨진 요소들을 선입선출 순서로 콜스택에서 실행시키는데,이 때 큐의 종류에 따라 콜 스택에 담겨지는 우선순위가 달라진다. 첫 번째로 Promise가 반환하는 resolove,reject가 담겨진 마이크로 태스크 큐,두 번째로 렌더링 업데이트 요소들이 담겨진 렌더 큐마지막으로 DOM 이벤트,fetch,setTimeOut,setInterval 등이 담겨진 태스크 큐 순서로 각각의 큐에 담겨진 작업들을 콜 스택에 담은 후 처리되면 그 다음 큐, 그 다음 큐로 실행된다.따라서, 아래와 같이 코드를 작성하더라도 setTimeout의 콜백함수는 0초에 값을 줬더라도 즉시 실행되지않고 1과 3이 출.. 2024. 10. 7. [Next.js] supabase auth를 통해 next 프로젝트에 oauth 접목 시키기 (feat. Multiple GoTrueClient instances detected in the same browser context 에러) 우선 일반적으로 oauth를 구현하는 로직은 아래와 같다.1. 유저가 로그인 버튼을 클릭2. 인증을 처리해줄 sns 로그인 페이지로 이동3. 로그인 성공 시 해당 인가 서버에서는 code를 리다이렉트 url에 searchParams로 담아서 보내줌4. 리다이렉트 url에서는 받아온 code를 통해 인가 서버에게 액세스 토큰을 받아옴.5. 받아온 액세스 토큰을 통해 인가서버로부터 유저의 정보를 받아 올 수 있음supabase auth 동작은 위의 로직에서 3,4,5 를 해결해준다. 따라서 인가 서버에 등록 될 리다이렉트 url은 supabase가 제공해주는 콜백 url을 등록해줄 필요가 있다.(다음으로 펼쳐질 내용들은 kakao Oauth를 기준으로 작성 되었고, next.js를 위한 supabase 초기.. 2024. 10. 4. [Next.js] useMediaQuery 모바일/데스크탑 구분 훅 (feat. window is not defined) window.matchMedia를 사용하여 미디어 쿼리 변경을 감지하고 이벤트 리스너를 추가matchMedia 객체를 통해 매개변수로 넘어온 query에 맞춰 매치가 되는지 true false 반환현재 기본 값으로 최대가 768px인지를 판단하는 쿼리가 들어왔으므로 모바일이라면 true, 데스크탑이라면 false를 반환해준다.import { useState, useEffect } from "react";export function useMediaQuery(query: string = "(max-width: 768px)"): boolean { const [matches, setMatches] = useState(false); useEffect(() => { const getMatches = (qu.. 2024. 9. 23. [React] 카카오 api를 통해 주소를 좌표로 변환해보기 (undefinded Geocorder) 일단 페이지에 카카오 지도가 열려있다면 단순하게 kakao.maps.services.Geocoder()를 열어서 키워드를 콜백함수에 넣어주면 쉽게 나옴. 아래는 카카오 문서에 있는 예시 // 주소-좌표 변환 객체를 생성합니다var geocoder = new kakao.maps.services.Geocoder();// 주소로 좌표를 검색합니다geocoder.addressSearch('제주특별자치도 제주시 첨단로 242', function(result, status) { // 정상적으로 검색이 완료됐으면 if (status === kakao.maps.services.Status.OK) { var coords = new kakao.maps.LatLng(result[0].y, resu.. 2024. 9. 6. 이전 1 2 3 4 ··· 10 다음
