후회가 없도록

1. 절대 경로 설정 방법 React에서 컴포넌트나 파일 등을 import 할 때 보통 상대 경로를 작성한다. 예시를 들자면, 아래와 같은 src 구조를 갖고 있고 Profile.js 파일에서 Home.js, Router.js 파일로부터 무언가를 import 하고 싶을 땐 그 아래의 코드처럼 작성하면 된다. import Home from "./routes/Home" import AppRouter from "../components/Router" ... 하지만 파일과 디렉터리가 많아지면 import를 작성하는 과정에서 상대적인 위치를 헷갈리면서 오류가 발생할 수 있다. 이를 조금이나마 방지하고자 절대 경로로 작성하는 경우도 있는데, React에서 절대 경로를 이용할 경우는 src와 같은 디렉터리 단계(Re..

1. npm이란? npm(Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이며, 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자를 의미한다. Node.js로 만들어진 모듈을 웹에서 다운 받은 후, 쉽게 설치하고 관리해주는 프로그램으로써, 개발자 입장에서는 단 몇 줄의 명령으로 기존 공개된 모듈을 설치하여 사용할 수 있다. 이 npm은 "명령 줄 클라이언트(npm)", 공개 패키지와 지불 방식의 개인 패키지의 "온라인 데이터베이스(npm 레지스트리)"로 이루어져 있다. 여기서 레지스트리는 클라이언트를 통해 접근되며, 사용 가능한 패키지들은 npm 웹사이트를 통해 검색할 수 있다고 한다. 이런 npm이 없었을 때에는 필요한 기능을 추가하기 위해 직접 코드..

1. 에러 발생 https://as-j.tistory.com/123 [React 에러 해결] You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support 1. 에러 발생 부끄럽지만 작년에 리액트를 정말 수박 겉핥기식으로만 접한 후, 이제야 다시 제대로 리액트와 프론트엔드 공부, 프로젝트를 시작했다. 먼저 리액트를 이용한 프로젝트를 생성하는 as-j.tistory.com 이 글을 통해 create-react-app을 완료했다고 생각했다. 어떻게 보면 해결하긴 했다. 하지만 위 글의 제목에 해당하는 에러만 발생하지 않을 뿐, 다른 에러가 다시 발생했다. 그 에러는 다음과 같다. ..

1. 에러 발생 부끄럽지만 작년에 리액트를 정말 수박 겉핥기식으로만 접한 후, 이제야 다시 제대로 리액트와 프론트엔드 공부, 프로젝트를 시작했다. 먼저 리액트를 이용한 프로젝트를 생성하는 아래 명령어를 실행했을 때, 다음과 같은 에러가 발생했다. npx create-react-app project-name You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm un..

화면 출력에 특화된 프론트엔드 프레임워크, 리액트 1. 기원 1) 누가 페이스북의 소프트웨어 엔지니어, Jordan Walke 2) 언제 - 2011년 페이스북의 뉴스피드에 첫 적용 - 2012년 인스타그램닷컴에 적용 - 2013년 5월 JSConf US에서 오픈 소스화 3) 어디서 페이스북 및 공동체 4) 왜 리액트를 개발한 Jordan Walke는 PHP용 컴포넌트 프레임워크인 XHP에서 영향을 받았다고 한다. 기존의 자바스크립트는 어떤 속성에 대해 값이 변경될 때, 그 속성에 해당하는 DOM과 요소를 찾은 다음 사용자가 정의한 규칙(함수, 이벤트 등)을 적용한다. 만약 이런 인터랙션이 자주 발생하고, 동적인 UI가 요구되는 상황에서는 이런 규칙이 엄청 많아질 것이고, 개발자는 그런 규칙과 DOM을 ..

기간: 2021년 11월 8일(월) ~ 2021년 12월 3일(금) (약 4주) 인원: 6명(프론트엔드 2명, 백엔드 2명, 데이터 분석 2명) 역할: 프론트엔드 담당 동기: '지피지기면 백전불태'. 적을 알고 나를 알면 백 번 싸워도 위태롭지 않다는 뜻으로, COVID-19를 알고 우리에게 끼친 영향을 알면 우리가 더 나은 가치 판단을 할 수 있을 것이라는 아이디어에서 프로젝트와 그 이름을 떠올렸습니다. 내용: 교통(서울 주요 지하철역), 문화(영화, 공연 관람), 소비(유통업체별 변화), 생활(유명 검색 포털 사이트 키워드 통계) 등에 걸친 데이터를 시각화 및 분석하여 정보를 제공하는 서비스 프로젝트입니다. 프론트엔드 메인 페이지의 두 화면은 서로 위 또는 아래 드래그 한 번만으로 매끄럽게 애니메이션..