안녕하세요 상훈입니다.

맥은 윈도우와 많이 달라 윈도우만 사용하던 사람들이 처음 접하였을 때 정말 불편하고 답답합니다.

간단한 폴더명 바꾸기도 힘들고요. 

초미세먼지팁 : 윈도우 : F2     맥 : Enter    로 폴더명을 변경할 수 있습니다. 

 

Mac에서 스크린샷은 cmd + shift + 3  [3초간 누르기] 로 실행할 수 있습니다.

스크린샷이 촬영되면, 화면 우측 하단에 자그마한 아이콘으로 출력됩니다. 

그리고 그 파일을 클릭하면 사진 편집이 가능합니다.

그래도 꽤 기본적인 기능이상은 주어지니 잘 활용해주시면 됩니다. 

이상입니다.

 

추가 미세먼지팁 : 윈도우 사용자를 위해서 cmd 키와 ctrl 키의 기능을 변경할 수 있습니다. 

 -> 설정 -> 키보드 에서 변경이 가능합니다!

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

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

[ VSCode ] extension - graphQL 을 위한 extension 설치  (0) 2023.02.16
[ IT도서리뷰 ] 완성된 웹사이트로 배우는 HTML&CSS 웹디자인  (0) 2022.05.29
[ Galaxy ] 갤럭시 키보드 LED점등 사용하기, 사용하는 방법  (3) 2022.02.22
[ 후기 ] 내돈내산, Galaxy Tab S8 Ultra - 갤럭시 탭 S8 울트라  (2) 2022.02.22
Window10 에서 포트 허용하여 URL로 웹 접속하기  (0) 2022.01.28

안녕하세요 상훈입니다.

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

안녕하세요 상훈입니다.

카카오톡에 프로젝트 링크를 보내었는데, 볼품없는 링크만 뜨고 변경한 링크가 뜨지 않을 때 할 수 있는 방법입니다.

 

 

1. 카카오톡 개발자 웹사이트에 접속합니다.

 

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

 

2. 도구 > 초기화 도구 > OG 캐시 탭에 들어갑니다.

 

3. URL 부분에 본인의 웹사이트 주소를 입력하고 초기화 합니다.

카카오톡은 메신저 내부에서 캐시 처리를 합니다. 

그래서 한 번 올렸던 링크에 대해서는 이미 있는 자료를 보내었기 때문에 썸네일이 출력되지않을 수 있습니다.

위의 초기화 버튼을 클릭하면, 본인의 사이트에 대해서 캐싱처리를 전부 삭제할 수 있습니다.

 

이상입니다.

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

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

안녕하세요 상훈입니다.

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

+ Recent posts

티스토리툴바