치춘짱베리굿나이스

DOM Element replace 함수들 Element.replaceWith oldNode.replaceWith(newNode); oldNode.replaceWith(newNode1, newNode2, ...); 현재 노드를 인자로 들어온 노드 (또는 노드 여러 개) 로 교체한다 반환값은 없다 { /* 이전 노드 */ } { /* 변경된 노드 1 */ } { /* 변경된 노드 2 */ } 해당 위치가 인자로 들어온 노드들로 한번에 대체된다 Node.replaceChild parentNode.replaceChild(oldChild, newChild); 노드의 자식 노드 oldChild를 newChild으로 교체한다 다음과 같은 상황 등에서 오류 (예외) 가 발생한다 만약 oldChild 또는 newChi..

문제 .js 또는 .jsx 파일을 .tsx 파일로 변환하다가 마주한 오류 JSX 문법을 사용한 부분에 빨간 줄이 좍좍좍 쳐지면서 저 오류가 난다 원인 타입스크립트에서 JSX 문법을 사용하기 위해선 tsconfig.json에 jsx 옵션을 활성화해 주어야 한다 preserve: 타입스크립트 컴파일 시 .jsx 그대로 내보낸다 react-native: 타입스크립트 컴파일 시 내부 문법은 그대로 유지한 채 .js 파일로 내보낸다 (리액트 네이티브 용) react: 타입스크립트 컴파일 시 JSX 문법을 전부 React.createElement 호출로 변환하고, .js 파일로 내보낸다 react-jsx, react-jsxdev: 타입스크립트 컴파일 시 JSX 문법을 전부 _jsx 호출로 변환하고, .js 파일로 ..

React 서론 리액트 써도 좀 알고 쓰자!!! 의 일환이다 리액트로 토이 프로젝트 몇번 해 보면서 진지하게 리액트의 원리와 동작 과정에 관해 고찰해본 적이 몇 번이나 되는가? 나는… 없는 듯 하다… 가상 돔을 만들어서 어쩌구….. 이것밖에 모른다 (부끄) 리액트 쓰는 거 좋고 리액트로 프로젝트 다 좋지만 기왕 쓰는거 지피지기면 백전백승이라는데 한번 알아보고 넘어가자 리액트 카테고리에 글을 이렇게 많이 적어놓고 이제 와서 리액트의 동작을 처음 알아보는 것도 개그 포인트이다 (하하하) 리액트 소개 리액트가 뭔가요 싱글 페이지 애플리케이션을 제작하는 데에 초점이 맞춰져 있는 자바스크립트 라이브러리이다 Vue도 프레임워크고 Angular도 프레임워크고 Svelte도.. 그래서 리액트도 프레임워크일 것 같은 느..

CRA 없이 타입스크립트 환경설정 Typescript + Yarn으로 프로젝트 초기화 Typescript + Yarn으로 프로젝트 초기화 프로젝트 초기화 및 환경설정 공식적인 내생각 간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다 또 이상한데서 삽질을 했기 때문… (타 blog.chichoon.com 여기서 이미 타입스크립트 환경설정을 해봤지만 CRA를 썼었다 이번엔 CRA 없이 환경설정을 해보자 create-react-app이 편하긴 하다… 뭐 백엔드는 리액트를 안 쓰니까 설정을 손수 해야 하긴 하지만 말이다 설치와 초기화 npm 초기화 $> npm init package.json을 추가해주자 타입스크립트 설치 $> npm i -D typescript..

MySQL Workbench 개요 아까까진 ERDCloud 썼잖아 ERDCloud를 쓰다가 여러가지 부분에서 불편함을 느껴 Workbench로 건너왔다 가장 불편했던 부분은 확대 - 축소가 통상적인 제스처와 달라서 계속 화면이 주체가 안될 정도로 커졌다 작아졌다 하는 부분이랑 뒤로가기 단축키가 적용이 안 된다는 점, 쿼리를 export하면 복잡한 형태로 제공돼서 후가공을 거쳐야 한다는 점 등이 있었다 그리고 지금 데이터베이스 관리 시스템으로 MySQL을 쓰고 있으니 바로 데이터베이스도 만들고 ERD도 추출하는 것이 적절하게 느껴졌다 다운로드 MySQL :: Begin Your Download MySQL :: Begin Your Download The world's most popular open sour..

ERD 그려보기 with ERDCloud ERDCloud ERDCloud 앞서 ERD의 구성 (사실상 새발표기법 원툴) 에 관해 알아보았으니 이번에는 테이블간 관계도를 직접 그려보자 ERDCloud는 웹상에서 테이블 ERD를 그리기 쉬운 툴이다 딱 있을 기능들만 있어서 draw.io처럼 복잡하지도 않고 직관적으로 관계도를 그릴 수 있다 다만 당연히 동작할 줄 알았던 단축키들이 안 먹혀서 조금 당황했따… 로그인은 구글, 페이스북, Github OAuth로 가능하다 ERD 생성 및 테이블 추가 로그인을 했다면 우상단의 + 아이콘을 누르자 로그인 아이콘은… 우상단의 문 아이콘을 누르면 된다 간단한 과정이라 굳이 추가 안 했다 ERD 생성 모달이 나온다 ERD의 이름과 태그, 공개 여부를 설정하자 태그는 사실 ..

Identifying / Non-Identifying Relationship ERDCloud에서 테이블 연결을 그리다 보면 대문짝만하게 Identifying Relationship, Non-Identifying Relationship 중 고르라고 한다 (살짝 당황함) 무엇인지 알아보자 서론 부모 테이블 (엔터티) / 자식 테이블 (엔터티) 1 : n 관계를 그린다고 할 때, 1에 해당하는 (좌측) 테이블 또는 엔터티를 부모 테이블 (부모 엔터티) 이라고 한다 n에 해당하는 (우측) 테이블 또는 엔터티를 자식 테이블 (자식 엔터티) 이라고 한다 I/E 표기법에서 I/E 표기법에선 점선도 사용할 수 있다 좌측 엔터티 (또는 테이블) 가 없어도 우측 엔터티가 존재할 수 있다는 의미이다 위의 예시에서는, 첫 번..

ERD ERD란? Entity Relationship Diagram (개체 관계 다이어그램) 데이터베이스 안에서 테이블간의 관계를 설명해주는 다이어그램이라 할 수 있다 간단한 프로젝트에서는 그다지 필요하지 않을 수 있지만, 대규모 프로젝트는 테이블끼리 연결되어 있는 경우가 상당히 많아 설계를 잘 해두지 않으면 나중에 협업할 때 설명과 인수인계가 힘들어지는 대참사가 날 수도 있다고 한다 테이블들이 특이하게 생긴 화살표로 이어져 있는 모습을 하고 있다 Entity 테이블을 구성하는 각 객체의 구성 성분이다 이름은 명사로 지어지며, 저장된 데이터에 관한 추상적이거나 실재적인 개념이 엔터티로 지정된다 말이 좀 어려운데… 테이블 안에 작성될 수 있는 ‘속성을 가질 수 있는 어떠한 개념’ 이라고 생각하면 된다 학교..