본문 바로가기
728x90
반응형

전체 글145

[JS] 위쪽으로 트리를 순회하는 Element.closest()에 대해 알아보자 JS, HTML, CSS만 사용해서 코딩하는 연습을 하다가 처음 보는 것이 있어서 정리하게 되었다. 언젠가 알아두면 써 먹을 일이 분명히 있을 거 같다! Element.closest() Element의 closet() 메서드는 매개변수로 준 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. 구문 closet(selectors) 매개변수: 'CSS 선택자' 반환 값: 자기 자신 또는 가장 가까운 조상 엘리먼트, 일치하는 요소가 없으면 null 예제 // HTML Here is div-01 Here is div-02 Here is div-03 // js const el = document.getElementById('div-03').. 2023. 2. 20.
[JS] async / awiat(Promise의 간결판!) 제목에서도 알 수 있듯이 async/await은 Promise를 조금 더 간결하고 동기적으로 실행되는 것처럼 보이게 만들어 준다. (그래서 async/await을 syntactic sugar라고도 한다.) async 함수 앞에 async 키워드를 쓰면 자동적으로 함수 안의 코드 블럭이 Promise로 변환된다. await await은 반드시 async 함수 안에서만 유효하다. await 대상은 Promise를 반환하는 API 함수이다. await 키워드 뒤의 행동이 끝날때까지 기다려준다. 다시 말해, 비동기 작업이 끝날 때까지 기다렸다가 다음 문장 코드를 처리한다. async 함수 동작 방식 1. async 함수가 호출되어 await 키워드가 있는 비동기 작업이 실행되면 2. await은 이벤트 루프를 .. 2023. 2. 20.
[JS] fetch 성공 여부 확인하기 fetch를 사용할 때는 response.ok를 사용하여 성공 여부를 꼭 확인해야 한다. fetch는 네트워크에 오류가 있거나, 서버의 CORS 설정이 잘못된 경우 fetch를 거부한다. 그러나 이 2가지 경우는 권한 등 설정의 문제고, 404와 같은 응답은 네트워크 오류가 아니기 때문에 fetch를 거부하지 않는다. 위와 같은 이유로 fetch()가 성공했는지를 정확히 알아내려면 response.ok 속성의 값이 true인지도 확인해야 한다! fetch('flowers.jpg') .then((response) => { if (!response.ok) { throw new Error('네트워크 응답이 올바르지 않습니다.'); } return response.blob(); }) .then((myBlob) .. 2023. 2. 20.
[JS] 2차원 배열 중복 제거하기 코딩테스트를 연습하다가 2차원 배열에서 중복을 제거하고 싶은 문제를 만났다! 찾아봐도 정리된 경우가 없는거 같아 내가 직접 정리했다. let arr = [ [ 0, 1 ], [ -1, 1 ], [ -1, 2 ], [ 0, 2 ], [ 1, 2 ], [ 1, 1 ], [ 0, 1 ], [ -1, 1 ], [ -1, 2 ] ]; function removeDup(arr) { return [...new Set(arr.join("|").split("|"))] .map((v) => v.split(",")) .map((v) => v.map((a) => +a)); } let uniqueArr = removeDup(arr); console.log(uniqueArr.length); // 6 9개의 배열을 가지고 있는 a.. 2023. 2. 17.
자바스크립트 Promise 이해해보자! Promise란? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 자바스크립트 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말한다. Promise는 만드는 순간 콜백함수가 바로 실행된다는 점을 기억하자. Promise는 왜 필요할까? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다. $.get('url 주소/products/1', function(response) { // ... }); 위 API가 실행되면 서버에 데이터를 보내달라는 요청을 하게 되는데, 데이터를 받아오기도 전에 마치 데이터를 다 받.. 2023. 2. 15.
[react] React에서 key의 역할과 컴포넌트를 다시 그리는 과정 발생한 이슈 팀 프로젝트를 진행하면서 key에 대해 간과하고 있던 점을 스스로 발견해버렸다. 그래서 기록을 남기고자 이렇게 작성을 하려고 한다. 나는 map을 사용할 때 key를 보통 map의 두 번째 인자인 index로 사용했다. 평소에는 문제가 되지 않았던 이슈가 이번 프로젝트에서는 이슈가 되어 돌아왔다. 제대로 정리하지 않으면 프로젝트를 할 때 헤맨다는 이유가 여기에서 나왔나 싶다,, 여러 들이 있고, 각각의 에는 삭제 버튼이 있다. 삭제 버튼을 클릭했을 때 클릭한 를 삭제하고 싶었다. 하지만 클릭한 가 삭제되지 않고, 다른 가 삭제되는 현상이 있었다. 왜 이러한 이슈가 발생한 건지 정리해보려고 한다. Key의 역할 공식문서에서는 key에 대해 이렇게 설명하고 있다. 그 중 위의 이슈와 관련성이 깊.. 2023. 2. 15.
파비콘 아이콘 생성하기(+아이패드) 파비콘 아이콘 생성하는 법 1. 아이패드를 사용해서 우선 원하는 아이콘을 그려주고, 배경 없는 png 파일로 저장한다. 2. 그리고 ico 파일로 변환하기 위해 아래의 웹 사이트를 사용한다. Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 3. 파일을 선택하고, Create Favicon을 클릭한다. Generate icons for Web, Android, Microsoft, and iOS (iPhone and.. 2023. 2. 14.
[TS-오류] but has no corresponding defaultProps declaration react/require-default-props 아래 사진에서 onClick props를 선택적으로 입력할 수 있도록 ?을 붙여서 작성했었다. 이때 기본 값을 선언해주지 않아 발생된 오류다. 해당 오류를 해결하기 위해서는 아래의 코드처럼 규칙을 warn으로 변경하거나 해당 컴포넌트에게 defaultProps를 지정해줘야 한다. 방법 1(warn으로 변경) // .eslintrc.js "rules": { 'react/require-default-props': 'warn', } 방법2(defaultProps 지정) Button.defaultProps = { onClick: null, } 2023. 2. 14.
[TS-오류] Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events div 태그한테 onClick 이벤트를 줘서 생긴 에러였다. div 태그는 non-interactive 한데 onClick은 interactive한 요소라고 에러를 내고 있었다. 그래서 div 태그한테 role=”none”라는 속성을 줬다. 그랬더니 오류는 사라졌다. 여기서 role=”none”은 적용된 요소의 기본 의미 체계와 필수 하위 요소를 제거해주는 속성이다. 2023. 2. 14.
<div> 안에 text 가운데 정렬하는 법 flex, justify-content, align-items만 기억하면 된다! 한테 flex, justify-content: center, align-items: center 속성을 주면 손 쉽게 text를 가운데 정렬시킬 수 있다. 2023. 2. 13.
728x90
반응형

티스토리툴바