반응형

자바스크립트 18

[JavaScript] 스터디 4일차_ this (2) call, apply, bind

1. call 메서드 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령 - call 의 첫번째 인자를 this로 바인딩 - 그냥 실행하면 this === 전역객체 but call 메서드를 사용하면 임의의 객체를 this로 지정 가능 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) //원래는 함수호출로 window {...} 출력이나 첫번째 인자로 this에 {x:1} 전달 var func = function (a,b,c) { console.log(this,a,b,c); }; func(1,2,3) //window {...} 1 2 3 func.call( {x:1}, 4,5,6); // {x:1} 4 5 6 출력 객체의 메서드 를 call 메서드로 호..

[JavaScript] 스터디 3일차_ this (1)

this = 함수를 호출 할 때 결정되는(실행 컨텍스트가 생성될 때) 것 = 호출한 놈!! "나" 라는 단어를 부르는 사람에 따라 의미가 달라지듯이, this 는 아래의 "나"와 같은 역할을 한다. 1. 전역공간에서의 this ⭐ 전역공간에서의 this === window 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로 할당한다. 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작. 실행 컨텍스트는 변수를 수집해서 LexicalEnvironment(LE) 에 저장하고, 어떤 변수를 호출하면 LE를 조회해서 일치하는 프로퍼티가 있을 경우 반환함. 전역컨텍스트의 경우 LE는 전역객체를 그대로 참조. var a = 1; console.log(a); // 1 출력 console.log(w..

[JavaScript] 스터디 2일차_ 실행컨텍스트

실행컨텍스트(Execution Context) - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. - 실행컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하는 등의 동작 ◼ 스택과 큐 - 스택: 출입구가 하나뿐인 데이터 구조. 즉 먼저 들어간 데이터가 가장 나중에 나오는 구조 - 큐: 양쪽이 모두 열려있는 데이터 구조. 먼저 들어간 데이터가 먼저 나오는 구조 즉, 실행컨텍스트는 동일한 환경에 있는 코드들을 실행할때 필요한 환경정보를 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행한다. ◼ 동작 순서 - 처음 자바스크립트 코드를 실행하면, 전역 컨텍스트가 콜 스택에 담기고 함수들이 담긴다. 하나의 ..

[JS] 프로그래머스 1단계 - 모의고사(완전탐색)

문제링크 코딩테스트 연습 - 모의고사 수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다. 1번 수포자가 찍는 programmers.co.kr 코드 function solution(answers) { var answer = []; //수포자 3명의 찍는 패턴(반복 됨) let students = [ [1,2,3,4,5], [2,1,2,3,2,4,2,5], [3,3,1,1,2,2,4,4,5,5] ]; //수포자들의 점수 let score = [0,0,0]; //수포자별 점수 계산 for(let i=0; i

알고리즘 2021.06.09

[JavaScript] 스파르타 자바스크립트 기초 인강(1~7강)

0. 자바스크립트란? 프로그래밍이란? 데이터의 입력 ⇒ 처리 ⇒ 출력이 바로 프로그램이 하는 일, 이렇게 프로그램이 정해진 방식에 따라 일할 수 있도록 작성해놓는게 프로그래밍이다. 자바스크립트란? 프로그래머들이 이용하는 도구가 바로 프로그래밍 언어이고, 자바스크립트는 이러한 언어들 중에서 몇 손가락 안에 들만큼 많이 쓰이는 언어이고, 많은 프로그래머들로부터 사랑받고 있는 언어이다! 1. 변수 변수는 저장해놓은 값을 가리키는 일종의 '이름표'라고 생각할 수 있다. 이렇게 변수를 사용하면 해당 데이터가 의미하는 바를 변수 이름을 통해 정확히 표현할 수 있고, 계속해서 재사용도 할 수 있음 let 변수이름 = 값 변수 를 선언했고, 해당 변수에 을 할당했다! let name = 'Hyemi Gwak' // n..

[모의면접] 띵스플로우 모의 면접(항해)

나는... 나는 말미잘이다.. 대답을 못한 나는 해삼이다...나는 생각을 멈춘 돌멩이다.... 😰😰😰😱😭 ㅇ늘은.. 떡볶이를 먹어야겠다... 꺼흐그흑 따흐흐흑 그리고 앞으로 공부좀 더 열심히 해야겠다... 비가 온다... 내 눈물 가려줘 비야... 1) 웹팩, 바벨? ◼ 웹팩 - 모듈(module) 번들러(bundler). - 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는, 웹팩 실행 후에 나오는 결과 파일)시켜주는 역할. 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다. - 웹팩을 이용하면 여러가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다. ◼ 바벨 - 입력과 출력이 모두 자바스크립트 코드인 컴파일러 - 구형 브라우저들이 ES6 를 제대로 호환하지 못해, 오래된 브라..

취업 관련 2021.06.03

[리액트] 커프재그 커피 캡슐 쇼핑몰 구축 - 미니프로젝트

- 기간: 4/12~4/22 (14일) - 팀원 구성: 스프링 3명 + 리액트 2명 - 프로젝트명:Coffzag 커프재그 -> 커피 + 지그재그(의류쇼핑몰)의 합성어 - 목적: 커피를 좋아하는 사람들을 위해 커피캡슐에 대한 리뷰들을 모아서 보여주고, 구매로 바로 연계하고자 함 - 설명: 일리, 스타벅스, 네스프레소 공식몰을 크롤링 후 진행하였습니다. 각 브랜드 캡슐커피를 한번에 모아서 구매하고, 캡슐마다 리뷰를 달 수 있습니다. 각 캡슐의 최근 리뷰를 메인 화면 캡슐 카드에 보여지게 했습니다. - 개발언어/라이브러리: JavaScript / React - 협업툴: git, slack, notion, figma - 구현 기능: 로그인(JWT)/회원가입 Product Main(페이지네이션, GET) 리뷰(C..

부트캠프 항해99 32조, 1주차 S.A(Starting Assignment)

- 팀명: 32조 - 팀장: 곽혜미 - 팀원: 박현준, 여지영 - 일자: 3/1(월) DAY+01 - 프로젝트명: 웹개발 미니프로젝트 1. 32조 프로젝트 제목 및 간단 설명 제목: 좋아하는 국내 여행지 기록 설명: 국내 여행 명소를 스크래핑하여, 지역별로 카드 리스트로 나열하고, 좋아하는 여행지 카드에 '좋아요' 를 클릭하면 마이페이지에 좋아요 클릭된 여행지들이 분류되어 확인 가능 2. 와이어프레임 사진 1) 로그인페이지 - ID/PW를 입력 후 로그인 성공 시 메인페이지 이동 - 미회원의 경우 회원가입 버튼을 누르면 로그인 창이 숨겨지고 회원가입칸 보임 2) 메인페이지 - 국내여행지기록(제목) - 우측 상단(MY PAGE) - 네비게이션바(서울/경기/제주/부산 등) -> 누르면 지역탭으로 이동 - 카..