본문 바로가기

분류 전체보기369

[Javascript][업무]파일 업로드 기능 구현하기

업무를 진행하면서 발생한 문제를 해결한 내용입니다. Jquery로 작성된 코드에서 문제가 있었습니다. 같은 파일을 연속적으로 업로드가 안 되는 문제였습니다. HTML과 Javascript 파일 업로드 방법 파일 업로드할 때, 사용하는 HTML 태그 업로드 이벤트를 실행하는 자바스크립트 - change() 사용 // 🛠 pure javascript document.querySelector('#fileUpload').change() => { var sFormData = new FormData(); sFile = document.querySelector('#fileUpload')[0].files[0]; sFormData.append('file', sFile); // 로직 작성 } // 🛠 Jquery $('#.. 2021. 7. 16.

[SCSS] 전역으로 SCSS 변수 파일 등록하기

안녕하세요. 야근 중입니다. 새로 들어간 프로젝트에서 마크업과 스타일 작업을 진행하고 있습니다. CSS는 CSS 전처리기인 SASS의 SCSS로 작성하고 있습니다. 많이 사용하는 색깔이나 크기 style들을 변수와 요소 스타일 설정으로 common.scss라는 파일에 모아두고 사용하고 있습니다. 매번, 여러 컴포넌트에서 계속 임포트를 해서 사용하려고 하니까, 개발하는데 너무 불편했습니다. 장기적으로 볼 때, 계속 중복되는 코드를 사용하는 것은 불편하다고 생각했습니다. // 👇 불편한 코드 @import '@/assets/scss/common.scss'; 그래서, 이 불편한 문제를 해결하기 위해서 공통으로 사용하는 스타일 값들을 전역 변수로 등록할 방법을 찾아다녔습니다. 정확하게 vue-cli 문서에서 그.. 2021. 7. 16.

[vue][업무] 404 페이지 만들기

404페이지로 redirect하기 위해서는 router 설정이 필요합니다. 등록된 vue-router 설정 이외의 경로로 요청이 오면, 지정된 페이지로 요청이 가도록 해야 합니다. 저희 제품은 사용자에게 없는 경로임을 알려주기 위해서 404페이지로 redirect 되도록 했습니다. 📂 router/index.js { path: '*', redirect: "/404" // 아래처럼 바로 NotFound 경로를 매칭해도 됨 // component: NotFound }, 2021. 7. 15.

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

안녕하세요. 회사에서 베트남 시니어 개발자 코드를 통해 학습한 내용을 일부 기록한 글입니다. axios를 잘 정리해서 사용한 것 같아서 따라서 사용하고 있습니다. 이 코드를 보고 개발하는 프로젝트는 전부 이렇게 작성해서 사용하고 있습니다. 이 코드의 좋은 점은 다음과 같습니다. - axios 인스턴스를 만들 때 구성 기본 값 설정을 쉽게 해 줄 수 있습니다. - 인터셉트 사용 설정. 구성이 좋았다고 생각한게, core라는 디렉토리에 axios 인스턴스를 생성하는 자바스크립트 파일 1개를 만들었다는 것입니다. 📁 src | +- 📁 api | +- 📁 core +- 📄 index.js // 👈 axios 인스턴스를 만들고, 인스턴스를 내보냅니다. +- 📄 main.js // 👈 axios 인스턴스를 imp.. 2021. 7. 13.

[업무][베트남🇻🇳] 개발 코드로 학습-1 app.vue 코드 뭉치 분리하기

개요 시니어 개발자가 개발한 코드를 볼 일이 있었습니다. 이 코드에서는 하나의 vue 컴포넌트 파일이 긴 경우가 없었습니다. 그리고, 하나의 컴포넌트 파일에 하나의 feature요소만을 담고 있었습니다. 코드가 깔끔해보였고, 기능을 바로 파악할 수 있는 코드였습니다. 이에 비해서, 저희 제품 코드는 뭉처있는 코드들이 정말 많았습니다. 베트남 개발자 코드를 보고 난 뒤에 제 머리는 패치가 되었고, 뭉쳐있는 코드(하나의 컴포넌트인데, 여러 feature를 가진 경우나 코드가 긴 경우)를 보면 리펙토링 의지를 불태울 수 있었습니다.🔥 긴 코드 분리하기 리펙토링의 첫 대상은 app.vue였습니다. app.vue의 문제점. app.vue의 코드가 정말 길었다. 2000줄 이상 app.vue에 header와 foo.. 2021. 7. 13.

[Javascript] export와 export default의 차이점

저도 원래 사용하고 있는 문법이었습니다. 그런데 업무 중에 시니어 개발자 코드에서 export와 export default를 하나의 javascript 파일에서 동시에 사용하는 것을 보고, 언제 export {}를 쓰고, 언제 export defautl 를 사용하는지가 궁금해졌습니다. 예시로 아래 코드처럼 말이죠. // 📄 index.js const alertData = { alertMessage: '', type: 'error' } export default alertData export {alertData} 차이점 export {} export default named export라고 함. ex) import 무조건 export한 객체 | 함수 이름 개발자가 원하는 이름으로 import 할 수 있음... 2021. 7. 13.

[Vue][업무][베트남🇻🇳]webpack의 모듈 시스템을 사용한 alert와 confirm 개발하기

이번 글은 Vue에서 alert와 confirm을 더 좋게 개발하는 방법에 대해서 알아보려고 합니다. 프로토타입 결과물은 아래와 같습니다. 🧑🏻‍💻 현재 제가 다니는 회사 웹 솔루션 제품 구성은 아래와 같습니다. Vue-cli의 기본 스펙으로 개발되었음. Javascript의 기본 alert를 사용하지 않음. alert가 Vanilla Javascript로 작성되었음. mixin에 script 파일을 등록하고 alert를 사용할 컴포넌트에 mixin 파일을 import해서 alert를 화면에 표시하고 있음. 시니어 개발자가 개발해 놓은 기능 중에는 alert와 confirm이 있었고, 어떻게 개발이 된 건지 분석을 해봤습니다. 시니어 개발자의 코드가 더 좋은 방법이고 구조적으로 코드가 작성되어 있다는 느.. 2021. 7. 12.

[CSS] absolute 에서 요소 화면 정 중앙에 배치하기

요소의 style position이 absolute일 때, 화면 정 중앙에 요소를 배치하는 방법을 알아보겠습니다. 아래 사진은 배치한 결과입니다. 아래 코드를 사용하면 됩니다. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 2021. 7. 12.

Typescript + React 컴포넌트 간에 props 데이터 전달 중 발생한 문제

부모 컴포넌트에서 자식 컴포넌트로 props를 설정하고 있었는데, 자꾸 에러가 발생했습니다. IntrinsicAttributes 형식에 속성이 없다는 에러였습니다. 에러 메시지 'IntrinsicAttributes & ImovieInfo[]' 형식에 'nowPlayingMovies' 속성이 없습니다.ts(2322) 문제 부모 컴포넌트 - interface IProps에 detail 객체로 원소를 만들지 않았음. -> IProps 자체를 인터페이스로 쓰려고 해서 발생한 문제임. - interface IProps에 isLoading을 타이핑해주지 않았음. - props 설정하는 자식컴포넌트의 파라미터에는 {...변수 명}으로 작성하지 않았음. 해결 방법 Container(props를 내려주는 컴포넌트) - .. 2021. 7. 11.

[Vue] Virtiual DOM과 Vue 렌더링 원리 알아보기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. ✏️ [웹 렌더링 개념-1] DOM 이해하기 ✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정 👉 [Vue] Virtual DOM과 Vue 렌더링 원리 알아보기 이번 내용은 Vue가 브라우저에서 렌더링되는 원리를 알아보겠습니다. 그.. 2021. 6. 27.

티스토리툴바