본문 바로가기
반응형

전체 글39

가민 에픽스 gen2 후기(일상편) with 피닉스7x 목차 서론 피닉스7x의 단점 피닉스7x의 장점 워치 페이스 스트랩 알림 충전 마무리 서론 기존에 갤럭시 워치 액티브 2 44mm 블루투스 스테인리스 모델을 3년 조금 넘게 사용하다가, 운동용으로 사용하기에는 배터리가 너무 약해져서 이번에 가민 모델로 갈아타게 되었다..! 19년도에 액티브2 알루미늄 모델이 직접 차 보니 장난감 같은 느낌이어서.. 스테인리스 모델로 바로 갈아탔었다.. (워치 페이스가 그립다..) 가민 제품을 유튜브나 카페에서 찾아보고, 매장에서 실물까지 확인한 후 배터리 깡패라고 불리는 피닉스 7x와 엔드류2 에 눈길이 갔었다.(AOD 기준으로 15일, 태양광 충전까지 하면 +@) 두 모델 가격대가 만만치 않아서... 상태 좋은 피닉스 7x를 입양하게 됐다! 결론부터 말하자면 날씨가 너무.. 2023. 1. 29.
[React] 사진첩 게시판 저번에 작업했던 vue2_photo_board와 컴포넌트 구조, 스타일링, 변수, 함수를 최대한 동을하게 구성하여 해서 진행하였다. 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 통신과 랜더링 7. 전체소스 1. 환경 node v18.12.1 react v18 (useContext, react-query) 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ board.js : context방식의 api 인스턴스 ⌞ boardClient.js : axios로 직접적인 통신 ⌞ components ⌞ layout ⌞ImageLoading.jsx : 이미.. 2023. 1. 4.
[Vue] 사진첩 게시판 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 주요 메서드 7. 전체소스 1. 환경 node v16.15.0 or v18.12.0 vue2 vue/cli 5.0.8 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 요청 게시물 개수 설정 (설정값 로컬스토리지에 저장) 4. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ ContactsAPI.ts : API 호출 및 데이터 반환. ⌞ components ⌞ Layout ⌞Loading.vue : 로딩 애니메이션 ⌞ Item.vue : 게시물1개에 대한 컴포넌트 ⌞ List.vue : 게시물의 목록 컴포넌트 ⌞ Modal.vue : 모달창 컴포넌트.. 2022. 11. 17.
[React] 이벤트 핸들링 HTML과 비교 리액트가 만들어주는 가상DOM Element와 HTML DOM Element 에서 사용되는 이벤트 핸들러의 사용법을 비교해 보았다. 1. onClick 이벤트 HTML HTML onClick function htmlHandleClick() { console.log('You clicked onClick.'); } 일반적인 함수 호출형 방식 React React onClick function handleClick() { console.log('You clicked onClick.'); } 리액트에서는 onClick={ } 안에서 자바스크립트 함수를 동작시킬 수 있는데, 함수 선언 으로 함수의 이름으로 연결해 주는 방식을 사용한다. 만약 onClick={ handleClick() } 처럼 함수 호출식으로 사용.. 2022. 11. 10.
견적서 설정화면 보호되어 있는 글 입니다. 2022. 11. 1.
설악산 대청봉 오색코스 탐방기(22.09.30) 2022년 09월 30일 금요일 날씨 맑음 최저기온: 14.8도 최고기온: 27.7도 요즘 매주 등산을 가고 있다. 집 근처 남한산성을 시작으로, 청계산, 설악산 울산바위, 비룡폭포 등등 이번에는 조금 더 긴 코스를 도전해보려고 찾던 중 충북에 있는 월악산 편도 3시간 40분 코스를 가보려고 했으나 대청봉을 갔다 온 친구의 경험을 들어보고, 대청봉으로 목적지를 변경했다. 집에서 먼 거리의 산행을 할 때는 근처에 사우나가 있는지 꼭 확인하는데, 월악산과는 달리 대청봉 오색코스에는 입구에 사우나가 보란 듯이 있었다! "주차" 오색탄산온천 강원 양양군 서면 대청봉길 34 오색탄산온천은 오색그린야드 호텔과 붙어 있어서 호텔 주차장과 헷갈렸는데, 오색그린야드 호텔에서는 온천 이용객이 8시간만 무료라고 적혀 있고,.. 2022. 10. 3.
언매니지드 언어와 매니지드 언어 프로그래밍 언어는 메모리 관리 방식에 따라 언매니지드 언어와 매니지드 언어로 분류할 수 있다. C언어 같은 언매니지드 언어는 개발자가 명시적으로 메모리를 할당하고 해제하기 위해 malloc()과 free()같은 저수준(low-level)메모리 제어 기능을 제공한다. 언매니지드 언어는 메모리 제어를 개발자가 주도적으로 할 수 있으므로 개발자의 역량에 따라 최적의 성능을 확보할 수 있지만 그 반대의 경우 치명적 오류를 생산할 가능성도 있다. 자바스크립트 같은 매니지드 언어는 메모리의 할당 및 해제를 위한 메모리 관리 기능을 언어 차원에서 담당하고, 개발자가의 직업적인 메모리 제어를 허용하지 않는다. 즉, 개발자가 명시적으로 메모리를 할당하고 해제할 수 없다. 더 이상 사용하지 않는 메모리의 해제는 가비지 콜.. 2022. 9. 29.
인터프리터 언어, 컴파일러 언어 비교 컴파일러 언어 인터피리터 언어 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드로 변환한 후 실행한다. 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행한다. 실행 파일을 생성한다. 실행 파일을 생성하지 않는다. 컴파일 단계와 실행 단계가 분리되어 있다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행한다. 인터프리트 단계와 실행 단계가 분리되어 있지 않다. 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행한다. 실행에 앞서 컴파일은 단 한번 수행된다. 코드가 실행될 때마다 인터프리트 과정이 반복 수행된다. 컴파일 실행 단계가 분리되어 있음으로 코드 실행 속도가 빠르다. 인터프리트 단계와 실행 단계가 분리되어 있지 않고 .. 2022. 9. 29.
HTTPS HTTP의 취약점 1. 암호화 되지 않은 통신이기 때문에 도청 가능 HTTP를 사용한 리퀘스트, 리스폰스 통신 내용은 암호화 되지 않고 평문으로 통신하게 된다. 2. 통신 대상을 확인하지 않기 때문에 위장 가능 HTTP에 의한 통신은 상대가 누구인지 확인하는 처리가 없기 때문에 누구든지 리퀘스트를 보낼수 있고, 리퀘스트가 오면 상대가 누구든지 리스폰스를 반환하게 된다. 3. 완전성을 증명할 수 없기 때문에 변조 가능 리퀘스트, 리스폰스가 발신 된 후에 상대가 수신하는 사이에 메시지 내용이 변조되어도 알수가 없다. HTTP + 암호화 + 인증 + 완전성 보조 == HTTPS HTTPS HTTP통신을 담당하는 소켓이 SSL(Secure Socket Layer) 또는 TLS(Transport Layer Sec.. 2022. 9. 27.
HTTP헤더 필드 General Header Fields 헤더 필드 명 설명 Cache-Control 캐시 동작 지정 Connection Hop-by-hop 헤더, 커넥션 관리 Date 메시지 생성 날짜 Pragma 메시지 제어 Trailer 메시지 끝에 있는 헤더(청크전송 인코딩) Upgrade 다른 프로토콜에 업그레이드 Via 프록시 서버에 관한 정보 Warring 에러 통지 Request Header Fields 헤더 필드명 설명 Accept 유저 에이전트가 처리 가능한 미디어 타입 Accept-Charset 문자셋 우선 순위 Accept-Encoding 콘텐츠 인코딩 우선 순위 Accept-Language 자연어 우선 순위 Authorization 웹 인증을 위한 정보 Expect 서버에 대한 특정 동작의 기대 F.. 2022. 9. 27.
TCP/IP의 계층(Layer) 구조 - 애플리케이션 계층 애플리케이션 계층은 사용자들에게 직접적으로 제공되는 프로토콜이 준비되는 계층 (HTTP, FTP, DNS, SMTP, TELNET...등등) - 트랜스포트 계층 트랜스포트 계층은 네트워크로 접속되어 있는 서버와 클라이언트의 데이터 흐름을 담당한다. TCP, UDP 두가지 프로토콜이 준비되어 있다. TCP(Transmission Control Protocol) 신뢰성있는 바이트 스트림 서비스, 용량이 큰 데이터를 보내기 쉽게 TCP 세그먼트라고 불리는 단위 패킷으로 작게 분해 하여 수신측에 전송 하고, 정확하게 전송 됐는지 확인하는 역할을 한다. Three way handshaking 패킷 데이터가 정확하게 전송 됐는지 확인하기 위한 기능, 1. 송신측에서는 최초 SYN 플래그로 수신.. 2022. 9. 27.
[VanilaJs] 게시판 만들기 (5) - 댓글 조회 및 등록 1. 댓글 데이터 구조 댓글 데이터 구조는 게시물 1개에서 commentList 배열 형식으로 진행 하였다. { "no":1, "title":"Bird of Paradise", "content":"Change Packing Material on Right Foot", "commentList": [ { "no": 1, "name": "작성자1", "comment": "ㅋㅋ", "date": "2022-02-20" }, { "no": 2, "name": "작성자2", "comment": "ㅎㅎㅎ", "date": "2022-02-20" } ], "date":"2021-07-12" } 2. 댓글 개수 출력 댓글이 존재하면 게시물 제목 옆에 댓글의 개수가 출력되게 된다. //로컬스토리지의 내용을 읽어서 테이블에.. 2022. 7. 7.
[VanilaJs] 게시판 만들기 (4) - 글 상세보기와 수정 1. 글 상세보기 글 상세보기는 mode가 Detail 일때, 수정이 불가능한 화면에서 게시글 내용을 확인 할 수있다. 해당 아이콘을 누르면 detailItem 함수에서 글번호 (no)값을 넘긴다. function detailItem(no) { modalOpen('Detail'); let detail = _storageData.filter((data) => { return data.no == no; }); let title = document.getElementById('title'); let content = document.getElementById('content'); title.value = detail[0].title; content.value = detail[0].content; title.r.. 2022. 7. 3.
[VanilaJs] 게시판 만들기 (3) - 글 삭제와 등록 저번에 만들었던 모달창을 활용하여 글을 삭제하고, 등록 하는 기능을 만들려고 한다. 1. 글 삭제 먼저 삭제버튼을 만들기 위해 각 열마다 삭제 버튼을 추가해 주려고 한다. bootstrap 아이콘을 사용하기 위해 cdn 링크를 추가해 주었다. 기존 boardListAction 함수에 action 영역을 만들어주고, 상세 페이지 아이콘에 상세페이지 동작(detailItem)함수와, 삭제 아이콘에 삭제 동작(deleteItem)함수를 추가하고, 해당 고유값(data.no)를 넘겨 주었다. 열마다 아이콘이 추가된 모습. function deleteItem(no){ if (confirm(no +'번 글을 삭제하시겠습니까?') === true) { _storageData = _storageData.filter(f.. 2022. 7. 1.
[VanilaJs] 게시판 만들기 (2) - Modal창 마크업 및 동작 vue.js를 사용했을 때 처럼 모달창을 재사용이 가능한 단독적인 템플릿으로 작성하고 싶었다. html안에서 html을 부르는 방법은 여러가지가 있었는데, 제일 안정적이라 판단한 js의 XMLHttpRequest객체를 사용해보았다. 먼저 modal.html 파일을 생성하고 마크업 부분은 아래와 같다. 글 등록 Save Close index.html에 모달을 활성화 할수있는 버튼과, 모달이 활성화 됐을때 그림자를 담당하는 영역, 모달창 html을 불러오는, 영역을 추가해 주었다. w3-include-html 속성을 참고하며 js부분을 확인해 보겠다. w3school에서 퍼온 html파일 로드부분을 추가해주었다. function modalOpen() { document.getElementsByClassNam.. 2022. 6. 28.
[VanilaJs] 게시판 만들기 (1) - 글 목록 조회 및 페이징 처리 1. 글 목록 조회 1-1. json 데이터를 localstorage에 저장 //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async function dataSet() { const data = await fetch("./data.json") .then(response => { return response.json(); }); window.localStorage.setItem('storageList',JSON.stringify(data)); } 개발자도구 -> Application -> Storage -> Local Storage 에 storageList이름의 키로 데이터가 저장된것을 확인 할 수 있다. //data.json 내용을 로컬스토리지에 문자형식으로 넣는다. async func.. 2022. 6. 28.
"RangeError: Maximum call stack size exceeded" "RangeError: Maximum call stack size exceeded" 스크립트상에서 호출이 많이 발생해서 생기는 오류라고 한다. 보통 재귀를 잘못 태웠을때 발생했는데, 라우터 이동할때 로직상 재귀가 없는데 발생하여 하나씩 지워보다가 발견한 문제는 mixin 이였다. 페이지마다 mixin을 사용해서 데이터를 불러오는 나름 함수를 공통화 시켜줬는데.. mixin 부분을 지우니 해결되었다. 결론은 1. mixin선언부가 잘못되었다. 2. mixin안에서 의도치않게 재귀타고있다. 약간 2번이 더 가까운데 다음에 더 알아보는걸로.. 2021. 6. 14.
[Vuetify] 데이터 테이블 헤더 show/hide 환경 - Vuetify2 데이터 테이블 헤더부분을 활성화, 비활성화해주는 예제입니다. headers: [ { text: 'Dessert (100g serving)', value: 'name', align: '', show: true }, { text: 'Calories', value: 'calories', align: '', show: true }, { text: 'Fat (g)', value: 'fat', align: '', show: true }, { text: 'Carbs (g)', value: 'carbs', align: '', show: true }, { text: 'Protein (g)', value: 'protein', sortable: true, align: '', show: true },.. 2021. 6. 12.
젠킨스 간단 사용기 #3. 자동배포 테스트 Contents 젠킨스 간단 사용기 #1. 설치 젠킨스 간단 사용기 #2. GitHub 연동 젠킨스 간단 사용기 #2. 자동배포 테스트 환경 - Red Hat Enterprise Linux version 8 - JDK 1.8 - Jenkins 2 - Node 10 - Nginx - Git - GitHub 목적 - Vue 소스를 빌드하여 GitHub에 푸쉬 하는 이벤트로 서버에 자동으로 배포 저번 게시물에서 젠킨스 설치까지 완료하였으며, 이번 게시물에서는 GitHub와 연동 및 Vue소스를 빌드하여 자동으로 서버에 배포되는 과정을 진행해 보도록 하겠습니다. 1. 계정 설정 Jenkins 관리 > Manage Credentials > (global) > Add Credentials Kind : Usernam.. 2020. 10. 25.
젠킨스 간단 사용기 #2. GitHub 연동 Contents 젠킨스 간단 사용기 #1. 설치 젠킨스 간단 사용기 #2. GitHub 연동 젠킨스 간단 사용기 #2. 자동배포 테스트 환경 - Red Hat Enterprise Linux version 8 - JDK 1.8 - Jenkins 2 - Node 10 - Nginx - Git - GitHub 목적 - Vue 소스를 빌드하여 GitHub에 푸쉬 하는 이벤트로 서버에 자동으로 배포 저번 게시물에서 젠킨스 설치까지 완료하였으며, 이번 게시물에서는 Jenkins와 GitHub를 연동하는 작업을 진행하겠습니다. 1. 키 생성 터미널에서 ssh-keygen 명령어를 사용하면 /root/.ssh/ 경로 밑에 id_rsa.pub 파일이 생성됩니다. vi 명령어로 id_rsa.pub 키파일을 열어 복사합니다.. 2020. 10. 25.
반응형

티스토리툴바