Programming 썸네일형 리스트형 [React-Native]React-Native에서 커스텀 폰트 사용하기 (window) 일반적인 웹 프로젝트에서 웹 폰트 혹은 폰트파일을 이용하여 프로젝트에 적용시키는건 정말 쉬웠습니다. 근데 RN을 혼자 또 공부하면서 바로 적용하려다보니 웹이랑은 다르게 조금 번거로움이 있어서 나중에도 자주 쓰게 될 것 같아 기록해두려고 합니다. 1. Font File 확장자는 .ttf 프로젝트를 진행할 때 웹에서는 .otf나 .woff 를 사용했는데 RN에서는 .ttf는 Androids나 IOS등과 같이 다양한 플랫폼에서 지원이 되므로 .ttf 확장자를 사용하자... 2. Font File 위치 일반적인 웹 프로젝트에서 폰트파일은 해당 프로젝트 위치에 넣고 css 파일에 각 font-weight 별로 스타일을 지정한 후 import 시켜서 간단하게 사용했는데 RN에서는 조금 다르다. 먼저 RN 프로젝트 .. 더보기 [Windows] 사용중인 포트번호 죽이기 로컬환경에서 프로젝트를 구동하다보면 콘솔창에 해당 포트번호가 사용중이라 로컬프로젝트 구동에 실패했다고 뜰 때가 있다. 이럴 때는 해당 포트번호 사용을 종료해주면 됩니다. 1. 명령 프롬포트에서 현재 사용중인 포트번호 확인하기 - 먼저 Win + R 을 눌러서 실행 창을 열어준 후 cmd 를 입력해 명령 프롬포트를 실행합니다. 2. netstat -nao 입력하기 - 그 후 명령 프롬포트 창에 netstat -nao 를 입력하면 이런식으로 지금 사용중인 포트번호들이 출력됩니다. 3. 특정 포트번호 강제로 종료하기 해당 목록 중에서 종료시킬 포트번호를 확인한 후 taskkill /f /pid pidnumber 를 입력해줍니다. 만약 위와같이 사용중인 127.0.0.1:8081 포트를 강제로 종료시키고자 할 .. 더보기 [Linux] 리눅스 이미지 서버 CORS 세팅하기 location /images { alias 이미지파일 경로; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; } 안드로이드나 웹에서는 이미지가 정상적으로 불러와지는데 IOS에서 이미지가 불러와지지 않는 경우 해.. 더보기 [React] axios POST API 이미지와 함께 보내기 - Components const handleArticlePost = async () => { // input을 통해 이미지 등록하기 const productImages = document.querySelector('#image_file'); // 이미지가 여러개일 경우 for (let i = 0; i < productImages.files.length; i++) { formData.append('productImages', productImages.files[i]); } // 이미지파일이 아닌 일반 string 파일 추가하기 const json = JSON.stringify({ productName: title, placeName: coord.place_name, latitude: coord.lat, .. 더보기 [React-Native] spring boot 와 local에서 API 통신 시 Error React native를 개발하는 도중 API 통신을 시도할 때 처음보는 에러가 떳다... _response: "Failed to connect to localhost/127.0.0.1:8080" 라는데... 구글링을 해보니 이미 같은 상황을 겪어보신분들이 계셨다... 답은 간단했는데 axios를 통하여 API를 요청할 때 localhost:8080 으로 작성하는데 이럴 때 저런 응답값이 오는데 localhost 대신 10.0.2.2 를 사용해주면 정상적으로 값을 받아온다. 더보기 [Next.js] Next.js 13에서 pages 디렉터리 사용 시 url 값 변경해주기 {/* url에 query값만 숨겨주기 */} 링크 next/link 의 기능 중 하나닌 as 를 사용하면 사용자에게 url을 보여주는 곳 에서 state 값을 숨긴 채 노출시켜줍니다. {/* 잘못된 경우 */} 링크 하지만 위의 방법처럼 사용하면 요청하는 경로가 href의 pathname을 보는 게 아닌 as 의 경로를 바라보게 됩니다. 왜 그런건지... 아직도 공부가 부족하네요... {/* next.config.js */} /** @type {import('next').NextConfig} */ const nextConfig = { async rewrites() { return [ { source: '/:path*', destination: '/pages/:path*', }, ]; }, }; modu.. 더보기 [Next.js] Next 프로젝트 시놀로지에 배포한 척 하기 -리액트 배포는 쉬웠는데... 일단 리액트 프로젝트를 공부한답시고 시놀로지에 배포를 해본 적은 있었기 때문에 비교적 어렵지 않았습니다. React 프로젝트를 시놀로지에 배포하는 방법은 먼저 React 프로젝트를 build 하여 말아주고 시놀로지의 Docker 를 사용하여 컨테이너를 하나 만들어줍니다. 도커 생성 시 마운트 경로를 위의 사진과 같이 /home/node/app 으로 설정해 줍니다. 이 때 port 번호는 사용 할 포트번호를 입력해주고 그리고 해당 디렉토리에 위와같이 node_modules을 설정해주고 index.js 파일을 설정해주고... 같은 위치에 React build 디렉토리를 넣어준 후 Docker를 실행하면 프로젝트 배포가 됩니다. 도커를 사용하니 따로 ssh를 사용하여 nohup을.. 더보기 [Linux] 백그라운드 작업 nohup // 일반적인 프로세스 실행 시 yarn dev yarn start // nohup 을 사용하여 세션 연결이 종료되도 프로세스 실행 시 nohup yarn dev nohup yarn start // nohup 사용 시 log 파일을 남기지 않고 실행 시 nohup yarn dev 1> /dev/null 2>&1 & nohup yarn start 1> /dev/null 2>&1 & 내가 까먹지 않기 위해 기록 남기기! 더보기 이전 1 2 3 4 5 ··· 10 다음
