FrontEnd (16) 썸네일형 리스트형 [JS] 클로저 - closures https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저 - JavaScript | MDN 클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생 developer.mozilla.org 클로저란 ? 함수의 조합/ 모임 이라고 할수있겠다. 폐쇠된 공간을 만드는 테크닉이다. 함수 안의 함수 > 내부 함수를 제외하고는 접근할수가 없다. function makeAdder(x) { let y = 1; return function(z) { y = 100; return x + y + z; }; } let add5.. [JS] 배열에 쓸수있는 여러 함수들 .revers() 대상 배열의 순서가 변경된다. const arr =['a', 'b', 'c']; const reversedArr = arr.reverse(); console.log(reversedArr); //['c', 'b', 'a'] 순서 뒤집기: 사용자 인터페이스에서 리스트나 데이터를 역순으로 표시할 때 사용. EX) 데이터의 정렬을 오래된순 > 최신순 으로 정렬할때 유용. 스택 구현: 자바스크립트 배열을 이용해 스택을 구현할 때, .reverse 메서드를 사용하여 스택의 순서를 뒤집을 수 있음. 이는 후입선출(LIFO: Last In First Out) 원칙에 따른 데이터 처리나 표시에 적합. .shift() 대상 배열에서 첫번째 요소(Element)를 제거하고 제거한 요소를 반환한다. 첫번째 .. HTML / CSS 리팩토링 하기 HTML/ CSS 과제 리팩토링 총평 https://github.com/KDT1-FE/KDT8-M1/pull/27 멘토님: 짧은 시간동안 고생 많으셨습니다! BEM을 사용하고, Block 단위를 명확하게 나눠 재사용성을 높이는 방법을 연습해보시고, 멘토님께 질문 드릴때도 Block 단위 를 명확하게 하면, 요소의 구성은 같지만제가 아직 BEM 사용법이 미숙하여 이것저것 섞어 사용했는데, 한가지 클래스 스타일로 통일하여 짓는것이 읽는 사람도 관리하는 사람도 편하다는것을 느꼈습니다. 크기가 다른 것들은 CSS를 다시 작성할 필요없이 클래스 하나로 제어하기 쉽다고 하셨습니다. 일관된 스타일로 코드를 작성하시는 걸 습관화하시면 좋을듯 합니다! 코드리뷰 내용 진짜 엄청 세세하게 알려주셔서 배운내용이 많은데요! 그.. [TS] interface //타입 을 지정할때 사용 type User = { [name: string]: string, } //형태를 지정해줄때사용 type Player ={ name : string, playType : 10 | 11 | 20, } //위와 비슷 - interface interface Player2{ name: string, age: number } // 두 방법 다 타입으로 설정하면 해당 타입의 모든 요소를 조건에 맞게 다 구현해야한다. const penguin: Player = { name: "penguin", playType: 10 } const heejun: Player2 ={ name: "Penguin", age: 30, } interface Player { name: string, age: numbe.. [TS]Type Script 를 써야하는 이유. Java Script 의 이상한 점 Java Script는 아주 flexible한 언어이다 조금 지나치게..? 뻔히 에러가 나는 코드 이지만 일단 실행시켜서 값을 맘대로 도출해주거나 이미 실행하고 난 다음 에러를 띄워준다. // arr + boolean = string..? [1,2,3] + false '1,2,3, false' 위와 같이 array 와 boolean은 더할(+)수가 없는데, 자바스크립트는 이걸 구지구지구지구지 연산해서 보여준다..그 결과 string 이 되어 이상한 게 되었다. // d 라는 함수는 인자를 두개 받고 a와 b를 나누어서 값을 리턴한다 function d (a,b){ return a/b; } d('123'); NaN 이와 같이 매개변수를 두갤 받는 함수이지만 하나만 받아도.. 카카오 프렌즈 샵 클론코딩하기 👀 자신이 원하는 사이트 레이아웃 클론 🐧 KaKao Shop Clone Coding 🐧 깃 허브 주소 : https://github.com/PenguinKKIM/kakao-shop-clone 필수 요구사항 과제에 대한 설명을 포함한 README.md 파일을 제공하세요! 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요! 카카오 프렌즈 샵을 클론코딩 했습니다. https://store.kakao.com/kakaofriends 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다. https://magical-arithmetic-952b0e.netlify.app/ 카카오톡 스토어 카카오프렌즈.. [20240214] Flex flex 의 정의 1차원의 레이아웃 : 한개의 축만 사용한다 flex와 inline-flex flex bolck 레벨의 컨테이너를 만듦. 레이아웃 을 짜는데 주로 사용한다. 웹페에지의 주요 구성 요소를 짜는데 씀 inline-flex inline 레벨의 컨테이너를 만듦 : 문서의 흐름의따라 글자처럼 배치된다 텍스트나 인라인 요소의 사이에 위치하게된다. 주변에 텍스트와 같이 배치되는 버튼 에 사용한다 주로 사용하는 일은 없음 flex-shrink 부모 container에 자식 item 들이 얼마나 줄어들지 비율을 정해 줌. 기본값 은 1 이다 : 화면이 줄어 듦에 따라 같이 줄어든다 줄어들게 하지 않으려면 값을 0으로 바꿔주면된다. flex의 단축속성 flex : , , /* Two values: flex.. 부모요소에 padding 과 absolute 얼마 전에 absolute에 대한 질문을 받아보다가 알게 된 것 Penguin 이 HTML의 결과물은 이렇게 된다 부모 container에 padding 20px 때문에 안에 쏙 들어가 있다. 자식 container에 padding을 주고 싶어서 이 상태에서 padding을 주게 되면, .sub-container1{ width: 100%; height: 10vh; background-color: cornflowerblue; padding: 20px; } 요래 20px 만큼 튀어 나가게 된다. 이 상태에서 해결하기 위해서는 box-sizing: border-box; 한 줄만 추가하면 깔끔하게 해결된다. 만약 자식 container의 위치를 밑으로 내리고 싶다고 할 때, (여러 가지 방법이 있겠지만) 부모요.. 이전 1 2 다음
