개발길에서 살아남기

https://yozm.wishket.com/magazine/detail/1590/

https://www.youtube.com/watch?v=QZcYz2NrDIs 

https://www.youtube.com/watch?v=-tVaahsXpwk 

https://www.youtube.com/watch?v=o4HPzbwx_Xk

https://www.youtube.com/watch?v=Y7PHBSqDfvE 

차례대로 리액트, 뷰, 스벨트를 가져왔다

1. 리액트

우선 리액트의 큰 핵심은 이렇게 화면을 컴포넌트 단위로 쪼개고 쪼갠것의  props가 변하면 해당부분의 컴포넌트만 리랜더링하는 방식이다

리덕스를 사용하게 되면 이렇게 상태관리를 한곳에서 할수있다

코드의 구성은 이렇다

상태 값만 관리하고 하는김에 상태 관련 함수 들도 같이 관리한다

2. 뷰

뷰의 가장 큰 장점중 하나는 문법이 통일되어있고 배우기 쉽다

상태 변경도 간결하다

3. 스벨트

이전의 리액트와 뷰의 가장 큰 성능의 단점인 가상 dom 을 버리고 접근을 다르게 시도했다

스벨트는 컴파일러로 접근해서 코드용량을 줄이고 성능도 바닐라js 와 똑같은 성능을 보여줬다

웹을 들어가면 개발자가 작성한 코드와 리액트, 뷰 의 코드를 읽어왔는데

스벨트는 컴파일과정에서 스벨트로 만든 코드를 바닐라 js의 코드로 변환해주기때문에 웹은 변환된 코드만 읽으면 된다

가상dom? 

이 가상돔은 쉽게생각해서 변화하기 전 화면의 코드를 저장해둔다고 생각하면된다.

그리고 새로 들고온 돔과 가상돔이랑 비교해서 변화가 일어난 부분만 다시 렌더링 한다

이방식은 결국 돔의 사이즈가 커지면 비교할것도 많아지고 단계를 하나 더 거치게 되어서 성능이 느릴수밖에 없는구조다

스벨트가 주목받는이유??

input과 연동하고싶을때

스벨트의 if 

  웹이든 모바일이든 사용자가 현재 보고있는 화면이 모달인지 아니면 페이지인지

확실하게 인지하는 것이 가장 좋지만 때로는 모달을 사용하여 상세 페이지를 보여주어야 할 때가 있다 

그럴때는 사용자가 모달로 인식하지않고 당연히 페이지가 새로 이동되었다고 경험하고

안드로이드 유저라면 하단의 뒤로가기 버튼을

아이폰 유저라면 좌측상단의 뒤로가기 버튼또는 웹에서 뒤로가기 버튼을

PC유저라면 뒤로가기 모션 또는 페이지 뒤로가기를 

누를것이다.

이렇게 되면 사용자의 의도는 페이지가 한번 뒤로가기를 원했지만

두번 뒤로간 경험을 하고 해당 사이트에 ?를 띄울것이다.

친절한 사용자는 사실 페이지는 한번 뒤로갔다는 것을 모르고 뒤로가기시 페이지가 두번 뒤로간다고

고객센터에 문의를 남길것이다.

이러한 경험이 쌓이고 쌓일수록 사용자는 불편을 겪게되고

뒤로가기시 두번뒤로가지는 이상한 사이트가 되어버린다.

모달에 대해서 구글링을 하다가 모달 표준권장 같은 글을 본적이 있는데 모달자체가 페이지 이동하는 것이 아니라서

모달을 화면 전체에 띄워서 사용하는것은 사용자 경험을 망치기 때문에 사용을 권장하지 않고있다.

하지만 모달을 페이지처럼 띄워야하는 상황인데 권장사항이 중요한가?

그럼 사용자 경험을 망치지 않으면된다.  

코드를 설명하자면 뒤로가기 이벤트를 잡고 거기에서 뒤로가기시 페이지를 뒤로가지 않고 모달을 닫는 로직을 넣으면된다

https://yozm.wishket.com/magazine/detail/1542/

상단의 글에서 보기 쉽도록 정리했다

아래표는 2021~2022년 사이 가장 많이 사용되는 프레임 워크다

코드 스니펫 활용 (코드의 재활용)

코드 스니펫의 조건

1) 쉽게 검색할 수 있어야 하고

2) 태그(tag)를 적용할 수 있어야 하며

3) 버전 관리와 IDE 연동 기능 등이 있어야 한다

- ‘깃허브(GitHub)’에서 제공하는 Gist를 활용하면 어느 정도 이런 부분들을 충족할 수 있으나, 더 전문적인 수준에서 코드 스니펫을 관리하려면 스니펫 매니저 같은 전문 툴 활용을 추천

스니펫 매니저?

스니펫 매니저는 코드 스니펫을 관리해주는 툴. 대부분 오픈 소스로 무료로 사용할 수 있으며, 유료 서비스로 제공되는 것도 있음. massCode, Snibox, Snip 같은 스니펫 매니저도 있다. massCode를 이용하면 자신만의 코드 스니팻을 폴더 관리하듯이 깔끔하게 정리할 수 있으며, vscode Extention을 통해 웹 개발 시 손쉽게 활용가능하다.

반복업무 자동화 사용

- 자동화 도구 사용

테스트나 빌드 작업을 자동화할 수 있는 태스크 러너(Task Runners)와 리소스 번들링을 자동화하는 모듈 번들러(Module Bundler). 대표적인 태스크 러너와 모듈 번들러로는 npm scripts와 Webpack이 있음.

- 디자인 작업 간소화

 Prismic, imgix, Cloudinary 같은 서비스를 활용하면 반응형 디자인 작업 등을 편리하게 처리할 수 있다.

- Github Copilot 사용

‘AI pair programmer’라는 캐치프레이즈를 내세우고 있는 툴. Vscode에서 Extention으로 사용할 수 있으며, 함수명과 파라미터를 지정하고 주석을 작성하면 AI가 나머지 코드를 완성해준다.

display 와 다르게 visibility 는 디스플레이의 레이아웃을 해치지 않고 숨기기 표시하기가 가능하다 예를들어 버튼의 상태에 따라 버튼의 크기와 상관없이 icon만 보여주고 말고 하고싶다면 visibility 속성을 사용하자

핵심은 transition 을 지정해두면 앞으로 변화할 요소의 크키, 모양을 부드럽게 늘어나고 줄어들도록 지정한다

1. 크론탭 기본 (crontab basic)

명령어를 입력후 콜론(:) 입력 후에 wq 를 입력해 크론탭을 갱신

$ crontab -e

크론탭 확인

$ crontab -l

 크론탭 삭제

$ crontab -r

•  *  : 모든 값을 뜻합니다.
•  ?  : 특정한 값이 없음을 뜻합니다. 
•  -  : 범위를 뜻합니다. (예) 월요일에서 수요일까지는 MON-WED로 표현
•  ,  : 특별한 값일 때만 동작 (예) 월,수,금 MON,WED,FRI 
•  /  : 시작시간 / 단위  (예) 0분부터 매 5분 0/5
•  L  : 일에서 사용하면 마지막 일, 요일에서는 마지막 요일(토요일)
•  W  : 가장 가까운 평일 (예) 15W는 15일에서 가장 가까운 평일 (월 ~ 금)을 찾음
•  #  : 몇째주의 무슨 요일을 표현 (예) 3#2 : 2번째주 수요일

2. 주기 결정

*　　　　　　*　　　　　　*　　　　　　*　　　　　　*
분(0-59)　　시간(0-23)　　일(1-31)　　월(1-12)　　　요일(0-7)

순서대로 분-시간-일-월-요일 순 

요일에서 0과 7은 일요일 1부터 월요일이고 6이 토요일

3. 주기별 예제

4.2. 주석을 달아봅시다.

# 주석 #
#--------------------#
# 이것은 주석입니다. #
#--------------------#

# 을 입력해서 그 뒤로 나오는 모든 문자를 주석 처리

5. 크론 로깅 (cron logging)

크론탭을 사용해서 정기적으로 작업을 처리하는 것은 좋은데, 해당 처리 내역에 대해 로그를 남기고 싶을 때

* * * * * /home/script/test.sh > /home/script/test.sh.log 2>&1

위처럼 작성하면 매분마다 test.sh.log 파일이 갱신 되어 작업 내용이 어떻게 처리 되었는지 알 수 있다.

만약 2>&1 을 제거하면 쉘스크립트에서 표준 출력 내용만 나옴

로그가 과도하게 쌓이면 아래처럼 사용

* * * * * /home/script/test.sh >> /home/script/test.sh.log 2>&1

반대로 로그는 필요 없는 크론일때는 이렇게 사용

* * * * * /home/script/test.sh > /dev/null 2>&1

6. 크론탭 백업 (crontab backup)

crontab -l > /home/bak/crontab_bak.txt

크론탭 내용을 txt 파일로 만들어 저장

아래는 매일 오후 11시 50분에 백업해두는 명령어

50 23 * * * crontab -l > /home/bak/crontab_bak.txt

개인 프로젝트중에 웹 스캘핑을 해서 프린트를 찍으니 알 수 없는 공백이 생겨서 이것을 여러 방식으로 해결해보고자 했지만 가장 효과적이었던 것은 정규식으로 프린트로 쉽게 볼 수 있는 문자열을 제외해서 프린트를 찍는 방법이었다

이 방법이 항상 먹힌다는 보장을 하기에는 조금 자신이없다

왜냐하면 print를 찍으면 출력에 제외되는 문자가 혹시나 있을수있다

나는 이방식으로 알수없는 특수기호 공백을 찾아내서 replace로 데이터에서 제거했다

중괄호, 소괄호에 적용하고싶을때 대괄호를 해당괄호로 변경해주면 사용할 수 있다

웹을 만드는데 항상 부딛히는 문제가 있다

바로 웹 사이즈의 반응이다 그냥 웹 사이즈에 맞게 비율도 척척 알아서 늘어나고 줄어들면 소원이 없겠지만

그럴리없다

구글링을 몇번해본결과 em사용법은 기준치가 16px이고 수정 보완을 하기에는 자꾸 계산기를 돌려야하서

유지 보수에 힘들다고 판단되어서 바로 버렸다 그나마 다른 대안을 찾던중 rem을 보고 사용법을 알아보니

너무 완벽했다

https://codersblock.com/blog/creating-glow-effects-with-css/

여기 링크에서 필요한 부분만 떼오면

해당오류를 발견하고 구글링을 쭉하고난 후에

원인을 알았다

원인은 vscode 내에서 실행하는 파이썬 버전과 

로컬에 설치된 파이썬의 버전이 다르면 발생하는 오류였다

vscode 하단에 잘보면 지금은 변경해두었지만 이전에는 3.9버전이어서 인식을 못하는 오류였다

딥러닝(인공신경망) < 머신러닝 < 인공지능 


책
머신러닝 탐구생활 (입문용으로 좋음)
밑바닥부터 시작하는 머신러닝 <- 추천 책
핸즈온 머신러닝
케라스 창시자에게 배우는 딥러닝
딥러닝의 작동원리 두잇딥러닝입문


로드맵 추천
https://www.youtube.com/watch?v=WHn5My6dN7c

책추천 => https://tensorflow.blog/book-roadmap/
혼자 공부하는 머신러닝+딥러닝: 머신러닝과 딥러닝을 처음 입문하는 분, 수학 대신 그림과 친절한 설명으로 알고리즘을 이해하고 싶으신 분.

파이토치로 배우는 자연어 처리: 파이토치를 사용하여 다양한 자연어 처리 기술을 배우고 싶은 분. 파이토치와 딥러닝의 기본기부터 시퀀스 투 시퀀스 모델까지.
Do it! 딥러닝 입문: 딥러닝을 처음 배우려는 분, 밑바닥부터 신경망의 이론을 파이썬으로 직접 만들면서 배우고 싶은 분, 다른 딥러닝 도서들이 읽기 어려웠던 분.
구글 브레인 팀에게 배우는 딥러닝 with TensorFlow.js: 자바스크립트로 딥러닝의 전반적인 주제를 폭넓게 배우고 싶으신 분. 다양한 자바스크립트 예제를 바로 활용하고 싶은 분.

케라스 창시자에게 배우는 딥러닝: 딥러닝을 처음 배우는 분, 수학적 이론 보다는 활용에 관심이 많은 분.
딥러닝 일러스트레이티드: 딥러닝의 역사와 다양한 애플리케이션을 살펴 보며 텐서플로와 케라스를 사용한 딥러닝 모델 구현을 배우고 싶으신 분. 선형 회귀부터 강화 학습까지.

GAN 인 액션: 생성적 적대 신경망의 원리와 다양한 GAN 모델을 배우고 싶은 분, GAN 훈련의 어려움과 적대 샘플의 위험에 대해 알고 싶은 분.
미술관에 GAN 딥러닝: 생성 모델링에 대해 배우고 싶은 분, 변이형 오토인코더와 GAN 등을 사용해 글을 쓰거나 그림을 그리고 노래를 작곡하는 생성 모델 분야의 최신 기술을 알고 싶은 분.

핸즈온 머신러닝: 머신러닝과 딥러닝을 폭 넓게 배우려는 분, 사이킷런과 텐서플로를 모두 사용해 보고 싶은 분.
핸즈온 머신러닝 2: 머신러닝과 딥러닝을 폭 넓게 배우려는 분, 사이킷런은 물론 새롭게 바뀐 텐서플로 2와 케라스에 대해 깊게 공부하고 싶은 분.
머신 러닝 교과서: 머신러닝과 딥러닝을 폭 넓게 배우려는 분, 넘파이를 사용해 알고리즘을 처음부터 구현해보고 싶은 분, 사이킷런과 텐서플로를 모두 사용해 보고 싶은 분.
머신 러닝 교과서 3판: GAN과 강화 학습을 포함해 머신러닝과 딥러닝을 폭 넓게 배우려는 분, 넘파이를 사용해 알고리즘을 처음부터 구현해보고 사이킷런과 텐서플로를 사용해 다양한 알고리즘을 배우고 싶은 분.


머신러닝 파워드 애플리케이션: 실전 머신러닝 애플리케이션을 구축하는 방법을 배우고 싶은 분. 아이디어에서 데이터셋 수집, 모델 구축, 디버깅, 모니터링에 이르기까지 다양한 실전 지침 제공.


[개정2판] 파이썬 라이브러리를 활용한 머신러닝: 사이킷런을 사용하여 머신러닝의 다양한 주제를 폭넓게 탐색하고 싶은 분, 수학적 이론 보다는 활용에 관심이 많은 분.
파이썬을 활용한 머신러닝 쿡북: 사이킷런과 케라스의 활용 예제를 빠르게 참고하고 싶은 분, 이미지와 텍스트 처리의 다양한 사례를 배우고 싶은 분.
XGBoost와 사이킷런을 활용한 그레이디언트 부스팅: XGBoost를 포함하여 다양한 그레이디언트 부스팅 구현을 익히고 싶은 분.
텐서플로 첫걸음: 프로그래밍에 익숙하지 않은 분, 머신러닝/딥러닝을 공부한 적이 없는 분, 텐서플로에 대해 감을 얻고 싶은 분.

개발스토리

지금 현재 foreach 문을 너무 많이 돌아서 성능이 당연히 안나와서 나중에 고칠계획이다.

주요 로직은 foreach를 돌면서 $criteriaData 의 키를 기준으로 $dataArr0, $dataArr1에 접근해서 키의 값이 같다면 데이터를 가져와서 $dataArrSum에 합치고 다합치고 나면 $dataArr0, $dataArr1를 돌면서 $dataArrSum에 키가 없다면 0으로 채워준다

그리고 여기에서 하나 욕심낸 부분이 데이터를 그냥 합치는 것이 아니라 원하는 키만 합치는 기능도 넣었다

$extractDataArr 이매개변수인데 이부분에 합치고 싶은 키들을 배열로 던지면 키가 같은 애들만 합쳐준다