CodeHoon

안녕하세요 상훈입니다.

해당 프로젝트는 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분컷!" 영상 강의를 보고 작성한 글

안녕하세요 상훈입니다.

현재 동작중인 포트를 확인하고, 종료하는 방법에 대한 포스팅을 하겠습니다.

Window 기준으로 작성하였습니다.

0. Wind + R  -> cmd 창을 켜줍니다.

1. 8080포트를 찾기

netstat -ano | findstr 8080

2. 찾은 포트의 pid 를 입력하여 삭제

taskkill /F /pid [pid]

이상입니다.

최근 spring 프로젝트를 자주 기동하게되었는데, IDE를 그냥 종료했을 때 (InteliJ) 같이 종료되지 않더라구요. 그래서 자주 찾아보다가 메모를 남깁니다.

에러 내용은 아래와 같습니다.

Identify and stop the process that's listening on port 8080 or configure this application to listen on another port.

자주 참고