티스토리

개발 일기:)

검색하기

블로그 홈

개발 일기:)

jhn221.tistory.com/m

코린이의 기술블로그 😁

구독자: 10

방명록 방문하기

주요 글 목록

[JS]onBlur onClick onfocus onMouseDown(이벤트 동작 순서) 문제 상황 : 모달 창에서 검색을 진행한 후, 검색결과 중 하나의 옵션을 선택하려고 했을 때 선택이 되지 않고 모달창이 닫히는 현상 이번에 구현하고자 했던 건 검색창이 들어있는 검색 모달 창이다. 이렇게 재사용할 수 있는 컴포넌트를 새로 만들어 같은 기능을 하는 모달 창에는 다 해당 컴포넌트를 가져다가 사용하고 있었는데 문제가 생겼다. 각 요소를 클릭 하면 선택이 되어야 하는데.. 저렇게 하얀 모달 창 밖에 있는 요소들을 눌렀을 때 요소가 선택되는 것이 아니라 모달창이 아예 꺼져버린다. 혹시 몰라 onclick 이벤트에 콘솔을 입력해봤지만 아예 콘솔이 안뜨는걸 보니 onclick 이벤트가 아예 실행되지 않는 듯 했다. setOpened(true)} onBlur={() => setOpened(false)}.. 공감수 0 댓글수 0 2024. 2. 14.
조건문 체크하기_삼항연산자 , 논리연산자(??, !, !!, &&) 이전에 개발을 하면서 조건문을 사용해야할 때 내가 선호하는 방식은 삼항연산자 활용 방식이였다. 내가 어떤 조건을 거는지 한 눈에 파악하기 쉽다는 이유가 가장 컸다 하지만 그렇게 작성한 코드가 프로젝트에 배포 후 문제가 생길 수 있다는 것을 알았다. 삼항연산자의 장점이라고 생각했던 '조건을 코드로 명확히 볼 수 있다'는 장점이 적어두지 않은 조건에 대해서 예외처리를 해줘야 한다는 단점이 되어 배포 후 문제가 발생했기 때문... 예를 들면 {data?.content?.length !== 0 ? {data} : 결과가 없습니다 위 코드의 경우 data의 길이가 0일 때만 확인 할 수 있고 나머지의 예외상황에 대해서는 걸러내지 못한다는 것이다. data가 null이라면? undefined라면..? 저 코드에서 .. 공감수 0 댓글수 1 2023. 12. 29.
[js]식 문 값(표현식, 명령문) 원티드 강의를 듣다가 듣게된 식, 문, 값 각각의 정의에 대해 설명해달라고 하면 제대로 설명할 수 있을까? 라는 생각이 들었다 특히 식과 문의 차이는 정확히 설명하지 못할 것 같다. 그래서 오늘은 값, 식, 문에 대해서 다시한번 인지하고 정리해보고자 한다 값(value) 이 세가지 개념 중에서 가장 간단하고 기본이 되는 단위이다. 프로그램이 조작하고 저장하는 정보를 말하며 문자열, 배열, 객체 등 다양한 형태를 가지고 있다. undefined null boolean Number String ... 이처럼 많은 것들이 '값'이 될 수 있다 식(expression) 식은 값을 가지며 값을 반환한다. 표현식이라고도 불리는 식은 어떤 값이든지 계산하고 결과를 반환하는 코드를 표현한다 let result = x .. 공감수 0 댓글수 2 2023. 11. 28.
[JS]즉시실행함수 iife(특징, 장/단점) 원티드 강의를 듣다가 처음 접하게 된 즉시 실행 함수 , IIFE(Immediately Invoked Function Expression) IIFE는 즉시 실행되는 함수 표현식의 약자이다. let fun = function() { console.log('실행 됨') }; fun(); 이렇게 정의된 함수는 호출해주지 않으면 실행되지 않는 함수이다. 이와 다르게 즉시 실행함수는 아래와 같이 입력하면 바로 실행이 된다. (function write() { console.log('즉시 실행') }()); 보통 함수와의 차이점이라고 하면 함수 리터럴()로 감싼 형태라는 것이다. 소괄호로 감싸지 않는다면 함수 선언문으로 인지된다. 함수 리터럴은 function 키워드, 함수 이름, 함수 본문, 파라미터 리스트로 구.. 공감수 0 댓글수 3 2023. 11. 14.
생성자 함수_new (with.모던 자바스크립트 deep dive) 오늘은 모던 자바스크립트 deep dive 책에서 프로젝트 작업때보다 코딩테스트 당시 많이 썼던 생성자 함수 부분 중 일부를 읽고 정리해보려고 한다. 객체 리터럴 객체 리터럴에 의한 객체 생성 방식은 직관적이다. 하지만 객체 리터럴에 의한 객체 생성 방식은 단 하나의 객체만 생성한다. 여러개를 생성하려면 같은 기능을 하는 코드를 여러번 작성해야해서 비효율적이다. //객체 리터럴에 의한 객체 생성방식 const circle1={ radius:5, getDiameter() { return 2*this.radius; } } console.log(circle1.getDiameter()); 만약 지름이 10인 circle 객체를 하나 더 만들고 싶다면 radius값만 바뀐 상태로 같은 코드가 작성된다. 즉, 객체.. 공감수 0 댓글수 3 2023. 8. 3.
이벤트 버블링에 대해서 (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임) 오늘은 이벤트 버블링에 대해서 공부한 내용을 적어보려고 한다. 이벤트 캡처링 이벤트 캡처링은 버블링과 반대로 브라우저로부터 이벤트가 발생한 요소까지 이벤트를 전달한다. 처음 js를 학습할 때 addEventListener메소드와 를 접했던 적이 있다. 이 메소드는 이벤트 캡처링을 위한 메소드이다. 이벤트 버블링 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 버블링은 해당 타깃에서 최상위 객체를 만날 때까지 핸들러가 모두 호출되는데, 원하는 타깃에서만 이벤트를 발생시키고 싶을 수가 있다. 그때 event.stopPropagation 메소드를 이용하면 상위요소로 이벤트가 전파되는 것을 막을 수 있다. 하지만 추후에 문제가 발생할 수.. 공감수 0 댓글수 3 2023. 7. 25.
객체 배열의 중복 제거 (filter, findLastIndex 메서드) 오늘은 객체 배열의 데이터에서 중복되는 객체의 값이 있을 때 원하는 조건으로 중복을 제거하는 방법에 대해 적어보려고 한다. 프로젝트를 진행할 때 OTT별 영화 데이터를 홈 화면에 보여줘야 했는데, 처음엔 영화 순위를 기준으로 화면에 렌더링 되도록 코드를 작성해 뒀다. 하지만 하루에 한번씩 크롤링을 통해 새로운 영화가 쌓이게 되고 나니 중복되는 순위의 영화는 중복으로 나타나게 되고 심지어 순서도 뒤죽박죽이 되는 점을 확인할 수 있었다. 현재 코드에서는 데이터를 받아오는 형태는 객체 배열이고, 정렬 조건은 먼저 OTT별 영화 순위, 중복되는 순위가 있다면 수정 시간이 최근인 데이터를 보여주도록 하는 과정이 필요했다. 검색해 보니 javascript에서 객체 배열 중복을 없애는 방법은 여러가지가 있었다. 1... 공감수 1 댓글수 0 2023. 2. 17.
JS_최적화(Optimization)/Lighthouse로 성능 분석해보기 코드를 구현할 때 어떻게 하면 더 적은 비용, 적은 시간을 들여 원하는 결과를 얻을 수 있을지 고민하는 코드 최적화 과정은 꼭 필요한 과정이라는 생각이 든다. 최적화의 필요성 및 효과 - 이탈율 감소 - 전환율 증가 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매 등 다른 활동으로 연결된 방문자의 비율 - 수익 증대 - UX(사용자 경험)향상 최적화 기법 JS에서 최적화를 하기 위해서는 여러 방법이 있다 1. JavaScript 파일은 HTML의 body부분에서, css는 HTML의 header 부분에서 불러온다. 간략하게 정리하자면 CSS 파일이 header 부분에 들어가는 이유는 화면을 랜더링 할 때 필요한 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 하기 위해서다. JS가 body 하단에 .. 공감수 2 댓글수 0 2022. 12. 5.
JS_ JSON이란 ?(JSON.stringify & JSON.parse) 처음 JSON을 접했을 때는 JSON 형태가 와닿지를 않았다. 많이 접하고 익숙해지면서 어느 정도 정리가 된 지금 JSON에 대해서 정리해보고자 한다 JSON 형태 JSON(JavaScript Object Notation)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포멧이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용된다. JSON은 문자열 형태로 이루어져 있다. 얼핏 보기엔 객체 형태처럼 보일 수 있는 JSON 형태는 이 부분에서 객체와의 차이점을 느낄 수 있다. JSON 형태와 JavaScript 형태의 차이는 이러하다 JavaScript 객체 JSON 키 키는 따옴표 없이 쓸 수 있음 { key : "property" } 반드시 쌍 따옴표를 붙.. 공감수 2 댓글수 0 2022. 10. 26.
UI & UX란? (벌집 모형 , 10가지 사용성 평가 기준) 오늘은 서로 보완하는 역할을 하는 UI와 UX에 대해서 적어보려고 한다. 좋은 UI 를 가지고 있다고 UX도 좋은 것은 아니며 반대로 UX가 좋다고 UI까지 좋다고 할 수는 없다 UI UI(User Interface, 사용자 인터페이스)는 사람들이 컴퓨터와 상호작용하는 시스템을 의미한다 스마트폰과 스마트 워치 등 화면과의 상호작용을 직접 하는 기기들이 많아지면서 *GUI가 중요한 역할을 하게 되었고 현재 프론트엔드 개발자로서의 UI는 대부분 GUI를 의미한다. UI에서는 UI 디자인 패턴을 사용하는 경우가 많다 자주 쓰이는 UI 디자인 패턴(자주 사용되는 UI컴포넌트)는 모달 (Modal), 토글(Toggle), 탭(Tab), 태그(Tag), 자동완성(Autocomplete), 드롭다운(Dropdown).. 공감수 1 댓글수 0 2022. 10. 24.
for in & for of 문은 어떤 것이고, 둘의 차이는 무엇일까? for...of for...of 명령문은 반복가능한 객체에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다 - mdn 이렇게 정의를 봤을 때는 이게 한국말이 맞나 싶을 정도로 이해가 되지 않는다. 그렇다면 예시를 한번 들어서 이해해보자 for (const variable of iterable) { statement } //variable(변화를 줄 수 있는) : 각 반복에 서로 다른 속성값이 variable에 할당된다 //iterable(반복될 수 있는) : 반복되고 열거가능(enumerable)한 속성이 있는 객체 for...of 문의 기본 형태는 이렇다. 배열 형태에서 아래와 같이 주로 사용 되는데 let iterable = [10,20,.. 공감수 5 댓글수 0 2022. 10. 22.
프로토타입과 클래스, 프로토타입 체인 오늘은 JS의 OPP(객체지향 프로그래밍)하면 함께 나오는 프로토타입에 대해서 적어보려고 한다. 프로토타입 JavaScript는 프로토타입(Prototype) 기반 언어로 객체를 상속하기 위해서 프로토타입의 방식을 사용한다. 이전에는 js에서 클래스라는 개념이 없었기에 객체지향 프로그래밍은 주로 프로토타입을 통해 이루어졌다 ES6에 class 문법이 생겼지만 자바스크립트는 여전히 프로토타입기반 언어이다. mdn같은 곳에 메소드에 대해 찾아 볼 때면 arr.prototype.push ()등으로 표현되어 있는 것을 볼 수 있다. 이 이유는 상속되는 속성과 메소드들이 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있기 때문이다. 프로토타입 체인 자바스크립트는 특정 객체의 메소드에 접.. 공감수 2 댓글수 0 2022. 9. 22.
객체지향 프로그래밍 (OOP : Object-Oriented Programming) 객체지향은 프로그램 설계 방법중의 하나로 객체의 관점에서 프로그래밍하는 것을 말한다. OOP는 객체들의 유기적인 관계를 통해서 프로세스가 진행된다 (ex. java) 코드의 재사용성이 가능하고 생산성이 향상된다는 장점이 있다 JavaScript도 객체지향언어는 아니지만 객체지향으로 작성이 가능하고, TypeScript는 보다 개체지향적으로 디자인 되었다 반대 개념으로 *절차 지향 프로그래밍이 있다 객체지향의 4가지 속성 캡슐화(Encapsulation) 데이터와 기능을 하나의 단위로 묶는 것으로 어떠한 클래스를 사용할 때 내부 동작이 어떻게 돌아가는지 모르더라도 사용법만 알면 쓸 수 있도록 클래스 내부를 감추는 기법 - 은닉화의 특징도 가지고 있음 은닉화는 내부 데이터나 내부 구현이 외부로 노출되지 않도.. 공감수 1 댓글수 0 2022. 9. 21.
객체지향 프로그래밍 1. 클래스와 인스턴스 객체지향 프로그래밍을 이해하기 위해서는 클래스와 인스턴스의 이해가 필요합니다. 그렇기 때문에 객체지향 프로그래밍에 대해 본격적으로 공부 해보기 전에 클래스와 인스턴스에 대해서 정리하고 넘어가려고 합니다. 클래스 정의 : 객체를 만들기 위한 틀을 잡아주는 문법(ex.붕어빵 틀) 클래스를 만드는 방법은 두가지가 있습니다 두가지 방법 전부 다른 일반적인 함수와 구분하기 위해 클래스는 대문자로 시작하는 일반명사로 만든다 - 일반적인 함수를 정의하듯 만드는 법(ES5클래스 작성 문법) function Computer (brand, name, version, color){ this.color = black; . . . } - ES6에 도입된 문법 최근에 주로 사용되는 방식으로 class 생성자를 이용하여 정의한다 .. 공감수 2 댓글수 0 2022. 9. 21.
css Link를 <head>에 선언하고 js script를 <body>에 선언하는 이유(JS) 일반적으로 html에서 js와 css를 import 할 때 css의 는 에, js의 script는 에 선언하는데, 그 이유는 무엇일까? css의 link를 head에 선언하는 이유 이는 최적화된 웹사이트를 구축하기 위해 필요하다. html과 css는 시각적인 부분을 담당하기 떄문에 페이지가 처음 로드되면 HTML과 CSS(head 안에 있는 경우)가 함께 파싱된다. HTML은 DOM(Document Object Model)을 만들고 CSS는 *CSSOM(CSS Object Model)을 만든다 stylesheet가 body에 선언되게 된다면? HTML이 먼저 렌더링 되고 그 다음에 CSS스타일이 적용된다. 즉, 2번 렌더링 되기 때문에 비효율적이다 js script를 body 끝에 선언하는 이유 HTML.. 공감수 1 댓글수 0 2022. 9. 20.
함수 선언식 vs 함수 표현식 vs 화살표 함수 (JS) 함수 선언식 가장 기본적인 함수 선언 방식으로 함수명이 정의되어 있고, 별도의 할당 명령이 없는 특징을 가지고 있다 function add(a,b){ return a+b } 함수 선언식은 함수 호이스팅이 발생한다 (함수 선언문 이전에 함수를 참조/실행 할 수 있다) 함수 표현식 정의한 함수를 별도의 변수에 할당하여 사용하는 방식 let cat = function minus(x,y){ return x-y } 함수 명 없이도 함수 표현식을 만들 수 있다 let cat = function (x,y){ return x-y } 이런 함수표현식을 익명함수라고 한다 - 익명함수란 함수를 재사용하지 않을 목적으로 함수에 이름을 붙이지 않는 것을 뜻한다. 화살표 함수 화살표 함수는 함수 표현식의 단축형이라고 할 수 있다.. 공감수 1 댓글수 0 2022. 9. 15.
DOM 이란? / Tree 자료구조 (JS) DOM이란? 문서 객체 모델(DOM, Document Object Model)은 HTML이나 XML 문서에 접근하기 위한 일종의 인터페이스 DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 들을 변경할 수 있게 돕는다 DOM에서 가장 많이 사용되는 interfaces 먼저 window와 Document 객체 (object)는 DOM 프로그래밍에서 가장 자주 사용하는 객체이다. window는 브라우저와 같다고 할 수 있고, document는 root document 자체라고 할 수 있다. 아래는 DOM을 사용하는 공통적인 API의 대표적인 메소드이다 document.getElementById(id) document.q.. 공감수 2 댓글수 0 2022. 9. 13.
깊은 복사_Deep Copy vs 얕은 복사_Shallow Copy (JS) 먼저 이 이론을 이해하려면 원시자료형과 참조자료형에 대해서 알고 있는 것이 좋을 것 같아서 제가 전에 정리한 포스팅을 가지고 왔습니다. 원시 자료형_Primitive data type vs 참조 자료형_Reference type(JS) 깊은 복사_Deep Copy 위 포스팅에도 적혀있 듯, 원시값은 복사를 할 때 기존 변수에는 영향을 끼치 않는다. 즉, 실제 값을 복사하는 것을 깊은 복사라고 한다 let a = 33 let b = a b = 11 console.log(a) // 33 //B의 값이 변했지만 a의 값은 변동 없음 console.log(b) // 11 얕은 복사_Shallow Copy 얕은 복사는 객체의 참조값(주소값)을 복사한다 참조값 복사를 생각하면 되는데, 변수를 복사를 하고 수정하면 .. 공감수 1 댓글수 0 2022. 9. 9.
원시 자료형_Primitive data type vs 참조 자료형_Reference type(JS) 원시 자료형 _ Primitive data type - 객체가 아니면서 method를 가지지 않는 타입 String, Number, *Bigint, Boolean, Undefined, symbol, null 원시자료형은 모두 하나의 데이터를 담고 있다 참조 자료형_Reference type - 원시 자료형이 아닌 모든 것 대표적으로 배열, 객체, 함수가 있음 하나의 변수에 여러 데이터를 담을 수 있다. (ex. [1,2,3,4,5]) 할당 될 때는 보관함의 주소(reference)가 담긴다 원시자료형과 참조자료형의 차이 - 데이터를 복사 할 때 원시자료형의 경우 원본이 변하지 않는데 비해 객체자료형은 원본이 변한다 let a = 10 let b = a b = 50 이 경우에 a의 값은 10으로 변하지 않.. 공감수 1 댓글수 0 2022. 9. 6.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.