분류 전체보기
-
다양한 파일 확장자 파일 미리보기 지원하기React.js & Next.js 2023. 4. 5. 21:25
목차 들어가며 text, image, pdf, video 대응하기 리팩터링 with ChatGPT 들어가며 실무에서 폼 양식을 작성할 때, 다양한 타입의 파일을 지원하게 됩니다. 아쉽게도 우리는 단순히 객체로만 파일을 가지고 있는 것이 아닌, UX를 위해 파일의 미리 보기를 요구받을 수 있습니다. 따라서 이번에는 다양한 확장자 파일에 대하여 미리 보기를 지원하는 방법 및 로직을 알아봅니다. text, image, pdf, video 대응하기 import React, { useState } from 'react'; const Test = () => { const [text, setText] = useState(''); const handleFileInputChange = (event: React.Chang..
-
input image 미리보기 구현하기React.js & Next.js 2023. 3. 31. 23:15
Prerequisites useRef typescript FileReader Object Code import React, { useRef } from 'react'; const Test3 = () => { const imgRef = useRef(null); const readImage = (e: React.ChangeEvent) => { if (!e.target.files?.length) return; const imageFile = e.target.files[0]; const reader = new FileReader(); reader.addEventListener('load', (e: ProgressEvent) => { if (!e || !e.target) return; if (typeof e.ta..
-
빠르게 시작하는 드래그 앤 드롭React.js & Next.js 2023. 3. 26. 20:15
prerequisites typescript interface react.js useRef useState Props inline-styling conditional render 전체 코드 import React, { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; interface IFileTypes { id: number; object: File; } const basicInputStyle = { width: '100%', height: '200px', border: '2px solid', borderRadius: '10px', cursor: 'pointer', transition: '0.12s ease-in', displa..
-
프로그래밍 패러다임Computer Science 2023. 3. 12. 20:25
목차 선언형과 함수형 프로그래밍 순수함수 고차함수 일급 객체 객체지향 프로그래밍 추상화 캡슐화 상속성 다형성 오버로딩 오버라이딩 OOP 설계 원칙 단일 책임 원칙 개방-폐쇄 원칙 리스코프 치환 원칙 인터페이스 분리 원칙 의존 역전 원칙 절차지향형 프로그래밍 프로그래밍 패러다임(programming paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론입니다. 예를 들어 객체지향 프로그래밍은 프로그래머들이 프로그램을 상호 작용하는 객체들의 집합으로 볼 수 있게 하는 반면에, 함수형 프로그래밍은 상태 값을 지니지 않는 함숫값들의 연속으로 생각할 수 있게 해 줍니다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 하위 집합을 갖습니다. 또한, ..
-
취미? 전시를 보게된 이야기끄적끄적 2023. 3. 8. 22:51
안녕하세요? 프론트엔드 개발자 이준희입니다. 요즘은 글을 너무 너무 쓰기 힘들어서 어쩐지 끄적끄적 카테고리에만 글을 쓰게 되는 것 같아요. 다들 아시다시피 글의 빈도기 줄어드는 이유는 CHATGPT와 노션의 OPEN AI 등, 구글링 보다 더 나은 결과물을 찾는 과정이 너무 쉬워져서 이렇게 글을 작성해도 큰 도움이 되지 못하지 않을까 싶어 망설여지는 게 가장 큰 이유인 것 같아요. 그래도 펜(?) 아니요(?) 키보드를 놓고 싶지 않다는 심정으로 저의 요즘 취미(?) 관심사(?) 에 대한 글을 짧게 작성해볼까 합니다. 어떤 취미를 갖고 계신가요? 요즘 저의 최대 관심사는 '새로운 취미를 갖는 것' 입니다. 제가 하는 모든 일은 지속가능하면 좋겠는데 평일에는 운동과 일뿐이라 주말에는 이렇게 블로그를 쓰면서 ..
-
프론트엔드 개발자의 시선으로 구글 서치 콘솔 바라보기끄적끄적 2023. 2. 25. 21:24
이번에는 이 블로그에 연결된 구글 서치 콘솔을 분석하는 시간을 가지도록 하겠습니다. 웹 사이트를 고도화하다 보면 돌고 돌아 들리게 되는 부분이 SEO라고 생각합니다. SEO를 진행하다 보면 우리 웹사이트가 얼마나 첫 페이지에 잘 노출이 되었는가가 중요한 포인트 중 하나게 될 수 있습니다. 목차 구글 서치 콘솔이란? 현재 상황 분석하기 개요 페이지 실적 페이지 URL 검사 페이지 Search Console Insights 마치며 구글 서치 콘솔이란? 구글 서치 콘솔은 구글 검색 엔진에서 검색 결과로 보여지는 웹페이지의 성과를 분석하기 위한 도구입니다. 이 도구를 사용하면 자신의 웹사이트가 어떻게 검색 결과에 노출되고 있는지, 그리고 검색 결과에서 어떤 검색어를 통해 방문자들이 접근하고 있는지 등을 알 수 ..
-
iframe communication quick startJS & TS 2023. 2. 24. 23:44
목차 아이프레임이란 무엇인가요? 아이프레임으로 무엇을 할 수 있을까요? TODO 전략 실전 결과 보기 아이프레임이란 무엇인가요? An iframe (short for "inline frame") is an HTML element that allows you to embed another HTML document or webpage within your current webpage. It creates a frame or window within your webpage that can display content from a different source, such as a different website, another webpage on your own site, or even a separate pa..
-
아고라와 매일 같이 싸우는 이야기끄적끄적 2023. 1. 12. 21:50
이 이야기는 아고라 SDK를 통해 개발을 이어가고 있는 저의 하루에 대한 이야기입니다. 문제 현재 나는 아고라 SDK를 바탕으로 WebRTC 기반의 실시간 채팅 서비스를 구현하고 있다. 타입스크립트 환경에서 아고라의 SDK를 바탕으로 작업하다 보니, 아고라 SDK의 업데이트에 빠르게 대응해야 하고 민감할 수밖에 없다. 이번에 발견한 아고라 SDK 중 Agora Chat에 관련된 문제는 현재 사용 중인 아고라의 버전 1.0.7에 아고라 챗의 토큰이 만료됐을 때 재발급하는 ‘renewToken’ 메서드가 빠져 있다는 것이었다. agora-chat >> Agora-chat.d.ts 문서 상에는 Connection class 안에 renewToken이라는 메서드가 존재하는데 실제 SDK에는 존재하지 않았던 것이..