Study/JavaScript
-
초보자도 만들 수 있는 달력으로 일정 및 시간 예약 확정 알림 만들기Study/JavaScript 2025. 3. 26. 18:04
오늘은 초보자들이 많이 만드는 기능중에 하나인 예약기능에서 html에서 제공하는 달력 기능을 이용하여 날짜와 시간을 받아 알림창에 띄우는 기능을 만드는 방법에 대해서알려 드릴려고 함. 일단 무엇을 만들수 있는지 결과부터 알려드림. 1.결과 2.설명 이 요소들은 HTML5에 추가된 input 요소로, 사용자가 데이터 형식을 쉽게 입력할 수 있도록 도와주며, 브라우저에 따라 다른 모습의 UI를 제공함. 참고로 오늘 사용하고자 하는 브라우져는 크롬 임. 각각의 input의 차이점으로는 : 날짜만 입력받음.: 시간만 입력받음.: 날짜와 시간을 모두 입력받음. (1) html 날짜확정 시간확정 예약확정 html요소 중 제일 중요한 부분은 i..
-
초보자를 위한 웹 그림판 만들기(그리기,메모,블럭지정 또는 모양넣기)Study/JavaScript 2025. 3. 20. 18:13
오늘은 저번에 이어 웹그림판 만들기에서 좀더 빌드업된 버젼으로그리기 + 메모 +모양 넣기 또는 블럭을 지정하는 기능을 만듬 나는 그리기 와 메모만 필요하다는 분은 아래 링크 참고https://cbn1218.tistory.com/56 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능)저번에 캔버스(canvas)를 이용하여 그림판과 같이 그림 그리기 기능을 만들었음. 혹시 궁금하시다면 아래 링크 참고하시길.... https://cbn1218.tistory.com/25 초보자를 위한 캔버스(Canvas)로 그림 그리기cbn1218.tistory.com 1.결과일단 무엇을 만들수 있는지가 제일 궁금하니 먼저 결과 화면 ㄱㄱ 그림판처럼 그리기, 메모, 모양넣기 또는 블럭지정이가능한 기능을..
-
초보자도 만들 수 있는 파일첨부 및 이미지 미리보기 기능Study/JavaScript 2025. 1. 9. 23:10
신입때는 간단한 기능 단위별로 구현을 많이 하는데, 그중 제일 기초가 될 수 있는 파일첨부 기능에 대해서 아주 간단한 로직으로 설명 하고자함. 파일 첨부 기능은 간단하다면 간단할 수 있지만 아무것도 모르는 학원수강생 시절 파일첨부 기능 자체가 어렵다고 느껴지는 시절이 있었음.그때는 아주 간단한 기능부터 차근차근 구현하다보면 언젠가는 원하는 기능을 구현할 수 있음 일단 결과 먼저1.결과파일을 선택해서 첨부하고 첨부한 파일을 미리 볼수 있는 기능을 만들수 있음 2.설명파일 첨부기능을 브라우져에서 기본적으로 제공하기에 제공하는 기능을 가져다 쓰면 됨.(1)style style은 적용을 해도 되고 안해도 되나 적용을 하면 위에 이미지와 같은 형식을 만들수 있음style은 원하시는 대로 커스텀마이징하여 사용하면 ..
-
초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_2Study/JavaScript 2024. 4. 29. 15:56
지난번 글에 Postman을 이용하여 가짜 서버를 만들고 그위에 임시 api를 만들어 봄.혹시 목서버 만드는 방법이 궁금하다면 아래 링크 ㄱㄱ https://cbn1218.tistory.com/58 초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1프론트쪽 개발 의뢰가 들어와 작업을 하는중 아직 백단은 개발이 안되있고 프론트단부터 개발을 먼저 개발해 달라는 요청을 받은 초보자라면 난감해 할텐데이때 유용하게 사용하는 편cbn1218.tistory.com임시 api를 만들었다면 잘되는지 또는 어떻게 적용이 되는지 궁금할거 같아실제 웹페이지 에서 어떻게 적용 되는지 코드를 작성해 볼려고 함. 1.코드 설명ajax를 통해 목서버에서 만든 api의 데이터를 받아 console 창에 출력하는..
-
초보자를 위한 가짜 목서버 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의 약자로 영상 처리에 사용할 수 있는 오픈 소스 라이브러리 임.이미지 처리, 기하학적 변환, 객체 탐지, 얼굴 인식 등 컴퓨터 비전 관련 작업을 위해 최적화되어 ..