후니후니

✏️SVG를 이용한 애니메이션 효과를 알아보자 보통, 로딩바 같은 경우 동그라미가 계속 돌아가는 형태를 많이 쓰기 때문에 쉽게 볼 수 있다. HTML,CSS로만 저걸 구현할 수 있나? 생각을 하다, SVG로 구현을 할 수 있다는 것을 알게 되었다. 우선 HTML을 보자. svg 태그 안에 circle 태그를 생성하고, cx 50%, cy 50%, r 25로 설정해준다. cx, cy는 중심점이고, r은 반지름으로 25일 경우 50 크기인 circle이 생긴다. 위의 html이라면, 위처럼 동그란 검은 공이 하나 생긴다. 로딩 애니메이션이라면, 가운데는 비어야 하고, 테두리만 있어야 하는데, 이는 CSS로 설정해줄 수 있다. fill: transparent; stroke: blue; stroke-width:..

✏️Nuxt에 빌드/배포 분기를 여러곳으로 나눠보자. 실무에서는 여러 개발자가 함께 개발하기 때문에 코드를 합쳐야 하는 순간이 온다. 내가 있는 곳은 각각 개발한 코드를 합쳐서 테스트 해볼 수 있는 개발 서버와, 실제 배포되는 리얼 서버와 동일한 환경에서, 실제 서버에 배포 나가기 직전에 테스트를 진행해볼 수 있는 스테이징 서버, 그리고 실제 유저가 사용하는 리얼 서버로 운영이 되고있다. 이를 위해 환경 변수를 development, stage, production에 맞춰서 따로 처리를 해줘야 하는데, 넉스트에 적용해야 되기도 하고, 알아보는 과정에서 많이 헤맸기 때문에 (Nuxt는 문서가 잘 정리되어 있긴 한데...) 다른 분들도 혹시 나와 같은 상황에 겪지 않도록 오늘 헤맸던 내용을 공유해보려고 한다..

✏️Nuxt에 vee-validation을 적용해보자. Nuxt 프로젝트에 로그인 기능을 추가할 일이 생겼고, 로그인하면 또 검증 로직을 실행해줘야 하기 때문에 vee-validation을 이용하여 검증을 하려고 한다! 현재 프로젝트에서는 vee-validation 2버전대로 사용 중이라서, 현재 3버전대와는 조금 차이가 있어서 새로 조사를 하게 됐다. 가이드 글이 잘 되어 있긴 하지만 영어라서.. 한글로 정리된 글은 별로 없어서 아쉬웠다. Next말고 Nuxt라서 인기가 없나... 우선 vee-validation을 설치해보자. npm install vee-validate --save 설치 후 플러그인으로 사용하기 위해 plugins 폴더에 validation.js 파일을 생성하자. // plugins/..

✏️React를 경험해보자 6탄 Redux의 흐름부터 파악을 해야 할 것 같다. 저번에 createStoreWithMiddleware 함수를 통해 store를 생성했고, reducer라는 인자를 넘겨주었다. // user_reducer.js import { LOGIN_USER } from "../_actions/types"; export default function (state = {}, action) { switch (action.type) { case LOGIN_USER: return { ...state, loginSuccess: action.payload }; default: return state; } } // reducers/index.js import { combineReducers } fr..

✏️React를 경험해보자 5탄 4탄에서 Provider를 통해 App에서 Store 접근을 할 수 있게 만들었다. 5탄에서는 리덕스를 이용해서 로그인 기능을 만들어보려고 한다. import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { loginUser } from "../_actions/user_action"; function LoginPage(props) { const dispatch = useDispatch(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const onEmailHa..

✏️브라우저가 렌더링되는 과정을 알아보자. 브라우저는 어떻게 동작할까? 주소창에 주소를 치면 주소에 따른 웹사이트가 표시된다. 관심갖고 보지 않았던 부분이라 그 동안은 그냥 어떻게 잘 되나보다~ 라고 생각했는데, 요즘 그 과정이 궁금해져서 한번 정보를 검색해보았다. 우선 사용자가 주소를 입력하면, 해당 URI를 가진 서버에 자원을 요청하고, 받아온 자원 (HTML,CSS등) 을 해석하여 윈도우에 렌더링해주게된다. HTML 문서를 받아서 Document Object Model, DOM Tree를 만들고, CSS는 CSS Object Model로 만들어진다. 그렇게 만들어진 두 개의 Object Model은 결합되어 Render Tree를 생성한다. Render Tree의 노드들이 화면에 어디에 위치할지 계..

✏️React를 경험해보자 4탄 3편에서는 Proxy 설정을 통해 Cors 문제를 해결했다. 4편에서는 node.js (server)와 react (client) 서버를 동시에 실행할 수 있는 Concurrently, 상태관리 라이브러리인 Redux를 적용해볼까 한다. - 서버와 클라이언트를 동시에 실행할 수 있는 Concurrently Backend + Frontend를 같이 사용하는 프로젝트를 하다보면, 둘 다 서버를 켜줘야 한다. 매번 귀찮게 두번 명령어를 입력할 필요 없이, 한번의 명령어로 두개의 서버를 켜주는 착한 라이브러리이다. www.npmjs.com/package/concurrently concurrently Run commands concurrently www.npmjs.com npm i..

✏️Nuxt를 사용해보자 3탄. Nuxt를 사용하는 이유는 seo (검색엔진최적화) 때문이다. 이번 편에서는 seo와 비동기 데이터 처리에 대해 알아보려고 한다. SEO를 위한 Meta Tag 설정하기 nuxt.config.js 위 파일을 보면 상단에 head라는 영역이 있고, 그 안에 title과 meta 태그가 있다. export default { head: { title: 'nuxt.js', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'og:description', content: '소개 문구', }, { name:..

✏️Gulp.js를 통해 이미지를 압축해보자. 평소에는 S3 서버에서 이미지 url을 가져와 노출해줬는데, Front assets에 이미지를 저장하고 사용해야 할 프로젝트가 생겨서 관련 기술을 조사해보다 Gulp.js를 찾게됐다. 여러모로 정보를 찾아보니, imagemin이라는 플러그인을 통해서 이미지를 압축할 수 있는 방법이 있다는 걸 알았다. 우선, Gulp.js 를 설치해야 한다. npm install gulp -g npm install gulp --save-dev npm i gulp-imagemin --save-dev -g를 통해 전역으로 설정해야 gulp 라는 명령어를 사용할 수 있다. 설치 후 root 디렉토리에 gulpfile.js 라는 파일을 만들고 아래와 같이 작성한다. const gul..

✏️React를 경험해보자 3탄 2편에서 Axios를 통해 get을 호출했는데 Cors에러가 발생해서 API호출에 성공하지 못했다. 3편에서는 이처럼 Cors 에러를 해결할 수 있는 Proxy 설정을 하려고 한다. - Cors?? 우선 Cors에러가 발생하는 이유는, 다음과 같다. Front서버는 localhost:3000 포트를 사용 중이고, Backend는 localhost:5000 포트를 사용중이다. 이처럼 다른 포트를 사용중일 때, 보안 상의 이유로 Cross Origin Resource Sharing 에러가 발생한다. 이 문제를 해결할 수 있는 방법은 여러가지가 있지만, 나는 Proxy를 통해 해결하려고 한다. - Proxy ?? 네이버에 Proxy 단어를 검색했을 때 나오는 뜻은 "대리, 대리..