치춘짱베리굿나이스

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 테이블을 구성하는 각 객체의 구성 성분이다 이름은 명사로 지어지며, 저장된 데이터에 관한 추상적이거나 실재적인 개념이 엔터티로 지정된다 말이 좀 어려운데… 테이블 안에 작성될 수 있는 ‘속성을 가질 수 있는 어떠한 개념’ 이라고 생각하면 된다 학교..

회고 회고도 조금씩 적어야 하는데... 2022년 말이 되어서야 이렇게 적기 시작했다 2022년 회고는 꼭 적어야지.. 과제 스포가 되면 큰일 (big event) 나므로 스포가 되지 않는 선에서 간단하게나마 적어볼까한다 백엔드 설계는 어렵다 ERD 다이어그램을 처음 그려봤는데... 어려웠다! 그리고 처음 만든 대로 흘러가지 않았다... 중간에 계속 뜯어고쳐야만 했다 PK와 FK, 테이블 Join에 관한 개념도 거의 없어서 주변에 백엔드 경험이 있거나 백엔드 지망하는 지인들에게 물어물어 작성했다 배울게 정말 산더미라는 것을 통감한다... 겸사겸사 클라이언트 - 서버 흐름도도 작성했는데, 이건 나중에 구현을 시작했을 때 때 꽤나 도움이 되었다 피그마랑 요구사항만 보고 멋대로 작성한 흐름도였는데, 굳이 피그..

디자인 패턴 MVC 패턴에 대한 글을 적고 있었는데 아예 카테고리를 따로 파서 디자인 패턴 관련된 글을 묶어놓는 게 나을 것 같아 일단 디자인 패턴에 관해 알아보기로 했따.. 개요 디자인 패턴? 건축학에서 유래된 용어로, 건축학에서는 몇몇 눈에 띄는 공통적인 부분을 디자인 패턴으로 정의하여 이를 조합하여 더 큰 건축물 (또는 도시) 을 설계하는 방법이다 이 건축학 기법이 소프트웨어 프로그래밍 계에 큰 영감을 주면서 비슷한 방식으로 도입하게 되었다 소프트웨어를 설계하면서 발견된 문제와 해결 노하우 (이 부분은 이렇게 짜면 문제가 해결된다 / 개선된다 싶은 것들) 를 다른 큰 소프트웨어를 설계할 때 응용할 수 있도록 잘 정리해 둔 패턴이 바로 디자인 패턴이다 내가 지금 겪고 있는 문제를 과거 다른 사람들이 ..

작별인사하는 건 귀여운것같다

[Violation] took 1000⬆️ms 이게 뭐지 앞에서 this 바인딩 문제를 해결하니 이번엔 이상한 경고가 출력된다 대충 이 핸들러 호출하고 종료되기까지 1016초 걸렸으니 왠만하면 비동기로 동작하게끔 하는 게 좋겠다 라는 의미이다 또한 이 경고는 숨길 수가 없다고 한다 원인은 경고 출력용 alert 함수 때문이었는데, alert로 출력된 경고 메시지의 ‘확인' 버튼을 눌러야 함수가 종료되었다고 판단하기 때문에 확인 버튼을 언제 누르냐에 따라 위의 경고 메시지의 시간이 달라진다 테스트해보니 3초 뒤에 클릭하면 대충 3초 조금 넘는 시간이 걸렸다고 나왔다 만약 경고 메시지의 확인 버튼을 10분 뒤에 누르면 아마 600,000ms 걸렸다고 나오지 않을까… alert 함수는 위의 함수 종료를 지연시..

이벤트 핸들러 this 오류 문제 클래스 안에 있는 메서드를 핸들러로 부착하니 클래스의 멤버 변수들을 찾지 못하는 상황이 발생했다 처음에는 메서드가 프라이빗 메서드라 그런 건가? 싶어서 이리저리 고쳐봤는데, 알고 보니 this가 클래스 인스턴스를 가리키지 않고 이벤트가 걸린 요소를 가리켜서 그런 것이었다 원인 https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener MDN 문서에 따르면 이벤트 수신기 (이벤트 핸들러) 의 this는 이벤트가 걸린 대상 요소를 가리키게 된다고 한다 (= e.currentTarget이 가리키는 요소와 같다) 디버깅하느라 별 짓을 다 했는데 이런 이유가 있었다 해결 DOM요소.addEventListe..