반응형 JavaScript49 자바스크립트 무한 스크롤 (팝업 다이얼로그) javascript infinite scroll DIV ENTRY DIV ENTRY DIV ENTRY ... id 가 data 인 div 에 무한스크롤을 적용할 때 scroll 이벤트 발생시 아래 조건에 의해 함수가 실행되도록 작성한다. document.querySelector('#data').scrollTop + document.querySelector('#data').offsetHeight >= document.querySelector('#data').scrollHeight + 10(offset용) // + 10을 해준 이유는 스크롤 최하단이 scrollHeight값보다 1픽셀 작은 경우가 있기 때문에 // 스크롤 최하단에 닿지 않더라도 10픽셀정도 여유를 준 것이다. // 스크롤 최하단 - 10 에 스크.. 2023. 1. 27. String.prototype.localeCompare() 문자열 오름차순 순서 비교 const a = 'a' const b = 'b' a.localeCompare(b) // -1 리턴. a가 referenceStr b가 compareString 오름차순으로 문자열을 정렬했을 때 referenceStr이 compareString보다 앞에 위치한다면 음수 리턴, 뒤에 위치한다면 양수 리턴, 동일하면 0을 리턴한다 2022. 1. 28. React serve 명령어로 배포하기 (+포트변경) VM 을 이용해서 배포를 해야할 일이 생겨서 공부해봤다. 전에 프로젝트를 배포할 때 사용했던 AWS EC2에 접속 후 했던 과정과 비슷했다. 배포과정 VM 접속, node.js 설치 git 레포 clone 리액트 프로젝트 빌드 빌드된 파일을 serve 이용해서 배포 1. VM 접속, node.js 설치 접속은 리눅스에서 ssh 명령어를 이용해서 한다. wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash node.js 를 설치하기 전에 nvm을 설치하기 위해 위 명령어를 실행한다. 설치가 끝나면 잘 설치되었는지 확인하기 위해 nvm --version 위 명령어를 실행한다. nvm의 설치버전이 출력된다면 잘 설치된 .. 2021. 4. 24. react 에서 dotenv로 환경변수 사용하기 구글이나 깃헙의 API를 사용하려고 할 때 발급받은 클라이언트 Id를 깃헙에 유출시키지 않기 위해 dotenv를 이용했었다. 리액트에서는 사용방법이 달라서 기록해봤다. npm install --save dotenv 설치 //.env REACT_APP_MAPS_CLIENTID=clientId 리액트에서는 환경변수를 사용할 때 env 파일에서 반드시 변수명 앞에 REACT_APP 을 붙여야 한다. .gitignore에 .env를 작성하는것을 잊지말자 사용할 때는 환경변수를 사용하고자 하는 파일 상단에서 import나 require를 한 뒤에 환경변수 값을 사용할 위치에서 process.env.환경변수명 으로 사용하면 된다. require("dotenv").config(); // import dotenv fr.. 2021. 4. 15. Todo.gg 리팩토링 Object is possibly 'null' let authorization:string|undefined = req.headers["authorization"]; const accessToken=authorization.split(" ")[1]; authorization의 타입을 유니온( | )을 이용해서 string 또는 undefined 라고 지정했다. 그러면 밑에 authorization.split(" ")[1];이 부분에서 Object is possibly 'null' 에러가 뜬다. 위와같은 에러는 객체가 비어 있을 수도 있는데 해당 객체의 내부 메소드를 사용하거나 내부 객체 키에 값을 넣어주려고 할 때 발생한다. 해결방법 옵셔널체이닝 ( ? ) let authorization:string|undefined = req.hea.. 2021. 3. 25. 알고리즘 풀이 노션링크 www.notion.so/735a56bd6e234f3b9a1866dcd29bb6d5 알고리즘 시간 복잡도 Big O / Big Ω www.notion.so 2021. 3. 8. export로 환경변수 만들고 process.env로 사용하기 export 환경변수명 = 값터미널에서 export 키워드로 환경변수를 추가해줄 수 있다. 보통 DB 접속시 사용하는 패스워드를 프로젝트 파일에 하드코딩해서 남기는 경우 패스워드가 유출될 수 있기 때문에 작성하지 않고, 환경변수를 이용해서 작성하곤 한다. 추가한 환경변수는 프로젝트에서 process.env.환경변수명으로 사용할 수 있는데, 환경변수를 터미널에서 추가하고, 환경변수 목록을 출력해도 저장되어있는데 process.env로 불러오면 undefined 가 출력되는 경우가 있다. 이는 프로젝트가 실행되고 있는 터미널에서 환경변수를 추가하지 않았을 경우 발생한다. 해결하기 위해선 DB에 패스워드로 접속하는 프로젝트의 터미널에서 export 키워드로 환경변수를 추가해주어야 한다. 내 경우엔 VS COD.. 2020. 12. 8. TIL1208 [MVC 패턴] ORM Sequelize 사용 Sequelize와 Sequelize-cli 를 모두 사용했습니다 MVC (Model, View, Controller) 역할 Model - 뷰에 표현되는 데이터 View - 모델에서 데이터를 받아 사용자에게 보이는 페이지 Controller - 사용자와 상호작용하며 사용자의 명령을 받아 Model을 변경시키고 변경된 사항을 View에 전달 ORM (Object Relation Mapping)을 사용하는 이유 ORM을 사용하면 객체(데이터)를 DB에 넣을 때 SQL문을 직접 사용하지 않아도 된다. 개발자가 ORM을 통해 명령을 전달하면 ORM은 명령에 맞는 SQL문을 DB에 전달해서 DB에 변경사항을 만든다. ORM은 일종의 SQL 번역기라고 생각할 수 있다. 모델 작성 npx sequelize-cli i.. 2020. 12. 8. Common JS (+이벤트루프) 모듈 내보내기, 불러오기 require - NodeJS 에서 사용되고있는 CommonJS 키워드 import - ES6에서 도입된 키워드 두 키워드 모두 하나의 파일에서 다른 파일의 코드를 불러온다는 동일한 목적을 가진다. 위에서 나온 두 키워드로 모듈(다른파일의 코드, 라이브러리)를 불러오려면 해당 모듈에서 exports 키워드를 통해 다른 파일에서 불러올 수 있도록 설정해주어야 한다. exports와 module.exports의 차이는 여기서 확인 이벤트 루프 콜스택 - 함수 호출시 함수는 콜스택에 들어가 pop() 순서대로 실행된다 힙 - 객체들은 힙 안에 할당된다 큐 - 지연시간이 종료된 함수가 실행을 기다리기 위해 저장되는 곳. 큐에서 순서대로 콜스택에 들어가 실행된다 Web APIs - 비동기.. 2020. 11. 22. 이전 1 2 3 4 ··· 6 다음 반응형
