개발새발 로그

기초적인 것은 꼭 알자 1. SQL injection SQL injection은 웹 응용 프로그램에서 발생하는 보안 취약성 중 하나로, 악의적인 사용자가 입력 필드 또는 매개변수를 통해 SQL 쿼리를 주입하여 데이터베이스에 대한 비인가된 액세스를 시도하는 공격입니다. 일반적으로 웹 어플리케이션에서 사용자로부터 입력을 받아 데이터베이스와 상호 작용하는 경우, 사용자의 입력이 안전하게 처리되지 않으면 SQL injection 공격에 취약할 수 있습니다. 일반적인 SQL injection 공격의 예를 살펴보겠습니다. 가령, 사용자 이름과 비밀번호를 확인하는 로그인 폼이 있다고 가정해봅시다. SELECT * FROM users WHERE username = '사용자입력' AND password = '비밀번호입력..

무한 스크롤기능에서 이미지 지연로딩을 위해 사용된다. 이미지가 많을 때 한번에 로딩하면 이미지가 현재 화면에서는 점차 로딩되어지는게 보여지고 보이지않는 마지막 이미지만 로딩이 완료되어버리면 사용자 ui 경험에 좋지않은 영향을 준다. 직접 글을 작성하려고 했으나 아래 링크에서 잘 정리되어있어서 링크를 블로그에 저장한다. https://heropy.blog/2019/10/27/intersection-observer/ Intersection Observer - 요소의 가시성 관찰 Intersection observer는 기본적으로 브라우저 뷰포트(Viewport)와 설정한 요소(Element)의 교차점을 관찰하며, 요소가 뷰포트에 포함되는지 포함되지 않는지, 더 쉽게는 사용자 화면에 지금 보이는 요소인 her..

프로젝트를 진행하다가 아래와 같은 오류가 계속해서 생겼다. 나는 프로젝트에서 만약 없는 내용의 문서 주소로 이동하게되면 NotFound 컴포넌트를 출력하려고 했는데 계속해서 에러를 화면에 나타냈다. 그러면 지금 try catch에서 에러를 못잡고 있다는 건데, 내 코드는 아래와 같았다. 여기서 지금 404 에러를 못잡는다는 것이다. 그래서 나는 검색을 하게 됐고 아래 링크에서 알게되었다. https://velog.io/@yukyung/fetch%EC%9D%98-%EC%97%90%EB%9F%AC%EC%B2%98%EB%A6%AC-%EC%9D%B4%EC%95%BC%EA%B8%B0 fetch의 에러처리 이야기 🌐 놓치기 쉬운 fetch의 에러처리 velog.io fetch()로 부터 반환되는 Promise 객체..

Vue의 장점이면서 단점 중 하나를 살펴보자 예시를 들어서 보자 먼저 노션 클로닝으로 만든 아래 페이지를 보자 제목없음이라는 상위 문서와 그 아래 제목없음이라는 하위 문서가 있다. 두 문서는 내용이 없다. 이 두 개의 workspace를 번갈아 가면서 클릭하면 페이지에서는 딱히 변화가 없을 것이다. 왜냐하면 실제로 데이터의 내용이 똑같으니까 이렇게 페이지가 전환이 되더라도 Vuejs에서는 최적화를 위해서 동일한 구조의 html은 다시 렌더링을 하지않는 경우가 생긴다. 그래서 간혹 페이지가 바뀌었는데도 내용이 유지되는 현상이 생긴다! 다시 예시를 보자 일단 상위 문서의 아이디는 19805다. 하위 문서의 아이디는 19807이다. 상위문서와 하위문서를 번갈아 가면서 누르다가 하위문서에 '123'이라는 내용을..

내부 슬롯과 내부 메서드 자바스크립트 엔진의 구현 알고리즘을 설명하기위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호 ([[...]]) 로 감싼 이름들이 내부 슬롯과 내부 메서드다. 자바스크립트 엔진에서 실제로 동작하지만 개발자가 직접 접근할 수 있도록 외부에 공개된 객체의 프로퍼티는 아니다. 단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을 제공하기는 한다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태란 프로퍼티의 값(Value), 값의 갱신 가능 여부(writable),..

var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 2. 함수 레벨 스코프 - var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. - 따라서 함수 외부에서 var 키워드로 선언한 변수는 블록 내에서 선언해도 모두 전역 변수가 된다. 3. 변수 호이스팅 - var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어올려진 것처럼 동작한다. - 즉 변수 호이스팅에 의해 var 키워드로 선언한 변수는변수 선언문 이전에 참조할 수 있다. - 에러를 발생시키지는 않지만 프로그램 흐름상 맞지 않을뿐더러 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다. let 키워드 1. 변수 중복 선언 금지 가능 - let 키워드로 이름이 같은 변수를 중복..

전역변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 지역 변수의 생명주기 변수는 생물과 유사하게 생성되고 소명되는 생명주기가 있다. 변수는 자신이 선언된 위치에서 선언되고 소멸한다. 전역변수의 생명주기는 애플리케이션의 생명 주기와 같다. 지역변수는 함수가 호출되면 생성되고, 함수가 종료하면 소멸한다. 함수 몸체 내부에서 선언된 지역 변수의 생명주기는 함수의 생명 주기와 대부분 일치하지만 지역 변수가 함수보다 오래 생존하는 경우도 있다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수의 생명주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀..

자바스크립트 엔진은 만약 이름이 같은 두 개의 변수가 있다면 어떤 변수를 참조해야할 지를 결정해야한다. 이를 식별자 결정이라 한다. 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 따라서 스코프란 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다. 자바스크립트 엔진은 코드를 실행할 때 코드의 문맥을 고려한다. 코드의 문맥과 환경 렉시컬 환경 - 코드가 어디서 실행되며 주변에 어떤 코드가 있는지 코드의 문맥은 렉시컬 환경으로 이루어진다. 이를 구현한 것이 실행 컨텍스트 모든 코드는 실행 컨텍스트에서 평가되고 실행된다. 스코프는 전역과 지역 스코프로 나뉜다. 전역에 변수를 선언하면 전역변수 지역에 변수를 선언하면 지역변수 전역 변수는 어디서든지 참조할 수 ..