기술 블로그

테스트때는 모르지만 vercel과 같은곳에 배포해보면 스타일드 컴포넌트(이하 sc)의 딜레이 때문에 쌩 html이 보였다가 사라짐을 알 수 있다. 이러한 문제를 해결하기 위해 sc의 ssr 설정을 해줄 필요가 있다. 1 바벨 플러그인 sc 설치 npm i -D babel-plugin-styled-components 2 root 디렉토리에서 .babelrc 작성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] } 3 pages 디렉토리에 _document.js(tsx) 작성 import Document from 'next/docu..

useRoute를 사용했을 때 route.qurey가 바로 반환되는 것이 아닌 딜레이가 생겨 백으로 get 요청을 제대로 보내지 못할 때가 있다 useEffect는 router의 딜레이를 기다려주지 않기 때문에 결국 post/1 이 아닌 post/undefined 로 요청을 보내는 문제가 있었다. hooks는 컴포넌트 최상위에 위치해야해서 이펙트에 담을 수 없다 해결법은 router.isReady 메서드를 담을 변수를 만들어 로딩을 판별하고 useEffect의 두번째 인자로 위 로딩 감시 변수를 넣어 감시한다 아울러 jsx부분에서도 위와 같은 플레그를 활용하여 예외 처리한다.

키워드 : next.js, proxy , dynamic route (url) 프로젝트 중 위와 같이 동적 라우팅을 했을 때 적용이 되지 않고 403이 뜨는 이유가 있었다. 이유는 프록시 적용 때문이었으며 답은 공식문서에 나와있었다 다이나믹 라우팅을 프록시 주소가 아닌 프론트단 주소에 적용하고 싶다면 next.config.js 폴더 안에 rewrite 함수 리턴을 위와 같이 fallback을 명시하여 재작성 해주면 된다.

1. 최상위에서만 hooks를 호출할 수 있다. 반복문 중첩문안에서는 호출이 불가능핟. 2. React 컴포넌트 내에서만 호출이 가능하다.

import * as Location from 'expo-location' expo-location 전체를 Location 이름으로 가져온다 . bare에서는 추가 설정이 필요하다 const {status} = await Location.requestForegroundPermissionsAsync(); status 값은 성공시 'granted'로 넘어옵니다. 현 위치에 대한 정보를 얻고자 한다면 //현 위치 정보 얻기 const locationData = await Location.getCurrentPositionAsync(); const lati = locationData['coords']['latitude']; //위도 const long = locationData['coords']['longitud..

creatStackNavigaton()으로 반환받은 컴포넌트에 적용 가능한 속성들 - screenOptions: 스타일 관련 속성 cardStyle, headerStyle, headerTitleStyle, headerTitleAlign 등을 객체로 지정 - options:타이틀 명 등 관련 속성 headerTitle등을 객체로 지정

https://jaegwan.kim/56 친구 모바일 청첩장 백엔드 계획 조건 disqus등의 솔루션 사용 불가 빠르게 개발 예쁜 도메인 개발 선택 Spring mvc sts mysql 서버 선택 적절한 트래픽 제공 저렴한 가격 커스텀 도메인 heroku https://parkbongil.github.io/heroku-spring-boot/.. jaegwan.kim 지인 부탁으로 모바일 청첩장을 만들었고 3가지 문제가 있었다. 1. 개발 학부 수업에서 스프링부트 mvc로 배운게 다 인지라 주먹구구식으로 수업자료를 활용해 만들었다. 내가 담당한 부분은 모바일 청첩장의 방명록 백엔드 구현이었다. db제작부터 백엔드 연결까지 모두 생소하여 시행착오가 많았다. 페이지네이션을 구현하면서 다음 페이지시 새로고침과 ..

웹 컨테이너(WAS)가 실행되면서 DB와 미리 connection(연결)을 해놓은 객체들을 pool에 저장해두었다가. 클라이언트 요청이 오면 connection을 빌려주고, 처리가 끝나면 다시 connection을 반납받아 pool에 저장하는 방식 대부분의 백 서비스들은 커넥션 제한을 두고있다. 그렇기에 자원을 효율적으로 활용해야 되므로 연결 풀링이 필요하다. spring boot mvc 에서 적용 방법 application.properties = spring.datasource.hikari.username=afnoxcv94pt2vmxs spring.datasource.hikari.password=igmvtai8x5nc484h spring.datasource.hikari.maximum-pool-size=..

1. 전역 this global객체 (window)등을 가리킴 2.함수 내 this 함수의 주인인 객체에 바인딩 디폴트 바인딩이 없다면 window strict모드에서는 undefined 3.객체 내 함수(메서드)에서 this 함수의 주인인 객체를 가리킴 4.이밴트핸들러 안에서 this 이밴트를 받는 요소를 가리킴 5.함수가 생성자로서 쓰여질때 함수내 this new키워드로 함수를 불러오면 그 함수는 생성자 함수가 된다. this는 함수를 생성하는 객체로 바인딩 6.화살표 함수로 쓴 this (함수 안에서 사용하는데 window객체로 바인딩하기 싫을 때) 생성자 "함수내의 함수"의 this는 전역객체로 바인딩된다 화살표 함수 내의 this는 부모 함수나 클래스의 this를 바인딩한다. 7.명시적 바인딩을..

조건 disqus등의 솔루션 사용 불가 빠르게 개발 예쁜 도메인 개발 선택 Spring mvc sts mysql 서버 선택 적절한 트래픽 제공 저렴한 가격 커스텀 도메인 heroku https://parkbongil.github.io/heroku-spring-boot/ (:heroku spring boot 배포) Heroku 가입부터 Spring Boot 배포까지 Java Web Application을 가볍게 테스트하기 좋은 PaaS(Platform as a Service)인 Heroku에 Spring Boot로 배포해본다. DB도 무료로 제공하니 연결해보고, hello world만 찍어보면 심심하니까 Bing 배경화면 API와 과 Google parkbongil.github.io https://hayd..