본문 바로가기

Programming

(64)
[React] 브라우저 새로고침(Refresh)시 스크롤 최상단 이동 React 프로젝트의 경우 따로 설정을 해주지 않으면 스크롤 후 새로고침하면 이전 값으로 돌아가게 된다. 해당 내용을 방지해주기 위해선 처음 렌더링이 되는 src/App.js(App.tsx)에 해당 내용을 넣어주면 된다. useEffect(() => { window.onbeforeunload = function pushRefresh() { window.scrollTo(0, 0); }; }, []); 처음 렌더링 시 scrollTo를 이용해 scrollY, scrollH 값을 0으로 옮겨주므로 최상단으로 이동하게 된다.
[MAC] SSH키 생성/변경 cd ~/.ssh/ 다른 폴더에서 생성도 가능하나 헷갈릴 수 있으니 기본 값에 저장하고자 .ssh폴더로 이동 ssh-keygen -m PEM -t rsa -b 4096 ssh-keygen을 이용한 간단한 SSH/PEM키 생성 -t : 암호화 알고리즘(dsa, rsa, rsa1 등) 선택 -b : key의 bit 길이 -m : OpenSSH 개인 키/PEM 개인 키 형식 간에 변환하는데 사용, Spring Config Server프로젝트 진행 시 필수 값 -C : 코멘트 Generating public/private rsa key pair. Enter file in which to save the key (/Users/{사용자이름}/.ssh/id_rsa): 이후 위의 내용처럼 저장하고자 하는 경로 + 파일..
[HTML] <video> tag 아이폰 비디오 전체화면 전환 방지하기 video 태그에 placeinline 속성 추가하면 됩니다.
[CSS] 여러 줄의 말 줄임표, '...', ellipsis 처리 p { display: -webkit-box; -webkit-line-clamp: 1; /* 줄 길이 */ -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; white-space: normal; }
[CSS/Javascript/React] iOS환경 safari/chrome 브라우저에서 height 100% 안 먹히는 오류 해결 결국 완전히 CSS만으로 해결이 안되었고, 1. Javascript로 style에 새로운 변수를 만들어 디바이스의 세로길이인 window.innerHeight 값을 넣어 보내준 후 2. css에서 해당 값을 가지고 height 값을 정의해주어야 한다. 1. App.js const App = () => { const handleResize = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`); }; useEffect(() => { handleResize(); window.addEventListener("resize", handleResize); return () =..
[React] React localhost 프로젝트 핸드폰/휴대폰으로 확인하기 1. 핸드폰을 컴퓨터가 사용하는 것과 같은 WIFI를 사용해 연결한다. 2. 맥에서 terminal 오픈 후 ipconfig getifaddr en0 입력하면 나오는 IP 주소를 얻는다 3. 핸드폰에서 http://IP주소:포트번호 입력 → 확인 가능
[Javascript] 클릭 시 url 페이지 띄우기(새 창, 새 탭) 1. 새 창에서 url 띄우기 // 새로운 창에서 url 열기 window.open('url 주소', 'newWindow'); 2. 새 탭에서 url 띄우기 // 새 탭에서 url 열기 window.open('url 주소', '_blank'); 3. 태그 사용으로 새 창, 새 탭에서 열기 태그로는 새 창, 새 탭을 구분하여 열 수는 없다. 사용자의 브라우저 설정에 따른다. 4. React에서 사용 시 // 새 창에서 url 열기 { window.open('url 주소', 'newWindow'); }> // 새 탭에서 url 열기 { window.open('url 주소', '_blank'); }>
[Typescript] 3. Call Signatures Nomad Coder - Typescript로 블록체인 만들기 2주과정 3일차 정리 1. Call Signatures - 마우스를 위에 올렸을 때 위에 떠서 함수 인자, 반환 등의 type을 알려줌 함수의 type을 설정해서 Call Signature로 전달해주는 방법 // 이 부분이 Call Signature가 된다. type Add = (a:number, b:number) => number; // 함수 위에 마우스를 올리면 Add라는 type이 적힌 Call Signature가 뜬다. const add:Add = (a, b) => a + b; 2. Overloading - function overloading / method overloading이라고도 불림 - 외부 라이브러리를 사용하면서 많이 맞닥..