김평범's OrdinaryCode

🐣 들어가기 전 개발을 할 때 가장 많이 이용하는 브라우저는 크롬을 이용하고 있다. 첫 개발의 시작을 크롬으로 했기 때문에도 당연히 큰 이유지만, 크롬에서 제공되는 확장 프로그램 중 너무 유용한 툴이 많은 이유도 있다. 오늘은 너무 간단하지만 너무 유용하게 쓰고 있는 크롬 확장 프로그램을 소개하려고 한다. 🎨 홈페이지 내 사용하는 색상 코드 알아보기 내 사이트 혹은 다른 사이트에서 사용한 색상을 알아보고 싶은 경우가 있다. 과거의 나라면 해당 페이지를 캡처한 뒤 포토샵을 열어서 컬러 피커를 이용하여 확인을 했다. 하지만, 크롬 확장 프로그램 중 colorpicker Eyedropper를 설치 후 쉽게 해당 홈페이지 색상을 바로 알아낼 수 있게 되었다. ColorPick Eyedropper는 홈페이지 요소..

🐣 들어가기 전 어느 날 Nuxt로 만든 프로젝트에서 run server를 돌릴 때마다 이상한 경고문이 발생하기 시작했다. Classic mode for store/ is deprecated and will be removed in Nuxt 3. 무슨 에러이길래 이렇게 무섭게 여러 번 찍히는 것인가 에러가 찍히긴 하지만 프로젝트 상 기능에서는 특별히 큰 문제가 없어서 일단은 무시하고 있었으나, 지속적으로 콘솔 로그에 뜨다 보니 슬슬 신경이 쓰여 이번 기회에 알아보기로 했다. 💡 Store에서의 Classic Mode과 Module Mode Nuxt에서 store 기능을 활용하기 위해서는 /store 디렉터리 아래에 파일을 생성해야 한다. 해당 디렉터리 이름을 절대적이며 변경을 해서는 안되기 때문에 vue..

Vue.js가 IE8까지 지원한다고 하는데.. Vue는 ES5 기능을 사용하기 때문에, IE8 이상에서는 정상 작동한다고 나와있다. 하지만 프로젝트를 개발하다보면 axios나 vue에서 작동하는 라이브러리들을 실제로 적용했을 때는 IE11에서 조차도 제대로 작동하지 않는 문제가 발생한다. 내가 만드는 프로젝트는 대부분 특정 타깃이 있기 때문에 IE11를 지원하지 않으니 다른 브라우저를 사용할 수 있었지만, 이번 프로젝트로 하는 대표 홈페이지 리뉴얼의 경우 불특정 다수 여러 사람이 우리 홈페이지를 접근하는 환경에 놓이게되었다. 아무리 explorer가 사라지고 있긴 하지만, 혹시 컴퓨터를 잘 모르는 사람이 우리 회사 대표 홈페이지를 접근했는데 이상한 화면이 뜬다면? 이 부분은 반드시 대응해야 한다는 생각으..

React Event 사용하기 HTML을 이용한 홈페이지를 만들었을 경우, 우리는 해당 홈페이지에서 동적인 역할을 만들기 위해 JavaScript를 이용하여 동적인 이벤트를 만들어낸다. 가장 간단한 alert창을 HTML과 Javascript 문법으로 띄운다고 가정했을 경우 아래와 같이 입력할 것이다. Click Me! React Event 기본 문법 이와 같은 동작을 React에서 발생시키려면 아래와 같은 문법으로 작성한다. 이벤트 발생 문은 소문자가 아닌 camelCase(카멜 케이스)로 입력한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트를 전달한다. 기본 이벤트가 있는 태그 동작을 방지하려면, preventDefault를 명시적으로 호출한다. (return false) preventDefaul..

🐣 들어가기 전 해당 React Study는 아래 글에서 세팅한 프로젝트에서 진행 중입니다. 기본적인 Setting 내용을 보려면 아래글을 먼저 참고해주세요. ordinary-code.tistory.com/33 [React]React 자습하기 - 1. 프런트앤드흐름과 React의 기본 개념 🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라 ordinary-code.tistory.com 오늘은 이제까지 미뤄두고 사용했던 JSX에 대해 좀 더 공부해보기로 했다. 기본적으로 JavaScript에서의 변수로 넣을 수 있는 값은 S..

지난 포스팅에 이어서 오늘은 React에서 State를 공부해보도록 하겠다. 단순히 컴포넌트에서 데이터를 받아 올 경우 props를 이용했다면, 우린 State는 함수 내부에서 선언하는 변수처럼 해당 값을 우리가 원하는 대로 변경하여 사용하는 것이 가능해진다. 🔎기존 코드 복습하기 전 포스팅의 코드이다. 성과 이름을 보내서 화면에서 특정 사용자 이름이 들어올 경우 Hello, 뒤에 특정 사용자의 이름을 넣어서 보여주었다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class HelloWorld extends React.Component { render() { return Hello, {obj.last..

저번에 React 컴포넌트에서 공부를 했다. 우리는 앞으로 React에서 컴포넌트를 만들어서 재사용을 할 예정이다. 이때 컴포넌트 호출 시 각각 필요한 데이터를 전달할 일이 생길 것인데 이때 이용하는 게 바로 props이다. 오늘은 React에 props라는 개념을 이용해서 React 컴포넌트에 데이터를 전달해 보기로 하겠다. 컴포넌트를 만드는 두 가지 방법 React에서 컴포넌트는 두 가지 방법으로 만들 수 있다. JavaScript의 function모양과 비슷하게 작성하는 함수 컴포넌트와 Class를 만들 듯이 작성하는 클래스 컴포넌트가 있다. 저번 스터디에서는 클래스 컴포넌트 형태로 Hello, world를 화면에 출력시켜보았다. 지난 시간에 만든 클래스 컴포넌트와 동일한 역할을 수행하는 함수형 컴..

🐣 FrontEnd 개발 언어의 흐름 jQuery의 부흥 2014년 처음 개발자가 되겠다고 마음을 먹었을 때, 처음 접하게 된 라이브러리는 jQuery였다. 웹에서 작동하는 JavaScript 개념이 전혀 없어도 jQuery와 함께라면 웹 화면을 만들 수 있었다. 처음 웹 개발을 시작한 주니어들에게 이해하기 쉬운 언어 규칙, 직관적인 방식으로 웹에 애니메이션 효과 혹은 css효과를 줄 수 있는 매우 유용한 라이브러리였다. jQuery의 부흥과 더불어 트위터에서 jQuery를 이용한 프런트 앤드 프레임워크인 Bootstrap이 등장하게 되면서, javascript를 전혀 모르던 나도 부트스트랩과 jQuery를 이용하여 그럴듯한 웹페이지를 만들 수 있었다. 프레임워크 3 대장 등장 업계에 들어오고 2년 동안..

저번 글을 통해서 css animation과 svg를 활용해서 텍스트 효과를 만들어 보았다. 오늘은 이것의 연장 선으로 css와 svg 기능, 추가적으로 가상 선택자를 이용해서 특별한 버튼 hover 효과를 만들어보기로 했다. 오늘 만들 hover 효과가 어떠한 원리로 만들어졌는지 궁금하다면 밑의 글을 먼저 읽고 오길 추천한다. ordinary-code.tistory.com/25 [css/svg]css animation과 svg를 활용해 글자가 그려지는 효과 만들기 🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w..

🙄 SVG란? SVG는 Scalable Vector Graphics의 약자로 html에서 사용할 수 있는 Vector 이미지를 지칭한다. SVG라는 개념은 HTML과 CSS에서만 사용하는 개념은 아니고 백터 이미지를 표현하기 위한 포맷으로 w3c에서 만든 이미지 표준 값이다. SVG는 벡터 기반의 그래픽을 XML 형식으로 정의해서 사용할 수 있다 SVG를 사용하는 이유는? png, jpg와 같은 픽셀 이미지와 다르게 SVG를 사용하는 이유는 무엇일까? - SVG 이미지는 확대 축소 시에도 고품질의 이미지를 제공하며 - 파일 형태로 했을 때 용량이 적어 로딩 시간이 줄어들며 - css를 통해 다양한 효과를 줄 수 있음 단점의 경우 SVG의 경우 IE 하위 버전에서 지원이 되지 않으며, 단순한 내용이 아닌 ..