크롬 확장앱의 storage는 비동기라 사용할 때 불편한 것 같다... 비동기 3개가 엮여있는 경우가 생겨서 자꾸 헷갈렸다. docker container가 stop이 안되는 현상을 겪었다. sudo를 사용해도 permition denied가 떴다 다행히 이 글을 빨리 발견해서 해결할 수 있었다 https://itdar.tistory.com/372 Docker container stop 시에 permission denied 에러 도커 컨테이너 잘 돌리다가 삭제가 안되는 경우가 종종 있다. ``` sudo aa-remove-unknown ``` 위의 것을 입력해주면 관련 apparmor 를 날려주고 삭제가 된다. 이 때, apparmor 가 뭔가 찾아보니 리눅스의 보안 itdar.tistory.com 크롬..
이제 팀원 모두가 CI/CD의 중요성을 깨닫게 된 것 같다. 팀원들에게 배포를 수동으로 하는 방법을 알려준 결과였다. jenkins를 이용한 CI/CD는 이전에 해본 적이 없어서 구축하는데 시간이 오래 걸리는 것 같다. 아직 다른 구현사항이 많이 남아있어서 구축을 못했다. 다음 프로젝트때는 꼭 CI/CD를 하고싶다. jenkins 플러그인 설치부터 Fail이 발생하는데...후 그리고... 프론트엔드 docker 컨테이너를 다른 포트로 띄워줬다. 잘 되나 싶었는데 이번에는 간헐적으로 nginx에서 502에러가 발생했다. 내부적으로는 104코드가 떴다. 104: Connection reset by peer 이걸로도 삽질을 계속 하다가 그냥 재부팅을 해보기로 했다. 재부팅하니까 해결된것같다. 재부팅 전에는 1..
굉장히 이상한 오류가 생겼다. 도커로 빌드해서 서버에 올렸는데 처음에는 새 코드가 뜨다가 어느 순간 보면 자꾸 옛날코드가 반영되어있었다. 그런데 신기한건 20분쯤 지나면 다시 새 코드가 반영된다. 그리고 또 좀 지나면 옛날코드가 뜰 때도 있다. 브라우저에서 캐시비우기 및 강력새로고침을 해도 결과는 같았다. 도커 빌드시에도 no cache옵션을 사용해봤고 docker prune -a 명령어도 사용해봤다. 도커 안에서 curl로 테스트도 해 보았고 도커 밖에서도 테스트 해봤는데 도커 안에는 분명 새 코드가 반영되어있었고 접속도 잘 되는데 도커 밖에서가 문제였다. 해본 것 1. 브라우저 캐시 비우기 및 강력 새로고침 2. 도커 빌드시 no cache 옵션 사용해보기 3. 도커 이미지 태그 바꿔보기 4. 도커 ..
23일차는 금요일이었어서 토요일이 된 오늘 작성중이다. 23일차에는 개발 외에 잡혀있는 고정일정이 있어서 개발시간이 적었다. 신경쓸것이 많아서인지 평소보다 집중이 잘 안되는 하루였다. 다른 팀원들도 평소보다 집중이 안된다고 말했다. chrome storage api는 역시 어렵다... 어려운 이유 확장앱만의 기능이라서 developer tools을 사용해 저장된 내용을 확인할 수 없다. 그래서 디버깅이 어렵다. console.log로 확인해야한다 저장, 읽기가 모두 비동기다. 반성 및 할일 1. Storage Area Explorer 를 활용하자 개발자도구로 저장된 내용을 확인 불가능한것이 가장 불편했는데, 이를 해결해주는 Storage Area Explorer 라는 확장앱을 찾았다. 다음부터는 이것을 ..
날짜별로 회고록을 적는 분을 보고 적고 싶어져서 지금부터라도 적게 되었다. 오늘은 nginx 설정을 하고 테스트를 해봤다. 예전 졸업프로젝트때에는 스프링서버, flask서버, 프론트서버 이렇게 ec2 인스턴스를 3개 썼었다. 하지만 이번 프로젝트에서는 1개만 사용하고 있다. 따라서 /api로 시작하는 요청이 들어오는 경우 모두 백엔드 포트로 보내고 나머지는 모두 프론트엔드 포트로 보내기로 했다. 설정은 어렵진 않지만 삽질을 조금 했다. /api로 오는 요청은 백엔드로 보내기로 했는데 예를들어 https://도메인/api/test로 외부에서 요청하면 http://localhost:8080/api/test로 보낸다. http://localhost:8080/test로 보내는게 아니다. 이걸 테스트하고싶어서 백..
원래는 SCSS만 되던 기능이었는데 2023년에 CSS에도 추가되었다. "Scss만 되는 줄 알았는데 CSS에서 nesting 썼는데 돌아가더라?" 라는 팀원의 말을 듣고 찾아보게 되었다. 🤷♀️Nesting(중첩) 이 뭐죠? 예시 코드는 아래와 같다. /* Nesting 적용 전 */ .header { background-color: #333; } .header h1 { color: #fff; } .header nav { font-size: 16px; } /* Nesting 적용 후 */ .header { background-color: #333; h1 { color: #fff; } nav { font-size: 16px; } } 🙅♀️잘못된 사용 예시 SCSS에서는 되고 CSS에서는 안되는 것 S..
Vue.js is detected on this page. 라고 써있지만 F12를 눌렀을 때 크롬 개발자 도구에서 Vue 탭이 나오지 않았다. 확장 프로그램 설정에서 "파일 URL에 대한 액세스 허용"을 체크해주니 해결되었다.
Vue에서 hammer.js를 이용하려고 했는데 실제 dom element를 전달해줘야 했다. Vue는 가상 DOM을 이용하는데 어떻게 해야 할까? 템플릿 참조를 이용하면 된다. 먼저 ref와 onMounted를 꼭 import 해준다. import { ref, onMounted } from 'vue' onMounted는 컴포넌트의 DOM 트리가 문서 내에 있음을 보장한다. onMounted 전에는 DOM에 접근할 수 없다. https://ko.vuejs.org/guide/essentials/lifecycle.html 생명 주기 훅 | Vue.js ko.vuejs.org 그리고 아래와 같이 사용하면 된다. 이때 :ref가 아니라 ref인것에 주의한다. https://ko.vuejs.org/guide/es..
