Programming/etc. (13) 썸네일형 리스트형 [Chrome] 크롬 http > https 강제 전환/리다이렉트 해제 방법 1. 크롬 주소창에 chrome://net-internals/#hsts 입력 2. 위의 Delete domain security policies에 강제 전환/리다이렉트 방지를 하고자 하는 주소의http://를 떼고 작성한 뒤 delete버튼 클릭ex) http://example.com > example.com http://www.example.com > www.example.com & example.com3. 접속하고자 하는 주소 입력 후 재접속/새로고침 시도 혹시 하다가 다시 안 되는 경우 해당 위치에 주소 입력해 add 버튼 클릭으로 추가 후 다시 위의 delete 작업 반복 [WebAPI] IntersectionObserver란? IntersectionObserver - Web API | MDNIntersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는developer.mozilla.org IntersectionObserver는 특정 요소가 뷰포트(또는 부모 요소) 내에서 보이는지 여부를 비동기적으로 감지하기 위해 사용되는 API. 스크롤 이벤트를 직접 핸들링하지 않고도 요소의 가시성을 감지할 수 있다. 특히, 무한 스크롤 기능을 구현할 때 매우 유용함.IntersectionObserver를 사용하는 이유성능 향상:스크롤 이벤트를 직접 감지하는 대신, Int.. [Mac/eclipse] 맥에서 이클립스 여러개 동시 실행하기 Eclipse가 이미 오픈 된 상태에서 terminal을 열고 open -n 입력 Finder에 있는 Eclipse 아이콘을 terminal에 작성한 open -n 뒤에 끌어오면 이렇게 자동으로 Eclipse 앱이 설치된 경로가 뒤에 작성된다. 이 상태에서 Enter를 누르면 2번째 Eclipse가 열린다. [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): 이후 위의 내용처럼 저장하고자 하는 경로 + 파일.. [etc] SSR(Server Side Rendering) & CSR(Client Side Rendering) SSR/CSR을 말하기 전 프로그래밍에서 의미하는 렌더링이 무엇인지 알고 시작하자. 우선, 네이버 사전을 통해 알 수 있는 Render의 사전적 의미는 아래와 같다. 1. 프로그래밍에서 말하는 렌더링(Rendering) 의미 html, CSS, Javascript ... 등의 프로그래밍 언어를 각각의 브라우저의 렌더링 엔진을 통해 대화형 웹 사이트(사용자와 상호작용이 가능한 웹사이트)로 변환시켜주는 과정을 의미한다. 렌더링 엔진이란? 웹 페이지를 렌더링하기 위해 웹 브라우저에서 사용하는 소프트웨어. 프로젝트의 렌더링 속도 확인은 하단의 Light house를 통해 확인할 수 있다. Lighthouse Lighthouse chrome.google.com 그렇다면 서버 사이드 렌더링(Server Side R.. [etc] Vercel을 통해 프로젝트 배포하기 1. Github아이디로 Vercel 가입하기 2. Overview의 Add New... 클릭 → Project 클릭 3. Import Git Repository 화면에서 Add GitHub Org or Account 클릭 후 GitHub을 연결한다. 4. 로그인한 Github 아이디에 있는 프로젝트 중 올릴 것을 Import 한다. 5. You're almost done 화면에서 특별히 이상(build/npm&yarn install 등)이 없다면 Deploy 클릭 6. 프로젝트에 별 이상이 없다면 Deploy가 진행된다. 7. 업로드에 성공한다면 Congratulations! 화면이 뜬다. Go to Dashboard 버튼 클릭시 배포된 프로젝트의 Dashboard로 이동하는데, Vercel이 기본으로.. [etc] JSDoc를 사용하여 아름답게 주석 남기기 1. Typescript 대신 JSDoc을 사용하는 이유? Type을 정확히 잡아내기 위해선 Typescript를 쓰는 것이 좋지만, Typescript의 너무 엄격한 규정은 개발 초기 변경사항이 많을 때 등 불편한 경우가 많다. 또한, Typescript -> Javascript로의 변환이 너무 불편함 + 코드 양의 증가로 클린코드 작성이 어려운 것이 JSDoc을 추천하는 이유다. 2. JSDoc을 사용해야하는 이유 function example(num, str) { return num + str; } 일반적으로 Javascript 내에서 함수를 작성할 때 너무 관대한 Javascript이기에 인수/인자 값의 type이 무엇인지 알 수 없다. 이로인해 type으로 인한 문제 발생 위험이 증가하고, 이는.. [etc] 매개변수(Parameter)와 인수/인자(Argument) 차이 매개변수(Parameter) 인수/인자(Argument) 함수를 생성할 때 외부로부터 받아오는 값을 의미. 함수를 호출하면서 사용하게 되는 값을 의미. // javascript // 함수 생성 function example(x,y) { // 이때 함수 example()의 괄호 안의 x,y 값이 Parameter. return x+y; }; // 함수 호출 example(x,y); // example() 함수 안의 x,y가 Argument. // react 함수형 컴포넌트 // 함수 생성 const example = (x) => { // 이때 함수 example()의 괄호 안의 x가 Parameter. return x++; }; // 함수 호출 example(x); // example() 함수 안의 x가 .. 이전 1 2 다음
