빵 입니다.

Next.js 강의 중 라우팅 챕터를 보는데... Next.js에서 태그를 이용해서 을 만들었더니 태그를 이용해서 페이지를 이동하지 말라고 ESLint가 떴다. React에서 태그를 이용해 페이지 이동하지 않는 이유와 같다고 했다. 생각해 보니 정확한 이유를 모르고 있었다. 막연하게 react-router-dom을 이용해서 컴포넌트를 이용해 페이지 이동을 구현했었다. 창피했다. 제대로 쓰기 위해 열심히 찾아보았다. ⭐️ 페이지 전환 시 태그를 사용하지 않는 이유는? 페이지 전환의 SPA 장점 상실 React로 만들어진 앱은 주로 SPA 방식으로 개발되었다. 브라우저의 페이지 전환없이 동적으로 콘텐츠를 보여준다. 태그를 사용하면 전체 페이지가 새로고침되므로 SPA 장점 사라진다. React Router 기..

UI 컴포넌트 개발을 위해 스토리북이 많이 사용되는 것 같다. 채용 공고에서도 유경험자를 자격요건으로 걸기에 나도 학습해 보았다. (아래의 내용은 여러 경로를 통해 학습하고, 이해하게 된 내용) 스토리북이란? 스토리북은 UI 컴포넌트 가이드북이다. UI 컴포넌트의 디자인을 한눈에 볼 수 있다. ex) Primary 버튼, Secondary 버튼 등 버튼의 스타일 확인 가능 UI 컴포넌트의 상태를 한눈에 볼 수 있다. ex) 버튼 컴포넌트의 다양한 상태(활성, 비활성, 클릭 상태 등) 확인 가능 UI 컴포넌트가 가지고 있는 액션을 실행해 볼 수 있다. === 컴포넌트의 상태나 프로퍼티 변경에 따른 시각적 변화를 쉽게 관찰 가능 UI 컴포넌트를 테스트하고, 디버깅할 수 있다. === 컴포넌트의 동작 확인, ..

정처기 공부할 때 ~ 연산자를 본 적 있다. 그저 공식을 외워 계산하기 바빴다. 알고리즘을 공부하며 또 다시 만난 ~ 물.결 구박사님을 통해 검색을 해보니 이름은 하난데 별명은 서너개~ 틸트 연산자? 틸데 연산자? mdn에 tilt, tilde 둘 다 검색해도 안나온다... 찾다보니~~~ 비트 NOT 연산자를 찾았다! 정확한 명칭은 "비트 NOT 연산자"이다. (Bitwise NOT Operator) 물결로 표기하기 때문에 영단어 tilde(물결)를 써서 tilde 연산자라고 사용하는 것 같다. 틸트는 어디서 나온 말이지 -.- 틸데를 틸드로 읽은 게 구전되어 틸트가 된 게 아닐까 추측 ^^!... 사용법을 알아보자! 비트가 0일 경우엔 1로, 1일 경우엔 0으로 비트를 뒤집는다. 피연산자는 32비트 부..

동적 라우팅의 문제점 동일한 레이아웃에 데이터만 달라지는 경우 동일한 component를 재사용하게 된다. (하나의 component의 parmas를 구분해서 데이터 값을 변경해 주고 있다.) 그러나! 한번 렌더링 된 component는 route가 변경되더라도 라이프사이클 훅은 한 번 더 호출하지 않기 때문에, component의 데이터 값이 바뀌지 않는다. 문제 게시판 1, 게시판 2 두 개의 게시판을 만드는데 동적 라우팅을 이용하고, 동일한 UI를 사용하기 때문에 공통 component를 사용한다. 메뉴를 이동해도 route만 변경되고 본문 내용은 바뀌지 않는다. 해결 과정 route 변경 시 onUpdated에서 데이터를 재호출 해보았다. const boardType = route.params.b..

template과 slot을 어떻게 쓸 수 있는지 너무 헷갈려서 검색해 보았다. 막연하게 사용했었는데, 위 두 태그가 HTML 태그 기반이라는 것을 알았다. 사용 방법은 Vue에서 사용하던 것과 같다. 다만, 좀 더 구체적으로 두 태그를 알게 되었다. HTML 태그 : 콘텐츠 template 요소 엘리먼트는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공한다. (페이지가 load 될 때, HTML 코드 조각을 담아 놓는 안 보이는 요소이다.) 엘리먼트는 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너 페이지를 불러오는 동안 구문 분석기가 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링..

문제 에 있는 을 ref 로 가져오는데, 자꾸 null 찍힌다. => onMounted() 함수 안에서는 ref 값을 잘 가져온다. => setup() 안에 바로 변수를 만들어 할당한 후, section.value를 할당한다. 이유 setup()은 라이프 싸이클 중 create 시점에 실행되는데, 그 시점엔 을 읽기 전이다. 아직 html이 읽히지 않았기 때문에 항상 null 이 찍힌다. html DOM 가져오는 는 beforeMount 시점에 데이터를 가져온다. ref는 mounted 시점에 html 데이터를 가져올 수 있다. => 데이터 가져오는 시점보다 더 빨리 변수를 선언하니까 항상 null 문제 해결 1. setup에 변수를 선언만 해놓고, mount 될 때 데이터를 push해준다. 2. dom..

a태그 => 화면 전환 => 리소스 처음부터 끝까지 다시 호출. router-link => 기존 리소스 그대로 사용하기 때문에 새로 불러오지 않고, 사용할 컴포넌트만 불러옴 => 태그 생성. => 선언적 방식. 클릭 시 url 로 이동만 한다. 📌 router.push는 router-link 를 클릭 할 때 내부적으로 호출되는 메소드 ===> router-link를 클릭하면 router.push를 호출하는 것과 같다. router.push() => 자바스크립트로 주소창만 변경해주고, 히스토리 쌓고, 컴포넌트만 변경한다. => 주소 추가하기 위해 onClick과 같은 이벤트 핸들러와 같이 사용된다. => , 등 어떤 태그에 이벤트를 발생시켜 주소를 추가해서 => window.history API와 비슷하게..

맥북만 쓰다가... 너무 오랜만에 PC를 켰다. vue3 앱을 만들려고 node와 npm을 정비하려고 하는데..... 업그레이드가 되지 않았다...! node는 latest로 업데이트를 해줬는데, npm이 업데이트가 안되는 이슈 ㅠ.ㅠ 문제1. prefix -g가 더 이상 사용되지 않는다. 대신 prefix --location=global을 사용한다. npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security u..