티스토리

개발공부 log

검색하기

블로그 홈

개발공부 log

doishalf.tistory.com/m

행반 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[React] 리액트 Netlify 깃헙 연결 배포 시 Module not found: Can't resolve... 에러 개요 github에 올린 레포지토리를 Netlify에 연결해서 배포를 하려고 했는데, 이런 오류가 떴다. Module not found? 파일은 멀쩡하게 있는데... 뭐가 문젠가 싶어 이리저리 검색해본 결과, Case-sensitive와 관련이 있었다. ▶netlify포럼의 지원 가이드 글 Git에서는 대소문자 구분을 하지 않고 같은 파일로 취급하는데, netlify는 대소문자 구분을 하기 때문에 문제가 발생한다는 것이였다. 설마...하고 github의 오리진 레포지토리에 올라가있는 파일명을 확인해보니, 아니나 다를까 작업 중간에 파일의 앞글자를 소문자로 고쳤던 파일이 레포지토리 쪽에는 파일명이 대문자로 되어있었다. 해결방법 해결하기 위해서는, 오리진 레포지토리 쪽의 파일명을 고치던가 혹은 로컬 파일을 .. 공감수 0 댓글수 0 2022. 10. 23.
[React] css, styled-component에서 & + & 의미 얼마 전에 리액트 코드를 보다가 styled-component에서 이런 부분을 봤다. & + & { margin-top:3rem; } css 연산자에서 &(엠퍼센트)를 쓰는걸 본적이 없었기 때문에 혹시 내가 모르는 선택자인가? 싶어서 검색을 해봤더니, css가 아니라 styled-component에서 쓰는 것이였다. (참고로 sass에서도 비슷하게 사용된다) 즉, 순수 css에서는 쓰이지 않는 표현이다. (내가 찾아볼 때 검색을 css 키워드로 했기때문에... 비슷한 루트로 검색을 해보는 사람을 위해 게시글 제목엔 css를 붙여뒀다.) 그래서 무슨 의미이냐? 먼저 style-component에서의 &는 현재 요소를 뜻한다. 예를 들면... const Item = styled.div` &:hover{ ba.. 공감수 6 댓글수 0 2022. 10. 20.
[React] 리액트에서 환경 변수(.env)설정하기, API키 정보 숨기기 git을 이용해 프로젝트 작업을 할 때, API KEY나 비밀번호와 같이 민감한 정보가 포함되어있어 커밋이 곤란한 때가 있다. 그럴 때는 환경 변수와 .gitignore를 사용하면 쉽게 문제를 해결할 수 있다. 1. 프로젝트의 루트 지점에 .env 파일을 생성한다. (.gitignore가 없다면 이것도 같이 만들자.) 2. 환경변수로 사용할 내용을 .env 파일에 작성한다. REACT_APP_(환경 변수 이름) = (값) 변수가 여러개여도 세미콜론이나 반점(,)을 쓰지 않고 엔터로 구분해둔다. 3. gitignore파일에 .env를 추가한다. 4. 해당하는 키를 쓰는 코드에서 process.env.(키이름)으로 불러다 쓴다. 주의사항 환경변수는 서버를 재시작하면 그때부터 적용이 된다. 401 오류가 난다.. 공감수 2 댓글수 0 2022. 10. 20.
npm init -y 플래그(옵션) npm init -y 다른 사람 블로그 글을 보다가 못보던 플래그를 발견했다. 무슨 뜻인가 하고 찾아보니... 터미널 창에서 npm init로 package.json파일을 만들 때, package의 이름이나 버전, 정보 등을 작성하도록 질문이 뜨는데 그 과정을 생략하고 빈 npm 프로젝트를 만들 때 사용하는 플래그였다. 참고자료 https://stackoverflow.com/questions/62725481/what-is-the-meaning-of-npm-init-y 공감수 0 댓글수 0 2022. 10. 19.
[Typescript]타입스크립트 기본 문법 정리 변수 선언 해당 변수의 값의 타입을 명시하기 위해 타입 주석을 붙여 변수를 선언한다. 변하는 값은 let, 변하지 않는 값은 const로 선언하며 const는 변수 선언 시 반드시 초깃값을 같이 선언해야한다. const 변수명: 타입 = 초깃값 let 변수명: 타입 //예시 const name: string = 'amy' let price: number let isError: boolean = true대표적인 타입은 총 4가지가 있으며, 타입과 무관하게 값을 저장할 수 있게 할 때는 any로 표기할 수 있다. (자바스크립트와의 호환을 위한 타입) 유형 타입 타입 예시 수 number 1,2,10,-500 등 불리언 boolean true, false 문자열 string 'tree&#.. 공감수 0 댓글수 0 2022. 9. 26.
[JavaScript] Intersection Observer API - 화면 내 보이는 요소 검사 개요 직역하면 교차 지점 관찰자 API. 간단히 말하자면, 페이지 안에서 사용자 눈에 요소가 보이는지, 혹은 페이지 바깥에 있어서 보이지 않는지와 관련된 API라 할 수 있다. 어떨 때 필요할까? MDN docs에서는 이 API가 나오게 된 주요한 이유를 이렇게 설명하고 있다. 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩(lazy-loading) 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 무한 스크롤(infinite-scroll)을 구현 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정 좀 더 구체적으로 예시를 들어 보자. 만약 스크롤을 .. 공감수 0 댓글수 0 2022. 7. 25.
[React]리액트 라우터로 화면 넘기기 (버전 6 기준) www.address-a.com/home www.address-a.com/contact www.address-a.com/... 위와 같이, SPA 웹 또는 앱(여기서는 address-a.com)에서도 입력된 url 주소에 따라 다른 화면 페이지를 연결시켜주려면 어떻게 해야할까? 주소가 달라지면 다른 화면을 보여주는 것을 '라우팅' 이라고 하는데, 이 기능은 리액트 자체에 내장되어있지는 않다. 여기서는 라우팅 라이브러리인 리액트 라우터를 사용하는 기본적인 방법을 알아보도록 하자. 1. 리액트 라우터 이 라이브러리는 사용용도에 따라 달리 설치할 수 있다. react-router-dom: 웹에서 사용 react-router-naitve: 리액트 네이티브 즉 앱에서 사용 react-router: 위의 둘을 통합.. 공감수 0 댓글수 0 2022. 7. 10.
[React] 리액트의 스타일링: CSS 모듈과 스타일드 컴포넌트 리액트로 작업을 할 때, 컴포넌트 단위로 스타일을 적용하고 싶다면 쓸 수 있는 방법이 몇 가지 있다. 여러 라이브러리, 프레임워크 등등... 그 중 기존의 CSS만 알아도 쉽게 사용할 수 있는 CSS 모듈과 스타일드 컴포넌트(styled-components)에 대해 알아보자. 1. CSS Module ✔CSS에서: 파일의 이름을 파일명.module.css의 형식으로 한다. ✔리액트에서: import styles from '파일명.module.css'; 로 불러와 적용한다. ⭕장점: 자체적으로 고유 해시값을 붙인 클래스를 생성해주기 때문에, 동일 프로젝트 내에서 CSS클래스의 이름 중복이 가능 → 따라서 네이밍 규칙이 간소화됨. 🚫단점: CSS파일의 수가 많아져 관리가 번거로워질 수 있음. 예시 코드 /*.. 공감수 0 댓글수 0 2022. 7. 3.
[JavaScript] Access to fetch at... has been blocked by CORS policy 오류 해결 방법 개요 API 등을 불러와 사용할 때 아래와 같은 문구와 함께 오류가 발생하는 일이 있다. 'api를 호출한 주소'의 원본에서 'api의 데이터를 보내주는 주소' 가져오기에 대한 액세스가 CORS 정책에 의해 차단되었습니다. : 요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다. 불투명한 응답이 요구 사항을 충족하는 경우 요청 모드를 'no-cors'로 설정하여 CORS가 비활성화된 리소스를 가져옵니다. 에러메시지를 보아하니 - CORS 정책이란 것 때문에 데이터 가져오는게 차단되었고 - Access-Control-Allow-Origin 라는 게 있어야 하고 - 요청 모드를 no-cors로 설정해서 가져올 수도 있다는 것 같다. 발생 원인 CORS에 앞서 먼저 알아야 하.. 공감수 0 댓글수 0 2022. 6. 19.
[React] 리액트 Hook 정리 - 2 Context Hook 리액트 컴포넌트 트리에서 컨텍스트 객체를 받아 현재 값을 반환하는 Hook 함수. 부모와 자식 컴포넌트 사이 중간 컴포넌트들을 건너뛰고 데이터를 전달할 수 있다. 즉, 전역적인 데이터를 공유할 때 쓴다. (UI테마 등) 만약 깊이가 깊은 컴포넌트나, 애플리케이션 내의 여러 컴포넌트들에 props를 전달해야 한다면, 일일히 넘겨주려면 코드 작성도 수정도 번거로울 것이다. context를 쓰면 단계마다 넘겨줄 필요 없이 한번에 여러 컴포넌트들에게 값을 공유할 수 있다. -특징: useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다. -사용법: 선언: createContext(초기값) 컴포넌트: 사용: useContext(Context명) -사용 예: .. 공감수 0 댓글수 0 2022. 6. 12.
[React] 리액트 Hook 정리 - 1 1. Hook이란? 기존 클래스 컴포넌트에서만 가능했던 기능들(state, lifecycle관리)을 클래스 없이 사용할 수 있게 해주는 기능. 리액트 버전 16.8부터 추가되었다. 2. Hook을 쓰는 이유 - Class개념과 같이 객체지향에 익숙하지 않은 개발자도 리액트의 주요기능을 함수에서 쉽게 사용할 수 있음 - componentDidMount나 componentDidUpdate등의 lifecycle API 에서 불필요하게 포함된 요소를 직관적으로 분리해 사용가능. - Hook을 쓰면 계층 변화 없이 상태 로직을 재사용할 수 있음. 3. Hook 사용 시 주의점 - 최상위 레벨에서 Hook을 호출해야함. (반복문이나 조건문 등 중첩 함수 내에서 실행x) - 리액트 함수 컴포넌트 내에서만 Hook을 .. 공감수 0 댓글수 0 2022. 6. 5.
[React] vscode에서 리액트 JSX 태그 자동완성 적용 방법 개요 HTML에서 꺽쇠()를 입력하지 않고 태그명만 입력하면 자동완성되는 기능에 익숙해지고 보니, 리액트에서 JSX태그도 자동완성을 하고싶은데... 익스텐션을 찾아봐도 마땅히 나오는게 없었다. 서치를 해보니 따로 익스텐션 설치 없이도 할 수 있는 기능이었다. 방법1 - 개별 파일에 적용 VScode창 오른쪽 하단에는 현재 커서 위치나 인코딩 형식, 적용중인 익스텐션 등이 나와있는 바가 있다. 그중에서도 (js파일을 열고있는 상태라면) JavaScript라고 써져있는 부분이 있다. 이걸 클릭한다. 그러면 화면 상단에 여러 언어들이 나열된 언어 모드 선택 창이 뜬다. react를 검색해서 JavaScript React를 눌러준다. 이제 JSX 태그를 작성해보면 자동완성이 뜨는걸 확인할 수 있다. li>a 등.. 공감수 15 댓글수 1 2022. 4. 12.
[JavaScript] Unexpected token .. in JSON at position .. 오류 해결하기 문법 오류: 위치 1에서 JSON의 예기치 않은 토큰 r 원인 json구조가 아닌 데이터를 json파일로 생각하고 읽으려고 했을 때 발생한다. 해결방법 콘솔로 데이터의 타입을 확인해보거나, 오타나 따옴표 등의 자잘한 형식오류가 없는지 확인해보도록 하자. 내 경우엔 데이터를 받아온걸 json형식이라고 생각하고 .json()으로 처리한 데이터가 다른 형식이어서 저 오류가 떴고, 형식에 맞춰 다르게 처리를 해주었다. 참고 자료 - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Errors/Unexpected_token - https://itprogramming119.tistory.com/entry/%EC%97%90%EB%9F%AC%EC%BD%9.. 공감수 0 댓글수 0 2022. 4. 3.
[JavaScript] 커스텀 이벤트 만들기 코딩 중에 커스텀 이벤트를 쓸 상황이 생겨서 애매하게 알고있던걸 이번 기회에 공부해봤다. 커스텀 이벤트 생성 - Event 기존에 존재하는 이벤트(click, mouseover등)를 커스텀으로 변형해서 사용할 수도 있고, 아예 새로운 이름의 커스텀 이벤트를 만들 수도 있다. const event1 = new Event('click'); const event2 = new Event('eventname', { "bubbles" : true, "cancelable" : false, "composed" : true }); bubbles 이벤트 버블링을 하는지 여부 (기본값 false) cancelable 이벤트를 취소할 수 있는지 여부 (기본값 false) composed 이벤트가 Shadow DOM 경계를 넘.. 공감수 0 댓글수 0 2022. 3. 27.
[JavaScript] 자바스크립트로 캔버스 제어하기 - 스타일 저장 & 불러오기 (save와 restore) 개요 캔버스의 컨텍스트 영역에서는 한번에 하나의 스타일만 가질 수 있다. 예를 들어, 빨강색의 꽉찬 원과 파란색의 사각형을 그리려면.. 1. 현재 컨텍스트 영역의 채우기 스타일을 빨강색으로 설정한다. 2. 원을 그린다. 3. 현재 컨텍스트 영역의 채우기 스타일을 파란색으로 설정한다. 4. 사각형을 그린다. 한번에 빨강색과 파란색을 설정해두는게 아니라, 위의 예시처럼 스타일 하나를 설정하고 그리고 다시 스타일 하나를 설정하고 그리고.. 하는 방식이다. 그런데 만약, 빨강색 도형을 쭉 그리다가 파란색 도형을 또 쭉 그리다가 다시 빨강색 도형을 쭉 그리다가... 이런 식으로 전에 그렸던 스타일의 도형을 다시 그려야 한다고 하자. 한두번은 그렇다 쳐도, 만약 전에 그렸던 스타일을 자주 다시 그려야 한다면 코드에.. 공감수 0 댓글수 0 2022. 3. 20.
[JavaScript] 자바스크립트로 캔버스 제어하기 - 2d 그래픽 그리기 자바스크립트에서 캔버스를 동적으로 제어하는 기능에 대해 공부한 내용 중, 2d 그래픽을 그리는 부분에 대해 정리했다. 캔버스 생성 화면에 createElement로 캔버스 엘리먼트를 생성하고, getContext로 캔버스에 연결된 렌더링 컨텍스트를 정의한다. const myCanvas = document.createElement('canvas'); //캔버스 엘리먼트 생성 const ctx = myCanvas.getContext('2d'); //생성한 캔버스에 컨텍스트를 연결 document.body.appendChild(myCanvas); //body 내에 캔버스를 배치 myCanvas.style.width = 100%; myCanvas.style.height = 100%; 여기서 렌더링 컨텍스트를 정.. 공감수 0 댓글수 0 2022. 3. 19.
[JavaScript] JS파일 분리해서 쓰기 (모듈) 모듈이란 js파일 하나에 들어있는 내용이 많아서 분리하게 될 때, 여러 개로 분리한 각각의 파일을 모듈이라고 부른다. 대부분의 브라우저에서 지원되지만, 인터넷 익스플로러에서는 지원되지 않으니 주의. 그리고 모듈은 로컬에서 동작하지 않는다. 로컬 실행 시 라이브 서버 등을 이용할 것. 자바스크립트에서는 일반적인 스크립트 파일과, 불러오기가 가능한 모듈 파일의 타입을 달리 하고 있다. //스크립트 파일 //모듈 파일 모듈 파일은 export 를 사용해 파일 내부의 함수를 외부로 내보낸다. //hello.js export function hello(name){ console.log(`hello, world! I'm ${name}!`); } 모듈 파일을 불러올 때는 import 를 사용한다. 불러오는 함수는 중.. 공감수 1 댓글수 0 2022. 3. 13.
[JavaScript] 자바스크립트의 클래스 클래스란 객체 지향 프로그래밍에서 동일한 종류의 객체를 여러 개 생성하기 위한 틀. 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 이루어져 있다. 주로 재사용을 위해 사용되며, 볼륨이 크거나 복잡한 사이트를 만들때 효과적이다. ES6에서 추가된 문법으로, 이전에는 prototype을 기반으로 클래스를 구현할 수 있었다. 클래스 선언 클래스는 함수와 달리 호이스팅 될 때 초기화되지 않는다. 따라서 정의를 먼저 해야 사용할 수 있다는 점에 유의하자. 클래스의 메서드는 클래스의 body(중괄호({}) 내부)에 정의해야 한다. 생성자(constructor) 새 클래스 객체를 생성할 때, 가장 먼저 자동으로 실행되며 객체의 초기 상태를 설정해주는 메서드. 생성자는 클래스 내에 하나만 존재해야 한다. c.. 공감수 0 댓글수 0 2022. 3. 13.
[JavaScript] 자바스크립트에서 변수 이름 앞에 오는 달러($), 언더바(_) 다른 사람의 코드를 보다가 변수 앞에 달러 기호($)가 붙어있는 부분이 의문점이 들어서 찾아본 내용을 정리해본다. `${variable}`의 형식이 아닌 변수 이름 자체가 $variable 의 형식이었다. 식별자에서의 $, _ 알아보니 둘 다 일반 문자로, 식별자(변수나 함수) 이름으로 쓰일 때는 알파벳과 똑같이 취급된다. 특수한 기능이 있는 것은 아니고 관습적으로 사용된다. 이 요소를 활용해 변수 이름을 지으면 변수명만 보고도 그 변수의 특성을 쉽게 알아볼 수 있다. 달러 기호($) document.getElementById() 에 대한 바로가기를 나타낼 때 변수명 앞에 달러를 붙여 사용한다. //document.getElementById("test")의 요소를 매개변수로 받는 함수 function t.. 공감수 0 댓글수 0 2022. 3. 12.
[JavaScript] 자바스크립트 클로저 클로저란 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이다. 풀어서 말하자면 함수가 생성된 당시의 외부 변수를 기억해, 생성 이후에도 계속 접근할 수 있게 해주는 기능을 말한다. 외부 함수의 실행이 끝나 외부 함수가 소멸해도 내부 함수는 외부 함수의 변수에 접근이 가능하다. JS의 코드적으로 보자면 아래처럼 비공개 변수를 가질 수 있는 환경에 있는 함수 정도가 되겠다. var makeClosure = function() { var name = 'hello'; return function () { console.log(name); } }; var closure = makeClosure(); closure(); // 'hello'; 클로저를 사용하는 상황 - 현재 상태를 유지하고 변경된 최신 상태를 유지.. 공감수 0 댓글수 0 2022. 3. 6.
[JavaScript] 자바스크립트 this this값 함수가 호출되었을 때 그 함수가 속해 있던 객체의 참조. - 메서드 내에서 현재 객체를 참조 - 모든 함수에서 사용가능 - 함수가 호출되어 실행되는 시점에 this값이 결정됨 런타임에 따라 결정되며, 컨텍스트에 따라 가리키는 객체가 달라짐. 전역 컨텍스트에서 현재 객체인 전역 객체를 가리킨다. 웹브라우저에서는 window객체가 된다. 이벤트 처리기 안에서 이벤트가 발생한 요소 객체(이벤트 처리기가 등록된 객체)를 가리킨다. document.body.onclick = function() { console.log(this); } //body클릭 시, 엘리먼트가 출력됨 함수 내부에서 최상위 레벨 코드에서 호출하면 전역 객체를 가리킨다. function func() { console.log(this).. 공감수 0 댓글수 0 2022. 2. 28.
[JavaScript] 실행 컨텍스트와 호이스팅 실행 컨텍스트란 코드를 실행하는데 필요한 환경 정보(코드 실행에 영향을 주는 조건이나 상태)를 모아놓은 객체를 말한다. 자바스크립트가 식별자 결정을 효율적으로 하기 위해 사용하는 수단이다. - 전역 컨텍스트: 브라우저가 스크립트를 실행할 때 생성. 모든것을 관리하는 환경으로, 페이지가 종료되면 사라짐. 안에 환경 레코드를 포함한다. - 함수 컨텍스트: 함수 호출 시 생성. 함수 실행이 마무리되면 사라짐. 자바스크립트 엔진이 코드를 실행할 때, 호출 스택(call stack)에 실행 컨텍스트를 push한다. 코드 내에서 함수를 호출할 때마다 호출 스택에 실행 컨텍스트가 push된다. 자바스크립트는 싱글 스레드로 작업을 처리하는데, 따라서 호출 스택에 쌓인 컨텍스트를 위에서부터(=가장 최근 들어온 것부터) .. 공감수 0 댓글수 0 2022. 2. 28.
[JavaScript] 스코프(scope) 스코프란 현재 실행되는 컨텍스트를 뜻한다. 자바스크립트의 변수나 함수는 선언 될 때 그 위치에 따라 스코프를 가지며, 참조하는 대상을 찾기 위한 규칙이다. 예를 들어보자. 서로 다른 범위에 이름이 동일한 2개의 변수 x가 선언되어있을 때, x의 값을 콘솔에 출력하려고 한다. 이 때 현재 맥락에서 두 개의 x 중 어느 쪽을 참조하는지 알기 위해 필요한게 스코프라고 할 수 있다. var x = 'global'; function localFunction(){ var x = 'local'; console.log(x); //지역 스코프. local이 출력됨 } localFunction(); console.log(x); //전역 스코프. global이 출력됨 전역 스코프와 지역 스코프 자바스크립트는 함수 레벨 스코.. 공감수 0 댓글수 0 2022. 2. 27.
[JavaScript] 자바스크립트 Window 객체 Window객체란 웹 브라우저의 창(window)을 나타내는 전역 객체. 모든 객체가 소속된 최상위 객체로 브라우저 요소, JS엔진, 모든 변수를 담고 있다. 전역 변수가 저장되는 위치가 된다. *대표적인 window 메서드 몇가지 window.open(url) 새 창 열기. 여는 방식 등을 추가로 설정 가능 window.close() 현재 창 닫기 window.setTimeout(function, time) 일정 시간 후 함수 실행 모든 객체는 window에 소속되어 있기 때문에 JS코드 작성 시 window는 생략하고 작성할 수 있다. //아래 두 코드는 같다. window.document.querySelector(body); document.querySelector(body); Window 객체의 .. 공감수 0 댓글수 0 2022. 2. 27.
[JavaScript] 자바스크립트에서 Ajax 사용하기 Ajax란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)의 약자. 웹서버와 비동기로 통신해 웹페이지를 동적으로 갱신하는 프로그래밍 기법을 칭하는 말. 이름에 XML이 들어있지만 요즘은 XML보다 JSON을 주로 사용한다. 특징 - 페이지의 새로고침 없이 서버에 요청이 가능 - 따라서 전체 페이지가 아닌 페이지 일부분만 업데이트 할 수 있음 - 서버로부터 데이터를 받고 작업 수행 JavaScript에서의 사용 1. XMLHttpRequest 객체를 이용 const request = new XMLHttpRequest(); 생성자로 XMLHttpRequest 객체를 생성 후, open() 과 send() 메서드를 사용해 요청. onreadystatechange 이벤트.. 공감수 1 댓글수 0 2022. 2. 14.
[JavaScript] 프로미스(Promise) 정리 프로미스(Promise)란? 자바스크립트에서 비동기 처리에 사용하는 클래스 객체. 비동기 작업의 완료 또는 실패를 나타내, 순차적인 실행이 필요할 때 복잡한 콜백 중첩없이 깔끔하게 코드를 작성할 수 있게 해준다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 프로미스의 상태(state) - 대기(pending): 이행도 거부도 하지 않은 초기 상태. new Promise() 생성자를 호출했을 때 대기 상태가 된다. - 이행(fulfilled): 처리 성공 후 완료된 상태. resolve()를 호출했을 때 이행상태가 된다. - 거부(rejected): 처리 실패된 상태. reject()를 호출했을 때 거부 상태가 된다. 프로미스 객체 생성 생성자를 통해 객체를 생성해서 사용한다. const p.. 공감수 1 댓글수 0 2022. 2. 13.
[JavaScript] 자바스크립트에서 정규표현식 사용하기 정규 표현식 정규 표현식(regular expression)은 문자열의 일정한 패턴을 표현하는 규칙이다. 짧게는 정규식이라고도 부른다. 자바스크립트에서는 RegExp 객체와 RegExp메서드, 문자열 메서드를 이용해 정규표현식을 사용할 수 있다. 정규식 만들기 두가지 방법이 있다. 1. 정규식 리터럴 사용 const reg = /ab+c/; 2. RegExp 객체의 생성자 함수 호출 const reg = new RegExp("ab+c"); 정규식 패턴 작성 시, 정해진 규칙에 따라 패턴을 작성한다. 정규 표현식 내용 정리 일반 문자(리터럴 문자) 문자 설명 유니코드 문자 문자 그 자체. (단, ^, $, \, ., *, +, ?, (, ), {, }, |는 정규 표현식 내에서 메타 문자로 사용되므로 제외.. 공감수 0 댓글수 0 2022. 2. 2.
[CSS 방법론] BEM CSS파일과 내용이 많을수록 신경써야하는 부분이 CSS의 구조와 작명 방식이다. 특별한 기준없이 멋대로 작성했다간 꼬인 우선순위를 보며 골치아프게 파일들을 왔다갔다 오가게 된다. 이런 이유로(협업 시 동일한 규칙을 사용하기 위함도 있다) 사람들이 CSS를 작성할 때 방법론을 사용하는데, 그중 하나가 BEM이다. CSS내에서만 통용되는 규칙은 아니고... 본래는 좀 더 넓은 의미로 사용되는 개념이다. 다만 여기서는 CSS에서 어떻게 사용되는지에 대해서만 얘기하도록 한다. BEM은 Block Element Modifier의 약자로, 약자 그대로 Block과 Element와 Modifier로 요소를 구분해 작명하는 방식이다. 다음과 같은 특징을 가진다. - class만 사용한다. - 클래스 이름을 지을 때, .. 공감수 0 댓글수 0 2022. 1. 30.
[JavaScript] 자바스크립트로 첨부 텍스트 파일 읽기 HTML에서 로 파일 첨부가 가능하다. 그렇다면 첨부한 파일을 웹상에서 읽어오려면 어떻게 해야할까? 먼저 에 대한 MDN 문서를 살펴보면 이렇게 나와있다. 요소의 HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다. 즉, FileList 객체를 제어해 첨부 파일에 접근할 수 있다. Filelist는 배열로 되어있으며, 요소명.files[번호] 의 형식으로 각각의 파일을 선택할 수 있다. 첨부 파일이 하나인 경우 요소명.files[0] 으로 가져오고, 여러개인 경우 사용하려는 파일의 번호를 선택해주면 되겠다. 이제 파일을 선택하는 방법은 .. 공감수 1 댓글수 0 2022. 1. 28.
카카오톡 오픈카톡(오픈채팅) 백업 txt파일 카카오톡처럼 보기 근래에 핸드폰을 바꾸게 되어서 일부 오픈카톡 내용들을 백업했다. 카카오톡 자체 백업기능에 오픈채팅방은 백업 대상에 포함되지 않지만, 각각의 톡방에서 대화 내용 내보내기를 통해 백업 텍스트 파일을 다운받을 수 있었다. 다만, 내용을 다시 확인하려고 보니 텍스트 파일로 되어있어서 읽기가 불편했다. 기존 카톡처럼 볼 방법은 없나 생각하던 차에, 생각해보니 단순한 뷰어라면 구현이 크게 어려워보이진 않아서 직접 카톡 백업파일용 뷰어를 만들기로 했다. 여기에서 뷰어를 이용할 수 있다. 사용방법 - 상단의 파일 선택 버튼으로 보려는 톡방의 백업 txt 파일을 첨부하면 된다. - 파일 이름을 따로 바꾸지 않았다면 KakaoTalk_20220101_1847_47_370_group.txt 와 같은 식의 이름일 것이다. -.. 공감수 0 댓글수 0 2022. 1. 27.

문의안내

티스토리
로그인
고객센터

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