나의 FE피봇이야기 (182) 썸네일형 리스트형 [immutability]불변값 primitive type : 더 이상 쪼갤 수 없는 단위로 생각해보기 Object : 우리가 object.assign을 통해서 복제를 하면 복제한(오리지날) 객체의 property 들만 복제를 하는 것. 따라서 그 복제한 property 중 value가 object인 경우, 그 object 값을 복제하는 것이 아니라 그 object의 위치만 복제. property 중 원시데이터(primitive) type은 기존 원시 타입처럼 저장. 반면, 배열과 같은 object typed은 reference로 저장. 얕은 복사 object.assign === const anyName = [ ...참조배열 ] / { ... 참조객체 } 가장 밖에 있는 [ ] / { } 는 복사가 되고 내용은 참조 값까지 복사를 하고.. [every/some]배열에서 조건으로 통해 값 반환받기 true 와 false 를 반환하는 method. 1차 배열에서만 사용가능함. 따라서 flat() method 사용해 2차 배열을 1차로 만들어준다. 배열.every( (기준) => 조건 ) 배열.every ( (td) => td.textContent ) => 모든 상황이 참이여야 참 값을 반환 배열.some ((기준) => 조건) 배열.some( (td) => td.textContent ) => 하나라도 참이면 참 값 반환 참조 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every filter( (기준) => 조건 ); - 조건에 해당하는 사항이 있으면 걸러준다. - 1차 배열에서만 사용 가능하다.. [삼항함수]Conditional (ternary) operator 삼항함수는 1차원은 알겠는데, 추가적으로 조건이 달리는 헷갈려서 정리해 봄. // const myChoice = event.target.textContent ==='바위'? 'rock' :event.target.textContent === '가위'? 'scissor' : 'paper'? // [reduce] for문 같이 반복문 사용 가능한 제로초 영상을 참조한 내용입니다. ('자바스크립트 강좌 8-4. 평균 반응속도 구하기') https://www.youtube.com/watch?v=rfRmqII5PnY&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=71 reduce 이론 reduce( a, b, i ) => {return 원하는 결과값, (초기값)} a : 누적값 b : 처음값/다음값 i : indext 예시1. reduce((a, c) => (a+c), 0) 예시2. reduce((a, c, i) => { a[ i ] = c; return a }, { }) [...parent.childern]배열을 만들기 + any options Nodelist 배열 만들기 ClassName "current" 찾기 Bard한데도 물어봤는데 일단 indexof로 직접 찾을 수 있는 방법은 없다고 하네요. 하여 2가지 방식이 있음 1. 변수로 current를 만들기 console보면 11이 나왔는데, 이것은 배열 속 current가 속한 인덱스 번호를 뜻함. 2. findIndex 사용하기 a) const elements = document.querySelectorAll(".element"); // Replace with your array const currentIndex = elements.findIndex(element => element.classList.contains("current")); b) const classNames = eleme.. [scope & closure] var / let / const Call Stack - excute context가 call stack에 쌓인다. 1) 최초로 생기는 excute context는 전역에서 접근할 수 있는 excute context라하여 => Global excute context 2) a function위해서 만들어진 것 => function excute context 브라우져 변수값 확인 우선 순위 1. Block > 2. Local > (3. closure : parent function) 4. Script > 5. Global ※ closure는 함수 안에 함수를 뜻하면 그 중 부모 함수를 뜻한다. 이중 따라서 JavaScript === static Scope or Lexical Scope 참조 https://www.youtube.com/watc.. [REST API] REST standfor Representational State Transfer restful web service 장점 1. 간단하며 표준화 되어있다. such as 데이터 형식, 매번 요청 방식 선택/고민 2. 확장가능성과 비저장(무슨 데이터인지, 어떤 상태 확인을 위한 No tracking) 3. 퍼포먼스가 여전히 좋음 Collection table 구분값을 뺀 나머지 가져온 정보 ex) http://example.com/topics Element table 하나 하나의 값 ex) http://example.com/topics/1 Method Create(REST) = post(HTTP) Read = get(HTTP) Update = put(HTTP : all)/ Patch(HTTP : part).. [svg]가운데 정렬할때 타사의 SVG를 가져와서 사용하곤 한다. 특히 화살표를 사용할 때, transform : rotate를 사용하면 좌우 높이가 안 맞는다. 따라서 CSS에 2가지 값을 추가해야 한다. vertical-align: height: [var / let] 아래에 자세한 설명 있음 https://life-explorer.tistory.com/248 [argument] var / let / const Call Stack - excute context가 call stack에 쌓인다. 1) 최초로 생기는 excute context는 전역에서 접근할 수 있는 excute context라하여 => Global excute context 2) a function위해서 만들어진 것 => function excute context 브라우 life-explorer.tistory.com let은 block scope 블록으로 설정 된 곳에서만 사용 가능 예) if, while, for, function { } 즉 function b( ) { var a = 1; } conso.. [splice/slice] slice splice How to work slice(시작점, 끝나는 지점 "전"까지) splice(시작점, (자를)개수) 특징 원본 데이터가 변하지 않는다. [indexof] => true & false (찾고자 하는 대상).indexof((찾고자하는 정보) => 있으면 return 0 =>없으면 return -1 indexof 와 include 크게 indexof는 몇번째 자리까지 알려준다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf [agrument]변수 값으로 true/false 값 저장하기 bard가 코드를 줄여주면서 알려준 방법 저장 1. let isOpen = teamSelectBox.getAttribute("data-form") === "true"; 여기서 let의 isOpen의 값은 getAttribute의 값이 ===의 값과 동일하냐 따라서 let isOpent값이 결정된다. ==> true or false 다시 말해 teamSelectBox.getAttribute("data-form") 값이 현재 true이면 isOpen의 값도 true이다. 현재 teamSelectBox.getAttribute("data-form")=> true === "true" isOpen === true isOpen === false [setProperty]pseudo class 값 변경하기 at tab UI 텝 하단에 animation underline을 만들기 작업을 진행했다. 핵심 포인트 1. underline이browser가 움직여도 같이 따라 움직여야 한다. 2. screen leader에 굳이 읽힐 필요는 없다. 첫번째, ul >ul:last-child() Ul > li 맨 마지막 번에 class="underline"을 만들어서 만들었다. 일단, 가능을 할 수 있으나, 정석은 아닌거 같다. 두번째, Ul::after 활용 이건 적어도 diable 사람들에게 underline tag가 읽기지 않기에 웹접근성엔 좋은 거 같다. 배운점 1. translate이 left(position : absolute)보다 자원활용이 적다. 2. javascript에서 css의 ::after 값을 변경 할 수 있다. .. [getBoundingClientReact]웹 브라우저를 좌표로 실시간 반환 메서드는 엘리먼트(Element)의 크기와 뷰포트(Viewport)에 상대적인 위치 정보를 제공 다시 말해, getBoundingClientRect() 의 요소의 위치는 고정값이 아니라 문서가 브라우저에서 스크롤 될 때 마다 값 전달. console.log('offsetTop: ' + elem.offsetTop); //This is fixed. it get's calculated from beginning of your page to actual element's position. console.log('getBoundingClientRect: ' + elem.getBoundingClientRect().top); // this will changing while scroll, because it's re.. [fit-content] 자식 요소들로 heigtht / width 맞추기 1. 부모가 자식width만큼 : 자식요소로 width와 height를 맞추고 싶을 때 사용하는 것. 2. 각 자신에게 사이즈를 맞출때 : 각 자신의 요소가 다른때 거기게 맞춰서 배경색을 넣을 경우 => 참조 예시 https://codepen.io/daleseo/pen/WNjQKxp 다만 이번에 제가 클론 코딩을 하면서 배운 점은 자식요소의 width을 그대로 반영하고 싶을때 사용 상황 : ul >li*{$} >a 가 있는데 여기서 Ul에 사이즈를 만들고 싶지 않을때. 사용 이유 : Ul+flex에 line indicator를 사용하고 싶어서 As-is => ul style.width : fit-content To-be => ul style.width : fit-content(deleted) [addEventListener]클릭 대상의 부모를 클릭해도 작동한다. 이벤트가 발생할 contain or wrap에 addEventListner을 설정해도 contain 안에 있는 모든 이벤트는 작동한다. 다만 클릭을 할때마다 target정보를 가져오기 때문에 무조건 e.target.closest("(target tag")와 조건문을 함께 작성할 것. 예시 tabContainer.addEventListner("click", (e) =>{ const clickedTab = e.target.closest("a"); if (!clickedTab) return // => 대상이 아니면 그냥 function 종료 tabContainer.addEventListner("click", (e) =>{ const clickedTab = e.target.closest("a"); if (!cl.. [JavaScript]scrollTo를 통해서 움직이는 화면 이동 이 글은 아래의 URL을 참조하여 작성하였습니다. https://velog.io/@phrygia/2021-09-21-html-scroll 중간에 잠깐 착각을 하는 바람에 for 문으로 선택한 button에서 자꾸 offsetTop값을 가져오려고 했다. 그러다 다른 분에 물어봤다가 아래와 같이 3가지 방법으로 해결책을 발견했다. [git bash] local <--> remote 데이터 전송하기 ☆Github 저장소를 로컬 git에서 별칭으로 만들어 관리하기 1. github 와 연결 $ git remote add origin(별칭) github's URL(내가 앞으로 올릴 repository URL) 2. Local git 에서 remote github로 $ git remote push origin(별칭) main(git hub default branch name) ※ 주의 Local과 remote의 데이터 상태가 동일하지 않을 경우 push가 불가능. 따라서 pull을 통해서 local === remote 데이터 상태를 동일화 시킨후 push 가능 url. Basic concept master(main) = local repository orgin/master(main)[보통 최신 버전을 가.. Framework and Library framework : 도구를 사용하기 위한 환경 -설치 기본 코드를 작성하면 코드를 작성하면 브라우져가 변환 **convert, encoding => 컴파일러 by C or Java library : 이미 만들어진 기능 자바스크립트 라리브러리 참고 https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC_%EB%AA%A9%EB%A1%9D [nodelist]for문을 통해서 childern 값 변경하기 for ( let item = 0 ; item < $navTexts.length; item +=1){ 조건식 } for문을 돌리는 것은 nodelist에 있는 것으로서 for( var item = 0; item 이전 1 2 3 4 5 6 7 8 ··· 10 다음
