spa 환경에서 간단히 ssr 구현해서 멀티페이지 어플리케이션 만큼 검색엔진 최적화 대응하고 퍼포먼스까지 향상시켜줌 이게 넥스트의 장점임pre-render로 더 좋은 퍼포먼스 가능검색엔진 최적화 (SEO)렌더에 크게 두개있음정적 생서버사이드 렌더링차이점? => html

코어 자바스크립트란 책을 읽으면서 스스로 정리한 내용입니다혹시 잘못된 내용이 있으면 수정하겠습니다.우선 nullrhk undefined 모두 자바스크립트에서 "없음"을 나타내는 값이다. 물론 당연한 말이지만 두개의 차이점이있고 그에 따라 사용하는 목적이 달라진다.und

코어 자바스크립트란 책을 읽으면서 스스로 정리한 내용입니다혹시 잘못된 내용이 있으면 수정하겠습니다.복사면 복사지 얕은 복사는 뭐고 깊은 복사는 무엇일까?우선 얕은 복사는 바로 아래 단계의 값만 복사고 깊은 복사는 내부 모든 값을 하나하나 찾아내어 전부 복사한다는 것이

코어 자바스크립트란 책을 읽으면서 스스로 정리한 내용입니다혹시 잘못된 내용이 있으면 수정하겠습니다.👍 배우는 이유? 자바스크립트가 데이터 처리 과정을 보고 기본형과 참조형이 왜 다르게 동작하는지를 이해하여 활용하기 위해 배운다.데이터 타입의 종류우리가 javascri

위코드가 11월에 시작한 3개월이란 위코드가 벌써 다음주 금요일이면 수료식이다.진짜 시간이 어떻게 가는건지 모르고 매일 행복하게 동기들과 코딩을 배우다 보니 벌써 수료를 코앞에 둔 15기가 되었다.정말 많은걸 배우고 좋은 사람을 많이 만나고 힘들었지만 정말 즐거웠던 위

bbs/user data => realtime databaseC.R.U.D => firestore이렇게 첫번째 미션을 받고 전의 velog에 정리를 하였다.2번째 미션으로는라이브러리를 사용해서 테이블 excel로 출력하기이미지 업로드(firestore) 입니다.처음엔

지금까지 만든 페이지를 바탕으로 firestore를 이용해서 CRUD기능을 넣은 페이지를 구현해 보았다.결과물은 위와 같으며 신청하기 버튼을 누르면 모달창이 나오게되고그 모달창에서 값을 입력하면 테이블에 실시간 추가되며 새로고침을 하지 않아도 추가되며 Edit버튼에서

firebase의 데이터베이스에는 크게 두개가있다.하나는 realtime database이고하나는 firestore입니다.이번에 firestore를 이용해보았습니다.위의 코드에서처럼 하면 원하는 데이터 테이블에 내가 추가를 했으면 하는 값들을 설정해 줌으로 데이터를 추

Google Login >이번에 템플릿을 사용하면서 구글로그인 그리고 이메일 로그인을 해보게되었다. 하지만 템플릿에는 이미 구글로그인 그리고 이메일 로그인 관련된 로직들이 다 짜여져 있었다. 하지만 원리는 알고 싶어서 개인적 공부를 하면서 알게된점을 남겨보려 합니다.

👍장점가독성이 높고 직관적이다.ReactJS와 유사한 성능을 보여준다빌드 시스템, 라우팅, 상태관리를 공식적으로 지원해서 안정적 환경구축 가능Vuex는 Vue.js만큼이나 매우 쉽고 코드도 간결해서 vue.js의 장점이다.결론 👉 더 빠르다, 더 유연하다, 더 가볍

npm install axiosnpm install -g @vue/cli하지만.. 한번에 되면 너무 낭만적이겠죠?주변 동기분들은 이 명령어 하나로 쉽게 설치되고 화면 띄우는데 얼마 안걸렸는데 저는 하루 꼬박걸렸습니다.zsh: vue not found라고 계속 커맨드창에

상위 컴포넌트 ---> 하위 컴포넌트props 전달하위 컴포넌트 ---> 상위 컴포넌트event 발생props속성은 컴포넌트 간에 데이터를 전달 할 수 있는 컴포넌트 통신법이다.props속성을 기억할 때 상위 컴포넌트에서 하위 컴포넌트로 내려주는 속성이라 기억하자pro

Vue 기본 구조 > instance 속성 , API들 > >- el:인스턴스가 그려지는 화면의 시작점 template: 화면에 표시할 요소(html,css등) data: vue의 반응성이 반영된 데이터 속성 methods: 화면의 동작과 이벤트로 로직을 제어하는

이번 프로젝트에서 마지막날 급하게 만들어낸 페이지인 액티비티 페이지...여기서 기능은 페이지네이션/필터링된 데이터 각각받아오기였다.우선 limit을 20을 줘서 각각의 페이지에서 20개의 상품 카드가 나오게 설정하였다처음에는 const userOrder, setUser

바로 코드를 보자!우선 핸드폰 번호를 백엔드에 전송해줘야한다핸드폰번호와 문자가 일치하는지 확인을 위해서 백엔드와 통신하여나의 휴대폰 번호 그리고 sms번호를 백엔드에 보내준다그리고 만약 인증번호가 일치하면 성공 메세지를 받게되어 문자인증을 성공한다.최종적으로 지금까지

링크텍스트클론코딩 동영상 녹화FRONT-END(react)김영재, 김규빈FRONT-END(react-native)박채훈, 한준희BACK-END김원희(PM), 이현주우선 웹페이지 프론트엔드 개발자로 저와 규빈님 딱 둘인점에서 살짝 걱정은 됬지만 오히려 둘이서 하다보니 정

promise chaning을 계속하다보면 코드 가독성이 떨어짐async & await는 promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어주는 APIasync와 await는 새로운 것이 추가된것이 아니라 기존에 존재하는 promise위에 조금더 간

2차 프로젝트가 시작되면서 함수형 컴퍼넌트 클래스형 컴퍼넌트 두개중 하나를 사용하라했다.저는 이번에 함수형 컴퍼넌트에 대해서 공부할 수 있는 좋은기회라 생각됬기 때문에 이번프로젝트는 함수형으로 진행하기로 하였다.2019년도 부터 리액트 훅(hook)을 지원하게 되었다.

주말간 푹 쉬면서 했던 내용 복습을 하다보니 어느덧 2차 프로젝트를 시작하게되었다.1차때 프로젝트를 하면서 전보다 코드의 질도 높아졌으면 좋겠고 조금더 다양한 페이지를 맡아서 해보고 싶었다.그리고 2차때는 여러 기능을 다뤄보면서 로직을 짜는 전반적인 틀을 잡아야겠다

이번 velog또한 1차 프로젝트를 하면서 너무 많이 쓰이고 너무 중요하지만 생각보다 개념이 간단한 것중 map과 reduce를 뽑을것 같다.그러한 이유로 이번에는 map과 reduce를 자세히 알아보려고 한다.map이란 함수는 간단히 설명하면 반복문을 돌면서 배열안에