[포스코x코딩온] 풀스택 부트캠프 1차 프로젝트 회고록-1

 

231110

 

1. 주제선정 : 요리 레시피 공유 사이트
2. 메인 페이지 레이아웃 구성 회의
3. breakpoint: sm, md, lg까지 설정하기 - 햄버거는 sm부터 설정하기
4. 레시피 새로 등록할 수 있는 로직 구현 (css에서 미리 li 만들어놓고 display: none 설정 후 display 보이게 설정)

 *이렇게 할 필요 없이 그냥 js나 j쿼리로 요소를 만들어서 append하면 훨씬 편하고 제약사항도 없다..
5. 햄버거 아이콘 구현 (ul, li, span)
6. 추천 수별로 레이아웃 순서 바뀌는 로직 생각 (flex의 order)

 * 다만 순위가 나오는 것도 아니고 슬라이드에서 한칸만 왼쪽으로 가도 마지막 슬라이드가 나오기 때문에 레이아웃 순서가 의미 없을 것 같다.

 

231114

Q. 제이쿼리로 추가한 요소에 대해서 click event를 추가하려고 했는데 실행되지 않았다.

 

A.

    제이쿼리의 click이나 js의 innerHTML 등을 통해서 동적으로 생성된 element에 대해서는 추가한 이벤트와 같은 클래스        를 가지고 있더라도 이벤트가 할당되지 않는다.

    그래서 $(".btn").click(function(){     <= 이렇게 되어있는 제이쿼리 click 함수를
     $(document).on("click",".btn",function(){  <= on click을 이용하여 바꾸면 동적으로 추가된 요소에도 모두 적용된다.

      *on태그 각각에 들어가는 parameter들은 ('이벤트', 'target의 제이쿼리 선택자 문법', 함수)의 순서대로 넣는다.

---

231115

Q.

       swiper(제 3자 패키지)로 슬라이더를 만들었는데, 이후 슬라이더의 레이아웃에 수정을 가할 때 (요소 추가, 요소 삭제)        슬라이드가 작동을 멈췄다.

 

A.

      이는 슬라이드 안 요소의 수정 사항을 확인하고 swiper가 이를 반영 해야하는데, 반영되지 않아 생기는 문제였다.                해결법은 swiper 인스턴스의 객체 내부에서 observer: true, 속성을 주면 dom에 변화가 있을 시 swiper가 자동으로 초          기화를 해서 수정사항을 동적으로 변경할 수 있다.

---

 

 

Q      요소에 더 쉽게 접근하기.

A.
     HTML5부터 지원하는 data 속성을 이용하면 쉽게 dom에 접근할 수 있다.

      HTML 내부에서 class 속성 주듯이 data-{index}: 1; 등으로 접근할 수 있다.

      {요소}.dataset.index <= 이런식으로 접근할 수 있다,
      js에서 변수를 먼저 생성하고 해당 data 속성을 할당한 후 data 속성이 들어가는 class명을 만들어서 할당해도 되고
           ex)  data-{index}: 1으로 설정하고, 클래스명: new-class-1; 으로 설정한다면 (js에서 $(`.new-class-${요                    소.dataset.index}`)로 하면 된다.), 또한 children()으로 접근해도 될듯 하다.

 

Q

    dataset을 이용하는데 js로 이용하니까 data- 의 이름에 '-'를 넣으니까 js에서 정의할 때 인식하지 못했다. 그래서 js방식       으로 카멜케이스를 하니까 또 적용되지 않았다.

A.

    그래서 전부 소문자로 설정하니까 적용되었다.

     dataset을 설정할 때 js에서는 대소문자 구분을 하는데 html에서는 구분하지 않는 것 같다. (대문자도 소문자로 인식하         는 것 같다.)

+ 추가적으로 . 표기법은 정상적인 표기법에 적용되고 js에서 적용되지 않는 문자열의 경우 [] 표기법을 이용하면 된다.

                                     - in JS-    

                              ex) dataset[number-of-index]