후니후니

✏️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를 사용해보자 2탄. 2탄에서는 라우팅에 대해서 알아보려고한다. Vue.js에서는 만약 localhost:8080/profile 로 가기 위해서는 Router를 등록하고, Router.js에 name, path, component 등을 추가해줘야 정상적으로 localhost:8080/profile로 접근할 수 있다. Nuxt.js에서는 어떻게 해줘야 할까? 위의 번거로운 과정이 모두 사라졌다. pages 폴더에 profile.vue를 생성해주면 끝. 정말 끝..? profile.vue를 추가해주고 localhost:3000/profile로 접속하면? 짠. 정상적으로 접근도 되고 데이터도 확인할 수 있다. .nuxt 폴더에 route에 보면 자동으로 nuxt가 라우터에 추가해줬다. 이렇게 편리해..

✏️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.. 등등을 선택하..

✏️React를 경험해보자 1탄 신입 시절, 아니 신입도 아닌 취준생 시절.... 자바스크립트 프레임워크/라이브러리는 Vue.js, Angular.js, React.js 등이 있다는 정도만 아는 상태로 취업을 해버렸다. 취업하고 나니 실무 프로젝트에서는 Vue.js를 사용한다고 하여 몇개월동안 죽어라 Vue.js만 공부하고, 일을 하다 보니 벌써 Vue.js를 사용한지는 1년이 다 되어간다. Vue.js 3이 은근 인기가 있는 것 같은데, 요즘 채용 공고들을 보면 React.js 사용을 하는 회사들이 Vue.js를 사용하는 곳보다 훨씬 많다는 것을 정말 알게되었다. Vue.js도 참 좋은데... Vue.js 밖에 안 써봐서 뭐라 설명할 수가 없네... 그래서...!! React를 공부하려고한다! 우선, ..

✏️ 1.HTTP란 무엇일까? 페이지 URL을 보면, http, 혹은 https로 시작하는 것을 볼 수 있다. 무슨 차이가 있을까? 프론트엔드 개발자라면 알아야 할 지식이라 생각이 돼서, 한번 알아보게 되었다! HTTP가 어떤 용어인지부터 살펴보자면, HTTP는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)이다. 장황하다. 가슴에 비수가 날아와 꽂힌다.(죄송합니다) Hypertext부터 어떤 뜻인지 알아보자. Hyper는 뛰어넘다, 초월하다 등의 뜻을 가지고 있다. text는 문서라는 뜻으로 생각할 수 있을 것 같다. 초월한, 뛰어넘는 문서? 유연하게 생각해보면 문서를 뛰어넘다. 다른 문서로 간다! 다른 문서로 순식간에 접근을 한다! 라는 뜻으로 생각해볼 수 있지 않을..

✏️ 1. Cypress 사용을 고려하게 된 이유. ✏️ 2. Cypress 초보자는 설치부터 해보자. ✏️ 3. 설치 후 맛만 보자. 1. Cypress 사용을 고려하게 된 이유. 테스트 코드를 작성해본적은 거의 없다. TDD 관련 동영상을 보고 토이 프로젝트에서 Jest를 간단하게 사용해봤지만, 실무에 어떻게 적용을 해야 할지 감이 잡히지 않았고, 그래서 자연스럽게 테스트 코드에서 관심이 멀어지게 되었다. 그러던 어느 날, 실무에 테스트 코드를 적용해야 하는 날이 왔고, 이제부터라도 익숙해지기 위해서 Cypress를 시작하려한다. Cypress를 동료가 추천해주기도 했고, 테스트를 하기 적합하다고 해서 Cypress를 선택했다. 2. Cypress 초보자는 설치부터 해보자. Cypress는 문서가 굉..

백엔드 프론트엔드의 기본 설정 등 완료하고, 서버에서 프론트엔드 기술들의 이미지와 이름을 API 응답으로 받아서 화면에 뿌려주는 작업을 진행했다. 어떤 식의 포트폴리오를 만들어볼까 고민하다가, 포트폴리오를 하나의 홈페이지처럼 만들어보기로 했다. 뭔가 포트폴리오가 아닌 정말 내가 운영하고 서비스하는 페이지의 느낌? 을 생각했다. 인터렉티브하게 만들기 위해서 랜딩페이지를 먼저 구현 작업을 시작했고, 처음에는 전체에 프론트엔드 기술들의 아이콘이 둥둥 떠다니고 마우스 위치에 따라서 조금씩 이동하거나 360도 회전하는 등의 효과를 생각했는데, 막상 테스트해보니 이쁜 것 같지도 않고 사방 팔방 정신이 없어보여서 갈아엎었다. 기술들의 아이콘이 모여 동그라미를 그리고, 일정한 속도로 회전하도록 구현했다. CSS로도 가..

저번에는 프록시 설정까지 진행했다. 이번에는 화면에 보여줄 문구와, 이미지를 프론트에서 올리는 게 아닌 s3서버 url로 뿌려주기 위해 Json 파일을 백엔드 프로젝트에서 생성했고, 프론트에서 API 호출을 했을 때 데이터를 가져와 Vuex 스토어에 값을 저장하도록 했다. import skils from 'skils.json' router.get('/', (req, res, next) => { res.send(skils); }); // Node.js 일부 코드 지정한 주소에 get을 호출하면 json 파일을 내려주도록 코드를 작성했고, 프론트에서는 Axios를 통해 API를 호출 할 수 있도록 설정해줬다. 그 전에 미리 스토어도 사용할 수 있도록 Vuex 설치와 셋팅은 모두 해둔 상태다. 언제나 처음 셋..

공부할 때 인강을 듣거나 주로 책을 보면서 토이 프로젝트를 했었다. 결국 누군가의 코드를 쓰는 것이다 보니, 나만의 프로젝트를 오랜만에 다시 시작해볼까 한다. 지금까지 포트폴리오를 2개 만들었는데, 첫 번째는 학원을 다니며 만든 퍼블리싱 포트폴리오고, 두 번째는 자바스크립트 프레임워크 (Vue.js)를 이용하여 만든 프론트엔드 포트폴리오였다. 퍼블리싱 포트폴리오는 다양한 애니메이션을 많이 추가하여 인터렉티브하게 제작했고, 프론트엔드 포트폴리오는 정적이고, Vue에서 지원하는 기능들을 많이 사용하여 제작했다. 세 번째 포트폴리오는 Vue.js와 Express를 이용하고, 동적 효과등을 이용하여 포트폴리오 최종본을 만들어볼까 한다. (지금까지 만든 포트폴리오는 사실 100% 만족하여 만들지 못 했기에...)..

#Vuex 큰 프로젝트에서 회원가입처럼 특정 상황에서만 접속하고 평소에는 들어가지 않는 페이지에서 기본적으로 Store를 호출할 필요가 있을까? 그럴 필요가 없다고 생각된다. Vue에서는 registerModule, unregisterModule를 통해 동적으로 스토어를 생성하고 삭제시킬 수 있다. 회원가입의 큰 상위 컴포넌트에서 동적으로 스토어를 생성해주고, 회원가입이 완료되면 Store를 삭제해줌으로써 불필요한 자원을 아낄 수 있다.