Dalin's Archive

1부 요약 - 웹팩은 모듈 번들러이다. - 모듈 번들러는?? 웹 어플리케이션을 이루는 수많은 자원들이 있는데, 이것들을 조합하고 압축해서 하나의 결과물로 만들어준다. Webpack의 필요성 1. 웹 사이트가 빠르게 로딩되게 해준다. 여러 파일을 압축, 조합 -> 서버에 요청해야 하는 파일 개수 감소 -> 사이트가 빨리 로딩됨. 1부에서 썼다 :) 또한 처음에 모든 자원을 요청하는 게 아니라, 필요해질 때 자원을 요청하는 Lazy loading도 지원해서 초기 페이지 로딩 속도를 높인다. 2. Dependency graphy를 생성해서 빌드하여 변수의 scope(유효 범위) 문제를 해결한다. javascript의 변수는 기본적으로 전역 범위를 가진다. 그런데 여러 js 파일을 조합해서, 큰 웹 어플리케이션..

들어가며... 두둥...! 회사에서 2주에 한번씩 돌아가면서 미니 발표를 하는데, 내 차례가 왔다.. 그 주제를 미리 정해뒀는데, 내가 선택한 주제는 'webpack'이었다. 왜 그랬니..? 과거의 나..?? 싸피에서 프로젝트하면서 리액트에서 절대 경로를 사용하고 싶을 때 웹팩 설정을 따로 해야 하는 등 많이 들어봤는데, 잘 몰라서 궁금해서 정했던 것 같다.... 그런데 발표할 때가 올 때까지 안(? 못?) 하고 있다가 급하게 하는 중이다.. 하다 보니 webpack을 하려면 모듈 번들러에 대해서도 말해야 하고, 그러려면 모듈도, 번들러도 이야기해야 한다. 그리고 우리 회사는 요즘 vite를 더 많이 써서, webpack보다는 vite에 대해서도 이야기해야 할 것 같고... 적어도 webpack vs v..

회사에서 새로 알게 된 것 중에 하나는 디자인 시스템을 만들 수도 있다는 것이다. 부트 스트랩, MUI 같은 걸 가져다 쓰기만 하다가 직접 만드는 걸 보니까 신기했다.. 디자인 시스템은, 많이 쓰는 컴포넌트/ 색상/ 폰트 등을 정리해둔 것이다. 인풋, 버튼, 페이지 네비게이션, 모달 등은 자주 쓰이는데 미리 컴포넌트로 만들어두면 통일성 있게, 효율적으로 사용할 수 있다 ~ 디자인 시스템을 만든 후에, 이걸 문서화하는 도구로 스토리 북을 사용한다 ~ 리액트 사용자를 위한 가이드도 있다 ~(https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/) 다음에는 컴포넌트를 만들고, 이를 스토리 북으로 문서화해서 보여주는 예시를 이 아래..

; 도 꼭 넣어야 함 !

overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

문제 상황 vue로 작업을 하는데, style 부분에서 lang을 scss로 했다. 그랬더니 'Can't resolve sass-loader' 에러가 발생했다. 해결 sass, sass-loader 를 설치했다. npm install -g sass npm install sass-loader https://sass-lang.com/install

상황 🤦‍♀️ 페이지에서 특정 Input 에 focus 를 해주고 싶다. (회원가입 폼에서 완료 버튼 클릭했는데, 필수로 입력해야 하는 이름을 입력하지 않아서 이름 인풋에 포커스해주고 싶을 때 등등) 그런데 이 페이지에는 여러 InputGroup이 있고, 그 안에 Input들이 여러 개 있다. 몇번 InputGroup의 몇번 Input인지는 아는데, 어떻게 그 input에 focus를 해주지?? 사실 회사에서 비슷한 작업을 하고 있는데 이 부분을 모르겠다... (회사 코드는 훨씬 복잡하고 몇번 InputGroup의 몇번 Input을 포커스해야 하는지 알아내는 것도 오래 걸렸다..! 아래 내용, 코드는 내가 공부용으로 간단하게 만든 것~~ !! ) 설명 ❤️ 완성 ~!! Message 부분에서 몇 번 In..

module.exports = { ... plugins: ["prettier"], rules: { ... "vue/multi-word-component-names": [ "error", { ignores: ["Message", "Input"], }, ], }, }; Message를 컴포넌트 이름으로 사용하고 싶은데, 한 단어라서 안된다고 했다. 그럴 때 .eslintrc.js에서 rules에 추가해주면 된당.

emit('이름', 보낼 값1, 보낼 값2)

provide와 inject 실무에서 일하다가 vue provide와 inject를 마주쳤다. 그 전에는 부모-자식 컴포넌트 간에 데이터를 주고 받을 때 prop과 emit을 사용했다. 그런데 좀 더 큰 걸음으로 후손에게 데이터를 줄 때 사용하는 것이다. A-> B -> C 로 컴포넌트가 있는데, A -> C로 데이터 바로 주고 싶을 때 ! https://vuejs.org/guide/components/provide-inject.html Provide / Inject | Vue.js vuejs.org 상위 컴포넌트에서는 provide로 줄 데이터를 정할 수 있다. 하위 컴포넌트에서는 inject로 받을 데이터를 정할 수 있다. (이 부분에 관련 코드 + 설명 추가하기) @@@ is not a functi..