키자드에 등록된 anerim의 티스토리 포스트 목록

anerim의 등록된 링크

anerim로 등록된 티스토리 포스트 수는 134건입니다.

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Button Group [내부링크]

c 잠깐만! 이 글을 보기 전에, reactstrap 설치는 했나요? 아니라면 해당 링크를 눌러 reactstrap을 설치하기 [리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유 reactstrap이..

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Button Dropdown [내부링크]

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Breadcrumbs [내부링크]

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Badge [내부링크]

[리액트 React] 실무에서 유용하게 사용되는 reactstrap Alerts [내부링크]

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유 / reactstrap 종류 [내부링크]

reactstrap이란? bootstrap을 react에서 사용할 수 있도록 패키지로 만든 것. reactstrap 사용법 1. cmd창에 명령어 차례 대로 입력하기 npm install --save reactstrap npm install --save bootstarp // reacts..

[리액트 React] map() / map() 으로 element 반환하기 [내부링크]

1. App.js 작성하기 import React from 'react'; import './App.css'; import Map from './Map'; function App() { return( ) } export default App; 2-1. Class형 컴포넌트로 Map.js 작성하기 import React, { Co..

[리액트 React] hook 사용 / useState() / useEffet() 사용하기 [내부링크]

Hook은 함수형 컴포넌트에서만 사용! 1. App.js 작성하기 import React from 'react'; import './App.css'; import Hook from './Hook'; function App() { return( ) } export default App; 2. Hook.js 작성하기 u..

[제이쿼리 jQuery] 새로고침 하는 법 [내부링크]

$('#myContent').click(function() { location.reload(); });

[제이쿼리 jQeury] 엔터키로 로그인 / 엔터키 이벤트 / Enter키 함수 [내부링크]

작업 전 미리 체크! e.keyCode == '13' '13'은 javascript Keycode(ACSII Code)에서 엔터키를 의미한다. 어차피 다 외우진 못하니 필요한 것만 그때 그때 찾아서 사용하면 될 것 같다. 1. html 작성하기 아이디..

[리액트 React] 클래스형 컴포넌트 종류 / Component / PureComponent / 클래스형 컴포넌트 종류 비교하기 [내부링크]

클래스형 컴포넌트에는 2가지 종류가 있다. 1) Component 2) PureComponent 이 둘의 공통점은 props와 state의 변경에 따라 render() 함수를 호출하는 것이다. 이 둘의 차이점은 render()함수를 호출할 때 변경에..

[리액트 React] 클래스형 컴포넌트에서 state 직접 변경하는 법 / forceUpdate() [내부링크]

이전 게시물에서 클래스형 컴포넌트에서 setState로 직접적으로 state를 변경했을 때 아무 변화가 없는 것을 확인했다. [리액트 React] setState() 사용법 / useState 사용법 / state 독학 / 클래스형컴포넌트 set..

[리액트 React] setState() 사용법 / useState 사용법 / state 독학 / 클래스형컴포넌트 setState / 함수형컴포넌트setState / () => 사용으로 리렌더링 방지 [내부링크]

setState()를 사용하는 이유 this.state.변수명 = value와 같이 직접적으로 state를 건드려서 변경하게 되면 render() 함수를 호출하지 않는다. 즉, 화면에는 바뀌기 전의 state값만 보여지게 된다. setState() 함..

[리액트 React] state / state 사용법 / 클래스형 컴포넌트 state / 함수형 컴포넌트 state [내부링크]

state에 대한 내용은 이전에도 작성했었습니다. 제가 이렇게 또 state에 관련된 글을 작성하는 이유는 완전히 state를 제 것으로 만들기 위함입니다. [리액트 React] state / setSate / 참조형 state / 스테이트 S..

[리액트 React] props node / props의 자식 컴포넌트에 node 전달 / 컴포넌트 node 전달하기 [내부링크]

node html 문서를 구성하는 포괄적인 개념. 태그 요소, 속성, 텍스트, 주석 등. 예) apple : 태그 요소 id : 속성 apple : 텍스트 App.js 작성하기 props를 하위 컴포넌트 태그 안쪽에 선언하는 방법 말고도, 하위..

[리액트 React] 기본값으로 props 사용하기 / props 기본값 / defaultProps / 클래스형 컴포넌트 defaultProps / 함수형 컴포넌트 defaultProps [내부링크]

defaultProps 부모 컴포넌트에서 값이 넘어 오지 않았을 때 사용한다. 1. App.js 작성하기 import React from 'react'; import './App.css' import UsePropsDefault from './UsePropsDefault'; function App() { r..

[리액트 React] 필수값으로 props 사용하기 / 클래스형컴포넌트 props 필수값 / 함수형컴포넌트 props 필수값 / props 독학 뚝딱! [내부링크]

1. App.js 작성하기 import React from 'react'; import './App.css' import PropsRequired from './UsePropsRequired'; function App() { return( ) } export default App; 2-1. 클래스형 컴포넌트 UsePropsRequi..

[리액트 React] props 객체형 사용 / props 객체형 따라하기 / props object / 함수형 컴포넌트 props 객체형 / 클래스형 컴포넌트 props 객체형 [내부링크]

1. App.js 작성하기 import React from 'react'; import './App.css' import PropsObjVal from './UsePropsObj'; function App() { return( ) } export default App; c 잠깐만, 아래에 보여질 컴포넌트 내용을..

[리액트 React] props Boolean 사용 / props 값을 Boolean형으로 하위 컴포넌트에 전달하기 / 함수형 컴포넌트 props Boolean 사용하기 / 클래스형 컴포넌트 props Boolean 사용하기 [내부링크]

1. App.js 작성하기 props 변수를 선언한 후에 값을 할당하지 않으면 'true'가 기본 값이다. import React from 'react'; import './App.css' import PropsBoolean from './BooleanValue'; function App() { retur..

[리액트 React] props 자료형 선언하는 법 / props 자료형 쉽게 따라하기 / 함수형 컴포넌트에서 props 자료형 사용하기 / 클래스형 컴포넌트에서 props 자료형 사용하기 / prop-types [내부링크]

props 자료형은 왜 선언할까? 단순하게 '정확성' 때문이다. 자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교한다. 만약 자식 컴포넌트의 prop..

[리액트 React] props 사용하기 / 클래스형 컴포넌트 props / 함수형 컴포넌트 props [내부링크]

이전에 작성했던 글과 겹치는 부분이 좀 있을 거예요. 그럼에도 이렇게 또 props에 관한 글을 적는 이유는 그만큼 props를 완전히 이해하고 온전한 제 것으로 만들기 위함입니다. 이 글을 보시게 되는 분들도 저와..

[리액트 React] 리액트에서 제이쿼리 사용하기 / jquery in react [내부링크]

리액트를 공부하려고 책을 사서 보는데 클래스형 컴포넌트로만 작성되어 있더라고요. 그래서 제가 함수형컴포넌트를 사용해서 새롭게 작성해보려고 합니다. 즉, 여기에 있는 내용이 제 머릿속에서 나온 것이기 때..

[리액트 React] 리액트 줄바꿈(개행)하기! 뚝딱~! [내부링크]

1. CSS에 해당 내용 추가 .display-enter { white-space: pre-line; } 2.. JS & JSX 작성 (className 보이시죠?) // 생략 const introEx = { 0: `직원의 출퇴근 시간 기록을 실시간 알림으로 받을 수 있고\n 과거..

[리액트 React] 바벨 Babel / 트랜스파일링 Transpiling / 번들링 Bundling [내부링크]

바벨 Babel (트랜스파일러) JSX는 자바스크립트로 변환되어야 웹에서 정상적으로 작동한다. babeljs.io 의 바벨이라는 프로그램을 통해 변환된다. JSX를 JS로 변환해주는 프로그램 중에서 가장 대표적인 프로그램...

[리액트 React] 빌드하기 / react 명령어 복습 / 배포하기 / 커스텀 도메인 등록 [내부링크]

배포 : 다른 사람이 내 코드를 사용할 수 있게 하는 것을 말함 => 웹서버에 배포한다. 빌드 : 브라우저가 해석할 수 있고 웹 서버가 사용하기 좋도록 만드는 것. JSX 코드는 웹브라우저가 그대로 해석하지 못해서..

[리액트 / React] 스타일 적용 / 인라인 스타일 / CSS 클래스네임 / classnaems 라이브러리 [내부링크]

인라인 스타일 리액트는 html과 달리 객체로 스타일 속성 값을 지정해주어야 한다. css에서 -가 들어가는 것은 카멜케이스로 작성해야 한다. 인라인에 들어가는 내용이 많으면 아래 코드처럼 작성하자. const styl..

[리액트 react] 컴포넌트의 속성을 지정하는 법 / Props [내부링크]

Props JSX 문법에서 컴포넌트를 작성할 때 속성을 지정한 것. Properties의 약자 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달된다. 컴포넌트..

[리액트 react] 리액트 앨리먼트 / 컴포넌트 [내부링크]

리액트 엘리먼트 import ReactDOM from 'react-dom'; ReactDOM.render( 뚝딱이가 리액트 한다 , document.getElementById('root')); 위 코드를 아래 처럼 바꿀 수 있다. import ReactDOM from 'react-dom'; const..

[자바스크립트 js] dataTable 오류 / Cannot reinitialise DataTable [내부링크]

A를 눌렀을 때 A의 dataTable이 담긴 모달을, B를 눌렀을 때 B의 dataTable이 담긴 모달을 열려고 할 때 A를 열고 닫은 후에 B를 열면 아래처럼 'Cannot reinitialise DataTable'라는 안내문구가 뜰 때가 있다. Da..

[자바스크립트 js] dataTable data to string / 말줄임 방법 [내부링크]

[리액트 react] JSX / Fragment 프래그먼트 / JSX에서 자바스크립트 사용법 [내부링크]

JSX 자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트의 확장된 문법. html 태그와 속성의 사용법이 거의 같다. JSX에서 'class' 대신에 'className'를 사용해야 한다. : 자바스크립트에서는 객체지향의 개..

[error 해결] npm does not support Node.js v14.17.4 [내부링크]

해결 방법 1. C:\Users\minkyu\AppData\Roaming 디렉토리 안에 npm, npm-cahe 디렉토리 삭제 2. npm cache clean --force로 캐시 삭제 3. npm install 4. npm init react-app . 재입력

[리액트 react] 리액트 개발자 도구 [내부링크]

리액트 개발자 도구 크롬 확장 프로그램 중 하나. 리액트 개발에 유용하게 쓰인다. 리액트 개발자 도구 설치 'react developer tools'를 검색하면. React Developer Tools - Chrome 웹스토어가 나오는데 해당 링크..

[리액트 react] 리액트 프로젝트 만들기 [내부링크]

1. 바탕화면에 새로운 폴더를 만든다. 2. VSCODE에서 생성한 폴더를 연다. 3. 터미널 열기 (Cntl + `) (1) npm init react-app . 입력 후 엔터 마침표는 현재 디렉토리에서 프로젝트를 만들겠다는 뜻. (2) 'create..

[리액트 react] 개발 환경 세팅 Mac / Windows [내부링크]

1. nodejs.org 접속해서 nodejs 설치 nodejs : 자바스크립트는 브라우저 내에서만 실행 가능한 언어인데, nodejs가 브라우저 밖에서도 자바스크립트가 실행할 수 있게 만들어준다. 다운로드 버튼을 눌러 진행하기..

[자바스크립트 / js ] dataTable Modal Reset / 데이터테이블 모달 초기화 [내부링크]

$("#preVideo").on("shown.bs.modal", function () { $('#tblList3>tbody').empty(); }); $("#preVideo").on("hidden.bs.modal", function () { $('#tblList3>tbody').empty(); });

[자바스크립트 / js ] 부트스트랩 모달 내용 초기화 / 모달 인풋 초기화 / 모달 셀렉트 초기화 / Bootstrap Modal Reset [내부링크]

모달 초기화 부트스트랩으로 작업 시 사용하면 된다. 모달 종료 후에 다시 모달을 열었을 때, 데이터가 남아 있을 때 사용하면 된다. 아래 코드를 공통적으로 사용하는 js 파일에 입력해주기. // ______________모..

[자바스크립트 / JS] ajax 기다리는 동안 로딩화면 / ajax loading [내부링크]

ajax 데이터 로딩 기다리는 동안 로딩화면 띄우기 공통적으로 사용하는 js에 아래 코드 입력. // ______________ AJAX 데이터 기다리는 동안 LOADING $(document).ajaxStart(function(){ console.log('ajax-start-..

[자바스크립트 / js ] alert 중복 실행 시 해결 방법 / ajax 중복 실행 시 해결 방법 [내부링크]

alert 중복 실행 시 해결 방법 .off() 사용하기 $("#saveOrder").off('click').click(function(){ if (data.responseJSON.data.length === 0) { alert('순서 저장할 영상이 없습니다. 영상을 등록해 주세요.') } e..

[자바스크립트 js / 프로젝트7 ] 리스트 만들기 / localStorage [내부링크]

html <!DOCTYPE html> 리스트 알림 리스트 추가하기 등록 알림 등록된 내용 전체 삭제 css *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: grid; grid-template-columns: 80%; justify-con..

[자바스크립트 js / 프로젝트6 ] modal / 모달 / 모달 슬라이드 / 모서리에서 아이콘 보여지기 [내부링크]

html <!DOCTYPE html> Starter Template css @import url("https://fonts.googleapis.com/css?family=Kaushan+Script"); :root { --mainPink: #ef7998; --mainYellow: rgb(249, 228, 148); --mainWhite: #fff; --..

[error 해결] Cannot read property 'slice' of null [내부링크]

null일 경우 상황도 만들어줘라

[자바스크립트 js / 프로젝트 7] to do list 만들기 [내부링크]

html <!DOCTYPE html> Grocery Item write value for item to do list add item clear items js const form = document.querySelector('#itemForm'); const itemInput = document.querySelector('#itemInput'); c..

[자바스크립트 js / 프로젝트 6] 계산기 만들기 / eval() [내부링크]

html <!DOCTYPE html> Recording * / - + . 9 8 7 6 5 4 3 2 1 0 = C js (function(){ let screen = document.querySelector('.screen'); let buttons = document.querySelectorAll('.btn'); let clear = documen..

[css] 스크롤 시 위치에 맞게 이미지 보여지는 부분 변화 [내부링크]

.max-height { min-height: calc(100vh - 76px); background: linear-gradient(var(--yellowTrans), var(--yellowTrans)), url("../img/headerBcg.png") center/cover fixed no-repeat; position: relative; } fix..

[css] :root 사용 예시 [내부링크]

:root { --mainPink: #ef7998; --mainYellow: rgb(249, 228, 148); --mainWhite: #fff; --mainBlack: #000; --yellowTrans: rgba(249, 228, 148, 0.5); --mainGrey: rgb(238, 238, 238); } body { font-family: "N..

[자바스크립트js / 프로젝트5] 이미지 스크롤 / hover 시 dom 이동 / 필터 기능 / dataset / toLowerCase() / trim() [내부링크]

[welcome to Tooktak's 부분] 스크롤에 따라 이미지가 보여지는 부분이 바뀐다. [about Took 부분] 이미지에 마우스 hover 시 노란 테두리 박스가 이미지에 겹쳐진다. [our Store 부분] 각 버튼을 누르면 해당 내..

[자바스크립트 js / 실무 기록] 서브페이지 안의 서브페이지 메뉴 활성화 [내부링크]

var current = location.pathname.split("/").slice(-1)[0].replace(/^\/|\/$/g, ''); // 서브페이지 안의 서브페이지 활성화 if (current.includes('csa_5')) { element.parents('.main-sidebar .csa').addClass(..

[자바스크립트 js / 실무 기록] 부트스트랩 popover 응용 / popover 이미지 추가 / popover html 내용 보여지기 / popover 줄바꿈 [내부링크]

html data-content 주목 1. 'CSV 양식 다운로드'를 클릭해 주세요. 2. 상단의 이미지를 참고하여 관리자페이지에서 제공하는 CSV 파일을 다운 받습니다. 3. 다운 받은 CSV 파일을 열어, 양식에 맞게 내용을 작성한..

[자바스크립트 js / 실무 기록] 셀렉트 옵션을 버튼으로 '이전', '다음', '현재' 컨트롤 하기 [내부링크]

html 현재 차수 js // 이전 차수 $('#prevDe').on('click', function () { console.log('이전'); changeDegreeBox('prev'); }) // 다음 차수 $('#nextDe').on('click', function () { console.log('다음'); change..

[자바스크립트 js / 실무 기록] ajax DataTable 사용 시 success는 complete로 사용하기 (부트스트랩) / 특정 객체 제외하고 리턴하기 / 배열 인덱스 번호 매기기 [내부링크]

table = $('#ownerlist').DataTable({ ajax: { url: "API 주소=" + recentDegree, type: "GET", dataType: "JSON", complete: function (data) { info = data['responseJSON'] console.log('데이터 확인', info);..

[자바스크립트 js / 실무 기록] 셀렉트 박스 현재 년도 자동 선택 / 셀렉트 박스 년도 옵션 [내부링크]

html js let dt = new Date(); let com_year = dt.getFullYear(); // 현재 년도 자동 선택 $("#yearSel").append(" " + com_year + "년 "); // 올해 기준으로 -5년부터 +5년을 보여준다. for (var y = (com_year -..

[자바스크립트 js / 프로젝트4] 리뷰 별 아이콘 / 리뷰 슬라이드 / forEach 실습 / 이미지 교체 / 텍스트 교체 [내부링크]

prev, next 버튼을 누르면 그에 따라 이미지, 텍스트가 교체된다. html <!DOCTYPE html> 슬라이드를 통한 이미지 및 텍스트 교체 design & dev TOOKTAK 개자이너 뚝딱 Lorem ipsum dolor sit amet consectetur ad..

[자바스크립트 js / 프로젝트3] 이미지 슬라이더 / forEach() / classList.contains() [내부링크]

ForEach() 배열에 활용이 가능한 메소드. 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메소드. map() 메서드와 거의 비슷하지만 차이점은 따로 return 하는 값이 없다는 점이다. classList.contains..

[자바스크립트 js / 프로젝트2] input에 입력된 내용 보여주기 / 메시지 전달 [내부링크]

두 번째 프로젝트 시-작 ! html 메모를 남겨주세요. 메모가 비었습니다. 메모를 입력해 주세요. 전달된 메모 뚝딱 할 수 있다! js (function(){ const form = document.querySelector('#message-form'); for..

[자바스크립트 js / 프로젝트1] 버튼 클릭할 때마다 배경색 바꾸기 / parseInt() / Math.random() / style변경 [내부링크]

parseInt() 문자열 인자를 구문분석하여 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환한다. Math.random() 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난..

[자바스크립트 js] async / await / try catch문 / finally문 / 비동기 실행 [내부링크]

async / await promisechaining을 개발자가 더 편하게 작성할 수 있도록 하고, 코드의 가독성을 높이기 위한 구문 . promise 객체를 사용할 때 then 메소드 등을 사용하지 않고도 마치 동기 실행 코드처럼 코드를..

[자바스크립트 js] axios [내부링크]

axios fetch 함수 말고 Ajax를 통신할 수 있는 방법 axios 객체에서 request를 보내는 많은 메소드들이 fetch 함수처럼 promise 객체를 리턴한다. 사용법은 fetch 함수와 비슷하다 axios .get('https://tooktak.co..

[자바스크립트 js] promise 객체 종류 [내부링크]

all 메소드 여러 promise 객체의 작업 성공 결과를 기다렸다가 모두 한번에 취합하기 위해서 사용한다. 만약 하나의 promise 객체라도 rejected 상태가 되면, 전체 작업이 실패한 것으로 간주할 때 사용한다. =>..

[자바스크립트 js] rejected 상태일 때 콜백 추가 / catch 메소드 / finally 메소드 [내부링크]

promise 객체가 rejected 상태일 때 콜백 추가하기 promise객체가 rejected 상태됐을 때 실행할 콜백을 설정하고 싶다면, then메소드의 2번째 파라미터로 원하는 콜백을 넣어주면 된다. fetch('https://tooktak.co..

[자바스크립트 js] fetch / Promise 객체 / then 메소드 / Promise Chaining / 비동기 함수 [내부링크]

fetch 콜백을 파라미터로 전달 받지 않고, fetch함수가 리턴하는 어떤 객체의 then 메소드를 통해 콜백을 등록한다. fetch 함수는 Promise 객체를 리턴한다. (Promise 객체는 비동기 실행을 지원하는 문법) 서버에..

[자바스크립트 js] setTimeout / setInterval / addEventListner / 비동기 함수 [내부링크]

setTimeout 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수. 설정한 밀리세컨즈만큼의 시간이 경과했을 때 콜백이 실행된다. 1000 밀리세컨즈 = 1초 setTimeout(콜백, 시간) 아래 코드에서 2..

[자바스크립트 js] Content-type [내부링크]

Content-Type 헤더 주 타입(main type) / 서브 타입(sub type)의 형식으로 나타난다. 리스퀘스트와 리스폰스의 body 데이터를 직접 확인해서 그 타입을 추론하지 않기 위해 필요하다. 주 타입이 text인 경우(텍스..

[자바스크립트 js] Status Code 상태 코드 [내부링크]

Status Code 상태 코드 request 를 받은 서버가 작업 결과를 나타내기 위해서 response header 에 넣는 숫자. 100번대 서버가 클라이언트에게 정보성 응답(Informaitional response)을 줄 때 사용되는 상태 코드...

[자바스크립트 js] 요청 Request의 메소드 종류 / 조회 GET / 추가 POST / 수정 PUT / 삭제 DELETE / Request Head / Request Body [내부링크]

Request 메소드 종류 조회 GET : 기존 데이터를 조회한다. 추가 POST : 새 데이터를 추가한다. 수정 PUT : 기존 데이터를 수정한다. 삭제 DELETE : 기존 데이터를 삭제한다. Head / Body 하나의 Request 안에는 He..

[자바스크립트 js] JSON / parse메소드 / stringify메소드 [내부링크]

JSON JavaScript Object Notation의 약자. 어떤 정보를 교환할 때 사용하기 위해 만들어진 데이터 포맷. 자바스크립트의 언어로 만들어진 데이터 포맷. 그래서 자바스크립트 객체 표기법과 거의 비슷하다. 어떤 언..

[자바스크립트 js] URL / URL 구성 / 스킴 / 호스트 / 경로 / 쿼리 [내부링크]

URL Uniform Resource Locator의 약자 (규격화된 리소스 검색자) 웹에 존재하는 특정 데이터를 나타내는 문자열 URL 구성 내용 https://www.tooktak.com/women/shirts?color=yellow&size=m 스킴(Scheme) 프로토콜..

[자바스크립트 js] Fetch / request / response / 콜백 [내부링크]

관련 용어 먼저 알고 가자 request : 웹브라우저가 서버에 요청 response : 서버가 보내주는 응답 콜백 : 어떤 조건이 만족 되었을 때 실행되는 함수 fetch 서버로 requset 를 보내고 response 를 받는 함수 promi..

[자바스크립트 js] static 프로퍼티 / static 메소드 [내부링크]

static 프로퍼티 / static 메소드 클래스에 직접적으로 딸려 있는 프로퍼티와 메소드. 클래스로 객체를 만들었을 때 그 객체에서 활용할 프로퍼티나 메소드가 아니라 클래스 자체만으로 접근해서 사용하고 싶을 때..

[자바스크립트 js] 객체 지향 프로그래밍 4가지 개념 / 추상화 / 캡슐화 / 상속 / 다형성 / super / instanceof [내부링크]

1. 추상화 (Abstraction) 우리가 객체를 만드는 과정은 현실 또는 가상의 존재를 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정. class를 설계하는 것도 추상화에 해당한다 [ user class를 만들 때..

[자바스크립트 js] 객체 만들기 / Object-Literal / Factory function / Constructor fuction [내부링크]

Object-Literal 중괄호를 쓰고 프로퍼티와 메소드를 나열하는 것. 객체를 나타내는 문자열. * 노란색 끼리는 같은 내용 const tooktak = { name: '뚝딱', birthdate: '1992-09-23', buy(item) { ..

[자바스크립트 js] 객체 지향 프로그래밍이란 [내부링크]

객체 지향 프로그래밍 '객체'간의 상호작용을 중심으로 하는 프로그래밍. 프로퍼티와 메소드로 이루어진 각 객체들의 상호작용을 중심으로 코드를 작성하는 것. 객체 지향 프로그래밍 4가지 기둥 : 추상화, 캡슐화..

[자바스크립트 js] 모듈 복습 및 활용 / 직전 게시물 정리 [내부링크]

1. 선언문 export export const title = 'Module'; 2. 선언된 변수나 함수를 코드 블록으로 묶어서 export const printer = (value) => { console.log(value); }; const arrPrinter = (arr) => { arr.forEach((el,..

[자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export [내부링크]

html에서 js코드를 불러올 때 script 태그에 type 속석으로 module이라는 값을 지정해주면, 모듈 스코프를 가지게 된다. 이렇게 되면 다른 파일에서는 해당 js 파일을 사용할 수 없게 된다. <!DOCTYPE htmel> JS..

[자바스크립트 js] 모듈 개념 [내부링크]

모듈 모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있다. 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면 1. 코드를 좀더 효율적으로 관리할 수 있다. 2. 비슷한 기능이 필요할 때 다..

[자바스크립트 js] Map / Set [내부링크]

Map / Set 객체는 property name을 통해 이름이 있는 여러 값들을 묶을 때 활용할 수 있다. - Map과 비슷 배열은 index를 통해 순서가 있는 여러 값들을 묶을 때 활용할 수 있다. - Set과 비슷 Map 이름이 있는 데..

[자바스크립트 js] sort 메소드 / reverse 메소드 [내부링크]

sort 배열을 정렬하는데 사용한다. sort 메소드에 아규먼트를 전달하지 않으면, 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다. (오름차순 / 내림차순 정렬이 아님) const letters = ['D', 'C', 'E',..

[자바스크립트 js] 배열 메소드 / reduce [내부링크]

reduce acc : Accumulator 누산기. 콜백함수가 반복해서 동작할 때직전에 동작한 콜백함수가 리턴한 값을 전달받는 파라미터. el : 배열의 요소가 전달 된다. i : 요소의 순서. arr : 메소드를 호출한 배열이 전달..

[자바스크립트 js] AJAX / JSON / Object to JSON / JSON to Object [내부링크]

JSON Javascript Object Notation object { key : value } 데이터를 주고 받을 수 있을 때 쓸 수 있는 가장 간단한 파일 포맷. 프로그램 랭귀지나 플랫폼에 상관 없이 사용 가능하다. Object to JSON stringfy(obj..

[자바스크립트 js] 배열 메소드 / some / every [내부링크]

some과 every true 혹은 false 값만 리턴한다. 메소드를 호출하는 배열이 빈 배열이면 callback 함수를 실행하지 않고, some은 false / every는 true를 리턴한다. some 배열 안에 콜백함수가 리턴하는 조건을 만족..

[자바스크립트 js] 배열 메소드 / filter / find [내부링크]

filter 메소드와 find 메소드 forEach와 map처럼 배열의 요소들을 하나씩 살펴보면서 반복적인 동작을 하는 메소드. 조건에 맞는 요소들만 추려내서 새로운 배열을 만들 수 있다. map메소드와 모습이 비슷하지만,..

[자바스크립트 js] 배열 메소드 forEach / map [내부링크]

forEach 배열의 요소를 하나씩 살펴보면서 반복 작업을 하는 메소드. 단순히 배열의 반복작업이 필요할 때 사용한다. 첫번째 아규먼트로 콜백함수를 전달 받는다. 콜백함수의 파라미터에는 각각 배열의 요소, inde..

[자바스크립트 js] 프로퍼티 표기법 [내부링크]

프로퍼티 표기법 1. 프로퍼티 네임과 변수나 함수 이름이 같다면 축약 사용 가능 function sayHi() { console.log('Hi!'); } const title = 'tooktak'; const birth = 2019; const job = '개자이너'; const user =..

[자바스크립트 js] 에러 / 에러 객체 / 에러 종류 / try catch문 [내부링크]

에러 타입 ReferenceError : 존재하지 않는 변수와 함수를 호출할 때 발생. TypeError : 잘못된 형식으로 자료형을 다룰 때 발생. SyntaxError : 문법에 맞지 않는 코드를 작성하면 발생. 코드 실행하기 전에 에러..

[자바스크립트 js / 실무 기록] appendChild, setAttribute 실무 / ajax 실무 [내부링크]

function detail_view(e){ $.ajax({ type:"GET", url: ``, dataType:"json", async : true, status : 0, beforeSend : function(xhr){ //xhr.setRequestHeader("Access-Control-Allow-Origin", "*"); xhr.setReque..

[자바스크립트 js / 실무 기록] 클릭할 때마다 객체 추가 되지 않게 하는 법 (중복 추가 방지) [내부링크]

//클릭할 때마다 중복되서 보이지 않도록 var cell = document.getElementById('rightWrap'); while (cell.hasChildNodes()) { cell.removeChild(cell.firstChild); } hasChildNodes : 이 노드 안에 있는 노드들

[자바스크립트 js / 실무 기록] 콘솔창에 로그 안 보이게 하는 법 [내부링크]

통합 js 파일 맨 상단에 console.log = () => {} 위 코드를 추가하면 콘솔창에 로그가 보이지 않는다.

[리액트 react] 중첩 삼항 연산자 [내부링크]

{this.state.challengedata.length > 0 ? ( <> 내가 챌린지한 내용 index.toString()} style={{flexDirection: 'row' }} data={this.state.challengedata} renderItem={obj => { return ( { this.setState({ isIma..

[자바스크립트 js] 함수 Destructuring / 함수 구조 분해 [내부링크]

함수 구조 분해 가장 간단한 상황은 함수가 리턴하는 값이 배열일 때 fucntion getArray() { return ['뚝딱', '도깨비', '두올다']; } const [name1, name2, name3] = getArray(); console.log(name1); console.lo..

[자바스크립트 js] 구조 분해 Destructuring / 객체 구조 분해 [내부링크]

객체 구조 분해 객체는 배열과는 달리, index가 아니라 프로퍼티 네임으로 여러 값을을 보관한다. const tooktak = { title: '뚝딱도 자바스크립트 한다', price: 123450000, memory: '789GB', goal: '개자이너' }..

[자바스크립트 js] 구조 분해 Destructuring / 배열 구조 분해 [내부링크]

구조 분해 '배열과 객체를 분해하다.' 배열과 객체에 각각 적용하는 방식에 차이가 있다. 배열의 요소나 객체의 프로퍼티 값들을 개별적인 변수에 각각 할당해서 다룰 수 있다. 배열 구조 분해 배열을 분해해서 하..

[자바스크립트 js] spread 구문 [내부링크]

spread 구문 배열을 다룰 때 유용하게 활용된다. 여러개의 값을 하나로 묶은 배열을, 다시 각각의 개별값으로 펼치는 문법. 배열 앞에 마침표 3개를 붙여주면 된다. 배열이나 객체를 복사하거나 혹은 복사해서 새..

[자바스크립트 js] 조건을 다루는 표현식 / 조건부 연산자 [내부링크]

조건부 연산자 (Conditional operator) 조건 ? truthy 할 때 표현식 : falsy 할 때 표현식 삼항 연산자 (Ternary operator) const PASS_SCORE = 80; function passChecker(score) { return score > PASS_SCORE ? '..

[자바스크립트 js] 문장 statements / 표현식 expressions [내부링크]

문장(statements) 자바스크립트에서 문장은 '어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리' 표현식(expressions) 코드 길이와는 상관 없이 결과적으로 하나의 값이 되는 모든 코드를 말한다. 표현식인 문..

[자바스크립트 js] this [내부링크]

객체의 메소드를 만들 때 중요한 역할을 한다. 함수를 호출한 객체를 가리키는 키워드. 웹 브라우저에서 this가 사용될 때는 전역 객체, Window 객체를 가지게 된다. 하지만, 객체의 메소드를 정의하기 위한 함수..

[자바스크립트 js] Arrow Function / 화살표 함수 [내부링크]

ES2015에서 새롭게 등장했다. 기존의 함수선언 방식을 보다 간결하게 만들어준다. arguments 객체가 없다. arguments 객체를 사용하는 함수라면 arrow function 사용 불가. rest parameter를 사용하거나, 파라미터..

[자바스크립트 js] Arguments 객체 / Rest Parameter [내부링크]

Arguments Arguments 객체는 함수를 호출할 때, 전달한아규먼트들을 배열의 형태로 모아둔 유사배열 객체이다. 유사배열이므로, 배열의 메소드를 사용할 수 없다. 함수를 호출할 때 전달되는 아규먼트의 개수가 불..

[자바스크립트 js] 파라미터 Parameter와 아규먼트 Argument 차이 / 파라미터의 기본값 [내부링크]

1. 파라미터와 아규먼트의 차이 function greeting(name) { //name은 파라미터 console.log(`Hi! My name is ${name}!`); } greeting('뚝딱'); //뚝딱, tooktak, TOOKTAK 모두 Argument(인자) greeting('tooktak')..

[자바스크립트 js] 함수 만들기 / 함수 선언 / 함수 표현식 / 파라미터(매개변수) / 아규먼트(전달인자) / 즉시 실행 함수 [내부링크]

함수 선언 - 보편적으로 사용 function 키워드를 통해서 함수를 선언하는 방식. 호이스팅 가능 : 함수를 선언하기 전에 함수를 호출해도 코드가 동작된다. 함수 스코프를 가진다. function 함수이름(파라미터) {..

[자바스크립트 js] 변수와 스코프 / 함수 스코프 / 블록 스코프 [내부링크]

1. 변수 이름을 통해서 어떠한 값에 특별한 의미를 부여할 수 있음. 프로그래밍에서 추상화에 가장 기본적인 수단 1-1. var 변수 이름 중복 선언 가능(값의 재할당) 변수 선언 전에 사용 가능(호이스팅) 함수 스코..

[자바스크립트 js] null 병합 연산자 (Nullish coalescing operator) [내부링크]

null 병합 연산자 ?? 물음표 두 개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자. 왼쪽 값이 null이나 undefined라면 오른쪽 값이 리턴된다. 왼쪽 값이 null이나 undefined가 아니라면 왼쪽 값이 리..

[자바스크립트 js] AND와 OR의 연산 방식 [내부링크]

AND와 OR 연산자는 무조건 불린 값을 리턴하지 않고, 왼쪽 피연산자 값의 유형에 따라서 두 피연산자 중 하나를 리턴하는 방식으로 동작한다. AND 연산자 console.log(true && true); //true console.log(true &&..

[자바스크립트 js] Falsy 값과 Truthy 값 [내부링크]

if, for, while 등 불린 타입의 값이 요구되는 맥락에서는 조건식이나 불린 타입의 값 뿐만 아니라, 다른 타입의 값도 불린 값처럼 평가될 수 있다. Falsy값 (false처럼 평가되는 값) false null undefined NaN 0..

[자바스크립트 js] MouseEvent.relatedTarget [내부링크]

mouseenter, mouseleave, mouseover, mouseout 이벤트에는 relatedTarget이라는 프로퍼티가 존재한다. target : 이벤트가 발생한 요소를 담고 있는 프로퍼티 relatedTarget : 이벤트가 발생하기 직전(또는 직후)에..

[자바스크립트 js] 스크롤 이벤트 / scrollY 프로퍼티 [내부링크]

일반적으로 웹문서의 크기가 브라우저 크기보다 클 때 스크롤바가 자동으로 나타난다. 그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 window객체에 이벤트 핸들러를 등록하는 경우가 많다. function pri..

[자바스크립트 js / 실무 기록] input값 초기화 [내부링크]

이벤트 핸들러가 호출 된 후에 input 태그를 매번 초기화 해주려면 이벤트 핸들러의 제일 마지막에 input.value = ''; 입력하기. 예시 function removeWord() { const word = document.querySelector(`[data-word=..

[자바스크립트 js] input 태그 / input 태그 종류 / 포커스 이벤트 / 입력 이벤트 [내부링크]

input 태그 종류 text password button checkbox 등 종류 더 있음 포커스 이벤트 (키보드나 마우스 동작에 반응함) focusin : 요소에 포커스가 되었을 때 focuseout : 요소에 포커스가 빠져나갈 때 focus : 요소에..

[자바스크립트 js] 키보드 이벤트 / keydown / keypress / keyup [내부링크]

키보드 이벤트 타입 KeyboardEvent.type keydown : 키보드 버튼을 누른 순간 / 키보드를 꾹 누르고 있을 때 한번만 실행됨 a = 65, A = 65 동일한 값이 보여짐 keypress : 키보드 버튼을 누른 순간 / 키보드를 누..

[자바스크립트 js] data-* / dataset [내부링크]

자바스크립트로 HTML 태그의 비표준 속성을 활용할 때 HTML 태그에 data-* 형태로 속성을 작성하고, 자바스크립트로는 DOM의 dataset 프로퍼티를 활용하면 안전하게 비표준 속성을 다룰 수 있다. HTML JS functio..

[자바스크립트 js] mouseenter / mouseleave VS mouseover / mouseout [내부링크]

mouseenter와 mouseleave는 버블링이 일어나지 않는다. mouseenter와 mouseleave는 자식 요소의 영역을 계산하지 않는다. 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고 싶은 경우에는 mouseover/mouseout..

[APP DESIGN] 앱 타이포그래피 / 앱 폰트 / 앱 개발 폰트 / 앱 폰트 사이즈 [내부링크]

추천 폰트 사이즈 애플 : 최소 17px 구글 : 최소 16sp (IOS 16pt와 동일) 이 사이즈들은 폰트의 특징에 따라서 달라질 수 있음. 앱 디자인 할 때, 본문 폰트를 16pt 보다 작은 사이즈 사용하지 말 것. 본문에 가장..

[WEB DESIGN] 웹디자인 폰트 추천 / 웹 개발 폰트 / 웹 개발 폰트 사이즈 / 웹 퍼블리싱 폰트 추천 [내부링크]

추천 폰트 사이즈 font-xs: 12px / 0.75rem //덜 중요한 내용 font-sm: 14px / 0.875rem //각주 font-base: 16px / 1rem //본문 font-lg: 18px / 1.125rem // 소제목 font-xl: 20px / 1.25rem // 대제목..

[자바스크립트 js] 마우스 이동 이벤트 / MouseEvent.위치프로퍼티 [내부링크]

마우스 이동 이벤트 MouseEvent.type mousemove : 마우스 포인터가 이동할 때 mouseover : 마우스 포인터가 요소 밖에서 안으로 이동할 때 mouseout : 마우스 포인터가 요소 안에서 밖으로 이동할 때 마우스 위치..

[자바스크립트 js] 마우스 버튼 이벤트 / MouseEvent.button / MouseEvent.type [내부링크]

MouseEvent.button 0 : 마우스 왼쪽 버튼 1 : 마우스 휠 2 : 마우스 오른쪽 버튼 3 : X1 (일반적으로 브라우저 뒤로 가기 버튼) 4 : X2 (일반적으로 브라우저 앞으로 가기 버튼) 잠깐만 cc mouseenter, mouselea..

[자바스크립트 js] 브라우저의 기본 동작 막기 e.preventDefault(); [내부링크]

function tooktak(event) { event.preventDefault(); } 필요한 경우에만 주의해서 사용하자.

[자바스크립트 js] 이벤트 위임 Event Delegation [내부링크]

이벤트 위임 버블링 개념을 활용하면 훨신 효과적인 이벤트 관리를 할 수 있다. 예를 들어, 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관..

[자바스크립트 js] 이벤트 객체 프로퍼티 [내부링크]

이벤트가 발생하면, 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달된다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고..

[자바스크립트 js] 마우스 이벤트 / 키보드 이벤트 / 포커스 이벤트 / 입력 이벤트 / 스크롤 이벤트 / 윈도우 창 이벤트 [내부링크]

마우스 이벤트 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 click 왼쪽 버튼을 클릭한 순간 dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간 contextmenu 오른쪽 버튼을 클릭한..

[자바스크립트 js] 이벤트 핸들러 등록과 삭제 / addEventListener / removeEventListener [내부링크]

// 이벤트 핸들러 등록하기 let btn = document.querySelector('#myBtn'); function event1() { console.log('뚝딱 안녕!'); } funciton event2() { console.log('뚝딱 코딩중!'); } 1 이벤트 핸들러 등록 //..

[css] 대괄호 선택자 / 비표준속성 활용하기 [내부링크]

할 일 : field="title"> 담당자 : field="title"> 상태 : field="title"> 뚝딱 공부중 뚝딱 개발중 [status] { padding : 5px; } [status="개발중"] { background-color: yellow; } [속성이름] : 대괄호를 이..

[error 해결] An output directory must be specified when compiling a directory. [내부링크]

An output directory must be specified when compiling a directory. // 디렉토리를 컴파일 할 때 출력 디렉토리를 지정해야합니다. scss를 css에 연결하려고 할 때 터미널창에서 이러한 문구가 뜬다면, scss파일..

[scss] npm scss 적용하기 [내부링크]

$ npm install -g node-sass $ node-sass --watch scss/manager_index.scss css/manager_index.css --watch를 넣어야 scss파일 작성시 css파일에 반영이 된다. scss파일과 css파일을 미리 만들어주고 터미널에..

[자바스크립트 js] 스타일 프로퍼티 / 스타일 변경 / 클래스 추가 / className / classList (add, remove, toggle) [내부링크]

const tooktak = document.querySelector('#뚝딱'); const doeggabi = document.querySelector('#도깨비'); 1 스타일 프로퍼티를 활용해서 요소의 스타일을 직접 수정하기 tooktak.children[0].style.textDecorati..

[자바스크립트 js] HTML 속성에 접근 .getAttribute / 속성 추가 및 수정 .setAttribute / 속성 삭제 .removeAttribute [내부링크]

대부분의 HTML 속성은 DOM객체의 프로퍼티로 변환이 된다. 하지만, 표준속성이 아닌 경우에는 프로퍼티로 변환이 안 되는데, 아래 메소드를 활용하면 표준이 아닌 HTML 속성들도 다룰 수 있다. element.getAttribu..

[자바스크립트 js] 요소 만들기 .createElement('태그'); [내부링크]

const toDoList = document.querySelector('#to-do-list'); fucntion addNewTodo(text) { const li = document.createElement('li'); li.textContent = text; toDoList.append(li); }

[자바스크립트 js] 요소 노드 만들기(createElement) / 요소 노드 꾸미기(textContent, innerHTML) / 요소 노드 추가하기(prepend, append, after, before) [내부링크]

전 포스트에는 덮어쓰는 방법들이 있다. 이번 포스트에는 덮어쓰기 말고, 요소 노드를 직접 생성하여 필요한 곳에 추가하는 방법들이다. const goTooktak = document.querySelector('#가자뚝딱'); 1. 요소 노드 만..

[자바스크립트 js] 요소 노드 삭제 .remove / 요소 노드 이동 prepend, append, before, after [내부링크]

const tooktak = document.querySelector('#금나와라뚝딱'); const tooook = document.querySelector('#도깨비방망이'); 노드 삭제 : Node.remove(); tooktak.remove(); tooktak.childern[1].remove(); //2번째 요..

[자바스크립트 js / 실무 기록] 비밀번호 설정 방법(비밀번호 입력 안 했을 때, 비밀번호 공백, 비밀번호 영문 숫자 특수문자, 비밀번호 확인) [내부링크]

pwdNum, eng, spe : js 정규식 표기법 pwd : input으로 전달 받은 비밀번호 pwd2 : pwd 내용을 확인 swal : sweetalert 사용하는 코드. icon의 종류는 success, warning, error, info가 있음.

[자바스크립트 js / 실무 기록] 제이쿼리 input name value 잡는 법 / radio 체크된 value값 가져오는 법 [내부링크]

[자바스크립트 js / 실무 기록] if문 안에 return을 입력해야 하는 이유 [내부링크]

if문마다 return을 입력하지 않으면, 년도 건너 뛰고 월 입력 하라는 경고창이 뜬다.

[자바스크립트 js / 실무 기록] select 선택 안 했을 때 alert [내부링크]

html selected 에 value=‘’를 넣어줘야 한다. js select 안의 option의 value를 따로 잡을 필요 없다.

[자바스크립트 js] 요소 노드 주요 프로퍼티 (innerHTML, outerHTML, textContent) [내부링크]

const tooktak = document.querySelector('#뚝딱'); innerHTML 요소 안의 html 자체를 문자열로 리턴. 태그와 태그 사이의 줄 바꿈이나 들여쓰기 모두 포함. 요소 안의 정보 확인할 때 사용. HTML을 수정할 때 자..

[자바스크립트 js] DOM 트리 (Document Object Model) / 노드 (Node) / parentElement / previousElementSibling / nextElementSibling [내부링크]

window. 전역객체 (Global Object). 브라우저 창을 대변하면서 자바스크림트에서 최상단에 존재하는 객체. 모든 객체는 사실 window의 자식객체. 객체를 만드는 것은 window 객체의 프로퍼티를 만드는 것과 같다...

실시간 검색어