본문 바로가기

전체 글

[JavaScript] 자바스크립트에서 Ajax 사용하기 Ajax란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)의 약자. 웹서버와 비동기로 통신해 웹페이지를 동적으로 갱신하는 프로그래밍 기법을 칭하는 말. 이름에 XML이 들어있지만 요즘은 XML보다 JSON을 주로 사용한다. 특징 - 페이지의 새로고침 없이 서버에 요청이 가능 - 따라서 전체 페이지가 아닌 페이지 일부분만 업데이트 할 수 있음 - 서버로부터 데이터를 받고 작업 수행 JavaScript에서의 사용 1. XMLHttpRequest 객체를 이용 const request = new XMLHttpRequest(); 생성자로 XMLHttpRequest 객체를 생성 후, open() 과 send() 메서드를 사용해 요청. onreadystatechange 이벤트.. 더보기
[JavaScript] 프로미스(Promise) 정리 프로미스(Promise)란? 자바스크립트에서 비동기 처리에 사용하는 클래스 객체. 비동기 작업의 완료 또는 실패를 나타내, 순차적인 실행이 필요할 때 복잡한 콜백 중첩없이 깔끔하게 코드를 작성할 수 있게 해준다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 프로미스의 상태(state) - 대기(pending): 이행도 거부도 하지 않은 초기 상태. new Promise() 생성자를 호출했을 때 대기 상태가 된다. - 이행(fulfilled): 처리 성공 후 완료된 상태. resolve()를 호출했을 때 이행상태가 된다. - 거부(rejected): 처리 실패된 상태. reject()를 호출했을 때 거부 상태가 된다. 프로미스 객체 생성 생성자를 통해 객체를 생성해서 사용한다. const p.. 더보기
[JavaScript] 자바스크립트에서 정규표현식 사용하기 정규 표현식 정규 표현식(regular expression)은 문자열의 일정한 패턴을 표현하는 규칙이다. 짧게는 정규식이라고도 부른다. 자바스크립트에서는 RegExp 객체와 RegExp메서드, 문자열 메서드를 이용해 정규표현식을 사용할 수 있다. 정규식 만들기 두가지 방법이 있다. 1. 정규식 리터럴 사용 const reg = /ab+c/; 2. RegExp 객체의 생성자 함수 호출 const reg = new RegExp("ab+c"); 정규식 패턴 작성 시, 정해진 규칙에 따라 패턴을 작성한다. 정규 표현식 내용 정리 일반 문자(리터럴 문자) 문자 설명 유니코드 문자 문자 그 자체. (단, ^, $, \, ., *, +, ?, (, ), {, }, |는 정규 표현식 내에서 메타 문자로 사용되므로 제외.. 더보기
[CSS 방법론] BEM CSS파일과 내용이 많을수록 신경써야하는 부분이 CSS의 구조와 작명 방식이다. 특별한 기준없이 멋대로 작성했다간 꼬인 우선순위를 보며 골치아프게 파일들을 왔다갔다 오가게 된다. 이런 이유로(협업 시 동일한 규칙을 사용하기 위함도 있다) 사람들이 CSS를 작성할 때 방법론을 사용하는데, 그중 하나가 BEM이다. CSS내에서만 통용되는 규칙은 아니고... 본래는 좀 더 넓은 의미로 사용되는 개념이다. 다만 여기서는 CSS에서 어떻게 사용되는지에 대해서만 얘기하도록 한다. BEM은 Block Element Modifier의 약자로, 약자 그대로 Block과 Element와 Modifier로 요소를 구분해 작명하는 방식이다. 다음과 같은 특징을 가진다. - class만 사용한다. - 클래스 이름을 지을 때, .. 더보기
[JavaScript] 자바스크립트로 첨부 텍스트 파일 읽기 HTML에서 로 파일 첨부가 가능하다. 그렇다면 첨부한 파일을 웹상에서 읽어오려면 어떻게 해야할까? 먼저 에 대한 MDN 문서를 살펴보면 이렇게 나와있다. 요소의 HTMLInputElement.files 속성은 선택한 파일(File) 목록을 FileList 객체로 반환합니다. FileList는 배열처럼 행동하므로, length 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다. 즉, FileList 객체를 제어해 첨부 파일에 접근할 수 있다. Filelist는 배열로 되어있으며, 요소명.files[번호] 의 형식으로 각각의 파일을 선택할 수 있다. 첨부 파일이 하나인 경우 요소명.files[0] 으로 가져오고, 여러개인 경우 사용하려는 파일의 번호를 선택해주면 되겠다. 이제 파일을 선택하는 방법은 .. 더보기
카카오톡 오픈카톡(오픈채팅) 백업 txt파일 카카오톡처럼 보기 근래에 핸드폰을 바꾸게 되어서 일부 오픈카톡 내용들을 백업했다. 카카오톡 자체 백업기능에 오픈채팅방은 백업 대상에 포함되지 않지만, 각각의 톡방에서 대화 내용 내보내기를 통해 백업 텍스트 파일을 다운받을 수 있었다. 다만, 내용을 다시 확인하려고 보니 텍스트 파일로 되어있어서 읽기가 불편했다. 기존 카톡처럼 볼 방법은 없나 생각하던 차에, 생각해보니 단순한 뷰어라면 구현이 크게 어려워보이진 않아서 직접 카톡 백업파일용 뷰어를 만들기로 했다. 여기에서 뷰어를 이용할 수 있다. 사용방법 - 상단의 파일 선택 버튼으로 보려는 톡방의 백업 txt 파일을 첨부하면 된다. - 파일 이름을 따로 바꾸지 않았다면 KakaoTalk_20220101_1847_47_370_group.txt 와 같은 식의 이름일 것이다. -.. 더보기
[JavaScript] 자바스크립트에서 한글 조사(-이/-가, -을/-를, -은/-는, -와/-과) 구분하기 코딩 중 앞에 오는 단어에 맞는 조사(-이/-가, -을/-를 등)를 텍스트로 나타내는 작업이 필요해서 알아보다가 공부한 내용을 정리해서 포스팅해본다. 코드 구현에 앞서 먼저 조사들이 어떤 기준으로 구분되는 지를 알아보자. 📖 구분 기준 직관적으로 쉽게 구분이 가능한데, 앞 음절에 받침이 있으면 '-이/-을/-은/-과', 받침이 없고 모음으로 끝나면 '-가/-를/-는/-와'가 된다. 예1) 귤이 맛있다. / 귤은 맛있다. 예2) 사과가 맛있다. / 사과는 맛있다. 📖 자바스크립트에서의 한글 자바스크립트에서 한글을 구분하는 방법 중에서, 여기서는 유니코드를 통한 구분법을 사용한다. 한글에 해당하는 유니코드표를 확인해보면 다음과 같다. 가 각 갂 갃 간 갅 갆 갇 갈 갉 갊 갋 갌 갍 갎 갏 감 갑 값 갓 갔.. 더보기
[Sass/SCSS] SaSS와 SCSS의 개념과 차이, 기본적인 사용 얼마 전에 블로그 포스팅 스터디에 참가했다. 무엇을 포스팅해볼까 고민하다가, 일전에 파일 수가 많은 프로젝트를 하면서 다수의 CSS파일 관리에 애먹었던 일이 생각이 나 이번 기회에 SCSS를 공부하기로 했다. 개념자체를 애매하게 알고 있었기도 하지만, 얼핏 Sass와 SCSS중에 후자를 더 많이 쓴다고 들었던 것 같아서 SCSS를 먼저 찾아보기로 했다. 그런데 검색해보니, SCSS는 마땅한 공식 사이트 같은게 안보이고 Sass만 검색결과에 나왔다. 왜 그런가 하고 봤더니... 📖 Sass, SCSS? 알고보니 Sass가 Sass와 SCSS 둘 모두를 통칭하는 말이였다. 기본적으로 둘 다 CSS의 확장 언어로, 일부 차이가 있으나 문법이 거의 비슷하다. - Sass: Syntactically Awesome.. 더보기

티스토리툴바