Study
-
초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1Study/JavaScript 2024. 4. 25. 16:11
프론트쪽 개발 의뢰가 들어와 작업을 하는중 아직 백단은 개발이 안되있고 프론트단부터 개발을 먼저 개발해 달라는 요청을 받은 초보자라면 난감해 할텐데이때 유용하게 사용하는 편리한 도구가 Postman !!!! Postman 의 사용방법을 소개해보고자 함.최근에 postman UI가 바꼈는지 내가 찾아본글에서는 최신 UI로 설명한 글이 없어 글을 적어봄.목표:가짜 서버 또는 임시 api를 만들어 json형태로 데이터를 받아서 화면에 출력 1.아래 링크에 접속한다.https://www.postman.com/ Postman API Platform | Sign Up for FreePostman is an API platform for building and using APIs. Postman simplifie..
-
초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능)Study/JavaScript 2024. 3. 14. 18:13
저번에 캔버스(canvas)를 이용하여 그림판과 같이 그림 그리기 기능을 만들었음. 혹시 궁금하시다면 아래 링크 참고하시길.... https://cbn1218.tistory.com/25 초보자를 위한 캔버스(Canvas)로 그림 그리기 방법 캔버스(canvas)는 간단하게 소개하자면 웹에 도형을 표시하고싶거나 그림등...그래픽적인 기능이 필요할때 사용 하는 태그로 html5가 나오면서 같이 나온 기술이라고 한다. 프로젝트를 진행중 웹상 cbn1218.tistory.com 이번 컨텐츠는 위에 캔버스를 사용하여 그림 그리기 기능을 이미 구현 했다는 가정하에 그림판처럼 텍스트를 넣어서 텍스트의 위치를 자유자재로 옮기거나 수정 또는 삭제를 하고 싶을때 어떻게 하는지 궁금해 하는 분들이 있을거 같은데, 그부분에 ..
-
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기_2( openCV.js 활용)Study/JavaScript 2024. 3. 8. 18:04
저번 컨텐츠에 이어서 이번에는 openCV.js 활용하여 이미지의 얼굴을 인식하는 기능을 만들어 보자!(참고로 openCV 가 초면이신 분들은 아래 링크 타고 쓱 읽어보고 오시면 이해하는데 좋음요.)https://cbn1218.tistory.com/54 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1회사에서 얼굴인식 관련 라이브러리를 찾아보라는 임무가 주어짐. 빅데이터와 딥런닝 관련된거라 손도 못대겠구나 생각했으나(쉽다는거 아님...매우어려움...) 아주 낮은 수준으로 openCV.js 가져cbn1218.tistory.com 일단 이미지에 인식이 되는지 궁금하니 결과 부터 ㄱㄱ1. 결과 이미지를 넣으면 사람들얼굴을 인식하여 빨간색 네모칸을 그려줌.결과이미지를 ..
-
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기_1( openCV.js 활용)Study/JavaScript 2024. 3. 8. 16:38
회사에서 얼굴인식 관련 라이브러리를 찾아보라는 임무가 주어짐.빅데이터와 딥런닝 관련된거라 손도 못대겠구나 생각했으나(쉽다는거 아님...매우어려움...)아주 낮은 수준으로 openCV.js 가져다쓰는 정도로 활용은 가능할거 같아 한번 글을 써본다.(참고로 교양 쌓는다 생각하고 편히 읽어 보시길...저 조차도 이해도가 낮아 얕은수준으로 글을 써보게쑴다.....) 1. openCV.js OpenCV는 Open Computer Vison의 약자로 영상 처리에 사용할 수 있는 오픈 소스 라이브러리 임.이미지 처리, 기하학적 변환, 객체 탐지, 얼굴 인식 등 컴퓨터 비전 관련 작업을 위해 최적화되어 ..
-
초보자를 위한 웹브라우져에 웹캠 비디오 영상 보여주기Study/JavaScript 2024. 3. 7. 11:44
웹캠을 이용하여 웹브라우져에 띄우는 작업을 하거나 카메라를 이용하여 서비스를 만든다고 하면 도대체 카메라를 웹브라우져에 어떻게 띄우는 걸까?! 궁금해 하실 저와 같은 병아리신입 개발자를 위해 글을 써볼까 함요. 그럼 잔말 말고 얼른 어케띄우는지 보자 1.결과 위에 이미지는 웹캠을 띄워서 일부 화면만 캡쳐했움...왜냐면 얼굴이 나오니까 일부만 캡쳐 함요. 여튼 결론적으로 브라우져에 실시간으로 웹캠영상을 띄웠음 2.설명 (1)html 코드 기본 html 코드에 video 에 id를 적어줘서 나중에 자바스크립트단에서 접근시 사용 하기 위함. 비디오 크기를 정하기 위해 width 와 height 를 정해줌. (2) javaScript 코드 설명은 주석으로 처리함. 참고로 javaScript 부분은 body 태그..
-
초보자도 만들수 있는 자바로 엑셀 셀 병합 하기(셀 합치기)Study/Spring 2024. 2. 27. 00:43
저번 시리즈에 이어 이번에는 셀을 병합하는 방법에 대해서 알아볼려고 함. 혹시 저번 시리즈인 '엑셀 기능 만들기' 와 '엑셀 스타일 적용하기' 기능에 대해 알고 싶다면 아래 링크 참고 바람! https://cbn1218.tistory.com/51 초보자도 만들 수 있는 엑셀 스타일 적용하기 (엑셀 테두리 넣기&엑셀 배경색 넣기) 저번 블로그에 게시판에서 엑셀을 다운로드 하는 기능에 대해서 글을 썼음(궁금하신분은 아래 링크 참조!) https://cbn1218.tistory.com/42 초보자도 만들 수 있는 엑셀 다운로드 기능 만들기 Cell headerCell cbn1218.tistory.com https://cbn1218.tistory.com/42 초보자도 만들 수 있는 엑셀 기능 만들기 Cell h..
-
초보자도 만들 수 있는 자바로 엑셀 스타일 적용하기 (엑셀 테두리 넣기&엑셀 배경색 넣기)Study/Spring 2024. 2. 23. 12:03
저번 블로그에 게시판에서 엑셀을 다운로드 하는 기능에 대해서 글을 썼음(궁금하신분은 아래 링크 참조!) https://cbn1218.tistory.com/42 초보자도 만들 수 있는 엑셀 다운로드 기능 만들기 Cell headerCell0 = headerRow.createCell(0); headerCell0.setCellValue("상담상태"); Cell headerCell1 = headerRow.createCell(1); headerCell1.setCellValue("이름"); Cell headerCell2 = headerRow.createCell(2); headerCell2.setCellValue("시간"); Cell heade cbn1218.tistory.com 이번에는 저번에 알려드리기로 했던 엑..
-
초보자도 만들 수 있는 쉽게 채팅 말풍선 만들기Study/HTML + CSS 2024. 2. 7. 15:55
채팅 기능을 만들다가 채팅기능의 말풍선을 만들어야 하는데, 만드는 코드는 많은데, 쉽게 설명이 되어 있는게 없어서 쉽고 간단하게 만드는 방법을 글로 적어본다. 1.결과 2.설명 위에 채팅 UI중 말풍선 부분만 설명 예정임. 간단히 설명하자면 말풍선본체 + 말풍선 꼬리 위와 같이 div로 각각 본체에 꼬리를 만들어 붙이면 끝! (1) html 코드 안녕 오전 11:15 html 코드에서는 특별히 설명할게 없음. 나중에 채팅 기능을 구현할때 chatBody 부분과 chatTime 부분을 자바스크립트로 동적으로 구현할때 특정 id를 부여해 줘야 하지만 그건 추후에 컨텐츠를 만들어서 설명하고 말풍선 만드는 부분은 아래 css부분이 젤 중요! (2) css 코드 .chatDiv{ width: 100px; heig..