안녕하세요 상훈입니다.

React.js 프로젝트 링크를 남들에게 보낼 때, 조금 더 예쁜 썸네일과, 제목, 그리고 내용을 보내려고 할 때 유용한 미세먼지 팁 입니다.

/public/index.html 를 엽니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <meta property="og:image" content="%PUBLIC_URL%/이미지 이름을 작성해주세요" />
    <meta property="og:site_name" content="사이트 이름을 작성해주세요" />
    <meta property="og:description" content="이곳에 컨텐츠를 작성해주세요" />

이렇게 head 태그 안에 meta 태그로 작성해주시면 됩니다.

프로퍼티는 og: " " 로 작성하면 됩니다.

그리고 다시 빌드해주시고, 배포해주세요. 마지막으로 링크를 마구 보내줍니다.

이상입니다.

[ 카카오톡 전송 메시지 이미지 ]

업데이트 전
업데이트 후

이렇게 깔끔하게 카카오톡으로 링크를 전송할 수 있습니다.

 

이상입니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.  (0) 2022.04.08
[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ React.js ] 웹페이지 제목 바꾸는 방법 / How to change title of React web project  (0) 2022.04.06
[ React.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url  (0) 2022.04.05
[ React-native ] [ expo-font ] error - fontFamily "Lobster-Regular" is not a system font and has not been loaded through Font.loadAsync.  (0) 2022.03.31

안녕하세요 상훈입니다.

React.js 에서 image의 경로를 잡을 때 경로를 못잡아주는 경우가 있습니다.

이에 대비해 프로젝트의 root 경로에서 이미지의 경로를 잡아주는 방식을 소개하도록 하겠습니다.

<img src={process.env.PUBLIC_URL + `/assets/alpha.png`} alt="" />

/public/assets/alpha.png

이렇게 src 내부가 아닌 public 폴더 내의 경로일 때 사용해주시면 편리하겠습니다.

 

반응형
저작자표시 (새창열림)

'FrontEnd > React.js' 카테고리의 다른 글

[ React.js, Vue.js ] 프로젝트의 링크 보낼 때 카카오톡 썸네일, 제목, 내용 바꾸는 방법 / how to change default thumbnail, title, content, image with link in kakkao  (0) 2022.04.06
[ React.js ] 웹페이지 제목 바꾸는 방법 / How to change title of React web project  (0) 2022.04.06
[ React-native ] [ expo-font ] error - fontFamily "Lobster-Regular" is not a system font and has not been loaded through Font.loadAsync.  (0) 2022.03.31
[ React-native ] [ Firebase ] undefined is not an object (evaluating 'firebase.apps.length')  (0) 2022.03.31
[ React.js ] 유용한 리액트 라이브러리 추천 2가지  (0) 2022.03.29

 

Window10 기준으로 설명할 수 있도록 하겠다. (Mac 은 맨 아래에 링크를 첨부해놓았으니 해당 내용 확인바랍니다.)

 

지난번에 회사동료가 이와 같은 에러가 발생한 것을 보았었다.

그때는 해결못하고 git-repository에서 다시 새로 다운로드하여 진행하였는데, 현재 새로운 노트북에서 해당 에러를 직면하게되었다.

에러 문구

Permission to --/--.git denied to --. fatal: unable to access 'https://github.com/--/--.git/': The requested URL returned error: 403

 

에러 발생 환경

X 라는 git 아이디로 window에 가장 처음 사용자로 등록하였다.
하지만 Y 라는 사람이 git을 사용하고 repository에 업로드를 하려고 한다.
그때에 push 를 하였는데, 에러가 발생하였다.

이는 위에서도 나타나있듯이 Permission 문제이다.

 

해결해보자.

제어판 - 사용자계정 - 자격증명관리자 - window 자격증명 - git:https://github.com - 편집

을 해주자.

이렇게 본인의 아이디와 비밀번호를 작성하고 저장. 

이제 push를 해보면 레파지토리에 본인의 아이디로 push를 하게된다. 해결완료

이상입니다.

 

Mac 이실때 참고

 

[깃허브(Github)] 21. remote: Permission to 에러

remote: Permission to gitest01/gitest01.github.io.git denied to xxxx. fatal: unable to access 'https://github.com/yyyy/yyyy.github.io/': The requested URL returned error: 403 remote: Permission to~~..

recoveryman.tistory.com

 

 

 

반응형
저작자표시 (새창열림)

'Git' 카테고리의 다른 글

[GitLab] Personal Access Token 생성하기/방법  (0) 2022.12.01
[Git-Hub] 깃허브에 폴더가 안올라감 해결 / does not have a commit checked out  (0) 2022.11.14
[ GitHub ] Collaborator 로 지정되었을 때 Repository 들어가는 방법, How to access repository when I'm a collaborator?  (0) 2022.02.21
[ GitHub ] git personal access token 생성하여 적용하기  (0) 2022.02.15
1️⃣ Git이란? - git 요약  (1) 2022.01.01

 

querystring을 받아왔는데 JavaScript get 방식으로 값을 받아오는 방법

 

// Query String 데이터 출력
function searchParam(key) { // key를 매개변수로 받고, value를 리턴
		return new URLSearchParams(location.search).get(key)
}

함수로 생성해놓고 사용하는 것이 편합니다.

 // url =  www.example.com?page=12
 const page = searchParam('page')
 console.log(page)       // 12 출력

 

key: value 형태이다보니, key 값을 매개변수로 넘겨주어야 value가 출력됩니다.

반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

[ Chart.js ] 에러해결 ■ Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. / Canvas.js 에러  (1) 2021.12.21
[ JavaScript ] function - 목록 안의 요소들 없애기  (0) 2021.12.20
[ jQuery - BootStrap ] 에러해결 : bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6  (0) 2021.12.06
[ JavaScript ] Input 태그 내에서 엔터 이벤트 실행  (0) 2021.12.02
[ JavaScript ] EmailJS 사용하는 방법 , One way to send email easy using javascript  (0) 2021.12.02

REST API를 적용하고,
Vue.js 혹은 React.js에서 Axios를 사용할 때에 초보자는 도대체 backend 를 담당하는 파일을 어디에다가 놓아야할지 모를 경우가 생깁니다.

네 그게 바로 접니다.

환경 및 사용 : Linux (Ubuntu) , Apache , vue - cli project , php , axios

 

예시)

        axios
          .get('http://urlExample:8080/phpFileName')
          .then(function(response) {
          console.log(response);
          })
          .catch(function(error) {
          console.log(error.response.data);
          })

get 방식으로 axios를 사용해보겠습니다.

 

apache 서버는 8080포트를 기본으로 사용하고 있습니다. 이를 통해 axios를 port 8080에서 값을 요청하고 받아옵니다.

그럴 때 php 파일의 위치는 

/var/www/html/ 에 작성해야합니다.

 

추가적으로 api 폴더를 생성하여 그곳에 넣는 방법도 있습니다. ㅎㅎ

 

 

만약 이렇게 했을 때 아래와 같은 에러가 발생하면 해당 포스트를 확인해주시길 바랍니다.

 

[ PHP, Vue.js ] 에러 해결 Access to XMLHttpRequest at blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pr

Access to XMLHttpRequest at 'http://url/fileName' from origin 'http://url:port-number' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource...

code-hoon.tistory.com

 

감사합니다.

 

반응형
저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Axios - PHP, 200 response를 Error로 보내는 방법  (0) 2021.11.18
[ Vue.js ] Axios - post - php 데이터 송신방법 | REST API | 다른 포트 번호 에서 데이터 송수신  (1) 2021.11.12
[ Vue.js ] Component 등록의 2가지 방법(전역/지역) 과 번외  (0) 2021.11.10
[ Vue.js | Vuex ] Vuex 설치 에러 | npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree  (0) 2021.11.10
[ Vue.js ] Vue-cli - proxy error " Proxy error: Could not proxy request "  (0) 2021.11.09

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다.

Proxy error: Could not proxy request 

 

 

 

■ 해결 방법

해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다.

/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:8081/",
      },
    },
}

 

기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다.

 

이제는 path 문제가 남았습니다.....

 

proxy 문제가 해결된것을 확인하실 수 있습니다.

이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다.

 

 

 

 

Form Handling | Cracking Vue.js

Form 다루기 폼(Form)은 웹 애플리케이션에서 가장 많이 사용되는 코드 형식입니다. 로그인이나 상품 결제 등 모든 곳에 사용자의 입력을 처리하는 폼이 필요합니다. Form 제작하기 그럼 뷰로 간단

joshua1988.github.io

 

vue proxy 사용하기

vue cli 3.x 버전 이상에서 웹팩 개발서버를 이용해서 프록시 요청을 보내봅시다.

velog.io

 

 

 

반응형
저작자표시 (새창열림)

'FrontEnd > Vue.js' 카테고리의 다른 글

[ Vue.js ] Component 등록의 2가지 방법(전역/지역) 과 번외  (0) 2021.11.10
[ Vue.js | Vuex ] Vuex 설치 에러 | npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree  (0) 2021.11.10
[ Vue.js ] 'Axios' is not defined no-undef  (0) 2021.11.09
[ Vue.js ] Error - [WDS] Disconnected! 에러  (0) 2021.11.09
[ Vue.js ] 에러 - Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.  (0) 2021.11.09

안녕하세요 상훈입니다.

웹 개발 시 배경을 지정하여야하는데, 마땅한 배경을 지정할게 없거나, 랜덤으로 새로고침할 때마다 등장하는 배경을 찾고 싶으시다면

background-image: url( 
 https://source.unsplash.com/random/1920x1080 
)

을 사용해주시길 바랍니다. 

1920x1080은 본인의 배경 크기를 지정할 수 있습니다. 

 

 

좋네요. ㅎ

예시)

https://source.unsplash.com/random/1920x1080

 

 

이상입니다.

반응형
저작자표시 (새창열림)

'유용한 정보' 카테고리의 다른 글

[ Window ] 부팅 시 프로그램 실행하는 방법  (0) 2021.10.26
## Restful - 6가지 원칙  (0) 2021.10.05
클럭이란? - PC정보  (1) 2021.09.15
[ 갤럭시 ] 개발자 모드 켜는 방법  (4) 2021.09.12
Zoom - 녹화(record) / 저장 경로 확인 하는 방법  (0) 2021.08.31

+ Recent posts

티스토리툴바