To infinity, and beyond To infinity, and beyond

2023.12.30 궁금한 점: 컨텐츠의 글자량이 동일하면 1번 그림과 같이 box size가 동일하게 유지되는데, 컨텐츠의 글자량이 다르면 2번 그림과 같이 box size가 달라진다. 해결: 아직 못 찾음

허허. 돌아온 탕자가 여기 있도다. 개발자가 될거야! 라고 호기롭게 개발블로그를 만들고 '프론트엔드 개발자가 되기로 하다' 라는 글을 작성한지 어언 1년 반 전.. 프론트엔드 개발자가 되기로 하다. 2022년 3월 11일 금요일 밤에 작성하다. 나는 지금 휴가를 와 있다. 작년에 못간 휴가를 이제서야 왔다. 그동안 내가 몸소 느낄 정도로 몸과 마음이 망가져 있다는 생각이 들었다. 실제로 오른쪽 어 eunne.tistory.com 쪼금 끄적이다가 결국 스스로 압박에 못 이겨 뛰쳐나갔으나, 2023년을 마지막으로 둔 이 시점 (12월 30일) 나는 다시 '개발'의 세계에 입문하기로 마음을 먹게 된다.. 왜 다시 돌아왔는가? 왜 다시 돌아왔느냐, 라고 묻는다면 그동안의 고민 끝에 결국에는 여기였도다.라는 것을..

2022.03.24-26 🤔❓ 어떻게 스크롤을 하면 상단메뉴버튼이 해당 페이지에 맞게 자동으로 선택하지 각 페이지와 메뉴버튼을 연결시켜 줄 수 있는 항목을 찾아서, 페이지의 움직임이 발생할 때 메뉴버튼에도 움직임을 주면 될 것이라고 생각했다. 확인해보니 페이지와 메뉴는 동일한 'id'를 갖고 있다. 그렇다면 이렇게 해보면 어떨까. case 1 페이지가 스크롤 되어 밑으로 내려가듯이, 선택된 상태도 옆으로 스크롤 되도록 하면 된다고 생각했다. 1. 선택된 메뉴버튼에 해당하는 페이지의 좌표값을 구한다. 2. 해당 좌표값이 윈도우 스크린 좌표와 일치되면 상단바 버튼을 이동시킨다. 근데 해보니까 아니다. 왜나면 '페이지'가 스크롤 되는거기 때문이다. case2 상단메뉴버튼과 페이지의 id가 동일하니, 스크롤링해..

2022.03.23 🤔❓어떻게 선택된 버튼에 클래스를 추가할까? 현재 상태는 work__categories라는 큰 클래스 안에 3개의 category__btn이 들어가 있다. All5 Javascript3 React2 category__btn을 클릭했을 때, 클릭 된 버튼이 selected되도록 만들고 싶다. (즉, 버튼을 선택했을 때, 해당 버튼에만!! 클래스를 넣어서 선택된 효과를 만들고 싶다.) 일단, 각 버튼을 호출하는 방법은 event.target이라는 함수로 호출이 가능하다는 것은 이전시간을 통해 배웠다. 그래서 이 기능을 이용해서 각 버튼에 어떻게 selected라는 클래스를 추가하면 좋을지 고민했다. 😃❗이렇게 하면 되지 않을까? 1) 클릭된 버튼의 data-값과 동일한 값이 있는 상자에..

2022.03.22 🤔❓ 버튼을 누르면 해당하는 정보가 필터링 되어 조회된다. 오늘부터는 JS를 입혀 조금 더 페이지를 동적으로 만드려 한다. 😃❗이렇게 해보자 1) 각 필터버튼의 결과값을 가져온다. (1) data- 를 이용하자 All5 Javascript3 React2 ... 버튼에 해당하는 work__catergories의 각 버튼 클래스에 data-filter를 추가한다. 그리고 해당 버튼을 누르면 필터링되는 정보인 work__projects의 각 프로젝트에도 data-filter를 추가한다. 버튼과 각 프로젝트에 추가한 data-filter의 값이 같은 항목끼리 버튼을 누르면 필터링되어 나오도록 만들거다. //project filtering const workCategories = docume..

2022.03.21 🤔❓ 스크롤 후 상단으로 바로 이동할 수 있는 버튼을 만들자 스크롤을 한 후 상단으로 이동하고싶을 때, 바로 이동할 수 있는 버튼을 창 하단에 만드려고 한다. 😃❗아래에서 확인해보자 1) 버튼이 창 하단에 계속 위치하도록 만든다. (1) 추가하는 버튼은 html 가장 하단에 정의해야한다. - 그렇지 않으면 페이지 전체에 해당 내용이 적용이 안된다. (2) 상단으로 이동하는 버튼이 스크롤 되어도 창 하단에 계속 위치하도록 css를 이용하여 만들었다. /* arrow btn */ .arrowBtn { /*모양을 동그랗게 만듬*/ width: 50px; height: 50px; background-color: var(--color-pink); border-radius: 50%; marg..

2022.03.18-19 🤔❓ 상단 메뉴버튼을 누르면 해당 페이지로 스크롤 되도록 만들고 싶다. 상단에 나열된 메뉴 버튼을 누르면 해당 페이지로 스크롤링 되도록 만들어보도록 한다. 😃❗메뉴 페이지의 좌표값을 구하여 상단 메뉴버튼에 연결시킨다. 0) 방법론을 찾아보자. 앞에서 스크롤링에 대해 알아봐서 그런지, 해당 property를 응용하면 될 것 같단 생각이 든다. element.getBoundingClientRect().y를 이용해 메뉴페이지들의 y좌표를 구하고, scrollto를 이용해서 해당 y값을 연결시켜 주면 될 것 같다. 1) 각 메뉴 페이지의 좌표값을 구하자. 먼저, about의 y좌표를 구하기 위해 element.getBoundingClientRect().y를 이용하였다. y는 viewp..

2022.03.18 난 듣기, 쓰기, 읽기는 잘 되는데 말하기가 잘 안돼서 speaking skill을 올리고자 전화영어를 시작했다. 이상하게 지금까지 '어설픈 완벽주의'가 있어서 이 조차도 시도해보지 않았는데 처음 버벅거리는 나의 모습을 견뎌내야지만 성장할 수 있는거 아니겠는가. 일단은 처음부터 너무 거창하게 시작하면 금방 지칠거 같아 3월 한달동안 월, 수, 금 10분씩 하기로 했다. 아침에 일찍일어나기 위해 일부러 아침 6시 20분에 수업시간을 잡았다. (지금까지 봤을 땐 좋은 것 같다. 다음번엔 시간을 더 땡겨야겠다) 해보고 괜찮으면 시간이나 횟수를 늘릴 예정이다. 2022년 3월 1일을 시작으로 벌써 세션의 반이나 지났다. 전화영어를 진행하며 아쉬웠거나 keep해두고 싶은 문장, 그리고 내용이 ..