Programming/etc. (12) 썸네일형 리스트형 [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가 .. [etc] Context란 무엇인가? 1. Context의 의미 사전적 의미 자체는 맥락이나 문맥을 의미하지만, 개발에서 말하는 Context의 주된 뜻은 이벤트가 일어나는 조건, 환경 등이 된다. 예를 들면, A라는 사람이 인터넷을 통해 물건을 구매하려고 한다. 쇼핑몰은 A의 이름, 전화번호, 주소 등의 개인 정보와 결제를 위한 정보 등을 필요로 할 것이다. 이 때 A의 정보들이 물건을 구매하기 위해 필요한 Context 개체라고 부를 수 있다. 2. Context의 종류 Context는 중요도에 따라 2가지로 나뉜다. 1) 필수 Context 2) 선택 Context 예를 들면, 온라인을 통해 A가 다른 사람에게 돈을 송금하려고 한다. 은행이 A의 돈을 송금하기 위해선 A의 이름, 계좌번호, 송금할 금액, 다른 사람의 계좌번호 등이 필수.. 이전 1 2 다음 목록 더보기
