본문 바로가기

프로그래밍233

[220125] 맥북에서 터미널 켜는 단축키 만들기 (M1칩) ( 맥북을 사용하는 관계로 맥OS 기준으로 작성.) 윈도우와 다르게 맥OS는 터미널만 켜서 설치가 가능하다고 한다! 윈도우 단축키는 shift+ctrl + t 라고 한다. 보통 맥북은 윈도우와 설정이 비슷하니 눌러봤지만. 음 안된다. 맥북은 터미널 단축키가 없다고 한다. 그러면 만들자. 단축키는 편리한 것이다. 1. application에서 Automator을 실행 2. 실행한 후 처음 뜨는 화면에서 새로운 문서 선택 3. 빠른 동작 선택 4. AppleScript 실행을 드래그 한 후 다음 코드를 작성 여기서 주의할 점 2가지! 작업흐름 수신을 반드시 입력없음으로 선택해야 한다. 저거 몰라서 세번이나 다시 지웠다가 설치했다. AppleScript 실행 코드 박스 빨간 박스 안에 수정코드를 작성해야하는데.. 2022. 2. 2.
[220125] NODEJS, 무작정 맥에서 시작하기 (M1칩) ( 맥북을 사용하는 관계로 맥OS 기준으로 작성.) 윈도우와 다르게 맥OS는 터미널만 켜서 설치가 가능하다고 한다! dock에 등록해서 실행하는 법도 있겠지만, 귀찮아서 단축키를 만들어서 쓰고 있다. 단축키 등록법은 아래 참조 https://hancoco.tistory.com/69 [220125] 맥북에서 터미널 켜는 단축키 만들기 (M1칩) ( 맥북을 사용하는 관계로 맥OS 기준으로 작성.) 윈도우와 다르게 맥OS는 터미널만 켜서 설치가 가능하다고 한다! 윈도우 단축키는 shift+ctrl + t 라고 한다. 보통 맥북은 윈도우와 설정이 비슷하니 hancoco.tistory.com 최초에! 한번만! 실행하는 설치 1. homebrew 설치하기 https://brew.sh/ /bin/bash -c "$(.. 2022. 2. 2.
[220128] 콜백 함수와 익명함수의 차이점, 콜백지옥 익명함수와 콜백함수의 차이점 익명함수 이름 없이 생성된 함수라고 생각하면 된다. 함수명 대신 변수명에 저장되고, 호출할때 변수명을 사용하면 된다. function을 생략하고 =>을 가진 모양으로도 나타낼 수 있으며, 화살표를 달고있다고해서 애로우 함수라고도 한다. 익명 함수에 대한 자세한 설명글은 아래 게시글에 적어놓음. let abc = function() { console.log('익명함수') } let abc2 = () => { console.log('익명함수') } https://hancoco.tistory.com/75 [220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서 목록 1. 함수를 선언하는 여러가지 방법 2. 함수가 생성되는 순서 3. 익명함수 4. 호출되는 순서 함수.. 2022. 1. 28.
[220124] input="radiobox" / label / 슬라이드 / 형제 선택자 의도 : 클릭하면 div가 사라졌다가 나타나기 html css : 인접 형제 선택자 + 이용 #header{ width: 500px; height: 180px; background: #eee; padding:20px; box-sizing: border-box; display: flex; justify-content: space-between; } #header > div > input{ display: none; } .container{ width:130px; height: 130px; } input[id*="box"]+label{ display: inline-block; width:15px; height: 15px; background: blue; border-radius: 100%; } input[i.. 2022. 1. 24.
[220124] input="checkbox" / label / 아코디언 메뉴 input과 연결되는 label See the Pen Untitled by supermint (@ma_ad_shouri) on CodePen. checkbox를 체크 유무를 표시하는 법 관계 없는 둘을 묶어주는 id 체크박스, 라벨과 다른 컨텐츠를 연결하기 id가 app1인 체크박스와 id가 box1, box2인 div와 연결하기 클릭하면 빨간박스 #box1랑 파란박스 #box2가 보이게 만들기 클릭하면 접히는 메뉴 만들기 어떻게 구성할지 생각하기 체크박스 여러개 : 아코디언 메뉴 2022. 1. 24.
[220115] js를 이용한 class="on" 생성/제거하기 목차 1. 클릭으로 class 생성,제거하기 2. 원하는 위치에 생성하기 자바스크립트 그래서 대체 뭘 어떻게 쓰는건데..하다가 드디어 실사용을 하기 시작. 배우자마자 너무 미쳤다..하고 마음속에서 기립박수쳤다. 이걸 이렇게 쓴다고?? 이런 맛에 프로메테우스가 인간한테 불을 준건가. 박수 짝짝짝 손 터지게 치고 앞으로 세바퀴 굴렀다. 미쳤다. [웹페이지는 html, css, javascript 3개로 구현되고 있는데, 자바스크립트는 html을 조정할수 있다]란 말을 실천해보자. 클릭으로 class="on" 생성하기 See the Pen make_class_on by supermint (@ma_ad_shouri) on CodePen. 클릭함으로써 id가 box1인 div를 숨기는 코드다. 클릭을 함으로써 d.. 2022. 1. 15.
[220112] 동기적코드 / 비동기적 코드 / setTimeout(), setInterval() 동기적인 방법와 비동기인 방법은 뭘까? 동기적인 코드 자바스크립트 코드는 보통 동기적으로 실행된다. 마치 책을 읽듯이 위에서 아래로, 왼쪽에서 오른쪽으로 읽어내려오며 코드를 한줄한줄 차례로 실행된다는 뜻이다. 한 코드가 실행 될때까지 다음 코드가 실행되지 않는다는 특징이 있다. 장점은 코드를 파악하기 쉽고, 유지보수, 디버깅이 쉽다. 그래서 단순 목적을 지닌 기기의 프로그래밍에 자주 이용된다. (예 : ATM기계, 키오스크, 단순단말기) 단점은 한 코드의 실행이 오래 걸릴경우 손가락만 빨며 끝나기를 기다려야 한다는 것이다. 처리하는데 10초 처리하는데 10분 처리하는데 1초 이와 같은 코드를 실행한다고 치면, 3번 코드가 실행될때까지 총 10분 10초가 걸릴것이다. 만약 이 같은 일이 쇼핑몰 구매페이지에.. 2022. 1. 12.
[220110] queryselector, onload, addEventListener, 호출메서드() 목차 1. querySelector 2. addEventListener 3. onload 4. 호출메서드() document.querySelector(selectors); 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 Element를 반환한다. 일치하는 요소가 없으면 찾지 못한 것이므로 빈 값인 null을 반환한다. selector : 하나 이상의 선택자를 포함한 DOMString. 유효한 CSS 선택자여야만 한다. String과 같은 UTF-16문자열이기때문에 DOMString은 String으로 연결된다. DOMString을 받는 매개변수에 null을 전달하면 보통 문자열로 변환해 "null"이 된다 return : (Object) 제공한 CSS 선택자를 만족하는 첫번째 Element 객체.. 2022. 1. 10.
[220109] 1차 배열, 2차 배열의 합을 forEach, reduce, join으로 해결하기 목차 1. 1차배열의 합 2. 2차배열의 합 주기적으로 배열을 다뤄서 요소들의 합을 내놓으라는 문제를 접하는데, 계속 찾아보고 걔념 잡기 귀찮아서 한번에 정리. 1차 배열의 합 : reduce function a(arr){ return arr.reduce((v,i)=>v+i) } console.log(a([1,2,3,4,5])) 1차 배열의 합 : forEach function a(arr){ arr.forEach(v=>sum+=v); return sum; } console.log(a([1,2,3,4,5])) 1차 배열의 합 : map function a(arr){ arr.map(v=>sum+=v); return sum; } console.log(a([1,2,3,4,5])) forEach랑 map의 차이점.. 2022. 1. 9.
[220108] Array, fill, 덧셈 삼대장(map, reduce, forEach) 목차 1. array 2. fill 3. 덧셈 삼대장 Array ( 집어넣을 요소 | 생성할 빈 배열 수) Array( element1, element2... | arrayLength ) : 생성자 새로운 array 객체를 생성할때 사용 element1, element2... : array / 안에 채울 요소, 만약 자료형이 숫자이고 단 하나일 경우 arrayLength로 넘어간다 arrayLength : 유일한 매개변수가 2^32-1 이하의 정수인경우, 그 수 만큼의 빈 배열을 갖게된다. let arr1 = Array(2) //[ 빈 요소, 빈 요소 ] let arr2 = Array('apple', 'pear') //['apple', 'pear] fill (채울 값, 시작 인덱스 번호, 끝 인덱스 번호.. 2022. 1. 8.