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.

자주 참고

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

안녕하세요 상훈입니다. 
이번에 리뷰하게 된 도서의 제목은  [ FastAPI 를 사용한 파이썬 웹개발 ] 입니다.

주로 React.js, Vue.js 를 이용한 SPA 의 프론트엔드 개발을 하다가 우연히도 발견한 FastAPI 를 사용한 파이썬 웹개발 책이 리뷰어 리스트에 있길래 냉큼 신청하였습니다.

이 책의 첫번째 좋은 점!

일단 저는 Docker에 관심은 있었지만 최근 1년 이상 건드려본 기억이 없어서 어떻게 해야할지도 감이 없는 상태였습니다.
그런데 이 책에서 virtualenv (가상환경설정) 를 간단하게 설명해주어, 스스로 검색하여 찾아보고 가상환경을 세팅해주고, 이어서 도커 사용을 하였습니다.

그다음으로는 pip 관련 기초 명령어를 통해 설치 후 진행하게 되는데, 만약 설치가 안되어 있으시다면, 아래 링크를 통해 설치해주시길 바랍니다.

https://pip.pypa.io/en/stable/installation/

이하 자세한 내용이 있지만, 사이드프로젝트와 본업이라는 변명으로 계속 개발을 못하고있음에 부끄럽지만 전부 읽어보지 못하였습니다.

웹개발은 거기서 거기다! 라는 말을 예전에는 무슨 소리야? 라는 생각이 있었는데, html, php, java, vue.js, react.js ... 등등을 경험하면서 느낀 바는 진짜 유사하다는 것을 느꼈습니다.

페이지를 이동할때는 항상 % router % 관련된 메서드를 호출하고 parameter 를 넘겨주어 설정하더라구요.

파이썬 또한 비슷하게 사용하였습니다.

router = APIRouter()
@router.get('/') ...

마치 node.js 에서 사용하는것과 거의 동일하게 보였습니다!

요즘 웹개발 트렌드인지 모르겠지만, 상당히 유사하였으며 코드 자체가 수월하게 눈에 읽혔습니다.

오류처리

모든 웹어플리케이션을 비롯한 어플리케이션들은 필수적으로 오류처리를 해야합니다.

그 중에서 이 책에서는 404 not found 에 대한 내용에 대해 간략하게 서술해주어서 더 좋았습니다. 에러처리를 직접해주는 도서가 흔하지 안더라구요.

raise HTTPException(
    ....
)

이렇게 작성하게 되는데, 마치 자바에서 Interceptor - Error Exception 을 출력할 때의 모습과 유사했습니다.

Todo List 구현

그리고 위와 같은 여러 과정들을 거쳐 구현하게 된 Todo List!

놀랍게도 DB 를 만드는데 있어 *.py 를 사용하더라구요?

지금까지 모든 언어들을 접하면서 db 구성은 erd 통해서 ~ 어쩌구~ 저쩌구 작성했었는데, FastAPI의 방식인지 파이썬의 방식인지 모르겠지만 python 파일을 만들고 쓸지 전혀 예상하지 못하였습니다.

그리고 구현 후 swagger-ui 와 비슷하게 생긴 인터렉티브 문서를 통해 확인까지. 3박자가 고루 갖춰진 내용이었습니다.

덕분에 파이썬으로 웹개발을 해보는 귀한 경험을 해보았습니다.

이상입니다.

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

안녕하세요 상훈입니다.

Spring, MyBatis 에서 여러 가지의 쿼리를 만들어놓고 부품처럼 이거 쓰고 저거 쓰고 할 때 사용하는 방법입니다.

1. 메인 기능 설정

<select id="selectListPage" 
    parameterType="a.b.c.ABCDTO"			
    resultType="a.b.c.ABCDTO"
    >			
        <include refid="COMMON.pagingPreSQL" />
        <include refid="listPage" />
        <include refid="COMMON.pagingPostSQL" />
</select>

여기서 주의할 점!

include refid = "" 작성시,

1. 같은 파일 내의 쿼리를 작성하면 listPage 와 같이 작성.
2. 다른 파일 내의 쿼리를 가져다가 사용하려면, 해당 mapper 의 namespace 를 체이닝으로 작성해주세요. COMMON.pagingPreSQL 와 같이 작성

2. 각 기능 설정

/*기본 목록 조회 */	
<sql id="listAdmUserBas"	>			
    SELECT USER_ID	/* 사용자아이디 */
         , DESIG_IP	/* 지정IP주소 */
         , USER_PWD	/* 사용자비밀번호 */
      FROM 테이블명	
     WHERE 1=1	
    <if test='userId != ""'> <!-- 사용자 아이디가 있을 경우 -->
        AND USER_ID LIKE CONCAT('%',#{userId},'%')
    </if>
    <if test='desigIp != ""'> <!-- 지정 아이피가 있을 경우 -->
        AND DESIG_IP LIKE CONCAT('%',#{desigIp},'%')
    </if>
    <if test='brofcCd != ""'> <!-- 코드가 있을 경우 -->
        AND BROFC_CD LIKE CONCAT('%',#{brofcCd},'%')
    </if>
</sql>

각 기능을 담당하는 쿼리는 메인 쿼리로직과는 다른점이 있는데요,

1. 각 기능에 대한 쿼리는 모두 <sql> 태그로 설정
2. parameterType, resultType 을 작성하지 않습니다.

이상입니다.

도움이 되셨다면, 여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

안녕하세요 상훈입니다.

✔️ What To Do?

자바 (Java) 에서 비밀번호를 검증하는 공통코드를 작성하려고 합니다.

비밀번호 정책에 따른 비밀번호 검증
[ 영문대문자, 영문소문자, 숫자, 특수문자 ]  4종류 조합으로 생성하도록 한다.
   ㄴ 2종류 조합시 10자리 이상, 3종류 조합시 8자리 이상으로 한다.

//패턴
private static final String PATTERN_SPECIAL_CHAR = "[!@#$%^&*()+=-]";
private static final String[] PSWD_COMBI_PATTERNS = {"[0-9]", "[a-z]", "[A-Z]", PATTERN_SPECIAL_CHAR};
//길이
private static final int PWSD_COMBI_2_MIN_LENGTH = 10;
private static final int PWSD_COMBI_3_MIN_LENGTH = 8;
    
/**
 * @param pswd 입력한 비밀번호
 * @return 검증 여부 (성공: true, 실패: false)
 */
private static boolean isValidByPasswordPolicy(@NonNull final String pswd) {
    int matchCnt = 0;
    for (String iter : PSWD_COMBI_PATTERNS) {
        Pattern pattern = Pattern.compile(iter);
        Matcher matcher = pattern.matcher(pswd);
        if (matcher.find()) {
            matchCnt++;
        }
    }

    if (matchCnt == 2 && PWSD_COMBI_2_MIN_LENGTH <= StringUtils.length(pswd)) {
        return true;
    } else if (matchCnt >= 3 && PWSD_COMBI_3_MIN_LENGTH <= StringUtils.length(pswd)) {
        return true;
    }
    return false;
}

이상입니다.

여유롭게 커피 한 잔 사주시면 감사합니다~

Buy me a Coffee ☕

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

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

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

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

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

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

🎆 목차

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

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개 드리겠습니다. 추천드립니다!

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

이상입니다.

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