후회가 없도록

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. 브라우저 렌더링 과정 1) DOM(Document Object Model) tree 생성: 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성. 2) render tree 생성: css 파일과 inline 스타일을 파싱. DOM과 CSSOM을 합친 렌더 트리를 생성. 3) Layout(reflow): 각 노드들의 스크린에서의 좌표에 따라 위치 결정. position이나 size 등도 해당 단계에서 계산. 4) Paint(repaint): 실제 화면에 출력. 위 과정에서 웹 페이지에 어떠한 변화가 발생했을 때, 2번 과정부터 다시 재진행 된다. 즉, 렌더 트리가 재생성 되고 이후의 과정이 다시 반복되며 화면에 UI 재출력이 되는 것이다. 2. Virtual DOM 1) Virtual D..

1. ES란? ES란 ECMAScript의 줄임말로써, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 의미한다. 쉽게 말하면 자바스크립트(JavaScript)를 표준화하기 위해 만들어졌다고도 볼 수 있다. 역사적으로 보면 1996년 3월 넷스케이프에서 넷스케이프 네비게이터 2.0을 출시하며 자바스크립트를 지원하기 시작했고, 자바스크립트의 성공을 본 마이크로소프트가 이와 적당히 호환되는 J스크립트를 개발했다. 넷스케이프는 이렇게 생겨나는 스크립트 언어들의 표준화를 위하여 ECMA-262라는 이름의 기술 규격을 제출하고 ECMA 일반 회의에서 1997년 6월에 채택된 것이다. 즉, ES(ECMAScript)는 ECMA-262에 의해 표..

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..

* 이 글은 인프런의 '주간 인프런 #27 - UI 디자인 툴 Top 3 비교하기' 글을 상당 부분 참고하여 제가 이해하기 쉽도록 다시 간단하게 요약 및 정리한 글입니다. 최근 프론트엔드 개발 파트로 참여하게 된 팀 프로젝트가 있는데, 해당 프로젝트에서 유일한 프론트엔드 개발자인 만큼 기본적인 UI 설계 및 구성은 내가 주도적으로 하는 것이 맞다고 판단하였다. 이전에 이어드림 교육 과정에서 중간 프로젝트로 진행했던 팀 프로젝트에서는 빠른 시간 내에 눈에 보이는 결과 먼저 만들기 위해 부리나케 UI 프레임워크나 부트스트랩을 이용했다. 지금은 비교적 여유롭고(그렇다고 매우 느긋하게 만들겠다는 것인 아니지만!) 내가 나아가려는 직무에 대해 조금 더 구색을 갖추고, 트렌드에 맞게 프로젝트를 진행해보고 싶어서 우..

1. UI란? UI는 'User Interface'의 줄임말로써, 흔히 사용자 인터페이스 디자인을 의미한다. 웹/앱 서비스 측면에서 보면 사용자가 서비스 안에서 마주 보는 대부분의 인터페이스 요소를 말한다. 서비스 내에 배치할 수 있는 여러 요소를 활용해 서비스의 특정한 기능을 구성하고, UX를 이끌어내는 역할을 하며, 특히 버튼, 아이콘, 폰트, 컬러, 레이아웃 등의 그래픽 요소를 활용한 인터페이스는 GUI(Graphic User Interface)라고도 한다. 2. UX란? UX는 'User eXperience'의 줄임말로써, 사용자 경험 디자인을 의미한다. 서비스 측면에서는 사용자의 관점에서 이루어지는 서비스에 대한 경험을 말한다. 즉, 사용자가 서비스를 이용함에 있어서 무엇을 필요로 하고, 무엇을..

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

1. 플라스크(Flask)란? 플라스크(Flask)란 파이썬을 기반으로 작성된 마이크로 웹 프레임워크(framework) 중 하나로, Werkzeug 툴킷과 Jinja2 템플릿 엔진에 기반을 둔다. 플라스크는 Docs를 읽으면 알 수 있지만, '단순한 업무는 단순해야 한다'라는 설계 원칙이 있다. 이런 원칙 덕분에 비교적 쉽게 이해하고 작성할 수 있다. 이런 측면 때문에 웹 개발 관련해서 가르칠 때도 많은 곳에서 플라스크를 가르치는 것 같다. 하지만 쉬운 만큼 단점도 있는데 그중 하나는 보안 부분에서 비교적 취약하다는 것이다. 플라스크와 그 안의 Jinja2 템플릿에도 당연히 보안을 위해 설계된 구조가 있지만, 때로는 오히려 그런 부분들이 보안 이슈를 일으키기도 한다는 것이다. 이제 막 공부하기 시작한 ..