CodeHoon

안녕하세요 상훈입니다.

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 등으로 찾았었는데 이런 좋은게 있다니,, 감동이네요.

감사합니다.

안녕하세요 상훈입니다.

해당 프로젝트는 Vue.js, React.js 등 SPA 의 공통적인 요소이기 때문에,
SPA 프로젝트를 빌드하여 같은 오류가 난다면 마찬가지로 진행해주셔도 무방합니다.

React.js 프로젝트를 build -> nginx server 에 배포하였습니다.

그런데, nginx 서버에서 index.html 파일을 정상적으로 불러왔는데, 새로고침했을 때 404에러가 떠버렸습니다.

기본적인 빌드 환경은 다음과 같습니다.

/var/www/html/build/index.html 

그렇다. build 라는 디렉터리가 또 껴있는 것이다. 

그래서 error.log 를 줄기차게 테스트해보면서 확인해봤다.

이제 에러를 확인했으니, 고쳐야지..

*참고 : error.log 는 /var/log/niginx/error.log  에 있다.

일단 Ubuntu, Nginx 를 이용하는 입장에서만 서술하도록 하겠습니다.

 /etc/nginx/sites-enabled/default  를 수정하면 되는데, 아래 이미지처럼 수정하면 된다.

server {
	root /var/www/html/build/;
    
    index index.html
    
    #... 이하생략
    
    location / {
    	#이부분을 수정해주시면 됩니다.
    	try_files $uri $uri/ /index.html;
    }   
}

저는 저 try_files 부분에서 index.html 로만 작성이 되어져 있었기에
build/index.html 이 아닌 buildindex.html 로 uri 호출이 되었더라구요.

그래서 위와 같이 수정해주고, (sudo nano default) 저장. 그리고 서버 재시작

 sudo service nginx restart 

그리고.....

새로고침 시 해당 페이지가 다시 호출되어 화면에 렌더링 되는 것을 볼 수 있습니다.

이게 뭐라고 계속 이렇게 끙끙 앓았다니 속상하네요.

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

안녕하세요 상훈입니다.

저는 Git 관련해서 어느 정도 알고 있는 상태입니다.
현재도 사용하고 있고, 앞으로도 사용할 것이지만,
뭔가 더 자세히 알고 제대로 알고 싶어 해당 책을 신청하였고, e-book으로 받게 되었습니다.

"팀 개발을 위한 Git, GitHub 시작하기(개정판)"은 Git과 GitHub를 이용한 팀 개발의 실용성과 효율성을 깊이 있게 소개하는 도서로, 저자인 정호영과 진유림이 탁월한 접근 방식을 통해 독자들에게 이 중요한 도구들의 기능과 활용 방법을 잘 전달해줍니다. 

이 책의 강점 중 하나는 Git과 GitHub의 기본적인 이해뿐만 아니라 실제 업무에서의 적용법에 대한 지침까지 제공한다는 것입니다. 또한, 이해를 돕기 위한 시각적 요소와 실습 예제가 풍부하여 깃에 대해 잘 모르는 초보 개발자가 이론적인 지식을 실제 스킬로 전환하는 데 크게 도움이 됩니다.

기본적인 커맨드부터 복잡한 프로젝트 관리에 이르기까지, Git과 GitHub의 다양한 기능을 체계적으로 배울 수 있어 초기 사용자부터 경험 많은 사용자까지 모두 유용하게 활용할 수 있을 것입니다. 특히 팀 작업에 적합한 전략들을 상세히 설명하고 있어, 개발 팀의 효율성을 높이는데 큰 도움이 될 것이라 생각합니다.
또한 실제 업무에서의 활용 방법을 제공함으로써 독자에게 실질적인 가치를 제공합니다. 이론적인 내용 뿐만 아니라 실제 예제를 통해 개념을 구체화하는 점이 특히 인상적이었습니다.

브랜치 관리, 코드 리뷰, 이슈 추적 등 Git과 GitHub에서 제공하는 기능을 최대한 활용하는 방법을 알려주어, 독자가 팀 프로젝트를 더욱 효과적으로 관리할 수 있게 도와줍니다.

특히, 이 책은 초보자와 경험 많은 사용자 모두에게 훌륭한 학습 자료가 될 수 있을 것입니다. 초보자는 기본적인 커맨드와 사용법을 배울 수 있을 것이며, 경험 많은 사용자는 복잡한 프로젝트를 관리하고 팀 협업을 최적화하는 전략을 배울 수 있을 것입니다.

제 생각에 이 책의 진정한 가치는 개발자들이 프로젝트를 관리하고 협업하는 데 필요한 실질적인 도구를 제공한다는 점입니다. 개발자로서 프로젝트의 성공을 위해 Git과 GitHub를 효과적으로 활용하는 방법을 이해하는 것은 중요한 요소이며, 이 책은 그 목적을 충분히 달성해줍니다. 따라서 "팀 개발을 위한 Git, GitHub 시작하기(개정판)"는 모든 개발 팀에게 필수적인 자료로 추천할 수 있습니다.

결론적으로, "팀 개발을 위한 Git, GitHub 시작하기(개정판)"은 Git과 GitHub를 이해하고, 효과적으로 활용하고자 하는 모든 개발자에게 강력히 추천할 수 있는 도서입니다. 그 덕분에 개인 또는 팀 프로젝트에 대한 생산성과 협업성을 높일 수 있을 것입니다.

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

안녕하세요 상훈입니다.

지난 포스팅에서 부모 -> 자식 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분컷!" 영상 강의를 보고 작성한 글