• alt + shift + f: 소스자동정렬
• alt + shift + o: remove unused import
• ctrl + g: 특정 행으로
• ctrl + (+)/(-): Zoom in/out
• ctrl + /: commentize

IFNULL 함수

• oracle) nvl
• mysql) IFNULL
• PostgreSQL) COALESCE 함수로 사용

string->integer

• postgreSQL) ::INTEGER

ordering

• alphabetical
• numeric
  • order by REVERSE(SPLIT_PART(REVERSE(RECIPE_PARAMETER_ID), REVERSE('RP'), 1))::INTEGER

JS

remove white space

https://codingbeautydev.com/blog/javascript-remove-all-spaces-from-string/
str.replace(/ /g, '')): To match and remove whitespace characters (spaces, not tabs and not  newlines)
str.replace(/\s/g, ''): To match and remove all whitespace characters (spaces, tabs and newlines)

\s

스페이스, 탭, 폼피드, 불 바꿈 문자등을 포함한 하나의 공백 문자와 매칭됩니다.

([ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)

/\sbar/는 "foo bar"의 " bar"에 매칭됩니다.

 \S

공백이 아닌 하나의 문자와 매칭됩니다.

([^ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000] 와 동일)

/\S+/는 "foo bar"의 "foo"에 매칭됩니다. (가장 먼저 오는 공백아닌 문자열)

/g 전역검색의 의미

g 플래그를 이용하여 매칭되는 모든 문자열을 가져올 수 있습니다. 만약 g 플래그를 사용하지 않는다면 처음으로 매칭되는 값만을 가져오게 됩니다.

출처: https://beomy.tistory.com/21 [beomy:티스토리]

예제)

• 핸드폰번호 정규식 var regExp = /^\d{3}-\d{3,4}-\d{4}$/;
• 일반 전화번호 정규식 var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
• 비밀번호 정규식
• 특수문자 / 문자 / 숫자 포함 형태의 8~15자리 이내의 암호 정규식
  • var regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
• 숫자와 문자 포함 형태의 6~12자리 이내의 암호 정규식
  • var regex = /^[A-Za-z0-9]{6,12}$/;
• 이메일 var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

- / / 안에 있는 내용은 정규표현식 검증에 사용되는 패턴이 이 안에 위치함
- / /i 정규표현식에 사용된 패턴이 대소문자를 구분하지 않도록 i를 사용함
- ^ 표시는 처음시작하는 부분부터 일치한다는 표시임
- [0-9a-zA-Z] 하나의 문자가 []안에 위치한 규칙을 따른다는 것으로 숫자와 알파벳 소문지 대문자인 경우를 뜻 함
- * 이 기호는 0또는 그 이상의 문자가 연속될 수 있음을 말함

문제현상)

• vsCode > fetch시 다음에러 발생 This repository has no remotes configured to fetch from.
• vsCode > 다시불러오기 아이콘 클릭시 No remotes found in the git config file.
• vsCode > 마우스오른쪽버튼눌러 gitHistory 보기 클릭시

backend는 성공 -  vscode > git history

근데 왜 frontend는 실패? vscode > git history (branch가 main으로 잡히는 것이 문제인듯)

vsCode에서뿐 아니라 gitBash에서도 frontend소스만 자동으로 main이라는 브랜치로 잡힘

https://git.cj.net/에서 branch 확인시

main이라는 브랜치가 있기는 한데, 유휴상태인듯

• Active branches: develop
• Stale branches: main (3개월간 작업이 없는 브랜치)

참고로 stale brach삭제하려면

git remote prune origin

문제해결)

숨김폴더 보기해서 .git상태 확인해보니 

•  factoryone-farmos: .git 있음 
  • factoryOne-FARMOS(backend): .git없음
  • farmos-web-app(frontend)  .git있음 -> 없앴더니 해결됨

DROPDOWNS

https://www.syncfusion.com/react-components/react-combobox

<!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}-->

공부할 것들

• 크롬 인스펙터의 더 상세한 사용법
• ide 사용법
• test자동화
• await, async
• node, npm
• webpack, babel
• 스타일링과 css
• 구조와 아키텍쳐 - MVC, MVVM
• 타입스크립트 - 객체지향 적용
• 함수형과 객체지향형 --> 고민에 대한 해결, 감탄을 해보고 싶음
• controlled vs uncontrolled 의미와 차이는?
• useEffect 여러개 쓸때 불필요하게 api 중복요청함
(emulate 페이지 최초진입시 result api중복요청 why? how improve?)

당근마켓 면접질문
RDB특징 - transaction 구현 - redo, undo log이용
JVM구조 - outOf memory의 발생과정과 해결법
서버가 뻗는과정
RDB cluster성능이 더 안좋은 이유
Javascript와 java의 aync차이
Hibernate, jdbc차이
DB, 서버 1대인데 request가 1row만 접근하는 get post request가 계속 들어와서 뻗을때 어떻게 해결할까?

사이드 프로젝트 아이디어

• 팀 구성원 업무 장표 자동생성
• 역할분담 추첨
• json응답구조 한번에 보여주는 UX
• ftp file 자동다운로드, 파싱, 검색

스타트업이 대기업에 비해 나았던 점
• frontend무시(외주 주면 되는 일, 외주를 주더라도 알고 주는 것과 모르고 주는 것 천지차이), 그로인한 무지, 특히나 모던자바에 대해 (장 단점 모두 존재) -> 가끔 리더참여 있으면 일이 더 복잡해지고 힘들어짐(리더가 일을 방해) -> 리더의 개발능력
• 어차피 지켜지지 못할 룰 설정 안하는 것- by 리더
• 비효율적 절차(agile의 오해, 스프린트, worklog), 대기업 특유의 절차? 주간보고(자유도는 아님..), 답답함을 느낌
• 보안간편(but 생각보다 큰 장점이 아님)
• 특허, 아이디어 챌린지 없음
• 제조회사 -> 좀 더 SW적인 회사(?)

비슷비슷한 점
• 일에 대한 관심/애정, 더 나은 것에 대한 진지한 고민?, but 일에 대한 얘기자체를 안함
• 대화없고 일방적...(모니터 선택부터도)
영어이름 왜 쓰는지 수평적이려면 정보공유도 더 많이 되고 함께 방향설정도 해나가야

스타트업이 대기업에 비해 더 안 좋았던 점
• 공유부족
• 공부/정리할 시간과 자유도 오히려 부족: 남의 코드를 보는 것 자체에 대한 시간 + 클래스형 익숙해지기, 환경적 변화(e,g gerrit>gitHub, jira차이..)

장점인지 단점인지 모르겠지만 아무튼 차이나는 점
• 혼자 back,front 다 하다가 frontend에만 집중할수 있었던 점

So?
• 신뢰를 바탕으로한 더 많은 자유/권한과 책임 -> 시간에 대한 자유 뿐 아니라 기술, 선택에 대한 자유
-> 잔소리는 소용이 없다, 변화에 대한 motivation이 내면에서 나와야함
맨땅에 헤딩, 삽질도 해보면서 부딪혔던 경험 -> 가장 성장
• 절차/프로세스가 없다?
- 업무 배경/로드맵 설명 더 자세히
- 전체 consensus를 바탕으로 한 가이드라인 공유(강제적 rule아님)
- 리더 업무 설명
- 리더의 역할: 방향설정 큰그림제시
* 업무시간 예상? 그게 가장 중요역량 중 하나? 압박용도구는 아닌지, 더 열심히 일하게 하는 도구? 접근방향부터 달라야한다고 생각

==> 결론은? 사람 (사람에 대한 이해와 배려, 존중, 애정-회사에 바라지는 않음, 동료,선후배, 리더)
결국 배움과 motivation은 사람으로부터.
거기에 대한 고민이 있는가?

==> 결론2 오래는 못다닐듯

댓글에 이미지추가하는 기능사용하고자 이리저리 검색해봤으나 방법을 찾기어려웠다.

그러다가  미넴스킨에서 댓글 이미지 추가 기능제공하는 것 발견,

그러나 스킨만 적용한다고 자동으로 되는 건 아니고

이미지 업로드 api를 사용하기 위해 clientId와 secret을 발급받아 등록을 해줘야만 한다.

https://sangminem.tistory.com/823

해서 댓글 이미지 기능은 잘 추가되었으나

모바일에서는 해당 스킨이 적용이 안되어서 이 부분도 설정에서 모바일 자동연결 설정을 해제해주어야 한다는 말을 듣고 실행 -> 그래도 안되길래 절망 ㅠㅠ 했으나 한참 뒤에 다시 해보니 되었다. 아마 뭔가 캐시가 있어 바로 스킨 반영이 안되었다 보다.

암튼 결론은 미넴스킨 적용으로 잘 해결됨~^^

https://apidocs.imgur.com/

Client ID:efce2a71a50cf04
Client secret:77f9711562230ebe8b4a7352e4fcf953295bcc53

https://blueshare.tistory.com/216

동적으로 움직이고 화면탑에서는 사라짐, 화면첫진입시 없다가 스크롤 내려면 생성 - 가장 이상적

https://smokyred.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%A8-%EC%9C%84-%EC%95%84%EB%9E%98%EB%A1%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4-%ED%95%B4%EC%A3%BC%EB%8A%94-%EB%B2%84%ED%8A%BC-%EB%A7%8C%EB%93%A4%EA%B8%B0

맨위로 맨아래로 둘다 방법있음

위 두정보 참고해서 최종적용한 버젼: <body> 태그 제일 아래에 위치해야 함, 이거때문에 안되서 오래 삽질ㅠ

<script>
    $(function(){//맨위로 버튼 
        //$("#btnTop").hide();
        $(window).scroll(function(){
            if($(this).scrollTop() > 100){$("#btnTop").fadeIn();}
            else{$("#btnTop").fadeOut();}
        });
    });
    //var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
    $(function() {//맨아래로 버튼
      //$('#btnBottom').show();
			$(window).scroll(function(){
            if($(this).scrollTop() >= $(window).height()){$("#btnBottom").fadeOut();}
            else{$("#btnBottom").fadeIn();}
        });

      $("#btnBottom").click(function() {
        $('html, body').animate({
          scrollTop: $(document).height()
        }, 400);
        return false;
      });
    });
  
</script>
<a href="#" id="btnTop" style="display:none;position:fixed;bottom:130px;right:20px;z-index:9999" title="맨위로">
<img src="./images/ScrollToTop.png" width='50px' height='50px'/></a>
<a href="#" id="btnBottom" style="display:none;position:fixed;bottom:85px;right:20px;z-index:9999" title="맨위로">
<img src="./images/ScrollToBottom.png" width='50px' height='50px'/></a>
</body>

Book club 스킨에 있는 코드

이와 같이 footer에 고정되는 스타일, 스크롤함에 따라 동적으로 움직이지는 않음

<footer id="footer">
		<div class="inner">
			<a href="#" class="page-top">TOP</a>
		</div>
	</footer>

#footer .page-top {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	border: 1px solid #eee;
	border-radius: 50%;
	background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
	text-indent: -999em;
}
#footer .page-top:focus,
#footer .page-top:hover {
	background-color: #757575;
	background-position-x: -150px;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
	#header .util .search:before,
	#header .util .search button,
	#footer .page-top,
	.cover-thumbnail-3 button,
	.cover-thumbnail-4 button,
	.page-nav a strong:after,
	.entry-content .protected_form h2:before,
	.comment-list ul li .author-meta .control button,
	.comment-form .secret input[type=checkbox]:checked+label:before,
	.sidebar .social-channel ul li a,
	.sidebar .tab-ui h2 a:before {
		background-image: url(./images/ico_package_2x.png);
		background-size: 200px auto;
	}
	.post-item.protected .thum:before {
		background-image: url(./images/ico_package_2x.png);
		background-size: 120px auto;
	}
}

https://tistory.github.io/document-tistory-skin/common/global.html

글쓰기 관리 링크

<div class="widget search text-center" > <!-- 글쓰기 관리 -->
<!--<ul>-->
    <a href="https://symn.tistory.com/manage/entry/post"  style="color:#e9ecef;">글쓰기</a>
    <a href="https://symn.tistory.com/manage"  style="color:#e9ecef;">관리</a>
<!--</ul>-->
</div>

페이징

<div id="paging">
<s_paging>
    <a  class="prev ">
        PREV
        <span class="screen_out">
            이전
        </span>
    </a>
    <s_paging_rep><a class="numbox" ></a></s_paging_rep>
    <a  class="next ">
        NEXT
        <span class="screen_out">
            다음
        </span>
    </a>
</s_paging>
</div>

방문자수 (어제/오늘/총)

			<s_sidebar_element> <!-- Counter -->
			<div class="widget counter text-center">
				<span class="yesterday"></span> /
				<span class="today"></span> /
				<span class="total"></span>
			</div>
			</s_sidebar_element>

관련사이트 dropdown 메뉴 (footer에 주로 위치) 특정스킨에서만 정상동작

          <div class="box-site">
            <button type="button" data-toggle="xe-dropdown" aria-expanded="false">관련사이트</button>
            <ul>
              <s_link_rep>
                <li class="on"><a href="" target="_blank"></a></li>
              </s_link_rep>
            </ul>
          </div>

블로그 프로필 사진

<img src="https://tistory1.daumcdn.net/tistory/1720038/attach/5295283f906c45b89144b4b5da57c545" class="img-profile" alt="프로필사진">

블로그 설명

<p class="text-profile">개발, 컴퓨터, 기술,  IT,  관련하여 현업에서 겪은 일들, study, memo 등을 정리한 블로그입니다.</p>

카테고리

              <s_sidebar_element>
                  <!-- 카테고리 메뉴 -->
                  <div class="box-category box-category-2depth">
                    <nav>
                      
 분류 전체보기 (286) 
  
 java, spring (21) 
 java, mybatis (9) 
 db (28) 
 react (22) 
 js (48) 
  
 js syntax (14) 
 js date (8) 
 node, npm (3) 


 html, css (30) 
  
 css selector (4) 
 css color (3) 


 web, ui (20) 
  
 file, image (6) 
 material-ui (5) 


 git (30) 
 tips (13) 
 etc (29) 
  
 linux (14) 


 record (1) 




                    </nav>
                  </div>
              </s_sidebar_element>

태그

              <s_sidebar_element>
                <!-- 태그 -->
                <div class="box-tag">
                  <h3 class="title-sidebar">Tag</h3>
                  <div class="box_tag">
                    <s_random_tags>
                      <a href="" class="">,</a>
                    </s_random_tags>
                  </div>
                </div>
              </s_sidebar_element>

최근글과 인기글

              <s_sidebar_element>
                <!-- 최근글과 인기글-->
                <div class="box-recent">
                  <h3 class="title-sidebar blind">최근글과 인기글</h3>
                  <ul class="tab-recent">
                    <li class="tab-button recent_button on"><a class="tab-button" href="#" onclick="return false;">최근글</a></li>
                    <li class="tab-button sidebar_button"><a class="tab-button" href="#" onclick="return false;">인기글</a></li>
                  </ul>
                  <ul class="list-recent">
                    <s_rctps_rep>
                      <li>
                        <a href="" class="link-recent">
                          <s_rctps_rep_thumbnail>
                            <p class="thumbnail" style="background-image:url('')"></p>
                          </s_rctps_rep_thumbnail>
                          <div class="box-recent">
                            <strong></strong>
                            <span></span>
                          </div>
                        </a>
                      </li>
                    </s_rctps_rep>
                  </ul>

                  <ul class="list-recent list-tab" style="display: none">
                    <s_rctps_popular_rep>
                      <li>
                        <a href="" class="link-recent">
                          <s_rctps_rep_thumbnail>
                            <p class="thumbnail" style="background-image:url('')"></p>
                          </s_rctps_rep_thumbnail>
                          <div class="box-recent">
                            <strong></strong>
                            <span></span>
                          </div>
                        </a>
                      </li>
                    </s_rctps_popular_rep>
                  </ul>
                </div>
              </s_sidebar_element>

최근댓글

      <s_sidebar_element>
        <!-- 최근댓글 -->
        <div class="box-reply">
          <h3 class="title-sidebar">최근댓글</h3>
          <ul class="list-sidebar">
            <s_rctrp_rep>
              <li>
                <a href="" class="link-sidebar">
                  <strong></strong>
                  <p></p>
                </a>
              </li>
            </s_rctrp_rep>
          </ul>
        </div>
      </s_sidebar_element>

공지사항

  <s_sidebar_element>
    <!-- 공지사항 -->
    <s_rct_notice>
      <div class="box-notice">
        <h3 class="title-sidebar">공지사항</h3>
        <ul class="list-sidebar">
          <s_rct_notice_rep>
            <li><a href="" class="link-sidebar"></a></li>
          </s_rct_notice_rep>
        </ul>
      </div>
    </s_rct_notice>
  </s_sidebar_element>

페이스북 트위터 플러그인

<s_sidebar_element>
<!-- 페이스북 트위터 플러그인 -->
<div class="box-plugins">
  <h3 class="title-sidebar blind">페이스북 트위터 플러그인</h3>
  <ul class="tab-sns">
    <li class="tab-button item-facebook on"><a class="tab-button" href="#" onclick="return false;">Facebook</a></li>
    <li class="tab-button item-twitter"><a class="tab-button" href="#" onclick="return false;">Twitter</a></li>
  </ul>

  <div class="plugin-facebook">
    <div id="fb-root"></div>
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = '//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2&appId=360877073936113&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-page" data-href="" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="" class="fb-xfbml-parse-ignore"><a href=""></a></blockquote>
    </div>
  </div>

  <div class="plugin-twitter" style="display: none;">
    <a class="twitter-timeline" href=""></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
</div>
</s_sidebar_element>

글보관함

<s_sidebar_element>
<!-- 글 보관함 -->
<div class="box-archive">
  <h3 class="title-sidebar">Archives</h3>
  <ul class="list-sidebar">
    <s_archive_rep>
      <li><a href="" class="link-sidebar"></a></li>
    </s_archive_rep>
  </ul>
</div>
</s_sidebar_element>

달력 모듈

<s_sidebar_element>
<!-- 달력 모듈-->
<div class="box-calendar">
  <h3 class="title-sidebar"><span class="blind">Calendar</span></h3>
  <div class="inner-calendar">

  
«   2024/07   »
  

    

      
일
      
월
      
화
      
수
      
목
      
금
      
토
    
  
  

    

      
 
      
1
      
2
      
3
      
4
      
5
      
6
    
    

      
7
      
8
      
9
      
10
      
11
      
12
      
13
    
    

      
14
      
15
      
16
      
17
      
18
      
19
      
20
    
    

      
21
      
22
      
23
      
24
      
25
      
26
      
27
    
    

      
28
      
29
      
30
      
31
      
 
      
 
      
 
    
  
</div>
</div>
</s_sidebar_element>

꽤 고사양을 필요로 하는 것 같은데 램은 최소 8G, 권장 16G, 그래픽 카드도 좀 사양이 좋은 것을 써야 버벅이지 않고 잘 돌아가는 것 같다

내 노트북은 램 8G에 산지 한 5년은 넘었는데 ㅠㅠ 

그래서인지 아래와 같은 오류 발생

일단은 무시하고 넘어갔고 기초적인 컷 편집이랑 자막달기 까지하고 영상을 완성하니 이상하게 다음과 같이 색이 반전되어 있었다

그냥 피씨나 폰에서 실행될때는 색이 정상이었는데 프리미어로 재생하면 이렇게 색반전이 되고 결과물로 나온 동영상은 피씨에서도 반전이 되어 있다. 다른 동영상도 다 마찬가지..

혹시 위 드라이버 관련 에러때문인건지 ㅠ

처음에는 편집 결과물만 색반전된 것인줄 알고 관련 검색을 해봤는데 색반전보다는 영상의 색감이 원본과 다른 문제들만이 무더기로 검색되었다. 결과물의 문제가 아니라 프로그램 자체가 동영산 원본을 제대로 재생하지 못하는 것 같아 프로그램의 오류라기 보다 내 환경 설정의 문제인 것 같았고 위에 넘겼던 compatibility오류를 일단 해결해보기로 했다

Premiere Pro support for older Intel graphic cards (adobe.com)

Intel® Driver & Support Assistant

친절하게도 해결방법으로 위 링크가 제시되었고 결국은 드라이버 재설치로 해결이 되었다! 만세~! 감사합니다~~~

한번에 바로 성공한 것은 아니고 처음 재설치를 하고 바로 재부팅을 안하고 나중에 했더니 문제가 여전히 발생했다.

혹시 몰라서 차분하게 다시 한번 재설치해보고 다른 작업 안하고 재부팅까지 쭉 진행하고 하니 드디어 성공하였다! 만세

여러가지 기록정리를 위해 tistory를 쓰고자 결정

but 네이버 웨일 듀얼화면으로 tistory를 반쪼개서 사용하니 새글쓰기 아이콘이 나오지 않는 것이다

아마도 스킨이 반응형 디자인이라 해상도가 줄면 메뉴버튼이 안나오는 것 같다

처음엔 그냥 대충 쓰고자 했으나 새글을 쓰기 위해 계속 화면크기 조정하자니 너무 답답하고 불편

결국 반잘려도 새글쓰기 바로 클릭을 하기 위해 온갖 방법 찾기 시작함

처음에는 메뉴바(메뉴바란 새글쓰기, 설정 링크가 나오는 동그란 T자 버튼이더라 동그라민데 왜 바로 이름 지었음?)

위치 설정 바꾸면 될줄 알았으나 안되었고

스킨타입을 바꿈으로서 해결함 - 전체 디자인 바꼈지만 어쩔수 엄지모, 이걸로 만족...

하는 줄 알았으나;

쓰다보니 변경한 스킨이 또 불편,

목록이 제목+내용과 함께 나와서 스크롤이 길어져서 불편하더라

이건 순전히 개인취향이지만 나는 짧은 스크롤로 간단히 모든 걸 한눈에 조망하는 것을 좋아하고

화면이 조금이라도 너저분해 보이면 적응이 안되므로 결국 이것을 해결하려고 또 다른 스킨 마구 뒤지기 시작

뒤지고 뒤지다가 결국 찾지 못하고 원래 첫 버젼 스킨으로 회귀,

그리고는 새글쓰기 링크는 내가 직접 html편집해서 넣어주기로,,

새글쓰기 기능이 있는 다른 스킨의 구현을 참고해서 결국 성공함!!!!!!!!!!!!!!!!!! 감사합니다!!!!!!!!!

아이콘까지 예쁘게 해주고 싶었으나 이리저리 해봐도 안되서 이것까진 그냥 포기

<ul class="list_control">
	<li><a href="https://prheart.tistory.com/manage/entry/post" class="ico_skin link_write" title="글쓰기">글쓰기</a></li>
	<li><a href="https://prheart.tistory.com/guestbook" class="ico_skin link_memo" title="방명록">방명록</a></li>
	<li><a href="https://prheart.tistory.com/rss" class="ico_skin link_rss" title="RSS">RSS</a></li>
	<li><a href="https://prheart.tistory.com/manage" class="ico_skin link_manage" title="관리">관리</a></li>
</ul>

기존 스킨은 아이콘을 이렇게 썼길래 icon-wirte이런거로 글쓰기 아이콘 나오려나 해봤으나 안됨;
<i class="icon-unlock-alt"></i>

그리고 또 감사한 소식!

광고설정이 그리도 안되던 티스토리에 드뎌 광고가 붙었다!

이제 더 관심을 가지고 블로그를 가꾸어 보아야 겠다

그리고 하는 김에 prev-next 버튼이 너무 아래 있어 불편해서 위에도 나오도록 아래 소스를 복사해서 위에 추가

<div id="paging">
<s_paging>
    <a  class="prev ">
        PREV
        <span class="screen_out">
            이전
        </span>
    </a>
    <s_paging_rep><a class="numbox" ></a></s_paging_rep>
    <a  class="next ">
        NEXT
        <span class="screen_out">
            다음
        </span>
    </a>
</s_paging>
</div>

* 컨테이너 기반 가상화 도구

* 리눅스 기반 경량화 컨테이너

* 오픈소스 컨테이너 프로젝트

* 컨테이너 분야에서 사실상 표준

서비스 운영환경(서버 프로그램, 소스코드, 컴파일된 바이너리)를 쉽게 관리하기 위한 도구?

도커를 쓰면 좋은 점 - https://www.44bits.io/ko/post/why-should-i-use-docker-container

참고 강의자료-https://pyrasis.com/jHLsAlwaysUpToDateDocker/Unit01/02

JOB

• 학사: 컴공
• 석사: 암호학
  • 암호학 공부해본 소감
    • 공부는 나의 길이 아니었음
    • 수학 좋아하는 줄 그동안 착각하고 있었음(내가 아는 수학은 수학이 아니었던듯, 암호학에서 다루는 수학은 대수, 정수론 기반이라 미/적분, 해석학이랑 또 다르고 거의 철학…?)
• 경력
  • 스마트티비 개발
    • EPG 관련 DB, batch작업
      • EPG: Electronic Program Guide,편성표, DTV 표준 
      •  
    • 스마트 TV 앱 잠시
      • Google, Amazon 알렉사 스피커 연동용
      • webOS: 커널은 linux, 웹기반이라 앱만드는데 js 사용
    • 인터넷 채널 서비스 개발
      • 프로그램 편성용 portal 개발
      • spring-boot, mysql, react써봄
  • java, WAS, RDB
  • 참고사항
    • schedule관리
       

좋아하는것, 관심사, 성향

• 자연
  • 환경, 지속가능성, 미니멀라이프, 제로웨이스트 (요즘 각종재해와 쓰레기를 보면 진심 걱정됨)
  • 아웃도어 운동
     
• 운동
  • 모토: 유산소와 무산소는 균형있게
    • 주종목: 러닝 트레일러닝 헬스
    • 부종목, 그외: 등산
    • 해보고 싶은 것: 보드
    • 개인적 추천조합: 러닝(유산소, 심폐지구력, 하체)+클라이밍(근력, 상체)
    • 허리디스크 환자용 추천: 러닝 걷기(상태심할경우)
• 인테리어, 정리정돈
  • 신박한 정리 프로그램
• 위키
  • 집단지성의 힘
• Git, Linux, 리눅스토발즈, 오픈소스
• 유튜브, 구글, 웹, React
• 귀차니즘
  • 개발자에게 필요한 덕목은?
  • 인내심,끈기,호기심…
  • 게으름이요구조짜는것도 유지보수도 월급도 편하게 받을 생각을, 끊임없이 고민하고 연구해야합니다.(참고:

    

    OKKY - 개발자에게 필요한 덕목은 뭐라고 생각하시나요? ) → 본질에 더 집중하기 위한 도구
  • 더 편해질 생각을 해야 합니다.

center vertially

• using padding
• using line-height
  • line-height: text의 높이, 1이면 text의 1배, 즉 높이 = text높이, 그래서 다음라인과의 간격이없어짐
  • 1.5이면 text의 1.5배니까 위아래로 0.5배만큼의 간격이 생김
  • 폰트마다 text크기가 다르기때문에 px로 지정하면 위험하고 1, 0.9 이렇게 비율로 지정해야함
  • block안에 inline/inline-block이 있으면 그것도 전체적으로 text로 취급되어 block에 설정된 line-height의 지배를 받음, 참고예제) https://www.w3schools.com/css/tryit.asp?filename=trycss_align_line-height
• using position & transform
• using flexbox

line-height가 무엇인지 알려면 참고할것https://m.blog.naver.com/weekamp/222040583269

https://www.w3schools.com/css/css_align.asp

1. 변경이 쉽다. 

ㅡ 변경함에 있어서 해당요소의 경계가 명확하다.

ㅡ 변경함에 있어서 주변소스의 변경은 제로화한다. 

2. 반복이 없다

ㅡ 반복되는 부분을 하나로 만든다.

3. 이름짓기를 잘한다.

ㅡ 추상층이 높아 질 수록 보편적으로 사용하는 키워드를 사용하며, 가급적 GoF패턴의 명칭들은 그 의도와 비슷한 경우에만 사용. (자바쪽에 특히 오용된것들이 많습니다 )

4. 해당언어의 이디엄과 추구하는 방향에 맞춰 코딩한다.

ㅡ 예를들어 자바 코드짜는데 C처럼 짜면안되겠죠. 마찬가지로 코틀린 코드 짜는데 자바처럼 짜면 후지다라는 느낌이 듭니다.

5. 팀이 정한 컨벤션에 일치한다.

ㅡ 예외처리(가까이서 처리? 멀리서 처리? 등)나 로깅의 경우 답이 없기 때문에 일치화가 중요

ㅡ 탭사용규정,줄바꿈규정 등등

6. 바퀴를 재발명하지 않는다.

ㅡ 이미 잘 짜여진 기술이 있고, 변경 필요가 없다면 있는것을 사용해서 의사소통 비용줄임. 예를 들어 JVM에서 프록시 패턴을 굳이 스스로 만들기 보단 다이나믹 프록시 사용. 스프링지원기술들 사용

물론 발명할 필요성은 추후에 검토 합니다. C++의 STL이나 자바의 컬렉션이나 보편적 성능일뿐이지 특정상황에선 엄청느리니까요

7. 후임자가 큰 실수 할 여지를 줄인다

ㅡ 제약 상황을 많이 만들어 넣어서 후임자가  잘못하면 가급적 컴파일 타이밍에 에러를 내게 합니다.

8.추상화가 잘 된 코드 (오버엔지니어링 이슈가 있음)

9.잘 알려진 패턴이 잘 적용된 코드

10. 시대흐름에 맞는 코드 

ㅡ 모던C++, 모던자바

11.테스트 친화적 코드

이런것들이 잘 녹여진 코드를 보면 감동이 있죠.

https://okky.kr/articles/1221074?note=2779512에서 서 퍼온글

서버에서 발생시키는 time-out 에러

• CDP 서버 구성은 다음과 같음
  • R52 -> xELB(Classic) -> IPS 6대 -> VPX 2대 -> EC2 2대
• 용어 정리
  • ELB: Elastic Load Balancing
    • EC2 인스턴스, 컨테이너, IP 주소 등 여러 대상에 걸쳐 수신되는 트래픽을 자동으로 분산
    • ELB 관련참고: https://aws-hyoh.tistory.com/133
  • IPS: Intrusion Protetion System, 침입 방지 시스템
  • IDS: Intrusion Detection System, 침입 탐지 시스템
  • VPX: Versatile Performance Switching?
• 504 에러는 ELB에서 발생시키는 것 같음
  • default time-out = 60sec, 이보다 더 늦은 응답을 허용하려면 세팅바꿔야 하는듯
• 참고링크
  • 아래는 AWS에서 제시하는 504에러 오류 해결 가이드
    https://aws.amazon.com/ko/premiumsupport/knowledge-center/504-error-classic/
  • 504 Gateway Timeout Error: What is it and how to fix it
    • https://blog.airbrake.io/blog/http-errors/504-gateway-timeout-error
  • 504 Gateway Timeout 문제의 원인과 해결방법
    • https://blog.lael.be/post/9251

Proxy

어디에 위치하느냐에 따라 (forward) proxy와 reverse proxy로 구분

• proxy=forward proxy
  • client가 직접 요청하지 않고 proxy를 거쳐서 요청
  • server에게 client가 누구인지 감춰주는 역할
  • 주로 기업사내망에서 사용
  • 특징/역할
    •  캐싱: 정적 데이터 캐싱
    • IP우회: client의 ip를 숨김
    • 제한: 사내망에서 정해진 사이트에만 접속가능하도록
• reverse proxy
  • application server앞에 위치함, 서버에 직접 요청하지 않고 reverse proxy를 통해 요청
  • ngnix, apache web server, amazon ELB(elastic load balancing), cloudFlare..등이 reverse proxy역할을 함
  • 특징/역할
    • 로드밸런싱: 서버 트래픽 분산
    • 보안: 서버에 직접 접근 방지

Web server

보통 application server앞에서 정적 resource를 캐싱해주는 역할을 하는 애를 의미

web server로 알려진 ngnix의 공식 설명을 보면 advanced load balancer, web server, & reverse proxy라고 적혀있음

=> 웹 서버가 위의 역할을 전반적으로 다할 수도 있음

git shortlog -s -n --all --no-merges

=git shortlog --summary --numbered --all --no-merges

--all: 모든 브랜치에 대해, 없으면 특정 브랜치에 대해서만? 

--no-merges:  to exclude statistics from merge commits.

https://stackoverflow.com/questions/9839083/git-number-of-commits-per-author-on-all-branches

git log --reverse

• git log --oneline
  • 설명간략히 한줄로만 보여줌
• git log -5
  
  • 최근 5개만 보여줌
• git log --grep=“some message”
  • 커밋 메세지를 검색하여 보여줌
• git log --decorate --graph
  • 그래프 형태로 보여줌
• git log --author=dhrim 
  • 특정저자 것만 보여줌
• git log --before={3.weeks.ago} --after={2010-04-18}
  • 특정시기 것만 보여줌
• git log --pretty=format:"%h,%ar,%an : %s" 
  • commit 정보를 한줄 단위로 보여주되. format 에 맞게 보여줌
  •  git log --pretty=format:"%h  %ad  %an  %x09  %s" --date=short
    • %h : abbreviated commit Hash(간략) 
    • %an : author name 
    • %ad : author date (format respects --date= option)
    • %ar : author relative date (--date=relative 설정효과, housrs ago, days ago)
    • %as : author short date (--date=short 설정효과)
    • %cd : comitter date (format respects --date= option)
    • %d : ref names
    • %s : subject(commit message)
    • color setting
      • %C(yellow), %C(cyan)
      • %Cblue - 검은바탕에선 잘 안보임, %Cgreen
      • %C(auto) %Creset
• log format 저장
  • git config --global alias.hs 'git log --pretty="%C(yellow)%h %C(cyan)%as(%ar) %Cgreen%an %C(auto)%d %Creset%s"' -> git hs로 사용가능
  • git config --global alias.hs "log --pretty='%C(yellow)%h %C(cyan)%cd %Cblue%aN%C(auto)%d %Creset%s' --graph --date=relative --date-order"
• git log --date=...
  • --date=short: yyyy-mm-dd까지만 나옴
  • --date=relative: housrs ago, days ago이렇게 나옴
  • --date=raw: shows the date as seconds since the epoch (1970-01-01 00:00:00 UTC), followed by a space, and then the timezone as an offset from UTC
  • --date=format:%d/%m/%y\ %H:%M:%S
• git log --graph
  • Git GUI 툴처럼 graph로 보여줌
• reference
  • https://mirrors.edge.kernel.org/pub/software/scm/git/docs/git-log.html
  • https://stackoverflow.com/questions/1441010/the-shortest-possible-output-from-git-log-containing-author-and-date

  let test = '  ';

  console.log('[test]', test);

  if (test) console.log('[TRUE]'); //' ', 1, -1, 1 / 0=Infinity,[],{}, () => {}

  else console.log('[FALSE]'); //undefined,null,'', false, 0, 0 / 0=NaN

보통 이런식으로 특정조건이  true/false이냐에 따라 화면 추가여부 결정됨

<div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>

그런데 true/false를 판단하는 변수가 number일 경우 - 0->false ->number '0'이 노출되므로 조심해야함

{lastPage && (//lastPage===0일때 전체가 0으로 노출됨, 방지하려면 lastPage===undefined등으로 변경
  <div
    style={{
      height: 'inherit',
      display: 'flex',
      alignItems: 'center',
      padding: '0 35px 0 10px',
      fontSize: '18px',
    }}
  >
    <div className={classes.pageInput}>
      <input
        className={classes.input}
        type="text"
        name="currentPage"
        value={currentPage}
        onChange={this.handlePageInputChange}
        onKeyDown={this.handlePageInput}
        onBlur={this.handlePageInputBlur}
      />
    </div>
    <div className={classes.slash}> /</div>
    <div className={classes.page}> {lastPage} </div>
  </div>
)}

reduce(callbackFn, initialValue)

• initiallValue없으면? If initialValue is not specified, previousValue is initialized to the first value in the array, and currentValue is initialized to the second value in the array.
• initialValue없고 대상array내 값이 1개뿐이라면?
  • 뭘해도 [A] -> reduce(...) -> A 형태로 결과가 나옴, 즉 1개 있던 value가 array를 빠져나오게됨

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

• previousValue: accumulated values until now

frontend

image upload시 서버 전송 하기 전에 frontend 로직진행하는 부분

<input
        accept="image/*"
        id={`input_${type}`}
        type="file"
        className="logo_preview_input"
        onChange={e => {
          if (e.target.files && e.target.files.length >= 1) {
            const reader = new FileReader();
            const img = e.target.files[0];
            reader.readAsDataURL(img);
            reader.onload = e2 => {
              setImg(e2.target.result);
              setImgName(img.name);
            };
          }
        }}
      />
      <label htmlFor={`input_${type}`} className="btn_logo_preview">
        <Button component="span" className="btn_color4">
          Select File
        </Button>
      </label>
      <p className="file_name">{imgName}</p>

업로드된 파일을 서버전송할 때 new FormData()를 써서 이안에 image file이랑 다른 string이랑 같이넣어줌

        const bgImg = document.getElementById('input_bg').files[0];//undefined if not uploaded
        //if (!bgImg) alert('Please select a background image file to update !');
        const previewImg = document.getElementById('input_preview').files[0];//undefined if not uploaded
        //if (!previewImg) alert('Please select a preview image file to update !');
        const buttonImg = document.getElementById('input_button').files[0];
        requestBody = new FormData();
        requestBody.append('tabName', content.tabName);
        requestBody.append('tabOrder', content.tabOrder);
        requestBody.append('themeApply', content.themeApply ? 'Y' : 'N');
        if (bgImg) requestBody.append('bgImg', bgImg);
        if (previewImg) requestBody.append('previewImg', previewImg);
        if (buttonImg) requestBody.append('buttonImg', buttonImg);

전송시 header는 보통 multipart/form-data를 사용하는 것 같은데 왜인지 이렇게 보내면 에러가 났고 아예 설정안하고 보내니 정상동작하였음

//const headers = new Headers({ 'Content-Type': 'application/json' });
//const headers = new Headers({ 'Content-Type': 'multipart/form-data' });

backend

• formData로 보낸 것들도 url?q=형식으로 get으로 보낸것을 받는 것처럼 @RequestParam으로 받음
• 그 중 이미지는 org.springframework.web.multipart.MultipartFile로 받음
• 이미지외에 string으로 보낸 것들은 Map<String, Object>로 몽땅 받음
• 만약 이름은 bgImg, previewImg이렇게 맞춰서 보냈는데 실제로는 파일이 아니라 string을 보내면 null로 받아짐

@PatchMapping("tab_withImg/{tabId}")
  public Tab updateTabWithImg(@CurrentUser UserPrincipal currentUser, @PathVariable String tabId,
      @RequestParam Map<String, Object> data, @RequestParam(required = false) MultipartFile bgImg,
      @RequestParam(required = false) MultipartFile previewImg, @RequestParam(required = false) MultipartFile buttonImg)
      throws Exception {
    logger.info("#updateTab_WithImg|currentUser=" + currentUser.getProvider());
    return homeAppAdminService.updateTab(tabId, data, bgImg, previewImg, buttonImg);
  }

• multipart file을 받아서 로컬내 저장하고 처리하는 부분
• 일반적으로 File쓰는 방법으로 저장하면 에러가 나서 java.nio.file.Path/Paths 써서 처리했었던듯

import java.io.File;
import java.nio.file.Path;
import java.nio.file.Paths;
import org.springframework.web.multipart.MultipartFile;


  private String uploadFile(String type, MultipartFile multipartFile) throws Exception {
    String uploadDirStr = UPLOAD_DIR == null ? "/engn001/tomcat/8.5/servers/portal_8180/uploads" : UPLOAD_DIR;
    File uploadDir = new File(uploadDirStr);
    if (!uploadDir.exists() && !uploadDir.mkdirs())
      throw new Exception("uploadDir mkdir Fail!");
    File uploadFile = new File(uploadDirStr + "/" + multipartFile.getOriginalFilename());
    if (!uploadFile.getAbsolutePath().equals(uploadFile.getCanonicalPath()))
      throw new Exception("파일경로 및 파일명을 확인하십시오.");

    Path path = Paths.get(uploadDirStr + "/" + multipartFile.getOriginalFilename()).toAbsolutePath();
    multipartFile.transferTo(path.toFile());
    // multipartFile.transferTo(uploadFile);//file not found error
    String resultGftsUrl = uploadGfts(type, "KIC", uploadFile);
    uploadGfts(type, "AIC", uploadFile);
    uploadGfts(type, "EIC", uploadFile);
    uploadFile.delete();
    return resultGftsUrl.replaceFirst("http://kic-", "");
  }

[a tag]

<a href={questionModalSrc} download="88a2f203a144c233726b8ffcdccc9ed8.png">

• download='img.png'에서 img.png는 변경가능
• 확장자 안쓰면 알아서 다운로드시 Type에 해당하는 확장자 붙여줌,
• img.htm이런식으로 확장자 잘못 붙여도 다운로드 가능

[모든 element에 적용가능한 방법] 클릭시 임시로 a tag생성하고 클릭되도록

onClick={() => { const link = document.createElement('a');  
                link.href = \`/common/files/01. CDP Admin Operation Policy.docx\`;  
                link.target = '\_blank';//링크클릭시 새창에서 열도록, 링크여는목적 아니므로 없어도 될듯  
                link.download = '다운로드될 파일명'; 이 부분이 없으면 자동다운로드 안됨
                document.body.appendChild(link);  
                link.click();  
                document.body.removeChild(link);  
              }}

외부에 있는 자원을 다운로드

API 구현부분

• 테스트해보니 요청하는 헤더내의 content_type: application/json이지만 응답헤더의 Content-Type: application/octet-stream
  Content-Disposition: attachement; filename="RBSPOT.json"로 응답함
• 참고로 다른 요청->응답은 아래와 같았음
  • 일반적인 json Fetch/XHR request -> response
    • content-type: application/json -> Content-Type: application/json;charset=UTF-8
  • 파일을 자동으로 다운로드되도록 하는 request -> response
    • content-type: application/json -> Content-Type: application/octet-stream
      Content-Disposition: attachement; filename="RBSPOT.json"
  • 파일을 서버로 업로드하는 request -> response
    • Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryCr6S7zpBWkWbkGAB ->

@Description("MetaDataFile Download from Admin.")
@GetMapping
@PreAuthorize("hasRole('ADMIN')")
@RequestMapping("/api/admin/apiCallLog/{apiCallLogId}/file")
public ResponseEntity<?> getMetaDataFile(@CurrentUser UserPrincipal currentUser,
    @PathVariable Long apiCallLogId) {

  Map<String, Object> resultMap = new HashMap<String, Object>();
  URL url = new URL(...어찌어찌해서 얻어옴);
  InputStreamResource resource = new InputStreamResource(url.openStream());
  resultMap.put("fileName", apiCallInfo.getFileName());
  resultMap.put("resource", resource);

  return ResponseEntity.ok().contentType(MediaType.parseMediaType("application/octet-stream"))
      .header(HttpHeaders.CONTENT_DISPOSITION,
          "attachement; filename=\"" + resultMap.get("fileName") + "\"")
      .body(resultMap.get("resource"));
}

구현된 API call하는 부분

export async function getFileDownload(requestPath, requestMethod, rowData) {
  await fetch(API_BASE_URL + requestPath, {
    method: 'GET',
    headers: getHeaders(),
  })
    .then(response => {
      return response.blob();
    })
    .then(blob => {
      const url = window.URL.createObjectURL(
        new Blob([blob]),
      );
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute(
        'download',
        rowData.fileName,
      );//filename to be downloaded, it can be used as link.download=fileName
      //link.style='display:none'; //OK it is not given
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    })
    .catch(err => {
      alert('error')
    });
}

서버 내부 자원(public공간내 file) 다운로드

<button
                  type="button"
                  className="quick_link link1"
                  onClick={() => {
                    const link = document.createElement('a');
                    link.href = `/common/files/01. CDP Admin Operation Policy_(ENG)20210428.docx`;
                    link.target = '_blank';
                    link.download = '01. CDP Admin Operation Policy_(ENG)20210428.docx';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                  }}>

서버응답을 받아 파일을 내려주거나 내부소스 파일을 내려주거나 다운로드 하는 부분의 공통점

const link = document.createElement('a');
link.href = `/common/files/01. CDP Admin Operation Policy_(ENG)20210428.docx`;//여기에서 차이남
//link.target = '_blank'; //없어도됨
link.download = '01. CDP Admin Operation Policy_(ENG)20210428.docx'; //link.setAttribute('download', 파일명)과 동일
document.body.appendChild(link);
link.click();
document.body.removeChild(link);//link.remove(); link.parentNode.removeChild(link);와 동일

서버응답을 받아 파일생성하는 부분

new Blob([arrayContetns], options) options는 생략가능

new Blob([response], {type" res.headers[content-type]})

Blob을 URL로 변환

window.URL.createObjectURL(blob)

URL.revokeObjectURL( window.URL.createObjectURL(blob) ) 여기서 window.URL=URL인듯

clip - 넘치는 부분 그냥 자름

ellipsis - 생략이라는 뜻, text 길어질때 ...등으로 생략하는 것

clip과 ellipsis 둘다 잘리는 건 같은데 차이는 ...가 있냐 없냐

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

https://junistory.blogspot.com/2017/06/css-ellipsis.html

import useMediaQuery from '@material-ui/core/useMediaQuery';
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

클립보드 붙여넣기까지만 됨

• [print screen]: 전체화면
• [alt] + [print screen]: 선택한 창만
• [window] + [shift] + [s]: 영역선택하면 복사됨

PrtScn 버튼만으로 화면캡처 크기를 조절하려면

[window]버튼클릭 > 설정버튼 클릭 > 접근성 > 상호작용 > 키보드 > [PrtScn 단추를 사용하여 화면 캡처 열기] 설정

붙여넣기 한 클립보드 확인

• [window] + [v] 클릭하면 저장된 클립보드중 선택해서 사용가능

chrome debug tool 사용: 이미지가 저절로 저장됨

ctrl + shift + p : run command 나오면 capture로 search

• capture area screenshot: 원하는 영역을 선택하면 자동다운로드됨
• capture full size screenshot: scroll까지포함해서 전체다 자동다운로드됨
• capture node screenshot: html문서에서 선택한 부분만 자동다운로드됨
• capture screenshot: 딱 현재 화면만 자동다운로드됨

-> 단점은 브라우저 내부영역만 가능, 주소창(혹은 주소표시줄, addressBar), bookmarkBar등은 포함못함