a href={링크} 형식을 이용하면 그냥 현재 탭에서 해당 링크로 이동하게 되는데 나는 탭 하나를 신규로 열어주고 신규 탭에서 해당 링크를 열고 싶다. window.open('url 링크', '_blank')}>하이퍼링크 텍스트 작성 window.open 메서드를 사용하면 되고 두번째 매개변수에 _blank 를 전달해주면 된다.

접속자 ip 가져오기 // 외부 라이브러리 사용 const [ ip , setIp ] = useState(); useEffect( () => { axios.get('https://geolocation-db.com/json/') .then((res) => { setIp(res.data.IPv4) }) },[]) 접속정보 가져오기 (접속자 agent 정보) const userAgent = window.navigator.userAgent console.log 찍어서 확인해보면 값 잘 들어온다. 접속자 정보 가지고 있다가 - 일정 ip 계속 접속 시도하면 - 접속 차단 시키는 방법 구현할 때 사용하면 될듯

ChatGPT를 대하는 프런트엔드 개발자의 자세 ChatGPT 소개와 사용방법. ChatGPT 잘쓰는 방법. ChatGPT를 실무에서 써본 후기. ChatGPT는 개발자를 대체할까? joshua1988.github.io 높은 개발 지식 깊이도 좋지만 요구사항을 캐치하고, 적재적소에 적당한 기능을 사용하여 결과물을 뱉어줄 수 있는 역할이 필요하다. + 지식에 대한 확인자 필요

사건의 발단 웹을 이것저것 만들어놓고 배포하고 보니 웹에서 보는거랑 폰에서 보는거랑 ui가 조금씩 틀리고 다르게 보이더라.. 문제는 여기에 있었는데.. 문제 1 로고가 보여야 하는데 안 보인다. 문제 2 transform 에 translate 를 먹여 위아래 공백 조절을 잘해서 컨트롤하면 좋겠지만 .. 웹에서는 이쁘게 출력되는 애들이 폰에서는 띄어쓰기 간격이 이상하게 보이는 경우가 있더라 = 예상한 것처럼 구현이 안되고 기기에 따라 디자인이 틀려버림 = 제어 불가 ( 사이드바 height 간격도 폰이랑 웹이랑 다르게 보이더라 ) 그래서 최대한 변수가 없게 만들어야 한다 ! 1. 사이드바 아래 간격을 최대한 많이 두고 (자연스러운 선에서) 2. 적당하게 아래 간격을 띄운 다음 3. 사이드바를 푸터 바 보다..

Code import React, { useState } from "react"; import { PieChart, Pie, Legend, Sector, Cell, ResponsiveContainer } from 'recharts'; const PieChartComponent = () => { const data = [ { name: '제안', value: 4 }, { name: '접수', value: 3 }, { name: '완료', value: 2 }, { name: '보류', value: 2 }, ]; const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042']; const RADIAN = Math.PI / 180; const renderCustomiz..

폼 디자인 ⓐ Textbox : (Name) txtInput Readonly true ⓑ Button : (Name) btnUpload Text file 선택 ⓒ Checkbox : (Name) chkSheetYn Checked True ⓓ Textbox : (Name) txtSheetS Readonly True ⓔ Button : (Name) btnConvert Text Excel to PDF 변환 소스 코드 using System; using System.Windows.Forms; using Excel = Microsoft.Office.Interop.Excel; /* 1. excel 파일을 불러와 * 2. 해당 경로+ 이름에 pdf 를 붙인 이름으로 * 3. 저장한다. */ namespace exce..

리액트 VS 플러터 구조적인 부분이나 세밀한 컨트롤 같은 부분은 "리액트"가 압승 그럼에도 불구하고 "플러터"는 만들기가 개 편함 -- 근데 플러터로 만든 앱도 결국 프로그램이 무거워지거나 요구사항/수정사항이 많아지면 리액트로 가는 것을 지향해야 한다고 함 -- 사용하기 편하도록 제공하는 서비스의 한계점 -- 배포할 때에도 리액트는 빌드해서 소스코드 PUSH 하는게 쉬운 편이지만 플러터는 뭔가 새롭게 계속 배포해줘야함 + 비슷한 예시로 설계가 잘못되면 프로젝트 수정 개념이 아니라 프로젝트를 새로 만들어야 한다. -- 플러터 = 버전 업글시 문제 많음 : 하위호환성 문제로 업데이트 막히면 그냥 또 다시 만들어야 하는 느낌이라고 함;; 그래서 REACT VS FLUTTER 의 경우 단순히 시장 검증을 위한 ..

회사에서 개발하는 게시판은 디자인이 허접 그자체다. 👻 바꾸고 싶은 마음은 굴뚝 같으나... 쉽지가 않아 어디서 이쁜 디자인들 다 가져와서 뚝딱뚝딱 만들고 픈데... 1. 기능은 다 구현해뒀고 2. 디자인만 엎으면 되는 상태다 그래서 material-UI 를 사용해보려고 하는데 실패했다. 사용 방법에 맞춰 잘 가지고 온 거 같은데 자꾸 인식을 못하기에 왜 그런가 보다보니 리액트 버전 차이 때문에 적용이 안 되더라. 호환성 문제 해결 불가: 이미 만들어진 게시판은 리액트 18.0.1 버전으로 만들어졌는데.. Material-UI 는 리액트 16.8.0 이나 17.0.0 버전이랑만 호환되는 듯 하다.. 오랜만에 이쁜 아이 주워서 기분 좋았는데.. 나는 다른 아이 찾아보도록 해야겠다. 혹시나 나중에 정 아쉬우..

대충 얼레벌레 깔아서 리액트 구축해오던 나.. 리액트 환경을 처음부터 구축할 기회가 생겼다. 이거 포스팅에 놓칠 수 없다는 생각이 들어 오늘의 글 건덕지를 하나 잡게 되었다. 1. node.js 설치 node.js 설치 페이지 LTS 버전을 설치해주면 된다. 무작정 다음(NEXT) 을 눌러 설치하여도 무관하다. 하나 신경 쓸만한 부분은 바로 이 부분인데.. automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new window after the installation completes Chocolatey 및 추가 설치 도구를 다운로드 받게 할건지 말건..

Recoil 도입 역사의 시작 로그인 및 데이터 관련 전역 상태관리 기술로 Recoil을 채택하고 있다. Recoil 리코일(Recoil) 은 API, 의미, 동작을 최대한 리액트스럽게 유지하며 이를 개선하고자 페이스북에서 만든 상태관리 라이브러리 Recoil 핵심개념 Atom : 하나의 작은 상태. 일반적인 리액트의 상태로 컴포넌트들 구독이 가능 useRecoilState : atom 값을 읽고 update 하는 hook. React Hook의 UseState 와 같은 방식으로 사용. 클래스형 컴포넌트의 상태관리에서 State와 SetState를 합친 것과 같음. useRecoilValue : setter을 제외한 atom의 값만 제공. 클래스형 컴포넌트의 상태관리에서 state의 역할 useSetRe..

올해는 flutter 찍먹을 해본다. 사실 나는 React도 제대로 못하는 뚝딱이인 듯 한데 아무튼 해보겠다. ... 문제 상황 Flutter SDK 다운로드에서 파란색 버튼을 클릭해서 SDK 를 설치해야하는데 ... 나는 아무것도 안했는데 failed 판정을 받았다. 저장공간도 충분하고 운영체제도 충족하고 도구 부분에서도 딱히 문제가 되어보이는 부분은 없어보인다. 해결 방법 인터넷에 서치하니 간단하게 해결이 된다. 문제 사이트 는 한글이다.. 한글로 된 사이트에서는 이런 경우가 꽤 일어나는 듯 해보인다. 플러터 사이트(영어) 영문으로 된 사이트로 접속을 하면 똑같은 환경인데 아무런 문제 없이 처리가 된다.

UseEffect Hook useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 으로 클래스형 컴포넌트의 마운트 단계인 componentDidMount + 업데이트 단계인 componentDidUpdate + 언마운트 단계인 componentWillUnmount 의 기능을 담당하는 훅이다. componentDidMount+componentDidUpdate에 해당하는 코드들은 useEffect에 전달되는 함수 내에 작성하면 되며, componentWillUnmount에 해당하는 코드들은 함수 형태로 return하게끔 작성하면 된다. 글쓴이가 작성한 UseEffect에 관한 글(1) 여기에 더 간단한 설명이 조금 추가되어 있긴 하다. 아무튼 이렇게 어떤 특정 ..