안녕하세요 상훈입니다.

VSCode를 사용하고, 저는 저장시 Html, JS, CSS Formatter 가 자동으로 돌아가도록 설정해놓았습니다.

그런데, HTML 양식에서 제가 원치않게 React, Vue 에서와 같이 html에서 하나의 태그가 있을 때 여러 속성(attribute)이 존재합니다.

그럴 때 자동으로 줄바꿈이 되는 경험이 있으실 겁니다.

React, Vue 와 같은 상황에서는 위와같이 속성값이 자동 줄바꿈이 되는 것이 보기에 좋고 편합니다.

하지만 그냥 html만 사용할 때에 속성에 의해 코드가 내려와버리면 시각적으로 보기가 불편합니다. 

마치 자바스크립트에서 무한 콜백으로 빠져버리는 것처럼요.

 

속성을 한 줄에 나열 할 수 있게 해주는 설정으로 안내해드리겠습니다.

설정하는 법입니다.

1. 설정(Setting) - 확장(Extension) - HTML 항목
2. Format : Wrap Attributes 에서 preserve 설정.
3. Wrap Line Length 를 무제한(0) 으로 설정

 

위와 같이 설정하시면, 최소한의 태그 정리만 되고, 속성이 자동으로 줄바꿈처리 되지 않습니다.

이상입니다.

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

[HTML] a 태그에 꼭 추가 해야 하는 속성(Attr)  (0) 2025.03.07
[HTML] img 태그 현명하게 사용하기  (0) 2023.05.29
[NVM] Node.js 버전 낮춰서 Nuxt.js 프로젝트 구동하기 / window  (0) 2022.11.11
[ BootStrap ] 부트스트랩 cdn 적용하는 방법  (0) 2021.10.06
[ Html ] Title 이미지(Image) / 아이콘(Icon) 적용하는 방법  (0) 2021.10.05

 

안녕하세요 상훈입니다.

과거 포스팅 내용을 확인하면 다음과 같은데, 해결이 안된 경우가 있습니다. (그게 바로 나.)

 

[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

안녕하세요 상훈입니다. 사용환경 : WindowOS, React-native, android-studio Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'. 해당 에러가 나오면서 프로젝트 시작할때 에러가..

code-hoon.tistory.com

 

환경변수 세팅을 해주었는데도 해결이 안되었다면, 아래와 같이 진행해주세요.

/android/local.properties 라는 파일을 안드로이드 디렉터리 내에 생성해주세요. (프로젝트 경로에서)

 

내부에 작성해주어야할 내용은 다음과 같습니다.

sdk.dir=C:/Users/사용자명(변경필요)/AppData/Local/Android/Sdk

※ Caution ※

경로 작성할 때 \ (백슬래쉬) 가 아니라 / (슬래쉬) 가 들어가게 해주세요.

제가 폴더 경로에서 바로 복붙하였더니 인식을 못하였습니다. 아무생각없이.....했었...는데... 눈물..

이상입니다.

 

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

드디어.... ㅠㅠㅠㅠ

반응형
저작자표시

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

ReactNative + Expo / expo start --android / 에러 해결  (0) 2022.10.01
[IT도서리뷰] 소플의 처음 만난 리액트  (0) 2022.06.26
[ React-native ] cli Doctor Tools : 리액트 네이티브 환경 상태 확인하는 방법  (0) 2022.04.08
[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.  (0) 2022.04.08
[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07

React native 에서 환경설정 중 진단할 수 있는 react-native tool 👍

npx@react-native-community/cli doctor

조음

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

반응형
저작자표시

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

[IT도서리뷰] 소플의 처음 만난 리액트  (0) 2022.06.26
[ React-Native ] Could not determine the dependencies 그렇게 했는데도 안돼? 이거 확인 바람  (2) 2022.04.08
[ 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, Vue.js ] 프로젝트의 링크 보낼 때 카카오톡 썸네일, 제목, 내용 바꾸는 방법 / how to change default thumbnail, title, content, image with link in kakkao  (0) 2022.04.06

안녕하세요 상훈입니다.

사용환경 : WindowOS, React-native, android-studio

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

해당 에러가 나오면서 프로젝트 시작할때 에러가 발생하였다.

npx react-native run-android

 

■ 해결방법

환경변수를 설정할 때 ANDROID_HOME 설정이 되지 않았을 것이다. 확인해주고 새로 만들어주면 된다.

제어판 - 사용자계정 - 사용자계정 - 환경변수 변경
사용자 변수 만들기 혹은 편집

 

변수이름 : ANDROID_HOME
변수 값 : C:\Users\사용자명\AppData\Local\Android\Sdk

 

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

 

반응형
저작자표시

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

[ React-Native ] Could not determine the dependencies 그렇게 했는데도 안돼? 이거 확인 바람  (2) 2022.04.08
[ React-native ] cli Doctor Tools : 리액트 네이티브 환경 상태 확인하는 방법  (0) 2022.04.08
[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ 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

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

안녕하세요 상훈입니다.

리액트 네이티브에서 어플리케이션을 구현할 때, 화면의 넓이, 혹은 높이를 자동으로 측정하여 사용할 수 있는 API를 포스팅하려고 합니다.

바로 " Dimesions " 라는 API 인데요, react-native의 기본 컴포넌트 중 하나입니다.

■ 사용방법

import { Dimensions } from "react-native";

// 기본형은 width, height
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");

export default function App() {
  return (
 	<View style={styles.container}>
    	<View style={styles.insideContainer} />
    </View>
  )
};

// STYLES
const styles = StyleSheet.create({
	container: {
    	flex: 1,
    	backgroundColor: 'orange',
    },
    insideContainer: {
    	width: SCREEN_WIDTH,
    }
});

이렇게 사용하시면 됩니다.

자동으로 모바일 기기의 전체 width를 탐지하고 적용. 

console.log로 찍어보면, 

console
꽉찬 가로 사이즈

 

이상입니다.

 

반응형
저작자표시

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

[ React-native ] cli Doctor Tools : 리액트 네이티브 환경 상태 확인하는 방법  (0) 2022.04.08
[ React-Native ] Error : Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.  (0) 2022.04.08
[ 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.js ] public url 경로, 이미지 경로 쉽게 잡는 방법, public-url  (0) 2022.04.05

안녕하세요 상훈입니다.

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 에서

웹 페이지에서 탭 부분의 텍스트. 즉, 웹사이트의 이름(title)을 바꾸는 방법을 포스팅하겠습니다.

예시) 티스토리 글쓰기 화면 title

 

아주 간단합니다.

해당 페이지에서 useEffect() hook을 하나 생성해주시고, title이라는 태그를 찾아 내부 html의 값을 변경시켜주시면 됩니다.

  useEffect(() => {
    const titleElement = document.getElementsByTagName("title")[0];
    titleElement.innerHTML = `나의 웹페이지 제목`;
  }, []);

getElementsByTagName으로 title이라는 tag의 첫번째 요소[0] 를 html에서 찾습니다. 

그리고 해당 요소의 내부 html의 값을 변경해줍니다. 

 

그러면 깔끔하게 바로 바뀌는 것을 확인할 수 있습니다.

 

 

 

반응형
저작자표시

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

[ React-Native ] 모바일 화면의 넓이, 높이 자동으로 가져오기 API  (0) 2022.04.07
[ React.js, Vue.js ] 프로젝트의 링크 보낼 때 카카오톡 썸네일, 제목, 내용 바꾸는 방법 / how to change default thumbnail, title, content, image with link in kakkao  (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-native ] [ Firebase ] undefined is not an object (evaluating 'firebase.apps.length')  (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

+ Recent posts

티스토리툴바