console.log 제거를 위해 file serch 로 찾아봤다.

 

앞에 주석이 달린 코드도 검색이 되어 번거로워서 정규식으로 주석없는 코드만 조회하는 방법을 찾아봤다.

 

^(?!.*//).*?\bconsole\.log\b

 

설명
^(?!.*//):
이 부분은 주석이 포함된 줄을 제외. 줄의 시작(^)에서 주석(//)이 포함되지 않는 경우를 찾음.
.*?\bconsole\.log\b:
주석이 없는 줄에서 console.log를 찾음.

 

땡큐.

 


 

중간에 정규식 구조의 오류가 있었다.

초기에 적용한 정규식을 입력하니 오류메시지가 표시됨

(?<!//\s*.*)\bconsole.log\b

* 메시지 : Look-behind group dose not have an obvious maximum length near index 7

 

Eclipse의 정규 표현식 엔진의 제약사항 -  Look-behind 그룹에 대한 제한

 - Look-behind 그룹은 고정된 길이 또는 명확한 최대 길이를 가져야 함

 

* Look-behind의 길이:
(?<!//\s*.*) 부분에서 .*는 0개 이상의 문자에 매칭될 수 있기 때문에, 이 부분의 길이가 가변적.

즉, .*는 어떤 길이의 문자열에도 매칭될 수 있어, Look-behind의 최대 길이를 명확히 정의할 수 없음.
 - Eclipse의 정규 표현식 엔진은 Look-behind 그룹이 고정된 길이를 가져야 하며, 가변적인 길이를 가진 패턴을 허용하지 않음. 따라서 .*와 같은 패턴이 포함된 Look-behind는 오류 발생.

 >  Look-behind를 사용하지 않고 다른 방법으로 주석을 제외하는 방법 필요.

 

가이드1 - 주석을 포함하지 않는 패턴을 사용:
 - 주석을 포함하지 않는 console.log를 찾기 위해, 주석을 포함하는 경우를 명시적으로 제외하는 패턴 사용.

 > 주석이 없는 줄에서 console.log를 찾음.
가이드2 - 단순한 패턴 사용:
 - 주석이 있는 줄을 제외

 > 주석이 포함된 줄을 먼저 필터링한 후 console.log를 찾음

 

 

'tools' 카테고리의 다른 글

ecilpse 속도 개선  (1) 2023.09.12
vsCode git pull request  (0) 2023.04.16
오류  (0) 2022.10.24
git. push가 갑자기 안되네.. github가 잘못했네.  (0) 2021.10.15
VSCode Workspace Trust?  (0) 2021.08.27

mssql을 사용하는 프로젝트에서 sequence 를 조회하여 key값을 설정고 있었는데

insert문에 key값이 할당되지 않는 문제가 발생했다.

 

로그를 살펴보니 insert문 앞에 선언한 selectkey 쿼리가 뒤에 실행되는것을 

확인할수 있었다.

 

확인해보니

mybatis select 엘리먼트의

첫줄에 insert문 주석을 표시하고

두번째줄에 selectkey 엘리먼트를 작성한 다음

insert 문을 작성하고있었다.

 

혹시 하고 첫줄 주석을 selectkey 다음으로 배치를 하니

selectkey를 먼저 실행하여 정상적으로 sequenc 값을 insert문에 등록하는것을 확인할수 있었다.

 

mybatis가 xml파싱하는과정에서 엘리먼트를 계층적으로 분석할때

이슈가 있나보다.

 

교훈.

쓰던대로 쓰자.

문제 원인을 파악하고 개념을 이해하자.

일단 수습한거로....

 

일감 가져오기로 cvs 파일을 이용하여 일괄 일감등록이 가능하다.

등록 후 일감정보 변경내용을 일괄 수정하려면 

다시 일감가져오기로 일감ID를 매핑하여 수정처리가 되면 좋겠지만,

일감이 그냥 새로 등록되어버린다.

 

가져오기는 등록만 되고, 수정은 안되는것 같다.

 

그래서 레드마인 DB에서 직접 수정쿼리를 작성하여 변경해봤다.

 

-- 일감정보 조회
SELECT x.* 
FROM bitnami_redmine.issues x
WHERE id = 22
;

-- 사용자 정의 항목 관리
SELECT x.* FROM bitnami_redmine.custom_fields x

-- 사용자 정의 항목 조회(사용자정의항목 ID 참조 : custom_field_id)
SELECT id, customized_type, customized_id, custom_field_id, value
FROM bitnami_redmine.custom_values
WHERE customized_id=22 and custom_field_id=5
;
-- 키값이 아닌 일감, 사용자 정의 항목 정보 중복여부 확인
select customized_id, custom_field_id, COUNT(*)
FROM bitnami_redmine.custom_values
group by customized_id, custom_field_id
having count(*) >0
;

-- 수정쿼리 : 일감(22)기준 시작, 종료일 수정 / 일감(22)기준 사용자정의항목 수정
UPDATE issues SET due_date='2024-08-20', start_date='2024-08-14' WHERE id=22; 
UPDATE custom_values SET value='사용자정의값수정' WHERE customized_id=22 AND custom_field_id=5;

'install > redmine' 카테고리의 다른 글

redmine svn 연결 (연동은 다음기회.. ㅡ.ㅡ )  (0) 2024.08.05
레드마인 설치 후 포트변경  (2) 2023.08.31
bitnami redmine 설치  (2) 2017.03.05

ecilpse 에서 서버를 띄운 경우

Servers > 서비스별 config > server.xml 파일의

Context 엘리먼트 속성 추가

 - sessionCookieName="TEST_JSESSIONID" 

 

<Context docBase="TEST" path="/" reloadable="true" sessionCookieName="TEST_JSESSIONID" source="org.eclipse.jst.jee.server:TEST"/>

 

지식 +1

 

(모르면 기적이고, 알면 상식이다.)

 

그간 svn 연결없이 redmine을 썼는데, 

성가신 오류메시지를 정리하게되어 남겨본다.

 

bitnami redmine 을 로컬에 설치하여 개인적으로 사용하고 있는데

svn 연결하려면 꼭 SCM어쩌고 오류메시지가 떴다.

 

찾아보니 Visual SVN Server 의 svn.exe를 설정해줘야 하는 듯 한데

굳이 뭔가를 또 설치를 해줘야 해? 라는 심리선이 생겨서 연동을 안했었다.

 

그런데, 명령어만 쓸수 있지 않을까.. 싶어 봤더니. 

있다.

https://www.visualsvn.com/downloads/

 

Downloads | VisualSVN

The most favored way to setup and maintain an enterprise level Apache Subversion server on the Microsoft Windows platform. VisualSVN Server is useful either for home, small business or enterprise users. Includes Apache Subversion 1.14.3 command-line tools.

www.visualsvn.com

 

 

 

Apache Subversion command-line tools

이거 아닐까?

potable 이라 압축만 풀면 된다.

 - ‪D:\dev\tool\Bitnami\redmine-5.0.3-0\apps\redmine\htdocs\config\configuration.yml

 > path구분자 주의 : [/]

 

redmine 서비스는 올라가는데, svn 연결을 하면 아래 메시지가 뜨면서 안된다.

404 항목이나 리비젼이 저장소에 존재하지 않습니다.

 

인증서 처리가 피요하다는 것 같은데.. 아래를 참고해서 다음에 해봐야 겠다.

 

https://javacpro.tistory.com/19

 

[RedMine] 레드마인 + SVN 연동

레드마인 + SVN 연동이번에는 레드마인과 SVN 을 연동해보도록 하겠다.먼저 준비는 레드마인 설치와 Visual SVN 이 설치되어있으면 된다.설치가 안되어있을경우 아래 링크를 타고 설치하도록 하자 [S

javacpro.tistory.com

 

'install > redmine' 카테고리의 다른 글

redmine 일감정보 일괄수정 쿼리  (0) 2024.08.12
레드마인 설치 후 포트변경  (2) 2023.08.31
bitnami redmine 설치  (2) 2017.03.05

* 두서없는 메모.

 

간만에 svn 사용하는 프로젝트에서 삽질할 일이 생겼다.

 

배포를 하는데, class 파일을 하나하나 ftp로 옮기며 운영배포를 하고,

trunc 브런치만 사용하는 숨막히는 상황을 마주하게됐다.

 

prd, stg, dev 브런치 전략을 구성하기 위해 

git에서만 사용해본 작업 흐름을 테스트해보려고 한다.

 

그래서. 간만에 svn 서버를 설치를 했는데... 

 

이거 유료였어?

 

 

45일 전체기능을 체험해보고 이후에는 제한이 된다는 건가?

 

일단 설치를 했다.

 

 

 

프로젝트를 만들어서 테스트를 해보자

그냥 눈에띄는 아무거자 주워담아 만든 테스트 프로젝트

 

 

연결이 잘 안되는건 잘못했다는것

 

프로젝트 폴더 임시로 하나 만들고 접속링크를 참조하자

 - https://127.0.0.1/svn/testRepo/trunk/testPrj

 

eclipse에 레파지토리가 잘 등록되었음

 - springboot 의존관계와 프로젝트 소스 commit 실패로 몇차례 시도.

 

 

일단 ignore 대상 무시하고 올려보자

잘못올린 소스 : ㅡ.ㅡ 바보냐. trunk 밑에 올렸어야지.

 - 번거롭지만, svn server에서 삭제하고(생략)

 - 테스트프로젝트 team 링크 끊고(생략)

 - 다시 올려보자

 

 

실행되는 프로젝트로 다시 해보자.

 

 

docker 선택시 도커없다고 혼나서 제외

mongodb 선택시 없다고 혼나서 제외

 

https://start.spring.io/starter.zip

https://start.spring.io/starter.zip?name=testPrg-1&groupId=com.jkoogi&artifactId=testPrg-1&version=0.0.1-SNAPSHOT&description=Demo+project+for+Spring+Boot&packageName=com.hmjo.jk&type=maven-project&packaging=war&javaVersion=21&language=java&bootVersion=3.3.0-M1&dependencies=lombok&dependencies=batch&dependencies=mysql&dependencies=h2&dependencies=data-jpa&dependencies=thymeleaf&dependencies=restdocs

 

 서비스 실행 성공버전.

 

 

프로젝트소스를 svn 레파지토리에 등록

 - 이렇게 넣으면 trunk에 프로젝트가 들어가지 않고, 소스가 들어간다. ㅠ.

 > 지우고 다시 넣자.

 

 

https://127.0.0.1/svn/testRepo/trunk/testPrg-1

 

 

 

 

 

 

 

'etc' 카테고리의 다른 글

git sourcetree - 작업중인 파일 목록 참조  (0) 2022.09.07

공휴일 달력표시정보 구성이 필요해서 음력 날짜를 양력 날짜로 변환하는 작업이 필요했다. 

 

인터넷을 찾아보니 몇가지 안을 도출하게 되었다. 

1. ibm에서 제공한 중국음력 유틸리티 라이브러리 참조

 - com.ibm.icu.util.ChineseCalendar 

 > 장점 : 범용적으로 많이 사용한 듯(표준프레임워크에서도 해당라이브러리를 사용하여 기능 구현) 하여 관려 자료가 많음

 > 단점 : 중국 음력과 한국 음력의 차이로 간혹 음력일자의 오차 발생 - 치명적 결함으로 비추

2. 공공API 조회

 - 한국천문연구원에서 제공하는 양력, 음력 매핑정보 조회 API를 이용하여 날짜조회

 > 장점 : 가장 정확하고 다른 기능에 부담없이 사용 가능

 > 단점 : 외부연계 필요, API 변경사항 현행화 관리 필요

3. 변환로직 직접 구현

 - 한국천문연구원에서 제공하는 음력일자를 기준으로 메타데이터를 구성하여 매핑로직 구현

 > 장점 : 이슈에 적극적으로 대응할 수 있다. (현실적 대안 : 관련 소스를 참조하여 디버깅 후 사용)

 > 단점 : 로직구현 및 천문연구원 메타정보 변경시 현행화 필요

4. 매핑정보 수동관리

 - 천문연구원에서 제공하는 날짜 대비 매핑일자를 메타정보로 관리 (테이블, 공통코드 등)

 > 장점 : 구현 및 관리에 가장 부담이 적음

 > 단점 : 매핑정보 관리 및 범용성이 떨어짐 (등록한 날짜만 사용가능)

 

서비스에서는 4번을 적극적으로 제안했지만, 3번이 현실적인 대안으로 보인다. 

* [참고1] 3번 검토자료

https://github.com/corestone/jsphelper3/blob/master/src/chk/jsphelper/util/LunarCalendarUtil.java

 - 음력 20330815 날짜 조회시 0908일이 조회되어야 하는데, 1007 로 응답된는 버그 확인
 > 80093aa

/* 2031 ~ 2040 까지 */
{ 2, 1, 5, 2, 1, 2, 2, 1, 2, 1, 2, 1, 384 }, // 2000년
{ 2, 1, 1, 2, 1, 2, 2, 1, 2, 2, 1, 2, 355 }, // 2000년
{ 1, 2, 1, 1, 2, 1, 5, 2, 2, 2, 1, 2, 384 }, // 2000년 <-해당 메타정보
{ 1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 384 }, // 2000년 <-수정 메타정보

* [참고2] 아래 블로그의 소스도 테스트한 결과 동일한 날짜에서 동일한 버그 확인

 - 아마 천문연구원에서 제공하던 메타정보가 변경된게 아닐까?

https://billcorea.tistory.com/113

 

안드로이드 앱 만들기 : 음력을 양력으로 변환 하기

예전에 어떤 앱을 만들기 할 때 사용했던 음력 변환 하는 소스를 어딘가에서 찾았던 거 같은데... 다시 한번 기억해 보기 위해서 적어 보기로 했다. https://billcorea.tistory.com/4 구글로간 음력 설명서

billcorea.tistory.com

 

* [참고3] 한국의 양력과 중국의 양력이 다를 수 있어서 ibm 라이브러리 사용을 제외하게된 참고자료

https://blog.naver.com/birdparang/221445233118

 

[자바] 양력에서 음력 변환 - ChineseCalendar 클래스가 맞지 않는 이유, 한국과 중국의 음력 차이

((year % 4) == 0 && (year % 100) != 0) || (year % 400) == 0; 위 코드는 양력의 윤년(2월 29일...

blog.naver.com

 

결론.

[참고1] 자료의 버그를 수정하여 유틸로 사용

 - 테스트 데이터 구성 : 천문연구원의 2023~2050 음력 공휴일(설날, 부처님오신날, 추석) 매핑자료 검색

 > https://astro.kasi.re.kr/life/pageView/8

(행활천문관 > 음양력변환계산 > 특정음력일찾기 : 2023~2050 음력일자 조회 결과)

 

음양력변환계산 | 생활천문관 | 천문우주지식정보

양력 날짜를 입력하여 대응하는 음력 날짜 확인 ※ 입력범위 : -59년 02월 13일 ~ 2050년 12월 31일 --> ※ 1582년 로마 교황 그레고리우스 13세는 율리우스력을 그레고리력으로 개정함에 따라 (율리우스

astro.kasi.re.kr

 

 

test 메타정보.txt
0.01MB

offline 환경에서 이클립스가 너무 느리게 동작했다.

에디터에 클릭만 해도 stop.

 

환장하것네.. 

 

그래서 이것저것 시도하다보니 효과를 본게 있어서 끄적여논다.

 

Preferences > General > Startup and Shutdown [Plug-ins activated on startup] 항목 체크해제

Preferences > Validation [The selected validators will run when validation is performed] 항목 체크해제

 

[추가]

https://winterandsnow.tistory.com/27

 

[Eclipse] JPA Project Change Event Handler (waiting) 안나오게 하는 방법

개발 도중 JPA Project Change Event Handler (waiting) 이런 메시지가 계속 나오면서 이클립스가 느려지거나 멈추는 현상이 계속 발생했습니다. 그래서 여러 방법을 시도해보고 이 방법으로 해결하였습니

winterandsnow.tistory.com

빌드만 하면 완료 상태여도 버벅이는 현상

https://tnsgud.tistory.com/332

 

이클립스(Eclipse) 실행 시 Build workspace (빌드) 느릴때(멈춤) 해결 방법 - vailidation

이클립스(Eclipse) 실행 시 Build workspace (빌드) 느릴때(멈춤) 해결 방법 - vailidation 이클립스나(Eclipse), 스프링(STS), 전자정부프레임웍(eGovFrame)를 사용하다 보면 수시로 "Building workspace" 절차가 진행 됩

tnsgud.tistory.com

 

- [Preferences] -> [Web] -> [Jsp Files] -> [Validation] -> Validate JSP fragments 해제

https://ssd0908.tistory.com/entry/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4eclipse-%EC%84%B1%EB%8A%A5%EA%B0%9C%EC%84%A0-%EB%B0%8F-Validation-%EC%B5%9C%EC%A0%81%ED%99%94-%EC%84%A4%EC%A0%95

 

[Eclipse] 이클립스 성능개선 및 Validation 최적화 설정

이번 포스트에서는 이클립스/STS Tool 최적화에 대해서 알아보겠습니다. 개발에 앞서 이클립스 툴을 최적화 및 성능을 개선하면 개발 시간 단축 및 더 향상된 퍼포먼스를 발휘할 수 있습니다. 이

ssd0908.tistory.com

 

 

아후.. 이것저것 해보는데.. 애쓴다.

'tools' 카테고리의 다른 글

ecilpse file search 정규식 옵션  (0) 2024.12.26
vsCode git pull request  (0) 2023.04.16
오류  (0) 2022.10.24
git. push가 갑자기 안되네.. github가 잘못했네.  (0) 2021.10.15
VSCode Workspace Trust?  (0) 2021.08.27

간만에 windows 11에 레드마인을 설치했다. 

 

bitnami redmine을 설치하는데, OS별 설치파일 다운로드 하는곳을 못찾아서 

https://bitnami.com/stack/redmine/virtual-machine

 

Redmine Virtual Machines

Bitnami VMs optimized for VMware Cloud on AWS and VMware Cloud Director are available through the VMware Marketplace. VMware Marketplace

bitnami.com

레드마인 커뮤니티에서 낮은버전을 찾아 설치했다.

http://www.redmine.or.kr/projects/community/wiki/%EB%A0%88%EB%93%9C%EB%A7%88%EC%9D%B8_%EC%84%A4%EC%B9%98(bitnami) 

 

레드마인 설치(Bitnami) - REDMINE 커뮤니티 - Redmine 커뮤니티

 

www.redmine.or.kr

 

bitnami-redmine-4.2.4-0-windows-x64-installer.exe

 

설치야 특별할게 없어서 잘 진행했는데, 

서버 포트와 db 포트를 변경하고 싶었다. 

 

간단하게 인터넷을 찾아보고 변경을 했는데, db 포트를 변경해도 안바뀌고 

dbeaver에서 변경한 포트로 접속이 안됐다.

변경을 시도하다가 이상한 에러로그때문에 잠깐 삽질을 했었지만..

더보기

[Thu Aug 31 21:58:33.018393 2023] [ssl:warn] [pid 19064:tid 444] AH01909: localhost:443:0 server certificate does NOT include an ID which matches the server name
[Thu Aug 31 21:58:33.068371 2023] [ssl:warn] [pid 19064:tid 444] AH01909: localhost:443:0 server certificate does NOT include an ID which matches the server name
[Thu Aug 31 21:58:33.086154 2023] [mpm_winnt:notice] [pid 19064:tid 444] AH00455: Apache/2.4.52 (Win64) OpenSSL/1.1.1m PHP/7.4.28 configured -- resuming normal operations
[Thu Aug 31 21:58:33.086154 2023] [mpm_winnt:notice] [pid 19064:tid 444] AH00456: Apache Lounge VC15 Server built: Dec 23 2021 11:00:40
[Thu Aug 31 21:58:33.086154 2023] [core:notice] [pid 19064:tid 444] AH00094: Command line: 'D:\\jkSpace\\redmine\\redmine-4.2.4-0\\apache2\\bin\\httpd.exe -d D:/jkSpace/redmine/redmine-4.2.4-0/apache2 -f D:\\jkSpace\\redmine\\redmine-4.2.4-0\\apache2\\conf\\httpd.conf'
[Thu Aug 31 21:58:33.091358 2023] [mpm_winnt:notice] [pid 19064:tid 444] AH00418: Parent: Created child process 17280

 

결국 설정파일 중 관련 내용을 들춰보다 변경에 성공하여 남겨둔다.

 

 

(...)\redmine-4.2.4-0\apache2\conf\httpd.conf
Listen 8000 … ServerName localhost:8000
(...)\redmine-4.2.4-0\apache2\conf\bitnami\bitnami.conf
<IfVersion < 2.3 > NameVirtualHost *:8000 NameVirtualHost *:443 </IfVersion> <VirtualHost default:8000>
(...)\redmine-4.2.4-0\apps\redmine\htdocs\config\database.yml
port: 3366
(...)\redmine-4.2.4-0\mariadb\my.ini
[mysqladmin] user=root port=3366 … datadir="D:/jkSpace/redmine/redmine-4.2.4-0/mariadb/data" port=3366
(...)\redmine-4.2.4-0\apps\redmine\conf\httpd-vhosts.conf
<VirtualHost *:8000>
(...)\redmine-4.2.4-0\apps\redmine\htdocs\config\configuration.yml
git 관련 명령 수정

 

 

 


 

240801 추가 

 

오랜만에 bitnami-redmine-5.0.3-0-windows-x64-installer.exe 설치 진행중에 
다시 찾아서 수정해봤다.
> 버전차이인지 본문 항목만 수정했더니 안됐다. (80 포트관련)

 - 설치 하위폴더를 검색하여 80 포트 표기를 8000 으로 수정
 > 대상 : *.conf; *.yml, *.ini

\redmine-5.0.3-0\apache2\conf\httpd.conf"(60,8):Listen 8000
\redmine-5.0.3-0\apache2\conf\httpd.conf"(227,22):ServerName localhost:8000
\redmine-5.0.3-0\apache2\conf\bitnami\bitnami.conf"(4,21):  NameVirtualHost *:8000
\redmine-5.0.3-0\apache2\conf\bitnami\bitnami.conf"(8,24):<VirtualHost _default_:8000>
\redmine-5.0.3-0\apache2\conf\extra\httpd-vhosts.conf"(23,16):<VirtualHost *:80>
\redmine-5.0.3-0\apache2\conf\extra\httpd-vhosts.conf"(32,16):<VirtualHost *:80>
\redmine-5.0.3-0\apache2\conf\original\httpd.conf"(60,8):Listen 80
\redmine-5.0.3-0\apache2\conf\original\extra\httpd-vhosts.conf"(23,16):<VirtualHost *:80>
\redmine-5.0.3-0\apache2\conf\original\extra\httpd-vhosts.conf"(32,16):<VirtualHost *:80>
\redmine-5.0.3-0\apps\phpmyadmin\conf\httpd-vhosts.conf"(1,16):<VirtualHost *:80>
\redmine-5.0.3-0\apps\redmine\conf\httpd-vhosts.conf"(1,16):<VirtualHost *:8000>

 

정상적으로 변경됐다.

 

(설치파일)

'install > redmine' 카테고리의 다른 글

redmine 일감정보 일괄수정 쿼리  (0) 2024.08.12
redmine svn 연결 (연동은 다음기회.. ㅡ.ㅡ )  (0) 2024.08.05
bitnami redmine 설치  (2) 2017.03.05

HTML에 기반을 둔 커스텀 엘리먼트인 컴포넌트를 제작하고 활용

컴포넌트의 상탯값 관리와 뷰 간의 이동을 도와주는 Vuex와 라우터제공

 

05-1 복잡한 로직과 computed 속성  

computed 속성 : 머스태시를 이용해 HTML 엘리먼트값 변경에 따른 연산 작업지원

 - 원본 data를 수정으로 필요성 확인

 

* 010501 [DoIt!실습] 대문자로 변환하는 프로그램 만들기

- 0105/ex05_01 > computed.html 파일 생성

<!DOCTYPE html>
<html lang="KO">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="main">
        <p>원본 문장 : "{{ sOriginalMessage }}"</p>
        <p>대분자로 변환된 문장 : "{{ fnUpperCaseMsg }}"</p>
    </div>
    <script>
        new Vue({
            el:'#main',
            // data는 머스태시 안에 넣을 값이 간달할 때 사용
            data:{
                sOriginalMessage: 'How are you?'
            },
            computed:{
                // sOriginalMessage의 데이터를 모두 대문자로 변환
                // 이때 데이터에 접근하기 위해 this 사용
                fnUpperCaseMsg: function(){
                    return this.sOriginalMessage.toUpperCase();
                }
            }
        })
    </script>
    
</body>
</html>

 

* 머스태시 사용 : 문자열을 {{}} 로 감싸고 엘리먼트(P) 값 표시 
 - {{ sOriginalMessage }} : 문자열 변수 대체

 - {{ fnUpperCaseMsg }} : 함수실행결과 대체

* data 속성

 - 문자열 변수(sOriginalMessage - 속성 : JSON 형식내 값 > 뷰에서는 변수처럼 처리됨) 값 초기화

* computed 속성 : computed 속성은 캐시 메모리에 저장 - 속도개선 효과 기대

 - 머스태시 내용이 복잡한 경우 함수로 전환하여 사용

 - fnUpperCaseMsg() 함수에서 this를 사용하여 data에 정의된 변수(sOriginalMessage)를 사용하여 처리함


05-2 이벤트 핸들러 로직과 methods 속성  

* 메서드 :  뷰 인스턴스에 포함해 사용하는함수

 - methods 속성 : 이벤트 핸들러를 사용해 이벤트 실행로직 작성(마우스 클릭 등)
 - 예제 : 버튼을 누를 때마다 10부터 거꾸로 세는 예제

 > computed 속성 : 머스태시 확장할 때 사용

 > methods 속성 : 이벤트 핸들러에 사용

 

* 010502 [DoIt!실습] 카운트다운 프로그램 만들기

- 0105/ex05_02 > computed.html 파일 생성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>mothods</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="main">
        <p>클릭 숫자 : {{nClicks}}</p>
        <p>카운트다운 : {{fnCounter}}</p>
        <!-- 버튼을 누르면 fnIncrement 메서드 실행 -->
        <button v-on:click="fnIncrement">눌러주세요!</button>
    </div>
</body>
<script>
    new Vue({
        el:'#main',
        data:{
            nClicks:0
        },
        // computed는 머스태시 안의 로직이 복잡할 때 사용
        computed: {
            fnCounter(){
                // nClicks 값이 10을 기준으로 카운트다운 되도록 1만큼 감소시킴
                return 10 - this.nClicks;
            }
        },
        // 메서드는 이벤트 핸들러 로직을 실행할 때 사용
        methods:{
            // nClicks 값을 1만큼 증가시킴
            fnIncrement(){
                this.nClicks++;
            }
        }
    });
</script>
</html>

* 머스태시적용

 - nClicks : 클릭개수 정보 변수를 바인딩 - 엘리먼트(p)

 - fnCounter() : 카운트로 변경되는 값 반환 - 10부터 시작하는 카운트다운 처리

* v-on 디렉티브 적용

 - 버튼을 누르면 fnlncrement() 함수를 이벤트 핸들러로 연결하여 실행

 > fnlncrement() 함수의 구체적인 기능을 methods 속성에서 정의한다

* data, computed 속성

 - data : nClicks 변수 초기값 설정 - 0

 - computed : 머스태시 선언 함수 기술 - fnCounter()
 > fnCounter() 함수는 10을 기준으로 지금까지 클릭한 횟수를 저장

 > nClicks 변수값과 뺄셈을 수행

 * 머스태시에 선언된 내용의 로직이 복갑해지면 함수로 바꿔서 computed 속성에 정의

* methods 속성

 - fnlncrement() 함수 : nClicks 변수(클릭한 횟수 저장) 값을 ++ 연산자로 증가시킨 후 반환

 > data 속성에 정의된 nClicks 변수에 접근하기 위 해 this를 사용

 

* [하나만 더 배워요!] computed 속성과 methods 속성의 차이점

 - 함수 정의 시 두 속성의 역할 : 함수 실행

 • computed 속성 : 복잡한 로직으로 머스태시 작업을 함수로 정의 - 계산량이 많아 캐시가 필요할 때
 • methods 속성 : 뷰의 이벤트 핸들러 로직을 함수로 정의


05-3 컴포넌트로 HTML 엘리먼트 만들기  

* 컴포넌트(component) : HTML의 기본 엘리먼트 외에 자신만의 엘리먼트 제작 지원

 

* 컴포넌트의 동작 원리 이해하기

 - 컴포넌트 사용법 : HTML 엘리 먼트와 동일.  여는 태그 <>, 닫는 태그 </>에 적용해 사용
  > <my-element></my-element>

 - 템플릿(template) : 컴포넌트를 등록하여 엘리먼트처럼 사용
 - 컴포넌트를 신규 엘리먼트로 구성 시 화면에 표시할 부분을 대응하는 속성 : 템플릿 속성

  > 기존 HTML, CSS, 자바스크립트를 사용해서 화면에 표시할 내용 구현

  > 사용 방법 : [template:] 속성 선언 > 문자열로 HTML 문서의 내용을 작성

 ** 문자열 줄바꿈을 고려한 이스케이프 문자 사용 : 역따음표(',backtic-백틱) - 예제 참고 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="main">
        <my-element></my-element>
    </div>
</body>

<script>
    // my-element 엘리멘트용 컴포넌트 등록
    Vue.component('my-element',{
        // 컴포넌트의 data 속성은 반드시 함수로 정의!
        data: function(){
            return {
                strHello: '안녕하세요',
            }
        },
        // 템플릿은 화면에 표시할 엘리멘트 구조를 정의
        template: `<h1>{{strHello}}</h1>`
    });
    new Vue({
        el:'#main',
    });
</script>
</html>

* 010503 [DoIt!실습] 좋아하는 과일 나열하기

- 0105/ex05_03 > component_basic.html 파일 생성

- 화면에 표시할 내용 : template 속성으로 HTML, CSS, 자바스크립트를 함께 사용하면서 작성
- 백틱을 사용한 가독성 확보
 > 예제 활용 : template, data 속성만 사용하지 만 computed, methods 속성도 활용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>component_basic</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        .fruit_style {/* 테두리 스타일과 안쪽 여백을 넣어줌*/
            border: 1px solid #ccc;
            background-color: #fff;
            padding-left: 1em;
        }
    </style>
</head>
<body>
    <div id="main">
        <h1>{{ sTitle }}</h1>
        <!-- 신규 컴포넌트 엘리먼트 2개 사용 -->
        <favorite-fruits></favorite-fruits>
        <favorite-fruits></favorite-fruits>
    </div>
</body>
<script>
    // 좋아하는 과일 3개를 표시하는 컴포넌트 정의
    Vue.component('favorite-fruits',{
        // 컴포넌트의 data 속성은 반드시 함수로 정의
        data: function(){
            return {
                aFruits:[{sFruit_name:'사과'}, {sFruit_name:'오렌지'},{sFruit_name:'수박'}]
            }
        },
        // 컴포넌트 템플릿 화면에 표시할 엘리먼트 구조 정의
        template:`
        <div>
            <div v-for="item in aFruits" class="fruit_style">
                <p>좋아하는 과일:{{item.sFruit_name}}</p>
            </div><br>
        </div>`
    });
    new Vue({
        el:'#main',
        data:{
            sTitle:'안녕하세요!'
        }
    });
</script>
</html>

* 박스 스타일

 - 화면에 표시할 영역을 눈으로 쉽게 확인하기 위해 CSS 스타일 적용

 - [.fruit_ style]이라는 클래스 선택자로 경계선 구성

 > 선 : 직선, 두께 : 1px, 색상 : #ccc(회색) 설정

 > 배경색 : 흰색

* 컴포넌트 사용

 - sTitle(제목 문자열) 변수 : h1 엘리먼트의 값으로 표시.

 - h1 엘리먼트 : HTML5 예약어는 커스텀 불가

 - favorite-fruits 커스텀 엘리먼트 : HTML 엘리먼트와 같은 방식으로 사용

 > 좋아하는과일 세 가지 목록을 표시

 > 두 번 연속 사용 : 두 번 표시됨

* 컴포넌트 등록 - 뷰 객체의 component() 함수를 사용해 엘리먼트 등록

 - 매개변수1 : [favorite-fruits] 전달

 - 매개변수2 : [data, template] 속성 정의

 > data 속성 : aFruits 배열을 JSON 형식으로 정의 - 변수나 함수로 선언

 > aFruits 배열 :  sFruit_name, 과일 이름(사과, 오렌지, 수박) 항목 3개 구성

 - function() 함수에서 return 문으로 반환

** 컴포넌트에서 data 속성을 사용할 때는 반드시 함수로 사용

 - 컴포넌트 안에 data 속성을 변 수로 선언하면 실행 시 인스턴스가 생성되지 않음
 > ‘ReferenceError: aFruits is not defined’라는 오류 발생

 - 같은 컴포넌트를 여러 개 사용 시, data 속성의 변숫값들이 별도의 메모리 공간에서 개별적으로 관리되도록 하려는 의도 

 - 따라서 컴포 넌트 내부는 반드시 함수로 작성해야 합니 다.

* 컴포넌트 템플릿 작성

 - div 엘리먼트로 그룹

 - v-for 디렉티브를 사용해서 aFruits 배열 변수에 있는 항목을 하나씩 꺼내서 표시

 - p 엘리먼트에 머스태시로 바인딩하기 위해 {{ item.sFriiit_name }} 입력

 > 항목이 3개 표시, fruit_ style 클래스 선택자로 스타일 적용

 

* [하나만 더 배워요!] 목록의 구조를 잡을 때 사용하는 ul, ol, li 엘리먼트
 - ul(unordered list)과 ol(ordered list) : 목록 영역 결정
 > ul : 순서 없는 목록 - 글머리 기호 항목 앞에 표시

 - li(list) : 목록의 각 항목 표시

 > ol : 순서 있는 목록 - 항목 앞에 번호가 하나씩 커지면서 표시

<!-- ul, ol, li 엘리먼트사용 예 -->

<ul>
  <li>사과 </li> <li> 바나나 </li> <li> 수박 </li>
</ul> 

<ol>
  <li> 커피 </li> <li> 홍차 </li> <li> 녹차 </li>
</ol>




05-4 컴포넌트 속성 props  

* 컴포넌트 속성(props) : 컴포넌트에서 전달되는 어트리뷰트의 값
 - 문자열, 객체 배열 형식

 > 좋아하는과일 나열 예제 변경 : 컴포넌트 엘리먼트로 props 속성 사용

 

* 010504 [DoIt!실습] 컴포넌트 속성을 활용해 좋아하는 과일 나열하기

- 0105/ex05_04 > component_prop.html 파일 생성

 

* 뷰 컴포넌트의 어트리뷰트를 선언하는 방법, 값을 전달받아 사용하는 방법 확인

 - 뷰의 컴포넌트 기능은 HTML의 일반엘리먼트처럼 사용할 수 있으므로 기능을 무한대로 확장가능

 > 다양한 주제별로 그에 맞는 엘리먼트 설계해서 사용
 > 의미있는 컴포넌트 엘리먼트 이름으로 심플코드 개발 가능(어트리뷰트 설계 유의) : 유지보수 용이

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>component_prop</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        // Vue 인스턴스에 신규 엘리먼트 컴포넌트 등록
        // props에 엘리먼트에 사용될 속서 이름 선언
        // template에 전달받은 속성 객체의 text 제목을 렌더링에 활용
        Vue.component('favorite-fruits', {
            props: ['fruit'],
            template:`<li>{{ fruit.text }}</li>`
        })
    </script>
</head>
<body>
    <div id="app">
        <h1>좋아하는 과일!</h1>
        <ol>
            <!-- 
                favorite-fruits 신규 엘리먼트 사용
                aFruits 배열의 값을 반복문으로 가져와 fruit 속성에 바인딩하여 컴포넌트에 전달
                key 속성은 반드시 고유한 값으로 전달되어야 하므로 item의 id값 대입
             -->
             <favorite-fruits
              v-for="item in aFruits"
              v-bind:fruit="item"
              v-bind:key="item.id">
             </favorite-fruits>
        </ol>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                aFruits:[
                      {id:0, text: '사과'}
                    , {id:1, text: '오렌지'}
                    , {id:2, text: '수박'}
                ]
            }
        });
    </script>
</body>
</html>

* 컴포넌트등록 

 - 컴포넌트 : HTML 엘리먼트와 동일하게 사용 - 어트리뷰트 사용가능

 > props 속성 선언

 - 선언된 이름을 다른 속성에서 전달받아 매개변수처럼 사용

* 컴포넌트 등록 (이름 : favorite-fruits)

 - props 속성에 대괄호([])를 사용해서 어트리뷰트 이름을 문자열로 선언
 > HTML에서 favorite-fruits 엘리먼트를 사용할 때 다음과 같이 fruit 어트리뷰트에 값 전달

 <favorite-fruits fruit="사과"></favorite-fruits>

* template 속성에 li 엘리먼트로 속성값 표시

 - 머스태시로 <li>{{ fruit.text }}</li> 작성 :  li 엘리먼 트값으로 바인딩
 > 속성값으로 전달받은 fruit 변수는 text 속성으로 전달

 > 유의 : props 속성에 선언하여 어트리뷰트로 전달받은 fruit 변수 : 일반 변수처럼 사용가능

* 컴포넌트사용 

 - favorite-fruits 컴포넌트를 등록 > 일반적인 HTML 엘리먼트처럼 사용

 > 소스에서는 먼저 ol로 순서 있는 목록의 영역 지정

 - 목록의 개별 항목은 li 엘리먼트 대신에 favorite-fruits 엘리먼트 사용

 > favorite-fruits 엘리먼트 : 내부적으로 li 엘리 먼트를 가지 면서 전달받은 속성값을 표시하도록 설계

 - 신규로 등록한 컴포넌트의 엘리 먼트에 어트리뷰트를 어 떻게 사용하는지 잘 표현

 - v-for 디렉티브도 사용가능 : aFruits 배열 변수에서 값을 꺼내 item에 하나씩 저장

 - v-bind 디렉티브를 사용해서 fruit 어트리뷰트에 바인딩하여 항목값을 전달

 > v-bind:key 바인딩은 v-for 디렉티브를 사용할 때는 key 어트리뷰트에 고유한 값 전달해 사용하도록 강제
 > item.id의 값을 전달하면 간단히 해결

* data 속성 

 - aFruits 배열 변수 : data 속성에 정의

 > JSON 형태로 id와 text에 번호와 과일 이름을 저장

 


05-5 상탯값 관리와 Vuex  

 

 


05-5 상탯값 관리와 Vuex  

 

 


05-6 내비게이션과 라우터  

 

 


05-7 새로 고침이 필요 없는 SPA 만들기  

 

 

+ Recent posts