CodeHoon

아래 명령어를 통하여 Next.js 프로젝트를 생성하려고하는데,

npx create-next-app@latest custom-project-name

아래와 같은 에러를 직면하였다.

이유인즉슨, Node Version 문제였다.

현재 사용하고 있던 노드 버전은 14.23.1 버전으로,
@latest 버전의 Next 를 사용하기에는 버전이 지원되지 않았기에 발생하였다.

그래서 어쩔 수 없이 nvm 으로 노드를 새로 다운로드 받아 버전 컨트롤을 수행하였다.

 에러 해결 완료

안녕하세요 상훈입니다.

Javascript 에서 window.location 을 이용하여 개발/테스트/운영을 구분하기 위해서 쓸 수 있는 간단한 스크립트를 소개합니다.

물론 제약사항이 존재합니다.

예를 들어 devURL, tstURL, URL 이런식으로 접두 주소를 가지고 있어야합니다.

바로 보시죠

window.location 이용하기

//개발모드 확인하기
window.location.hostname.startsWith('dev')

//테스트모드 확인하기
window.location.hostname.startsWith('tst')

이런식으로 사용할 수 있네요. return 되는 결과는  boolean 입니다 ( true / false )

window.location.hostname.startsWith() 사용하기

// hostname 가져오기
const hostName = window.location.hostname

// hostName의 값에 따라 로직 분기하기
if (hostName.startsWith('dev')) {
  return 'this is dev'
} else if (hostName.startsWith('tst')) {
  return 'this is tst'
} else {
  return 'this is prod or else'
}

이런식으로 사용이 가능합니다.

여지껏 맨날 window.location.indexOf 등으로 찾았었는데 이런 좋은게 있다니,, 감동이네요.

감사합니다.

안녕하세요 상훈입니다.

지난 포스팅에서 부모 -> 자식 v-model 값을 전달할 수 있게 코딩하는 것을 언급하였었는데,
오늘은 여러 개의 v-model 을 props 로 내려주는 내용을 포스팅 하려고 합니다.

2023.06.12 - [FrontEnd/Vue.js] - [ Vue.js ] Component 에 v-model 값 적용하기 1(이전포스팅)

필요요소: 부모컴포넌트, 자식컴포넌트

마찬가지로 부모컴포넌트와 자식컴포넌트가 필요합니다.

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
    const message2 = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  메시지2: {{ message2 }} <br />
  <CustomInput v-model:message="message" v-model:message2="message2" />
</template>

자식 컴포넌트에 v-model 로 message, message2 를 각각 내려주었습니다.

2. 자식 컴포넌트

<script setup>
  const props = defineProps({
    message: String,
    message2: String
  })
  const emits = defineEmits(['update:message', 'update:message2'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
    style="margin-top: 20px;"
  /> 
  <textarea
    :value="message2" 
    @input="updateInputs($event,'message2')"
  ></textarea>
  
</template>

defineProps 로 message, message1 을 받아오기
defineEmits 로 emit 을 설정해주기
@input 태그 이벤트에 updateInputs 메서드를 연동.  값이 변할 때마다 부모 컴포넌트로 값 상신해주기

이중에서 핵심은 @input 이벤트 태그라고 생각합니다.

v-model 을 쪼개보면 위 이미지와 같이 쪼개지는 것을 알 수 있습니다.
v-bind -> value
@input -> event (user-custom-event)

결과

코드 공유 - Vue Playground

안녕하세요 상훈입니다.

Vue.js 3 - composition API 에서 특정 컴포넌트에 v-model 값을 내려주는 방법을 포스팅하도록 하겠습니다.

필요요소 : 부모컴포넌트, 자식컴포넌트

소스 확인(링크를 통해 작성한 내용 확인이 가능합니다)

1. 부모컴포넌트

<script setup>
    import CustomInput from './CustomInput.vue'
    import {ref} from 'vue'

    const message = ref('')
</script>

<template>
  메시지: {{ message }} <br/>
  <CustomInput v-model:message="message"/>
</template>

ref 로 message 를 선언 후
v-model 과 연동하여 자식 컴포넌트에 값을 내려준다.

2. 자식컴포넌트

<script setup>
  const props = defineProps({
    message: String,
  })
  const emits = defineEmits(['update:message'])
  
  const updateInputs = (e, type) => {
    emits(`update:${type}`, e.target.value)
  }
</script>

<template>
  <input
    :value="message"
    @input="updateInputs($event,'message')"
  /> 
</template>

props: defineProps 로 message 값을 받아온다고 선언
emit:  props로 받아온 message 를 키 값으로 update:message 로 상신할 것을 선언

method: updateInputs 에서 받아온 event 를 기준으로 value 를 emit 시켜주는 것을 확인 할 수 있다.

업무 중에 이전 소스에서 emit('update:input') 이라고 선언되어있길래 처음 보고, 이해가 안되어 공식문서를 찬찬히 살펴보게 되었다.

v-model 관련하여 문서를 찾아보게 되었고, component v-model 이라는 곳에서 확인할 수 있었다.

내용은 제대로 익히기 위해 playground에서 작성하였다.

Vue.js 공식 문서를 보고 작성한 내용입니다.

그간 slot 의 존재는 알고 있었지만,
컴포넌트에 대한 이해력 부족으로 + 알아보기 귀찮음으로 학습을 하지 않고 미뤄왔던 내용 중 하나였다.

Slot

1. 간단하게 생각해서 버튼 내에 작성할 내용을 대체할 수 있다고 생각하면 편하다.
2. 좀 더 나아가서, 특정 태그 내에 특정 컴포넌트 등을 삽입할 수 있다. 

1. 버튼에 slot 적용해보기

// 1. slot 을 작성한 버튼 컴포넌트
<template>
  <button type="submit">
	<slot>this is replace context</slot>
  </button>
</template>

// 2. 위에서 작성한 컴포넌트를 활용
<template>
  <!-- slot에 작성하였던 내용을 그대로 노출하게 된다. -->
  <SubmitButton />
  
  <!-- 내가 작성한 내용이 있을 경우 slot이 대체된다. -->
  <SubmitButton>저장할겁니다</SubmitButton>
</template>

2. 컴포넌트도 slot 내부에 넣을 수 있다.

// 또 다른 컴포넌트 생성
<template>
  <div>
    두 번째 컴포넌트입니다.
  </div>
</template>

// 위에서 생성한 컴포넌트를 상위 컴포넌트에서 slot내에 추가
  <SubmitButton>
    <Comp />
    저장할겁니다
  </SubmitButton>

이렇게 새로운 컴포넌트를 생성하고,
Button 컴포넌트 slot 에 추가한 컴포넌트를 포함시킬 수 있습니다.

이상입니다.

해당 내용을 공부하다보니, 리액트에서 props로 내려주던 text 부분을 slot으로 교체가 가능하겠다는 생각에 도달하였다.

기존에 사용하던 props의 개수를 줄이고 좀 더 가변적이고 다양한 모습의 코드를 짜도록 노력해야겠다.

프로젝트 도중에 custom-emit 관련한 내용을 살펴보던 중 이렇게 slot을 발견하고 이해할 수 있어서 너무 다행이라는 생각이 듭니다.오늘도 하나 배워갑니더.

html 관련 img, pictrue tag 에 대해 간략 서술하기

1. <img> 

로딩 속도를 지연시켜, 사용자가 바라보고 있는 화면에만 img 를 로딩시킨다. 
-> 초기 로딩속도를 높여준다.

<img loading="lazy" />

<img srcset="img-small.png 500w, img-md.png 1000w, img-large.png 2000w"
    sizes="(max-width: 600px) 400px, (max-width: 120000px) 800px, 1400px"  
    src="img.png" 
/>

2.  <picture> 태그를 사용하는 것

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

니꼴라스의 "웹사이트 로딩이 더 빨라지는 매직? 🍯 꿀팁 공유 10분컷!" 영상 강의를 보고 작성한 글

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

안녕하세요 상훈입니다.
이번 달 한빛미디어-나는리뷰어다 에서 제공 받은 도서는 소문난 명강의 : 김범준의 핸즈온 리액트 네이티브 입니다.

리액트에 대한 관심과 공부 시간이 어느 정도 들어간만큼 기초적인 리액트에 대한 개념은 안 상태로 이 도서를 전자책으로 얻게 되어, 작성하였습니다.

🙄 어느 정도 수준의 책인가요?

책 소개에서도 언급이 되었지만, 이 도서는 초급 수준의 리액트 네이티브 개발을 한다고, 말해주고 있습니다. 

그러나, 찬찬히 살펴면 어느 정도 개발을 하셨던 분들도 보시면 중간중간에 도움이 될 만한 내용들이 많이 있는 것 같습니다. 추천드려요!

🎆 목차

간략한 목차부터 말씀드리자면, 이 책은

1. Expo, React-Native, Node.js 등 기초 요소 설명
2. 프로젝트1 : 계산기
3. 프로젝트2 : TodoList
4. 프로젝트3 : 여행 사진 공유 앱 만들기 

로 구성되어져 있습니다.

🚩 Prettier, EsLint 

첫 번 째 챕터인 Expo, React-Native, Node.js 등 기초 요소 설명 부분에서 좋았던 부분은 Prettier, EsLint 를 어느정도 이해할 수 있게 설명해준 부분이었습니다.
예전부터 Prettier, EsLint 는 프론트엔드 개발자들을 꽤 속썩이는 역할을 하고 있었거든요. (물론 주관적인 견해입니다.)

저 또한 Prettier, EsLint 때문에 골치 아팠던 적이 한 두 번이 아니었는데, 우연찮게도 이를 어느정도 설명해주어 덕분에 Prettier, EsLint 에 대해 좀 더 알게되었습니다 😎

🚩 Expo

그리고 리액트 네이티브 개발 공부를 조금이라도 해본 사람이라면 모두 알고있는 Expo.

이 책 또한 편의성을 중점적으로 Expo를 사용하여 앱 개발의 초석을 만들었습니다.

덕분에 오랜만에 Expo를 다시 깔게 되었네요.

🚩 첫 번째 프로젝트 : 계산기

1. prop-types 라는 라이브러리를 처음 알게되었습니다.

npm i prop-types

TypeScript 처럼 javascript 에서도 타입을 명시하여 사용할 수 있게 해주는 라이브러리더라구요.
매우 유익했습니다!

그리고 계산기 앱을 한 개 만들어본 결과 느낀점 🚀

책을 받고 시간이 부족해 기간 내로는 클론 코딩이 어려울 것 같아 계산기 앱까지만 만들고, 리뷰를 시작하게 되었다.

React.js 를 사용하던 사람은 React-Native 를 확실히 조금만 더 공부하면 바로 사용할 수 있다.

React-Native 에 해당하는 새로운 컴포넌트 등이 많기에 그렇게 바로바로 사용할 수는 없다.

이 책은 하나하나 상세한 내용을 만들어주고, 전체적으로 오타도 거의 없는 것 같아 좋았다. 여러 개발 관련 도서들은 오타가 워낙 많아 오류도 많이 발생하게 되는데, 이 책은 그런 경우가 없었던 것 같다. (아닐 수도 있음..)

⚡ 제가 드리는 별점은요

⭐⭐⭐⭐⭐ 5개 드리겠습니다. 추천드립니다!

리액트 네이티브를 사용하고 싶으신 프론트엔드 개발자라면, 입문서로 봐도 무방하겠다는 생각이 들었습니다.

이상입니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."