전체 글

[Vue 2] vue-router 설정하기

안녕하세요! 혹시 저처럼 헤매시는 분이 있으실까봐 작성하는~ vue-router 설정법! 우선 vue2 버전이신 분들 그냥 npm i vue-router이라고 하면 오류가 나실수도 있는데 이때 해결 하시려면 router버전을 3으로 설정해주 셔야해요. 4는 vue3부터 지원이기때문에 에러가 납니다. 그래서 3버전으로 설치를 해주셔야 합니다. npm i --save vue-router@3 설치가 완료 되셨으면 src 폴더 안에 router 이라는 폴더를 하나 생성해 줍니다. 그리고 그 안에 index.js를 만들어 줍니다. vue router에는 모드가 2가지가 있는데요 1. history 모드 2. hash 모드 이렇게 있습니다. vue-cli로 router 까지 설정하고 실행시켜 보시면 가끔 url끝에..

그라데이션 설정법

css 그라데션 주는 방법! 그라데이션은 크게 3가지가 있습니다. 1. 선형(linear-gradient) 2. 방사형(radial-garadient) 3. 각진 원형(conic-garadient) 각 속성엔 색상의 제한은 없지만 적어도 두가지 색상은 넣어줘야합니다. 1. 선형 그라이데이션(linear-gradient) 선형 그라이데이션은 기본적으로 위에서 아래로 진행됩니다. 하지만 방향을 바꿔 줄수도 있습니다. 색상 앞에 작성해주면 됩니다. - 방향 전환 - 대각선 그라데이션 - 각도 사용 방향 전환 - to bottom(default) - to top - to left - to rignt 대각선 그라데이션 시작하는 방향이 아닌 그라이데션이 진행되는 방향입니다. - to bottom left - to ..

Input 안에 버튼 넣어 이쁘게 만들기

오늘은~ input 창안에 버튼을 넣어 이쁘게 보이게 하려고합니다! Vue를 이용해 제작하고 있습니다. 많은 헤딩끝에 원하는 디자인대로 만들어 낸 과정을 작성합니다! 급하신분들은 맨 밑 '최종_최종최최종 코드'를 확인해주세요~! 1차 시도 처음엔 input창안에 button을 넣어서 원하는 디자인을 만들려고 했습니다. //첫 코드 input 안에 button을 넣으려면 한번 감싸줘야합니다. 저는 label을 사용해 감싸줬습니다. label{ position:relative } button{ position:absolute left:7px; top: 4px; } 이렇게 작성 해주고 input창 그림자도 넣어주고 사이즈도 맞춰서 각종 브라우저에 테스트를 해보았는데 이상하게 버튼이 가운데에 있지않았습니다.(두..

[Vue 2] axios 모듈화 하기

모듈화를 하기위해서 많은 공부를 했고 얻은 정보를 정리하려고 합니다! 처음에는 대부분의 블로그들은 토큰 인증방식까지 정리가 되어있어서 처음에 모듈화를 하기위한 작업을 찾아보는것이 어려웠습니다. (글을 잘 못읽었거나..구글링을 못한것일지도..) 저는 단계별로 정리 하려고합니다! 또 promise, async/await의 차이점도 알아보려고 합니다! 혹시 axios 설치가 안되어 있으면 설치 해주세요! https://axios-http.com/kr/docs/intro 시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. ..

node.js, socket.io를 사용해서 그림판 업그레이드 하기

노마드 코더에 있는 강의[ZOOM 클론]를 보고 그림판을 업그레이드하면 재밋을것 같아 한번 도전해보려고합니다! 추가되는 기술로는 node.js, socket.io 입니다. 폴더 구조부터 정리해 줬습니다 Front -> public 폴더를 만들어주고 그안에 넣었습니다. back -> src 밑에 server.js를 만들어 줬습니다. 닉네임 설정 부분입니다. 완료 다음에도 입력한 닉네임을 사용하시겠습니까? 닉네임 없이도 방에 입장할 수 있습니다. 화면은 이렇게 구성해 줬습니다. 닉네임 입력창이 있고, submit은 버튼을 만들어 줬습니다. 또한 닉네임을 저장하고 싶은 사람이 있을수도 있으니 checkbox를 만들어 줘서 저장을 원하는지 물어보도록 하였습니다. //app.js const canvasSectio..

[Node.js] 정적 파일 경로 설정

그림판 업그레이드를 위해 작업을 하던중 백엔드 쪽을 node를 사용해 개발을 하고 있는데 url이 변경 되었을때 html 파일에 연결 해놨던 css,js 파일을 찾지못해 에러가 났습니다. app.use(express.static('public')); 위의 코드로 해결할수 있다고 되어있지만 이상하게 저는 계속 에러메세지가 나오더라구요. 왜안되지 하며 구글링만 20분 정도 한것 같네요..! 정답은.. 공식문서에 있었습니다. 공식문서 맨 밑에를 보면 그러나 express.static 함수에 제공되는 경로는 node 프로세스가 실행되는 디렉토리에 대해 상대적입니다. Express 앱을 다른 디렉토리에서 실행하는 경우에는 다음과 같이 제공하기 원하는 디렉토리의 절대 경로를 사용하는 것이 더 안전합니다. 라고 친절..

랜덤 색상 만들기

요즘 nodeJs를 배우면서 그림판을 업그레이드 하고싶은 욕구가 뿜뿜 하고있어서 리팩토링을 하고있는데 그전부터 오류가 있던 랜덤 색상을 고쳐보려고합니다. 이전 랜덤 색상 코드는 다음과 같았는데 brushColor = '#' + Math.round(Math.random() * 0xffffff).toString(16) 헥사코드로 바뀌면서 자릿수가 모자라 검은색 색상과, 경고메세지가 콘솔에 찍히곤 했었습니다. 저만 그런건가 싶긴 하지만 대부분의 블로그가 위와 같이 설명을 해주고있기에 저는 다른 방법으로 해결한것을 정리하려 합니다. * 랜덤 색상을 계속 누르게되면 위와같이 6자리가 아닌 헥사코드가 나오곤 했습니다. 그래서 처음엔 맨뒤에 0을 추가해줄까 했지만 근본적인 해결이 아닌것같아 다른 방법으로 해결해 줬습..

[HTML, CSS, JS] 크롭앱 만들기

이번에 노마드 코더에서 무료로 강의하고있는 크롬앱을 만들어 볼 예정입니다. 강의 내용을 다 듣고, 그대로 따라하는 것이 아닌 제가 필요한 기능을 만들어 보려고 해요! 우선 노마드코더 크롬앱에서 만든 기능은 크게 6가지 입니다. 1. 로그인 기능(이름을 입력하면 해당 입력창이 없어지면서 인사문구가 나옴) 2. 시계 기능 3. 배경화면 랜덤 4. 명언 랜덤 5. 위치에 따른 날씨 기능 6. 할일 리스트 그럼 저만의 크롬앱 만들기를 시작해 볼게요! 우선 로그인 기능은 넣어 보고 싶습니다. 완전한 로그인은 아니고 이름을 입력하면 그게 저장이되어서 화면에 표시되는 것이긴 하지만 그동안 로컬스토리지를 컨트롤 해보고 싶었기 때문에 좋은 경험이 될 것 같았습니다. 또 시계 기능도 넣고 싶었어요! 우선 두가지 기능 구현..