티스토리

안시스터즈

검색하기

블로그 홈

안시스터즈

ahnsisters.tistory.com/m

'개발자' 첫째와 'UIUX디자이너' 둘째 이야기

구독자: 17

방명록 방문하기

주요 글 목록

[React] React란 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ React란? 리액트(React, React.js, ReactJS)는 페이스북에서 제공해주는 자바스크립트 라이브러리의 하나로서 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용된다. 💡 라이브러리와 프레임워크의 차이점 👉🏻 공통점: 프로그램을 쉽게 만들 수 있게 하는 공통적인 목적존재 👉🏻 차이점: 코드 흐름의 제어권 라이브러리 프레임워크 흐름 내가 만든 코드를 내가 컨트롤 할 수 있음 누군가가 만들어 놓은 규칙에 따라 만들어야함 코드 활용 가능한 특정 기능에 대한 코드 일정한 형태의 틀을 가지고 있어 틀에 맞추어 코드 설계 및 구현 언어.. 공감수 0 댓글수 0 2022. 10. 12.
[Bootstrap] 부트스트랩이란? 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 오늘은 부트스트랩이라는 프론트엔트 프레임워크에 대해 소개해보려고해요 ! 한 번 익히고 나면 정말 유용하게 사용할 수 있으니 이 글을 통해 부트스트랩의 매력에 빠져보셨으면 좋겠습니다. 부트스트랩(Bootstrap)이란? 부트스트랩은 웹사이트를 쉽게 만들수 있도록 도와주는 HTML, CSS, JS 프레임워크 인데요. 반응형 페이지도 부트스트랩을 사용한다면 손쉽게 작동시킬 수 있습니다. 다만, 부트스트랩을 제대로 사용하기 위해선 HTML과 CSS의 개념을 알고 있을 때 빛을 발휘하는데요. 충분한 개념 숙지와 부트스트랩 사용 능력이 결합된다면 일부를 보완하여 나만의 CSS 라이브러리도 충분히 구축.. 공감수 0 댓글수 0 2022. 9. 6.
[javascript] 딥링크 (Deeplink) 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 모바일 웹에서 서핑을 하다보면 아래와 같이 앱으로 보기, 앱 열기, 앱 이용하기 등등 앱으로 연결하기 위한 버튼을 보신 경우가 많을텐데요 ! 레이어 팝업이나 배너, 이벤트 페이지 등등 많은 곳에서 앱을 홍보하기 위해 사용합니다. 딥링크 (Deeplink) 딥링크란 모바일 환경의 웹 또는 다른 앱에서 URL을 클릭했을 때 앱을 실행시키고 특정 페이지로 이동하도록 하는 기능이다. 웹에서 딥링크를 클릭 했을 때 앱이 설치되어 있는 경우 앱을 바로 실행시키거나 웹에서 딥링크를 클릭 했을 때 앱이 설치되어 있지 않은 경우 플레이스토어 혹은 앱스토어의 앱 상세페이지로 연결하기위해 사용한다. 딥링크의 .. 공감수 0 댓글수 0 2022. 7. 1.
[jQuery] checkbox 제어하기 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ Checkbox 1. checked 여부 확인 $('input[id=checkId01]').is(':checked'); checkbox에 check가 되어있다면 true, 아니면 false로 리턴 된다. 2. checked 개수 $('input[name=checkName]:checked').length; check된 checkbox의 개수를 리턴한다. 3. checkbox 변경 감지 $('input[name=checkName]').on('change', function() { /* 실행문 */ }); $('input[name=checkName]').on('click', function ().. 공감수 1 댓글수 0 2022. 6. 27.
[javascript] Map 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ Map 객체 ES6에서 값들을 매핑하기 위한 새로 등장한 자료구조이다. Map 객체의 장점 ① key 값의 다양성 객체에서는 문자열(String) 혹은 심볼(Symbol)만 프로퍼티의 키로 사용할 수 있었는데, 맵 객체에서는 함수나 객체를 포함한 모든 자료형이 프로퍼티의 키로 쓰일 수 있다. ※ Object와 Map 비교 Object를 사용하는 경우 - 데이터를 저장하기 위한 간단한 구조이며, Key가 String이거나 Integer인 경우 → Map을 생성하는 것보다 적은 시간이 걸림 - 각각의 property 또는 element가 별도의 로직이 적용되어야 하는 경우 - JSON으로 또는.. 공감수 0 댓글수 0 2022. 6. 21.
[javascript] ES6 Module_export, export default 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 모듈(module) 모듈이란 여러 기능을에 관한 코드가 모여있는 하나의 파일 이다. 모듈의 장점 - 유지보수성: 기능들이 모듈화가 잘 되어있다면 기능을 개선한다거나 수정할 때 편리하다. - 네임스페이스화: 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 네임스페이스가 겹치는 문제를 해결할 수 있다. - 재사용성: 모듈을 분리시킴으로써 똑같은 코드를 반복하지않고 필요할 때마다 사용할 수 있다. 모듈에 지시자 export와 import를 적용하면 다른 모듈을 불러와 기능 공유를 할 수 있다. - export 지시자: export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 .. 공감수 0 댓글수 0 2022. 6. 21.
[javascript] 반복문 (for, for in, for of) 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 프로그래밍을 배우면 가장 먼저 하는 반복문 ! (for 또는 while 사용해서 *로 트리만들기.......) 기초적인 문법이죠 이번 포스팅에서는 javascript 에서의 for문 사용방법에 대해 알아볼게요 반복문 반복문이란 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 하는 실행문이다. 게시판과 같이 반복적인 형태를 띄는 경우가 대다수이기 때문에 많이 사용되는 실행문 중 하나 이다. for문 for 반복문은 조건문에 만족할 때까지 실행된다. 문법:: ① 초기문: 초기화 구문이 존재하면 초기문이 실행된다. ② 조건문: 조건을 검사합니다. 만약 조건문에 만족하면 반복문이 실행되고, 조건문.. 공감수 0 댓글수 0 2022. 6. 16.
[javascript] 배열(Array) 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 배열(Array) 이란? 배열은 이름과 인덱스로 참조되는 정렬된 값의 집합이다. 배열을 구성하는 각각의 값을 element, 배열에서의 위치를 가르키는 숫자를 index라고 한다. 이 때, index는 문자열을 사용할 수 없으며 정수만을 허용한다. 배열 생성 배열을 만드는 방법은 크게 2가지가 있다. 1. 배열 리터럴 [] 사용 형식) let 배열명 = [배열요소1, 배열요소2, 배열요소3]; // 방법 1) 초기값을 할당하여 배열 생성 let arr1 = ['first', 'second', 'third']; console.log(arr1); // 방법 2) 빈 배열 생성 후 배열값 입력 .. 공감수 0 댓글수 0 2022. 6. 13.
[javascript] 차주 날짜 계산하기 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 날짜를 알고싶을 때, 이번주 O요일 말고도 다음주 O요일에 해당하는 날짜를 구하는 경우가 종종 있어요. 이번주 요일에 해당하는 날짜를 구하는 방법은 쉽게 찾아볼 수 있는데, 차주 요일에 해당하는 날짜를 구하는 방법은 찾아보기 힘들어 간단하게 정리해볼게요 ! 차주 날짜 계산하는 방법 1) 기준이 되는 날짜 선언하기 let thisDate = new Date(); // Mon May 23 2022 14:54:29 GMT+0900 (한국 표준시) 새로운 날짜 객체를 선언하여 현재 날짜와 시간 정보를 thisDate 변수에 저장합한다. 오늘 날짜가 아닌 다른 특정날짜를 기준으로 하여 계산하고자 .. 공감수 0 댓글수 0 2022. 5. 23.
[jQuery] AutoComplete 자동 완성 기능 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ 어느 포털사이트에서나 볼 수 있는 자동완성 기능 ! 정확한 워딩을 알고있지 않아도 자동으로 남은 검색어를 완성 해주어 편리하죠 DB에 저장된 데이터를 json 형태로 불러와서 사용하려고 하니 자동완성이 제대로 동작하지 않아 고생 좀 했어요 ㅠㅠ AutoComplete 입력 필드에 텍스트를 입력하면 자동으로 검색어를 완성해주는 기능인 autocomplete를 jQuery UI에서 제공해주고 있다. 구현 방법 1) 외부 스크립트, 스타일 참조 • CDN 서버에서 스크립트 불러오기 • 파일을 다운받아 사용하기 * jQuery 스크립트 파일 버전은 ① 풀 버전(개발자용) ② 압축 버전(사용자용) .. 공감수 0 댓글수 0 2022. 3. 24.
[javascript] JSON 활용방법 개인적으로 공부하면서 기록하는 공간으로 잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-) ▪ ▪ ▪ ▪ ▪ JSON (JavaScript Object Notation) JSON은 Javascript 객체 문법으로 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준이다. JSON은 통신방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법이다. JSON 특징 • 서버와 클라이언트 간의 교류에서 많이 사용된다. • JSON 문서 형식은 자바스크립트 객체의 표기법을 따른다. • 프로그래밍 언어와 운영체제에 독립적이다. JSON 문법 1) 리터럴 (literal) : 해석되는 값 그 자체를 의미한다. 2) 객체 (object) : 이름(name)과 값(v.. 공감수 0 댓글수 0 2022. 3. 21.

문의안내

티스토리
로그인
고객센터

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