후니후니

최신 문법인 Optional chaining과 Nullish coalescing을 알아보자! 사실 잘 사용하진 않는데, 알아두면 유용한 문법인 것 같다. Optional chaining부터 알아보자. const test = { a: { b: 'Optional chaining' } } 위와 같은 객체가 있다고 하자. 해당 객체가 지금은 값이 있지만, 기본 값이 빈 객체이고, 서버에서 응답이 내려와 객체의 값을 채우기 전에 아래와 같이 test.a.b로 접근한다면 에러가 발생할 것이다. test는 빈 객체고, 빈 객체에서 a를 호출하는 건 undefined가 나오겠지만, undefined에서 없는 b를 호출해버리니 'Cannot read property 'c' of undefined' 에러가 발생하는 것이다..

✏️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..

✏️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 단어를 검색했을 때 나오는 뜻은 "대리, 대리..

✏️React를 경험해보자 2탄 1편에서는 간단하게 React 설치에 대해 작성을 해봤다. 이번 편에서는 라우트와, Axios를 경험(사용)해보려고 한다. - 라우트 사용을 위해 react-router-dom 을 설치해보자 npm install react-router-dom --save 설치가 완료되었다면, App.js에 react-router-dom을 import하고, 라우팅할 컴포넌트도 같이 import 해준다. import React from "react"; import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/Landi..

✏️Nuxt를 사용해보자 1탄. 현재 진행 중인 프로젝트 특정 페이지에 SSR(SEO 고려로 인한)로 새로 페이지를 제작할 일이 생겨 Nuxt.js를 사용하게 되었다. Vue.js를 그동안 사용해왔지만 Nuxt.js는 이전에 잠깐 맛보기만 했지 제대로 사용해본 적이 없어서 공식 문서를 기반으로 Nuxt.js를 경험해보려고 한다. - Nuxt를 설치해보자 터미널에 명령어를 입력하여 간단하게 Nuxt를 설치할 수 있다. Vue Cli처럼 쉽게 시작할 수 있도록 거의 셋팅을 해준다. npx create-app-nuxt "Project name" 위 명령어로 설치가 가능하고, 설치 전에 여러 옵션을 선택할 수 있다! UI 프레임워크, 서버 프레임워크, Eslint, Prettier, Axios.. 등등을 선택하..