Cute Bow Tie Hearts Blinking Pink Pointer

전체 글 106

[Javascript] this, new, class, 콜스택

목차 -this -new -class -콜스택(재귀함수 출력순서) -알고갈 사실(항상 함수 바로 위에 작업을 해놓아야함. 이렇게 해도 실행이되는 이유는 함수는 먼저 실행되고 나머지가 차례로 실행되기때문) this this는 예약어, 객체. (이거) 사용하는 위치에 따라 결과물이 달라진다. console.log(this) //브라우저가 가진 객체 다 보여줌 console.log(this) //브라우저가 만들어줌. 내장객체 or APIs 라고 함. new 자바스크립트에서 생성자 new는 그냥 함수다. 객체 중복해서 쓰기 싫어서 사용함 생성자는 객체에대한 초기화이다. 사용 형식 let aa = newArr

[Javascript] 얕은 복사, 깊은 복사

https://hanamon.kr/javascript-shallow-copy-deep-copy/ 얕은 복사 vs 깊은 복사 [JavaScript] 얕은 복사(shallow copy) vs 깊은 복사(deep copy) - 하나몬 💡 얕은 복사(shallow copy) vs 깊은 복사(deep copy) ❗️얕은 복사(shallow copy)란? const obj1 = { a: 1, b: 2}; const obj2 = obj1; console.log( obj1 === obj2 ); // true 위의 예시처럼 객체를 직접 대입하는 경우 참조에 의 hanamon.kr 얕은 복사 : 주소값만 참조해주는 것. Object.assign() 즉, 같은 원본을 할당받기 때문에 하나의 내용 변경하면 다른 하나가 항상 ..

[Javascript] 문자열, 배열 메서드

목차 -문자열 메서드 replace replaceAll repeat includes indexof substring substr concat valueof slice -콜백함수 -arrow 화살표 함수 -배열 메서드 1.forEach 2.filter 3.map 4.reduce -switch case 문 replace str_text.replace ("찾을 문자열", "변경할 문자열") 예시 let date = "2021-01-06"; let str = date.replace("-", ""); replaceAll let str = "dog dog hello" str.replaceAll("dog","monkey") repeat let str3 = "*" console.log(str3.repeat(6)) in..

[Javascript] 자료구조, 이중for문(별쌓기), 재귀함수(피보나치수열)

목차 -스택, 큐, 데큐 -이중 for문(별쌓기) -재귀함수(피보나치수열) 스택 LIFO 후위선출 가져오기 O(n) 추가하기 O(1) 삭제하기 O(1) 큐 FIFO 선위선출 데큐 양 방향 가능 스택+큐 콜 스택(call stack) 콜 스택이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다. 서브루틴의 이러한 실행은 여러 단계로 중첩될 수도 있는데, 다른 호출에 의해 또 다른 서브루틴으로 넘어가버리거나, 재귀같은 특별한 경우가 있다. 이중 for문 (for문 안에 for문) 이중 for문을 사용하여 크리스마스 트리를 만들어보자. let star = ''; for(let i=0; i

[Javascript] 배열 prototype 메서드, 속성, 객체 속 객체

목차 -자바스크립트 메서드, 속성 차이 -프로토타입 배열, 객체 -객체 속 객체 typeof = 예약어 데이터 타입 알아내는 함수 arr.length 배열 길이 알아내는 함수 push 배열 맨 뒤에다 값 하나 추가하는 행위 메서드와 속성 차이 메서드는 뒤에 () 붙는다. (액션을 취해준다.) 속성은 뒤에 () 없다. 가지고 있는 것만으로 표현한다. prototype 찍어보면 메서드, 속성 확인 가능하다. 숙지해놓자. > console.log(arr[arr.length-1]) 자바 스크립트 프로토타입 at: ƒ at() concat: ƒ concat() constructor: ƒ Array() copyWithin: ƒ copyWithin() entries: ƒ entries() every: ƒ every(..

[Javascript] let, const, 함수, 줄바꿈

목차 - 변수 선언 원리 - let, const - 줄바꿈 \n - 사용자 지정 함수 - return 변수정의하는 원리 let 변수 --> 변수를 선언하면 일단 단순 공간 확보를 한다. 그 뒤로 변수 값이 바뀌면 그대로 덮어쓰기 하는 것이다. var : 오래 전에 자바스크립트가 나올 때 쓰던 변수 선언 방식이다. 실제 실무에서도 거의 안쓴다. let : 가장 기초적인 변수 선언 자기가 가진 영역에서만 실행되도록 한다. (전역변수/지역변수) 원래는 같은 변수명 사용할 수 없다. code block 안에서는 ? 가능하다. 전역변수로 선언된 변수가 똑같은 이름으로 지역변수로 선언될때는 실행이 가능하다. 같은 공간에선 사용할 수 없다. 변수는 내용을 바꿀수 있다. const 값이 절대 안바뀐다. 상수니까. 아스..

자바스크립트 사용자 지정 함수, for문

목차 -사용자 정의 함수 -for문 -자바스크립트 let 사용자 정의 함수 내가 원하는 함수를 만들어서 사용할 수 있음. 사용하는 이유? 특정 역할을 반복해서 수행할경우 간편하다. 사용 형식(방법) function 함수명( 파라미터(인자) ){ 처리 내용; . . . return 반환값; } 출처: https://cofs.tistory.com/142 [CofS] 예시) function hi(name){ let result = name + "님 환영합니다."; return result } console.log(hi("청포도 에이드")); hi --> 함수명 name --> 인자(parameter) 함수 내부에서 result를 정의하여 return 값으로 반환하였다. 출력결과 for문 사용형식 for(초기문..

데이터 타입, 자바스크립트 연산자, 조건문

목차 -비트, 바이트, 진수 -예약어, 변수 -데이터타입 -배열의 인덱싱 -개발자도구 콘솔 console.log(); -객체 선언 하는 법 -객체 value값 불러내기 -연산자(산술, 연결, 비교, 논리, 증감) -if문 -for문 들어가기 전 기본 상식 ES6(국제표준) = 자바스크립트 16진수는 컴퓨터 공학 때문에 나왔다.(추정) 8 비트 = 1바이트 영어 한글자 1바이트 / 한글 한글자 2바이트 => 16진수의 탄생 니블이라는 단위 비트를 4개씩 묶는 단위(1니블 = 4비트=16가지=16진수) 2니블 = 8비트 = 32가지(2진수) = 2가지(16진수) 코인지갑주소= 16진수 0~9, a~f 사용 int 타입은 4바이트 javascript 저급 언어, 바이트 관계가 없기때문에 배우기가 쉽다. (전)..

HTML, CSS로 게시판 만들기(따라하기), display:flex

목차 -form - (post와 get차이) -URL과 URI -display:flex -padding, margin을 어디에다 주어야 정렬이 될까? 1. 로 글 올리는 게시판 만들기. 게시판 로고 /*메인 홈페이지로 바로가는 링크, 여기에선 자기자신에게 이동*/ /*선의 표시를 위해 넣어둠*/ 번호 제목 작성자 작성일 조회수 1 ㅎㅇ /*제목을 눌렀을 때 그 글로 이동*/ 김밥 21-12-29 3 2 안녕하셈 떡볶이 21-12-29 1 글쓰기 /*누르면 메인페이지로 주소 이동하는 버튼. 귀찮아서 앵커태그로 함.*/ 출력 결과 2. 제목을 눌렀을 때 view.html라는 아래 코딩한 파일로 이동하게 할것임. 그전에, 링크를 누른다는건 (제목을 누르면) 사이트의 주소가 변한다는 것이다. 즉, html이 변..

HTML, CSS 레이어 팝업 만들기.

목차 - 팝업창 만들기 - 블럭 위치 지정하기 (transform:translate) - 그림자 생성하기(box-shadow) - 여러 개의 선택자의 스타일을 동시 적용하기 - 절대 지정(다른 스타일 다무시: important) - 특정 스타일 여러번 재사용하기 - 커서 클릭했을 때 스타일 적용(focus) - 브라우저 별 스타일 다루게 적용하는 접두어 - border와 outline 차이 특정 버튼을 눌렀을 때 팝업창이 나오도록 만들기 원리는 label을 두 개 만들고 하나의 라벨에 100%*100% 뒷배경을 꽉채워 배경을 지정하는 것이다. 1. input으로 체크박스를 넣는다. 버튼 label을 하위 엘리먼트로 넣느냐 동등한 엘리먼트로 넣느냐 고민 했지만, 출력값에 변화가 없는 걸로봐서 input 박..