본문 바로가기

🖥️/Frontend11

[리액트를 다루는 기술] 외부 API를 연동하여 뉴스 뷰어 만들 https://www.yes24.com/Product/Goods/62597469?pid=123487&cosemkid=go15325014723890344&gclid=CjwKCAjwkeqkBhAnEiwA5U-uM-TEoCVlWDSzJA2vBdVWRKQI_NXK8EnAMIKXCLzsxNLJmdQc_gpd8RoCtQYQAvD_BwE 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com 소스코드는 하단에 있습니다 전체 소스코드 Index.js import React from 'react'; import ReactDOM from .. 2023. 6. 28.

[리액트를 다루는 기술] 일정관리 웹 어플리케이션 만들기 https://www.yes24.com/Product/Goods/62597469?pid=123487&cosemkid=go15325014723890344&gclid=CjwKCAjwkeqkBhAnEiwA5U-uM-TEoCVlWDSzJA2vBdVWRKQI_NXK8EnAMIKXCLzsxNLJmdQc_gpd8RoCtQYQAvD_BwE 리액트를 다루는 기술 - YES24 리액트, 어떻게 활용하느냐가 중요하다!기본기를 꼼꼼하게! 효과적으로 활용하는 방법까지 다양하게 배우자!리액트를 이해하기 위한 핵심 개념은 물론이고 어떤 상황에서 어떻게 사용해야 하 www.yes24.com 전체 소스 코드는 하단에 있습니다 소스코드 전체 App.js import React, { useState, useRef, useCallback .. 2023. 6. 27.

[JavaScript 문법] 배열 합치기 [arr2, ...arr1]; ... 은 JavaScript에서 배열을 합칠 때 쓰는 간단한 문법이다. let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let result = [arr2, ...arr1]; console.log(result); [ [4, 5, 6], 1, 2, 3 ] 이렇게 arr2는 result 배열의 첫 번째 항목으로 들어가고, ...arr1 은 arr1 배열의 요소가 개별적으로 result 배열에 들어가게 된다. 즉 result[0] 은 [4, 5, 6]이 되고, result[1]은 1이 된다. 2023. 5. 22.

[2023.04.11~04.16] 토이 프로젝트: OpenCV 없이 JavaScript로 구현하는 영상처리 소프트웨어 프로젝트 명: OpenCV 없이 JavaScript로 구현하는 영상처리 소프트웨어 영상처리 프로그램은 대부분 오픈소스로 공개되어 있는 OpenCV를 사용한다. OpenCV는 Open Source Computer Vision의 약자로 다양한 영상/동영상 처리에 사용할 수 있는 오픈소스 라이브러리로, 인텔이 컴퓨터 비전과 인공지능을 발달시키고자 하는 바람으로 출시한 것이다. 하지만 이번 프로젝트에서는 OpenCV를 사용하지 않고, JavaScript, HTML5, CSS으로 영상처리 알고리즘을 이해하고 코드화하여 영상처리 소프트웨어를 만들어보려고 한다. 먼저 최종 완성된 영상처리 소프트웨어 시연 영상이다. Step 1: 간단한 난수 배열로 영상처리 알고리즘 이해하고 적용해보기 영상처리에 사용되는 기본적인 알.. 2023. 4. 18.

JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 블러 효과 조절하기 + 경계값 처리하기 마스크의 크기를 value by value로 가변행렬로 받아서 value값에 따라 변하게 할 수도 있겠지만, 가우시안 블러가 아니라 기본 블러로 한다면 마스크를 쓰지 않고도 구현할 수 있을 것이다. 1. value가 1이라면 원시 픽셀로부터 1만큼 거리에 있는 픽셀들의 평균을 받는다. 즉, 원시 픽셀을 포함해 3by3크기 행렬 안에 있는 픽셀을 평균으로 받게 된다. value가 2면 5by5행렬, value가 3이면 7by7행렬, value가 n이면 (2n+1) by (2n+1) 행렬 안에 있는 픽셀들의 평균을 받는 것이다. 2. 가장자리에 있는 픽셀을 위해서 (2value+width) by (2value+width) 크기의 임시 입력 배열을 만들어주고, 127로 채워준다. 더 높은 완성도를 위해서는 가.. 2023. 4. 14.

JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 확대 시 화질개선에 대한 생각 그림을 그릴 때 화질 낮은 것을 확대했을 때 픽셀 보이는 것을 싫어했기 때문에 항상 사이즈가 큰 캔버스에 그린 후 축소하는 식으로 했다. 그래서인지 확대 알고리즘을 적용할 때도 픽셀 보이는 게 매우 거슬렸고.. 화질 개선을 위해 계속 고민을 해보았다. 일단 픽셀로 보이는 이유는 가장 인접한 이웃 픽셀로 보간을 하다 보니 네 개의 근접한 픽셀의 값이 같아서이다. 이렇게 4개 값이 모두 같아서 발생하는 문제이니, 적당한 근거를 찾아 4개의 값 중 일부를 변환하면 되지 않을까 하는 생각이 들었다. 그리고 그 근거는 주변 값(위아래 양옆 픽셀)의 평균으로 하기로 했다. 이렇게 네 개의 값으로 선정한 이유는 기존 픽셀값에 대한 가중치가 높기 때문이다. 4개의 평균을 구하는데, 4개 중에 기존의 픽셀값이 2개가 겹.. 2023. 4. 13.

JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 히스토그램 처리, 곱하기, 카툰효과 1. 히스토그램 처리를 사용한 고대비 처리 기존 고대비 효과는 0과 255의 평균인 127.5 값을 기준으로 그보다 크면 255, 작으면 0으로 처리하였다. 하지만 만약 사진이 이미 밝은 편이어서 모두 128 이상이라면? 아니면 모두 127 이하라면? 원본 이미지에는 분명 명도 차이가 있지만, 이 효과를 적용하면 전부 같은 흰색이나 검은색으로 나타날 것이다. 아래 사진도 배경과 털이 모두 255로 처리되어서 배경과 차이가 없어졌다. 이를 해결하기 위해 단순히 127.5를 기준으로 잡지 않고, 전체 픽셀들의 분포를 기준으로 잡도록 할 수 있다. 이를 히스토그램 처리라고 한다. 다음은 전체 픽셀의 평균과 중간값을 기준으로 한 영상처리이다. function blackWhite2() { out(inH, inW).. 2023. 4. 13.

JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 마스크 사용해서 엠보싱, 블러, 가우시안 블러, 모션블러, 샤프닝, 엣지 화소 영역 처리란, 픽셀이 주변의 픽셀값에 영향을 받아 처리되는 것을 말한다. 이 처리를 하기 위해서는 주변 픽셀에 가중치를 곱하여 계산하는데, 이 떄 마스크를 사용한다. 마스크로 가중치를 곱하는 법 1. 먼저 마스크를 만들어줘야 한다. 가장 간단한 3by3 행렬로 만들었다. 아래는 엠보싱 마스크이다. var mask = [ [ -1.0 , 0.0 , 0.0 ], [ 0.0 , 0.0 , 0.0 ], [ 0.0 , 0.0 , 1.0 ] ]; 2. 그리고 임시로 입력배열과 출력배열을 담을 배열을 만들어준다. 이 때 임시 입력 배열 크기는 마스크의 크기를 고려해서 설정해주면 되는데, 이 예시에서는 3by3 행렬이므로 +2를 해주었다. 출력배열은 최종 출력 이미지에 필요한 값만 담으면 되므로 outHeight.. 2023. 4. 13.

이전 1 2 다음

티스토리툴바

"); wcs_do();