분류 전체보기
-
[Day 31] JS DOM & 이벤트TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 12. 23:16
DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다. 돔 트리에 접근 document.getElement~ document.querySelelector(All)~ (*querySelector() 는 코드 초단에만 사용하는 것이 좋다. 실행 시 코드 전체에서 요소를 찾아 실행하기 때문에 메모리 효율이 낮고 코드처리 속도가 느리다.. 그래서 함수 안에서 반복적인 사용은 지양된다.) 돔 제어 1. 이벤트 삽입 .addEventListener() 2. 클래스 제어 .classList.[add/remove/toggle/contains] 3.요소 제어 document.creat..
-
[JS] ClosureWeb/JS 2022. 5. 12. 01:10
자바스크립트에서 함수의 유효범위는 그 함수를 어디에서 실행됐는냐가 아니라 어디서 정의됐느냐에 따라 달라진다. 자바스크립트는 static (lexical) scope(함수 선언은 한 번밖에 못하는데 이거를 static, 정적이라 칭함)를 채택한다. 클로저란 부모 함수 안에서 자식 함수를 선언하면 자식함수를 어디에서 호출하더라도 자식함수 안에서 부모함수의 변수에 접근할 수 있다는 것을 의미한다! 프리코드캠프 글에서 살펴본 예시를 가져왔다. 아래와 같은 함수가 있다고 해보자. let count = 1 function counter() { console.log(count) } counter() // print 1 함수의 큰 장점은 재사용성인데, 이 함수를 다양한 곳에서 재사용하고 싶기 때문에 아래와 같이 또 다..
-
[Day 29] 함수 & call by valueTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 11. 01:46
원래 모르는 내용 위주로 슥샥 정리하는 식으로 TIL을 적었지만, 자스 진도 들어간 이후로 익숙하지 않은 내용이 점점 많아지기에.... TIL의 내용이 점점 부실해져가고 있는걸 체감한다...ㅜㅜ 나의 일기장(그만큼 막쓰는)인 걸 인정하고..ㅎ 이제 배운 내용은 그냥 핵심 코드만 쏙쏙 기록하는 식으로 간략히만 적는 방식으로 바꾸려고 한다..! 함수를 배우고 푼 오늘의 과제 //화살표함수를 그냥 함수로 바꾸기 let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let newData = arr.map(function(a){ a.map(function(n) { return n*2 }) }) //평균 구하는 함수 만들기 let data = [10,20,30,40]; function a..
-
[Day 28] 3번째 스프린트 회고 & JS 반복문 - for, whileTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 10. 01:56
2주마다 돌아오는 스프린트 회고! 벌써 세번째 회고시간을 맞이했다 +.+ 오늘 회고시간의 주제는 '똑똑한 토이프로젝트 선정과 확장 방법'이었다. 토이프로젝트.. 막상 시작하려고하면 제일 먼저 드는 고민은 '뭘 하지...?' '어떻게 구현하지...?' '어디까지 구현하지...?' 등이 있었다ㅠ 오늘 이 고민들에 대한 해답을 찾기 위해 메이커준님께서 다양한 질문들을 던져주셨는데, 일단 내가 흥미롭게 느끼는 도메인을 찾고, 내가 가진 기술을 활용하여 일단은 최소한의 핵심 기능만 갖춘 버전을 만드는 것이 핵심이다. 저번에 종찬님과 첫 수업 때 만든 투두리스트 과제에서 단순히 마크업과 css만 해놓고 자바스크립트 기능은 넣지 않았는데, 오늘 시간을 계기로 자바스크립트, 더 나아가 리액트를 첨가해 좀 더 고도화 해..
-
멋사 회고 6팀 5월 첫째주 주간회고회고 2022. 5. 7. 00:37
어제 어린이날부터 일요일까지 시작된 멋사방학!! 4일동안 리프레쉬를 하며 여유롭게 공부하니 너무 좋다.. 이번주부터 자스를 본격적으로 들어가다보니 수업 텐션도 HTML, CSS 했을 때보다 떨어지는 것 같고.. 멋사 내에서 특히 프로그래밍을 처음 배우시는 분들에겐 학습을 따라가기가 어렵다는 의견도 나왔다.. 그래서 오늘 주간회고에서 나온 Problem도 다 자스의 영향에서 비롯된 것들이 많이 나온 것 같다. 이번 주 주간회고의 KPT Keep Team) 팀원들간 온오프라인 소통이 활발하다. 특히 오픈채팅방을 열어서 공개된 디코공간에서 하기 애매했던 대화들도 많이 할 수 있었고(온라인) 거의 매 주 1회 모여서 모각코를 한다는 점! 모각코를 하면서 서로 과제 막히는 부분이 있으면 같이 고민하며 풀 수 있다..
-
[JS] Constructor FunctionWeb/JS 2022. 5. 6. 15:50
*freecodecamp 를 기반으로 작성하였다. Constructor Function 컨스트럭터(Constructor)는 새로운 객체를 만드는 함수이다. 이것은 새로운 객체에 속하는 프로퍼티나 기능을 정의한다. function Bird() { this.name = "Albert"; this.color = "blue"; this.numLegs = 2; } let bluebird = new Bird; 위의 컨스트럭터는 Bird라는 객체를 name, color, numLegs라는 프로퍼티들로 각각 정의하였다. 컨스트럭터는 다음과 같은 컨벤션을 따른다. 컨스트럭터는 컨스트럭터가 아닌 다른 함수와 구분하기 위해 함수 이름 첫 문자를 대문자로 정의한다. 컨스트럭터는 만들어질 객체의 프로퍼티를 세팅하기 위해 thi..
-
[Day 27] JS Array - filter, find, mapTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 6. 15:02
filter, find, map의 차이와 활용 구분하기 모든 요소가 조건을 만족하는지 확인할 때에는 filter() [ { id: '6271fd40fe5c58d4cbd3a72f', name: 'Miranda Nguyen', age: 27 }, name: 'Miranda Nguyen', age: 27 }, name: 'Florence Flynn', age: 35 }, name: 'Debbie Pratt', age: 25 } { id: '6271fd40e30856d15651c60c', name: 'Florence Flynn', age: 35 }, { id: '6271fd404394e16d79143873', name: 'Debbie Pratt', age: 25 } ] let age27over; age27ove..
-
[Day 26] JS 객체자료형 - ArrayTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 3. 17:32
지난 시간엔 원시자료형에 배웠다면 오늘은 객체자료형에 대해 배웠다. 객체자료형(참조자료형)은 객체를 생성하여 값을 할당하고 그 값을 복제하면 값 자체를 복제하는 것이 아니라 그 값이 위치한 주소를 복사한다. 리터럴표현: {} 객체자료형 중에서도 오늘은 Array란 무엇이고 내장 함수/메서드에 대해 알아보고 실습하는 시간을 가졌다. 배열이란? 한마디로 데이터의 집합이다. 여러 데이터를 하나의 이름으로 묶어 사용할 수 있도록 도와준다. 데이터엔 원시자료형도 올 수 있고 객체자료형도 올 수 있다. 배열 안에 있는 데이터를 element라고 부른다. 리터럴표현:[] 많은 내장함수들이 있는데, (더 많은 함수들이 궁금하다면 아래 클릭!) https://daheejo.tistory.com/13?category=12..