강의 | 대외활동 | 개인플젝12 TodoList 구현 과정 설명 개요 todoList를 javascript로 구현하는 과정을 글로 정리함 구현 과정 각 UI 컴포넌트를 객체로 설계한 뒤 이에 대한 구현 코드를 작성하였음 컴포넌트 별로 UI를 분리한 것에 대해선 더 많은 설명이 필요하나 현재는 프론트엔드 단에서 UI 별로 인스턴스를 생성하여쓰는 것과 this를 쓰는 다양한 방법에 대해서 공유를 하기위해 목적임. 필요 과정 VSCODE 해당 프로젝트는 여러 javascript 소스를 분리하고 import 하는 방식으로 사용하였으므로 source 타입을 module로 지정하였음, 이에 따라 Live Server 플러그인을 설치하여 로컬 서버를 띄워야 화면에서 확인할 수 있음 Live Server 플러그인 설치 Live Server 플러그인 설치 후 index.html을 v.. 2023. 6. 2. 마스크 재고 관리 프로젝트 - 5 (AWS + 다른 서비스) 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하였고 프로젝트에 대해 정리하는 글을 작성하였습니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 이번 글은 Let's encrypt + 서버추가 세팅 + Git 서버에 올리기에 대한 내용을 담습니다. 목차 작업 목록 Let's encrypt 로 인증서 만들기 Nginx 서버 추가세팅하기 Git 서버에 올리기 CS (Customer Service) 작업 목록 마스크 재고 서비스를 위해 필요한 작업은 아래와 같다. Let's encrypt 로 인증서 만들기 Nginx 서버 추가세팅하기 Let's encrypt로 인증서 만들기 Let's encrypt를 설.. 2020. 4. 14. 마스크 재고 관리 프로젝트 - 4 (Full AWS) 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하였고 프로젝트에 대해 정리하는 글을 작성하였습니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 이번 글은 Full AWS 서버세팅에 대한 내용을 담습니다. 목차 Full AWS로만 세팅하기 작업 목록 Route 53 으로 도메인 연결하기 ACM 으로 SSL 인증서 만들기 로드밸런서 생성하여 인스턴스와 연결하기 Full AWS로만 세팅하기 서버 세팅은 AWS로만 구성해서 할 수도 있고 일부는 직접 작업할 수도 있다. 이번 글에는 AWS로만 구성하여 작업하는 것에 대해 설명한다. 작업 목록 마스크 재고 서비스를 위해 AWS에서 작업해야할 목록은 다음과 .. 2020. 4. 3. 마스크 재고 관리 프로젝트 - 3 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하였고 프로젝트에 대해 정리하는 글을 작성하였습니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 이번 글은 초기 서버세팅에 대한 내용을 담습니다. 서버세팅은 크게 2가지로 다룰 예정입니다. AWS로만 세팅하는 방법 하나와 일부분은 AWS로 세팅하고 나머지는 다른 tool 을 이용해 세팅하는 방법입니다. 후자의 경우 과금을 피하기 위한 절충안으로 전자의 방법보다 좀 더 많은 과정을 거칩니다. 그래서 이번 글은 AWS 위주로 세팅하는 방법을 먼저 설명합니다. 글을 읽으시면서 필요한 부분만 참고하시길 바랍니다. 목차 서버세팅 작업 목록 EC2 인스턴스 구동.. 2020. 4. 1. 마스크 재고 관리 프로젝트 - 2 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하였고 프로젝트에 대해 정리하는 글을 작성하였습니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 이번 글은 프론트엔드에 대한 내용을 담습니다. 목차 사용자 위치 Data 유의사항 프론트엔드 작업 작업 순서 데이터 확인 퍼블리싱 재고상태 화면 구성 요소 배치 반응형으로 만들기 JS 로 요소 렌더링 하기 요소 추가하기 요소 삭제하기 상태관리 결과물 추가사항 출처 사용자 위치 Data 유의사항 Google Doc에서 Geolocation API 를 사용할 때 유의할 점에 대해 설명해준 글을 찾아서 정리했다. 핵심 내용 사용자에게 거부감이 들지 않도록 하기 .. 2020. 3. 30. 마스크 재고 관리 프로젝트 - 1 개요 바이러스가 만연한 현재에 개발자로써 주변사람들을 도울 수 있는 방법이 없을까 고민을 하다가, 마스크 재고를 알려주는 사이트를 만들어야 겠다 결심하고 시작한 끝에 완성을 하였습니다. 완성해가는 과정에서 생각보다 많은 것을 얻을 수 있었고 배운 점을 잘 정리하면 사이드 프로젝트를 시작하는 분들께도 도움이 되고 저 나름 정리하는것 또한 학습차원에서 좋을 것 같아 글을 작성하였습니다. 점점 더 사회에 도움을 주는 개발자분들의 능력이 발휘되길 기원합니다. 프로젝트 글은 총 5편으로 나뉘어 작성될 예정이며 각 글은 자료조사, 프론트엔드, 서버세팅에 대한 내용을 담습니다. 목차 들어가기 앞서 자료조사 공공 데이터 포털(마스크 판매 정보) Geolocation API Permission API 들어가기 앞서 어느.. 2020. 3. 27. JPA 용어 정리 및 질문드릴 것 정리 JPA란?요약해본다면..기존에 내가 sping을 쓰면서 배운 mybatis 대신 할(기존의 mybatis는 DAO를 거쳐야 했고 이는 생산성 향상에 영향을 미쳤다고 봄) 기술로Hibernate, JPA라고 부른다. 해외에선 이미 mybatis를 누르고 압도적으로 사용되고 있다고 하고 국내의 유수한 기업들도 해당 기술을 사용하고 있다고 한다. JPA의 정의는 ORM을 위한 표준기술로, 여기서 ORM은 RDB가 객체지향적인 특징을 갖도록 해주고 접근할 수 있게 해주는 기술이다. 참고:http://blog.woniper.net/255http://blog.naver.com/PostView.nhn?blogId=noranlemon84&logNo=220774678674&parentCategoryNo=&category.. 2018. 11. 26. Arrays.asList 와 ArrayList 의 차이? 둘의 차이는 타입의 차이(List vs ArrayList) 로도 볼 수 있다. 예제로 보는 것이 더 쉬울 거 같아서 예제로 살펴본다. List list1, list2 = null; Integer[] array = { 5, 7, 9 }; list1 = new ArrayList(Arrays.asList(array));list1.add(11); list2 = Arrays.asList(array);list2.add(11) // error ! 와 같은 예제가 있다고 해보자 먼저 list1은 Integer 타입이고 ArrayList 타입이다. list2는 Integer 타입이고 List 타입이다. 그럼 List 타입과 ArrayList의 차이점은 무엇인가? 간단하다. List는 Interface 이고, ArrayL.. 2018. 11. 17. 좋아요 기능 수정할 때 발생한 문제 발생/해결 비동기로 작성한 sql 문이 동작안할 시에 예외처리를 해주려 하는 도중 오류 발생시 Cannot enqueue Handshake after invoking quit' 와 같은 에러문이 발생하면서 서버가 동작하지 않았다. 이 같은 문제가 발생해서 검색해보니 createConnection을 이미 했는데 다시 하려고 하거나 연결을 end 하기 떄문에 이 같은 문제가 발생하는 것을 알았다.https://stackoverflow.com/questions/14087924/cannot-enqueue-handshake-after-invoking-quit 1. wrapper 클래스로 참고한 쿼리문 비동기 처리 코드가 디비 연결을 아예 끊어버림 - 이 때문에 다른 api를 실행하려면 서버를 아예 죽였다가 다시 켜야함 2... 2018. 11. 13. 이전 1 2 다음
