허도경, limewhale

TL;DR😄 리액트나 Vue를 이용해서 개발을 하게 될 때 React와 Vue모두 각각의 라이프사이클(생명주기)이 있습니다. '라이프사이클(생명주기)'라는 말을 처음 접하는 분이라면 라이프사이클이라는 말이 막연하게 느껴질 수 있는데 이 부분은 아래 글을 읽으면 자연스럽게 이해할 수 있습니다. 리액트에서 라이프사이클의 개념은 클래스 컴포넌트를 사용할 때 명확히 사용되는 부분인데 React 16.8 이후 리액트 훅(함수형 컴포넌트)의 개념이 등장하면서 생명주기의 개념도 이전처럼 명확하게 구분되어 사용되진 않습니다. 그럼에도 우리는 리액트의 라이프사이클을 알아야 합니다. 아직 React에서는 공식적으로 클래스 컴포넌트와 함수형 컴포넌트 모두 지원을 할 것이라고 발표했고 이전에 작성된 코드들은 대부분 다 클래스..

TL;DR😄 watch와 computed 모두 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나는지 감시하고 변경이 될 때마다 정의된 함수가 실행됩니다. computed는 기존에 정의된 데이터 값을 기반으로 새로운 데이터 값을 활용하기 위해 사용합니다. 정의된 데이터 값을 바탕으로 새로운 데이터 값을 생성하고 새로운 데이터 값에서 참조하고 있는 기존 데이터 값의 변경을 감지합니다. 그리고 참조하고 있는 데이터 값의 변경과 상관없이 최초에 computed에 정의된 데이터 함수를 실행합니다. watch는 watch에 정의된 데이터 값 하나만을 감시하기 위해 사용합니다. 또한 computed와 다르게 실제 데이터 변경이 일어나기 전까지는 실행되지 않습니다.(초기에 할당된 값에 변경이 일어나야만 watch..

React, Vue 모두 CLI(command-line interface)를 통해 신규 프로젝트를 생성할 수 있게 제공하고 있습니다. vue 역시 CLI를 통해 프로젝트를 설치하기 위해선 아래의 명령어를 터미널에 입력하면 CLI를 통해 프로젝트를 설치할 수 있습니다. 💡 CLI 설정하기 ✔ Install npm install -g @vue/cli # OR yarn global add @vue/cli ✔ Create a project vue create my-project # OR vue ui 👍 프로젝트 설치 정상적으로 프로젝트를 설치하면 'default'와 'Manully' 옵션이 있는데 이 중 Manully 옵션을 선택하여 들어가게 되면 Vue에서 우리가 원하는 옵션을 선택하여 설치할 수 있습니다. ..

Api를 통해서 받아온 사용자의 데이터를 노출할 때 정보보호를 위해 특정 데이터는 전체를 보여주지 않고 일부를 가려서(Masking) 보여줘야 하는 경우가 발생합니다. 가장 좋은 방법은 Back-End서버에서 데이터가 가공처리되어 전달하고 Front에서는 전달받은 데이터를 화면에 그대로 노출시켜 주는 게 가장 좋은 방법이지만 상황에 따라서 Front에서 데이터를 가공해야 할 경우도 발생합니다. 이럴 때 공통 마스킹 Function을 만들어서 사용하면 굉장히 유용하게 사용할 수 있습니다. 💡 마스킹 처리 함수 /******************************************** * 공통 마스킹 * checkNull : 데이터 Check => 공백 | undefined | null * * ※) ..

페이지를 이동하기 위해선 html에 A태그(anchor)를 이용하여 페이지를 이동합니다. 이 때 자신의 사이트에서 타 사이트로 이동시에는 주로 현재 보고 있는 브라우저가 아닌 새 창으로 이동을 하게 되는데요. 이는 여러 문제를 발생시킵니다. 여러분이 자주 방문하는 웹사이트에 접속하여 개발자 도구를 한 번 켜서 HTML 요소 검사기에서 하이퍼링크(, 앵커 태그)들을 한 번 살펴보세요. 맥용 크롬 개발자 도구 단축키 : Option - Command - i 윈도우용 크롬 개발자 도구 단축키 : F12 위의 이미지를 보면 왼쪽은 노션, 오른쪽은 디스커스(Disqus). 일부 웹 앱의 하이퍼링크에는 rel 속성의 값으로서 noopener, noreferrer, nofollow의 속성이 적용되어 있는 것을 알 수..

React Router Dom의 버전이 V6로 변경되면서 이전에 사용되던 Hooks나 기능들이 변경되었습니다. 보다 자세한 내용은 역시 공식문서를 확인하는 게 가장 좋지만 프로젝트를 진행하면서 바로 동작이 가능하려면 우선 무엇이 변경되었는지 알아야 하겠죠? 이번에 정리를 통해 알아보도록 할게요! 출바알!🎶 👍 React v16.8 React Router v6은 React Hook을 많이 사용하므로 React Router v6으로 업그레이드를 시도하기 전에 React 16.8 이상에 있어야 합니다. 좋은 소식은 React Router v5가 React >= 15와 호환된다는 것입니다. 따라서 v5(또는 v4)를 사용 중이라면 라우터 코드를 건드리지 않고도 React를 업그레이드할 수 있어야 합니다. 만약 ..

이번 포스팅에서는 웹 개발자라면 한 번쯤은 얻어맞아 봤을 법한 CORS(Cross-Origin Resource Sharing) 정책에 대한 이야기를 해보려고 합니다. 사실 웹 개발을 하다 보면 CORS 정책 위반으로 인해 에러가 발생하는 상황은 굉장히 흔해서 누구나 한 번 정도는 겪게 된다고 해도 과언이 아닙니다. 나는 단순히 Api에 데이터를 요처했을 뿐인데 돌아오는 건 데이터가 아닌 빨간 에러일 때.... 😱😱😱😱 그래서 이게 대체 무슨 에러냐고? 바로 CORS 정책을 위반해서 나온 에러라고! 그렇다면 CORS 정책이 대체 뭐길래???? 💡 CORS에 대한 기본적인 내용 우리가 겪는 CORS 관련 이슈는 모두 CORS 정책을 위반했기 때문에 발생하는 것입니다. 개발하는 입장에서는 저 정책 때문에 신경..

자바스크립트 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생하게 되는데 이러한 문제를 대비해서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 적용하였습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화했을 때만 이 변경사항이 활성화되게 해 놓았습니다. 💡 strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. 엄격 모드는 전체 스크립트 또는 부분 함수에 적용 가능합니다. 함수에 적용할 경우에는 "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 사용하면 됩니다..

💡 디자인 패턴이란? sw개발 방법을 공식화한 것 ✔ 1. MVC 패턴 Model, View, Controller의 앞글자만을 따서 만들어진 단어가 바로 mvc패턴입니다. 모델은 데이터들을 관리하고, 뷰는 화면을 그려주고, 컨트롤러가 뷰와 모델의 중개자 역할을 맡고 있습니다. 또한 사용자의 입력(input)은 컨트롤러를 통해 처리됩니다. 이렇게 각 하는 역할이 정해져 있기 때문에 각 역할에 맞는 코드를 짜도록 주의하셔야 합니다. Model : 데이터(데이터 베이스), 애플리케이션에서 사용되는 데이터와 그를 처리하는 부분 View : 모델에 포함된 데이터의 시각화(화면), 모델을 이용하여 화면을 나타냄 Controller : 사용자의 입력(input)을 받아 처리하는 부분 - 장점 동시다발적 개발이 가능(..

💡 Prototype vs Class 클래스(Class)라는 것을 한 번쯤은 들어보셨을 겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐고요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이죠. 그렇다면 prototype이란 무엇인가? 사전 검색을 해보면 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있습니다. 자바스크립트에서 함수는 객체입니다. 그러므로 생성자로 사용될 함수도 객체입니다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는..