DalpangLOG

https://svelte.dev/examples/keyed-each-blocks Keyed each blocks • Svelte Examples svelte.dev Home https://svelte.dev/ Svelte • Cybernetically enhanced web apps complete Built-in scoped styling, state management, motion primitives, form bindings and more — don't waste time trawling npm for the bare essentials. It's all here. svelte.dev Docs https://svelte.dev/docs/introduction

개발공부 2024. 4. 1. 23:14

Google Form 구글 설문 새로운 Blank Form을 만들어보자. 여러 질문들을 원하는 방식에 따라 생성할 수 있다. BUT!! 만약 스크립트를 사용할예정이라면? 꼭! 각 설문 문항의 질문을 가능한 한 명확하고, 짧게 쓰는 걸 권장한다. 설문문항 작성이 끝났으면, 오른쪽 귀퉁이에 있는 메뉴를 눌러, 스크립트 에디터를 클릭하자 이제 이렇게 스크립트 에디터가 나온다 자바스크립트 형식으로 여기에 스크립트를 작성 후, 트리거를 등록해 주면, 내가 설정한 시점에 스크립트가 작동한다. 실행시킬 function이름과, 실행 시점. 그리고 내가 알람을 받을 시점등을 설정해 놓으면 끝! 기본적으로 어떤 방식으로 썼는지만 정리한 것. 다음 시간에 스크립트를 어떤 식으로 작성해서 사용했는지 정리해 올려야겠다 :)

개발공부/개발공부 2024. 2. 26. 23:00

Terminal 에서 해당 경로로 이동 후, idea 파일 열기 cd /usr/local/bin sudo vim idea 파일 내부 부분중 RUN_PATH, CONFIG_PATH, SYSTEM_PATH를 새로운 버전에 맞게 수정해주기 //수정 전 RUN_PATH = u'/Applications/IntelliJ IDEA.app' CONFIG_PATH = u'/Users/[username]/Library/Application Support/JetBrains/IntelliJIdea2022.3' SYSTEM_PATH = u'/Users/[username]/Library/Caches/JetBrains/IntelliJIdea2022.3' //수정 후 RUN_PATH = u'/Applications/IntelliJ ..

개발공부/개발공부 2024. 1. 29. 14:05

목차 1) Teleport 기능 2) Composition API 1) Teleport 기능 react의 portal과 비슷한 기능. child component를 teleport 태그로 감싸, 어떤 태그(css 셀렉터)안에 렌더링 될지 정할 수 있다. 기존 vue2에서 부모 컴포넌트 내부에 어느 위치에 컴포넌트를 놓았는지에 따라 그 위치에 바로 적용 되었었지만, teleport기능을 사용하면, 실제 자식 컴포넌트를 부모컴포넌트 파일 내 어디에 놓던지 크게 상관없게 됨. => 이로 인해 nested 되어 생성되던 기존 자식 컴포넌트 렌더링 방식 보다, 좀 더 semantic 하게 코드를 짤 수 있다고 한다. 고로, multiple root component를 내부에 추가할 수 있게 되었다. 2) Comp..

Programming/FrontEnd 2024. 1. 28. 17:19

Vue 2 to Vue 3 migration 정리 더보기 주요 변경사항. - Vue Instances/apps, Router, Vuex의 생성을 각각 : createApp(), createRouter(), createStore()으로 하게 됨 - data를 method안에 작성한다. directives & third-party 모듈을 "App"안에 작성한다, 기존에는 global object안에 작성함. 새로 추가된 사항. teleport component fragments (Optional) composition API - watch, computed 대신 사용 가능. Better Typescript 목차 1) App.vue의 'el'이 사라지고 mount를 사용 2) Data를 Object가 아닌 M..

Programming/FrontEnd 2024. 1. 28. 15:22

PR - Pull Request는 GIT에서 제공하는 리뷰 기능이다. 작업하던 브랜치에서 메인이나 개발서버, 스테이징서버에 연결된 브랜치에 머지하기 전 내 코드에 혹시 문제가 있진 않을지 아님 더 나은 방식은 없는지 개발자는 늘 궁금하다. 이럴 때 사용하는 게 바로 PR! Pull request를 사용해 내가 개발하던 브랜치에서, 머지하려는 브랜치로 머지하기 전 Reviewer들을 추가해 내 코드의 수정사항에 대하여 리뷰를 받을 수 있다. 리뷰를 통해 잘못된 코드에 대한 수정과, 개선사항을 적용한 후, 승인을 받게 되면 그때 머지 하려는 브랜치에 통합시키면 된다. 현재 Atlassian - Bitbucket을 사용 중인 현재 우리 팀에서도 가장 잘 쓰고 있는 기능 중 하나이다. 처음 현업에서 내 생초보 ..

개발공부/개발공부 2024. 1. 28. 00:33

TypeScript 기본정리 - 자바스크립트의 특징은 타입선언이 유연하다는 것이다. 그러나 이 특징으로 인해, 특정 타입으로 지정할 생각으로 만든 변수에 대해 작업되는 메서드를 만들었을 때, 다른 타입의 데이터가 입력되는 경우, 해당 변수가 새로 입력된 타입의 변수로 변경되므로 이전 타입기준으로 작성된 메소드에 오류가 일어나는 등의 문제를 일으키기도 한다. 이 경우 자바스크립트는 런타임에러를 반환하게 되는데, 런타임에러가 나면 정확히 어느 부분이 문제인지 알기 힘들때가 많다.... 이런 문제들을 줄이기 위해 사용하는게 TypeScript! Java와 같이 타입을 지정해줄수 있다. 단, 실제 브라우저는 TypeScript 가 아닌 JavaScript만 인식하므로, 실제 실행되는 파일은 .js파일이라는 것 ..

Programming Languages 2024. 1. 22. 23:38

nvm으로 설치했던 node 버전 하나를 삭제했다가 'nvm use'를 통해 설정한 node 버전이 계속 초기화되는 문제가 발생했다. 어떻게 해결했는지 정리해보자. 1. 우선 현재 버전을 확인한 후, 사용할 버전을 지정해 줬었다. nvm ls #사용가능한 nvm 노드 리스트 확인 nvm use '특정버전' #사용할 버전 지정 node -v #버전 확인 => 새로운 터미널을 켜면 다시 이전 지정됐던 버전으로 돌아가는 문제가 발생. 임시 조치 밖에 안 되는 해결방식이었다. 롤백되는 설정 기준이 system이었는데. 이건 내가 'brew'를 사용해서 설치해 놨던 노드 버전이 있었기 때문이었다. brew uninstall node --force #설치된 노드 삭제하기 설치된 노드를 삭제해 사용할 노드 버전을 모..

개발공부/개발공부 2024. 1. 15. 16:24

ls, cd, vi 커맨드등 내가 필요한 커맨드가 다 실행이 안될 때. 아마 PATH 수정으로 인한 에러로 보인다. 아래의 코드를 통해 임시 환경변수를 설정하면 일단 vi 등의 커맨드를 사용할 수는 있지만, 새 탭, 새창의 terminal에서는 작동 안 함. (임시니까) export PATH=%PATH:/bin:/usr/local/bin:/usr/bin 만약 기존 환경변수 설정 파일이 저장되어 있는 경우는 위와 같이 임시 환경변수를 세팅한 후, 기존 설정으로 변경하고 "source ~/zshrc" 커맨드를 통해 적용시켜 주면 해결될 수도 있다. 그러나, 나는 이전 zshrc 파일 복사본도 없고, 설정변수를 바꿔봐도 뭔가 안 되는 게 있어서 새로 라이브러리를 다운로드하여야 했다. /bin/bash -c "..

개발공부/개발공부 2024. 1. 12. 15:43

Import 클릭 입력창에 사용할 Curl 커맨드 입력시 자동으로 해당 Curl 커맨드와 동일한 역할을 하는 요청이 생성된다! 반대로 만약 작업한 API 테스트를 Curl 명령어로 변경하고 싶다면 작업한 파일 우측의 Code 부분을 누르면, 해당 api 테스트에 맞는 Curl 명령어를 반환해준다.

개발공부/개발공부 2024. 1. 12. 14:11

Vue 기능 관련 검색을 하다가 한국 커뮤니티 사이트를 찾았는데 (https://vuejs-kr.github.io/meetup/#/) 현재는 활동하지 않는 것 같다. 둘러보던 중 Vue Playground를 찾게 되서 시간 있는 김에 간단한 실습을 해봄! 일반적으로 처음에 많이 하는 게시판이지만, 사실 게시판도 아니고 그냥 데이터 입력, 삭제만 구현함. 생각보다 실습하기 쾌적하게 되어있어서 좋았다. Vue SFC Playground : https://play.vuejs.org/Vue SFC Playgroundplay.vuejs.org {{ msg }} register {{ content }} del 짧은 시간동안 뚝딱뚝딱 만든 코드라 조잡할순있지만 실무 코드 보다가 이걸 만드니까 머리도 가벼워지고 재밌당..

Programming/FrontEnd 2024. 1. 10. 16:20

변화가 생긴 라인 왼쪽 파란 줄을 왼쪽클릭 할 경우 나오는 알림창 해당 라인에 대한 변화 Rollback 가능

개발공부/개발공부 2024. 1. 10. 10:41

Deployment 생성 시 - Deployment가 생성되며 자동으로 rollout이 trigger 된다. 이렇게 trigger 된 rollout이 deployment revision을 생성한다. (즉, 자동으로 revision#1이 생성됨!) Container가 update 된 경우 Container에 새로운 버전이 생성된 경우, rollout이 trigger 되며 deployment revision이 생성된다. 생성된 Deployment revision을 이용해 필요시 rollback이 가능하다. Rollout Status 확인 kubectl rollout status deployment/myapp-deployment Deployment Revisions and history kubectl roll..

개발공부/Kubernetes 2024. 1. 3. 19:32

Deployments를 사용하는 이유? 다음과 같은 이유로 Deployment를 사용한다. 1) Production 환경에서 웹 서버를 운영하려고 할 때, 여러 이유로 인해 하나가 아닌 여러개의 instances들을 동작시켜야 할 필요가 있을 수 있다. 2) 새로운 버전의 application이 docker registry에 등록되어 available 하게 되면 이를 운영 중인 애플리케이션에 적용시키고 싶을 것. 이때, docker instances들이 운영 중에 장애가 나지 않도록 하나씩 업데이트되는 방식을 rolling update라고 한다. 3) 만약 rolling updates 중에 장애가 나면 해당 작업을 rollback. 4) 환경 자체에 여러 변경 및 upgrade가 적용되어야 할 때 (예를..

개발공부/Kubernetes 2023. 12. 26. 23:26

Replication Controllers and ReplicaSets Controllers : Brain behind the kubernetes. Replication Contollers : to run multiple instances of a single pot in a Kubernetes cluster, thus providing high availability. 하나의 pod만 실행 시에는 필요 없을까? nope, 만약 작동 중인 pod에 문제가 생겼거나 꺼지는 경우 replication controller를 사용하면 자동으로 새로운 pod를 생성, 실행시켜 줌. 항상 정해진 개수의 pod가 실행될 것이라는 것을 보장받을 수 있다. 또한, replication controller를 통하면, de..

개발공부/Kubernetes 2023. 12. 26. 19:00

yaml 파일은 XML, JSON와 같이 Data를, esp. Configuration Data를 표현하는데 쓰인다. yaml 파일의 형식은 다음과 같이 나뉜다. - Key Value Pair - Array / List - Dictionary / Map 데이터 앞의 Space Depth를 통해 같은 Depth인지 아닌지 가늠되기 때문에, 작성 시 각각의 요소 앞에 빈칸의 깊이가 내가 의도한 수준이 맞는지 주의가 필요하다. Dictionary : Unordered Collection List : Ordered Collection # : 한 줄의 시작점에 #를 넣을 경우 주석(코멘트)으로 인지함. 프로젝트 내부에서 여러 프로필을 사용하는 경우 application.yaml, application-additi..

개발공부/개발공부 2023. 12. 15. 14:04