🗝️소프트웨어

[css3] text-overflow - 넘치는 텍스트 블러 처리하기

text-overflow 텍스트 오버플로우는 white-space를 이용하여 줄 바꿈을 하지 않고도 한줄로 텍스트를 처리하게 하는 속성인데, over-flow가 발생하도록 강제하지 않아서 긴 줄의 텍스트가 넘어가는 것을 방지할때 사용하기 좋은 속성이다. 굳이 해당 컨텐츠에 모든 내용을 다 보여줄 필요가 없고, 다른 컨텐츠들도 같이 병행적으로 보여줘야 하는 경우가 생길때, 사용하기 좋은 옵션이다. 혼자만 사용할 수는 없고, overflow 속성이 hidden, scroll, auto 로 놓고서 whitespace 가 nowrap인 경우에 사용이 가능하다. 즉, 3가지 속성을 한번에 같이 쓴다고 생각하면 편하다. 이렇게. white-space: nowrap; overflow: hidden; text-over..

비동기 API 처리

비동기 처리를 위해서 axios 를 사용했다. 그렇다면 비동기 처리는 무엇인가? - 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 처리 방법 대표적인 예로, 물건을 여러건 배송보내는 것을 생각하면 쉽다. 순서에 상관없이 여러 목적지에 보내도 알아서 배송 프로세스 따라서 물품 배송이 멈추지 않고 진행된다. axios는 무엇인가? - axios 라이브러르에서 사용하는 Promose 객체에 대해서 먼저 살펴보도록 하자. - 비동기 작업이 하게 되면 결과가 어쨋든 성공이거나 실패 아니면 둘도 아닌 진행중인 상태가 있을 것이다. - 그래서 다음 3가지 결과에 대해서, 성공 했을때는 어떤 행동을 하고, - 실패를 했을때에는 어떤 행동을 해야하는지를 정해놓은게 ..

[webpack-dev-server] 코드 변경사항 바로 반영(js)

드디어 webpack.config.js 파일에 코드를 추가해서, 매번 빌드하지 않고도 빠르게 개발하는 방법을 터득했다. 새로고침해도 변경이 안되었는데, 하루 고민하고 방법 터득했다!! [webpack-dev-server] Hot Module Replacement enabled. log.js:1 [webpack-dev-server] Live Reloading enabled. log.js:1 [webpack-dev-server] App hot update... 참고로 이렇게 뜨면 성공한건데, 맨처음에 콘솔창에, 이렇게만 뜨고 핫리로딩이 안되는 경우가 존재하는데, 설정 값을 변경해주면 된다. [webpack-dev-server] Hot Module Replacement enabled. log.js:1 [web..

[Node.js] express 와 cors 사용해서 API 만들기

npm 에 cors 와 express 를 설치해서, 간단한 API를 만들어봤습니다. cors 는 프론트에서 서버에서 제공한 API로 요청을 보낼 때, 발생하는 에러에 대해서 해결하는 방법이다. Cross Origin Resource Sharing 이와 관련된 자세한 설명은, 아래 링크에 첨부되어 있으니 해당 블로그에 접속해서 읽어보면 큰 도움이 될 것이다. https://bohyeon-n.github.io/deploy/web/cors.html CORS란? CORS를 해결해보자 | 구보현 블로그 CORS란? CORS를 해결해보자 20200522 프로젝트를 하면서 프론트에서 서버에서 제공한 API로 요청하자, CORS 에러가 발생했다. 지금까지 CORS에러를 해결하기만 하고 정확히 CORS가 무엇이고 어떻게..

[Vue.js] 조건부 렌더링과 버튼 활성화하기

v-show 조건부 디렉티브를 이용하여, vue 에서 페이지가 번호가 1을 벗어나면, 해당 설정 버튼 값을 제어하지 못하도록 하려고 한다. v-show는 조건부 디렉티브로서, 반환 값이 true와 false 값을 가진다. 다른 값은 들어갈 수 없다. true : 화면이 보여짐 false: 화면이 안보임 *하지만, 개발자 모드로 보면, 버튼이 삭제되지 않는 것을 확인할 수 있다. 대신, 값이 false가 되면, span 태그 위에 있는 ::before 이 사라진다. 사용전 사용후 처음에, this 를 잘 못 사용해서 계속 버튼이 활성화가 안되었는데, 이유를 알았다. 사실, Vue.js 에서는 조건문을 이용하여 조건부 렌더링을 할 수 있다. v-if, v-else, v-else-if 구문이 있다. 하지만, ..

[Vue.js] props 이용하기

vue의 문법을 익히려면 여러가지 유스케이스를 직접 다뤄봐야 한다. props를 이용하여, 자식 컴포넌트의 구조를 재활용이 가능한 구조를 보이고, 속성을 어떤식으로 보내는지 살펴보는게 이번 글에서의 핵심이다. 또한 부모 컴포넌트에서는 자기 데이터를 어떤식으로 바인딩하는지 :(콜론) 을 어떻게 사용하는지 확인해보자. App.vue 1. 컴포넌트 파일을 불러올때는 import / from 을 활용하도록 한다. 2. 내부적으로 사용하려는 데이터는 data 안에 넣어두고, :color 이런식으로 바인딩해서 사용하도록 한다. import MyBtn1 from './components/MyBtn1.vue' export default { components: { MyBtn1 }, data () { return { c..

npx, npm의 차이와 vscode 실행 방법

1. npx 와 npm npx로 프로젝트 다운받기 📌 버전 관리가 없는 새로운 프로젝트를 다운로드 받는 것과 같음 npx degit 계정이름/저장소이름 다운받을경로 $ npx degit ParkYoungWoong/webpack-template-basic vue3-webpack-template - npx : degit을 설치하지 않고도 사용할 수 있는 nodejs명령어 npx - degit : 원격저장소 github에 있는 특정 저장소를 현재 로컬 경로에 다운로드 참고로 npx란 npx는 새로운 패키지 관리 모듈이 아님!! 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구 npm과 비교대상이 아닌 npm을 좀 더 편하게 사용하기 위해서 np..

[Vue.js]특정 데이터들의 값들을 하이라이팅 할 수는 없을까?

현업에서 진행중인 프로젝트에서 Vue를 활용하여 Front 단을 구축하는데, 다음과 같은 화면에서 공급자명, 전자세금계산서승인번호, 사업자번호, 공급가액, 세액 등은 API를 활용해서 데이터를 받아오고 있는 상황이다. 그리고 증빙일, 전기일, 지급예정일 등은 데이터 값을 사용자 기준 날짜를 계산하여, 자동으로 기입되며, 다음과 같이 Edit 할 수 있게 구성되어져 있다. 그리고 적요, 의견, PO번호, 계좌번호 등은 사용자가 값을 세팅할 수 있게, 자유도를 높여 놓았다. 하지만, 여기서 Vue가 익숙하지 않아서, 머리속에 생각나는 기능은 있지만 아직 구현을 하지 못한게 존재한다. 바로 증빙일, 전기일, 지급예정일 같은 날짜는 자동으로 입력되는 값인데, 사용자가 변경할 수 있는 값인데도 불구하고, 일반 값..

자바스크립트에서 화살표를 사용하는 이유

데이터의 수가 길어지는 경우, find 를 통해서 특정 key 값에서의 value 를 찾아봐야할 때가 존재한다. 그때, function 을 사용한 경우와 화살표 함수만 사용한 경우가 있다. 사용하는 방법을 잘 보면, 왜 화살표 함수가 편하지 알 것이다. const settingState = [ { "engname": "template_name", "korname": "탬플릿 이름", "value": "테스트 템플릿 1" }, { "engname": "toffice_id", "korname": "Toffice 아이디", "value": "22019" }, { "engname": "toffice_password", "korname": "Toffice 비밀번호", "value": "22019" }, { "en..

[자바스크립트] Math 함수 이용하여 로또 번호 생성하기

랜덤 숫자를 이용하여, 가볍게 로또 번호를 만드려고 한다. 조건은 1. Math.random() 이용하기 2. 반올림, 올림, 내림을 최소 1번 이상 사용하기 3. switch 문 1번 이상 사용하기 4. 최대, 최소값을 입력값으로 받는 함수 사용하기 5. 함수값은 객체 타입으로 반환하기 6. 결과값은 배열로 보이기 7. 자바스크립트 console 로 보이고, html 에서 h1 태그로 해당 값들을 보이기 등이다. 알아야할 개념으로는 1. 자바스크립트 객체를 배열로 전환하는 방법 2. html 에 js 데이터 값 보이는 방법 로또 번호의 경우 1부터 45까지 있으며, 중복을 허락하지 않는 조건이 있다는 전제하에 코드를 작성하도록 한다. 코드가 긴데, 생각나는데로 하다보니, 리팩토링이 필요한 부분이 보이긴..