김평범's OrdinaryCode

🐣 들어가기 전 어느 날 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가 사라지고 있긴 하지만, 혹시 컴퓨터를 잘 모르는 사람이 우리 회사 대표 홈페이지를 접근했는데 이상한 화면이 뜬다면? 이 부분은 반드시 대응해야 한다는 생각으..

🧮 Project M/D 계산기 2020.12 노션 업데이트로 타임라인 기능이 추가되었다. 기존 신규 프로젝트 준비를 할 때 반드시 WBS를 마일스톤 형식으로 작성해야 했는데 Notion의 타임라인 기능이 추가되며 이 부분을 해결할 수 있을 것 같아 템플릿을 만들어 보기로 했다. 템플릿은 각 프로젝트 단계 별로 세부 단계를 작성하고 타임라인에 해당 단계의 업무 일정을 만들어주면 자동으로 해당 단계의 업무일을 계산해주는 형식으로 생각했다. 그리고 각 해당 업무일에 투입인력이 몇 명이 투입되는지를 적어주면 실제 M/D를 구하는 방식으로 생각해보았다. ✨ 템플릿 주요 기능 Project M/D 계산기는 총 2개의 표로 이루어진다. 단계별 M/D 산출 (timeline view, table view) M/D 상..

🐣들어가기 전 요즘 들어 API 신규 기능 오픈을 준비하는 등 이슈로 인해서 노션 서버가 멈춰 무한 로딩이 걸리는 사람들이 많아졌다. 그러다 최근 2021년 02월 13일 노션에서 다시 서버가 다운되었으며, 공식 트위터 상에서도 노션을 꼭 백업하는 것을 추천한다는 공지가 떴었다. 룸메이트도 노션 사용 중 자신이 만든 페이지 하나가 없어졌다가 몇 분 뒤 다시 보이는 등의 이슈가 나타났고, 이러한 불안감으로 현재 불안정한 노션 서버에 큰일이 나기 전 노션을 백업을 해보도록 했으며, 백업 후 해당 파일로 복구 시 얼마나 비슷하게 복구되는지 궁금해서 진행해보았다. 📂노션 백업 방법 노션에 들어가면 우측에 설정과 멤버라는 버튼을 클릭한다. (영문 버전의 경우 Settings & Members로 들어간다.) 해당 ..

🐣 들어가기 전 오늘은 노션으로 투자를 위한 자산 포트폴리오를 만들어보려고 한다. 현재 자산이 어디에 투자되고 있으며, 나의 돈 현금화 시점은 언제인지 혹은 지금 리스크와 이익이 분배율이 어느 정도인지를 확인하여 이후 투자 비율을 조정할 수 있는지를 한눈에 확인하는 것을 목적으로 합니다. 오늘 만드는 자산 포트폴리오는 주식에 관련된 포트폴리오는 아니고, 나의 돈이 어디에 지금 분산되고 있는지 전체를 보여주는 템플릿이다! 주식 관련 방송을 보니 보통 주식 관련 포트폴리오를 먼저 만들기 전 자신의 자산을 확인하는 게 중요하다고 하길래 이번 기회에 노션으로 정리해보기로 했다. 노션으로 만든 자산 포트폴리오 기능 소개 자산 포트폴리오는 총 3개의 표로 이루어져 있다. 현재 자산목록에 자산명과 가격을 적어주면 된..

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

🐣 들어가기 전 첫 취직 준비 시 아무것도 커리어가 없는 경우가 많다. 사람인, 잡코리아 등 간략히 적은 이력서는 누구나 가지고 있다면, 내가 그들보다 앞서기 위해서는 좀 더 나은 점이 있어야 하지 않을까? 만약 경력직이라면? 더더욱 문제이다. 내가 경력을 쌓았는데 이미 내가 적어놓은 사람인, 잡코리아 이력서는 이미 몇 년 전의 간단한 텍스트뿐이며, 나의 이력을 이걸로 포장하기엔 나의 능력을 표현하기 너무 작다. 이런 고민을 해결하기 위해 많은 나름 디자인에 자신 있는 사람들은 포토샵으로 포트폴리오를 만들기도 하고, 개발자의 경우는 홈페이지를 제작하여 공개하기도 한다. 하지만, 나는 디자인 기술도, 아직 홈페이지를 만들기엔 능력이 부족하다고 생각하는 분들은 간단한 PPT로 돌아가기도 한다. 하지만 PPT..

🐣 들어가기 전 해당 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..

노션 표에서는 다양한 형태의 속성을 제공한다. 그중 날짜 속성과 수식 속성을 이용하면 날짜 계산을 통해 d-day를 구하는 것도 가능하다 📅 노션에서 현재 날짜와 시간 가져오기 now 노션 속성에서 수식 필드를 추가하면 현재 날짜와 시간을 가져오는 것이 가능하다. now()를 입력한 뒤 완료 버튼을 클릭하면 실시간 날짜 데이터가 표시되는 걸 확인할 수 있다. 📆 노션 D-day 구하기 day를 구하기 위해서는 dateBetween, prop(), now()를 3가지 수식 속성을 이용해야 한다. dateBetween 수식 중 dateBetween을 이용하면 두 날짜 사이 시간을 구할 수 있다. 사용법은 아래와 같다. dateBetween(시작 날짜, 끝나는 날짜, "단위") 시작 날짜에서 끝나는 날짜를 뺀..

지난 포스팅에 이어서 오늘은 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..