Type and Networking Config Type 설정에서 이 DB가 사용될 환경을 선택할 수 있다. 개발자 컴퓨터라면 DB에 메모리가 최소한만 할당될 것이고, 서버라던가 DB전용 서버라면 메모리가 많이 할당될 것이다. 따라서 개인 실습 환경의 경우에는 Development Computer를 선택해주자. Connectivity에서는 어떤 통신이나 파이프라인으로 DB를 연결할지를 설정할 수 있다. 개인 실습 환경의 경우에는 TCP/IP 포트 통신을 그대로 사용해주자. Authentication Method 위에는 SHA-256이라는 강력한 암호화를 사용하는 인증이고, 아래는 레거시 암호화를 사용하는 버전이다. SHA-256은 MySQL에서는 8버전 이상만이 호환되므로, MySQL을 처음 사용하는 사..
백엔드와 기획쪽과 협업할 일이 오늘도 역시나 생겼다. 어제는 말로만 내 의견을 전달하려다보니 많이 버벅였었는데 오늘은 이미지파일을 메신저로 먼저 전달하고 종이에 로직을 그려가서 자리에서 설명했다. 다행히도 말이 덜 꼬였고 내 의견도 잘 피력했다. 질문할 때 확실한 용어를 사용하는 것은 의도적인 노력이 필요할 것 같다. 변수명이 인간 친화적인 언어는 아니라 발음하기 많이 어려운데... 살짝 기계적으로 인지하고 말하는 것도 도움이 되지 않을까 싶다. 에러 처리를 잘 했다. 금액에 천단위로 쉼표 처리를 할 때, toLocaleString 메서드를 사용했는데 number 자료형이 아닌 것에 사용하면 에러가 난다는 것을 미리 인지하고 타입을 잘 걸러내서 오류 없이 동작하는 코드를 만들었다.
내가 변수명을 짓는데 약하다는 것을 알게 되었다. 미국인이 내 변수명을 보았을 때도 확실하게 의미 전달이 될 수 있도록 하는 것이 베스트일 것이다. 하지만 어중간한 영어를 구사하는 코리안으로써는 그 작업이 쉽지만은 않다. 지금은 급하면 급한대로 변수명을 대충 짓는 습관이 있어서 변수명이 중구난방으로 나오는 경우가 많은데, 앞으로는 변수명을 간단하게 짓더라도 구글 번역기나 챗지피티에게 한번 물어보고 컨펌(?)을 받아봐야겠다. 어제 수정한 변수명 (조금 쪽팔리다...) 월 예약이 있는지에 대한 변수 isMonthBook -> isMonthlyBook 월예약 환급금이 유효한지에 대한 변수 isValidCancelCost -> isValidRefund 월단위 환급금에 대한 변수 monthBookCancelCos..
기획이나 백엔드에 협조를 구할때는 말로만 하지말고 그림같은 시각적 자료를 통해 내 의견을 피력해보자. - 오늘 기획에 업무 협조를 요청했을 때, 말로만 내 의견을 납득시키려고 하니 힘들었다. 메신저 등을 통해 간단한 시각 자료(스크린샷도 좋다)를 준비해보자. 무언가 질문을 할때는 용어를 확실하게 사용하자. - 에러처리와 예외처리는 다른 말이다. 확실하게 말하려는 버릇을 들여야 확실하게 말할 수 있게 될 것 같다. template 등 직접적으로 렌더링되는 부분에는 array[0], array[1]과 같이 하드코딩하지 말자. (예외처리를 잘하자) 만약 어레이에 엘리먼트가 없게 된다면? 앱은 터질지도 모른다. 코드를 안전하게 짜려면 예외처리를 확실히 해야하고, 사소한 부분에서 신경써야 할 것이다.
vue/cli나 cra 등으로 작업 완료 후 빌드했을 때, public 폴더 내부에 있는 파일들의 경로가 내가 의도한 바와 달라질 수 있음을 주의하자. 나의 경우에는 로컬환경에서는 의도대로 잘 동작하다가, 배포 후 주소가 예기치 않게 동작하는 이슈가 발생했다. public을 사용할때는 경로를 항상 주의하자. 브라우저의 window.location 객체는 현재 브라우저의 경로에 관한 다양한 프로퍼티와 메서드들이 있다. window.location.href 프로퍼티로 새로운 페이지로 이동할 수 있고, 현 주소를 참조할 수도 있다. window.location.replace 메서드로는 페이지 자체를 전환할 수 있다. 이 외에도 브라우저 경로에 관한 많은 기능들이 location 객체에 존재한다.
다양한 웹사이트에서 쓰이는 반응형 토글식 collapse navbar를 구현해보았다. 필요한 분들이 가져가서 수정할 수 있도록 최소한의 요소들만 사용해서 코드를 작성했다. 반응형 네비바를 구현할때 어려움을 느꼈던 점은 transition이었다. height: 0 ~ height :auto 에서는 transition이 동작하지 않았었다. transition이 height auto와 같은 명시적이지 않은 변화에는 동작하지 않는다는 사실을 스택오버플로우를 통해 알게되었고, 이 지식을 토대로 네비바를 완성했다. 추가해보면 좋을 것들 웹 접근성 추가 (aria-expanded, aria-hidden 등) - 화면에서만 안보일뿐 DOM에는 존재하므로, 별도로 웹 접근성을 추가해주면 좋을 것 같다. 개인 프로젝트에는..
나는 아직도 VUE가 잘 이해가 안간다. 도저히 이해를 할 수가 없는 언어다. 리액트같으면 양방향 컴포넌트를 구현할 때 그냥 state 변경 함수를 넘겨주어 간단하게 처리할 수 있는데 Vue에서는 이중 삼중으로, emit이란 문법을 이용해서 부모요소에 발생할 이벤트를 자식요소가 발생시켜 주어야 한다. 게다가 Props는 읽기 전용이라 직접 변경도 안된다. 그래서 computed라는 별도의 기능을 추가로 넣어주기도 해야한다. 아래는 양방향 컴포넌트 바인딩이다. 아래의 코드는 으레 SPA가 그렇듯 App.vue가 메인을 담당하고, MsgInput은 기능이 묶인 컴포넌트이며, BaseInput은 MsgInput의 Input 태그를 담당하는 shared 컴포넌트이다. 위의 코드들은 아래 기능 하나만을 위해 만들..
class Player { static description = "Game of Throne" static newPlayer() { return new Player("Ser", "Jaime") } numLives = 10 #score = 0 constructor(first, last) { this.#onNewbee() this.first = first this.last = last } get fullName() { return `whose name is ${this.first} of house ${this.last}` } set fullName(newName) { const [first, last] = newName.split(" ") this.first = first this.last = last co..
class Player { numLives = 10 #score = 0 constructor(first, last) { this.#onNewbee() this.first = first this.last = last } get fullName() { return `whose name is ${this.first} of house ${this.last}` } set fullName(newName) { const [first, last] = newName.split(" ") this.first = first this.last = last console.log('FullName has changed') } set firstName(newFirst) { this.first = newFirst console.log..
선요약 클래스 필드는 클래스로 인스턴스를 만들때 모든 인스턴스가 사용할 수 있는 프로퍼티를 생성한다. 프라이빗 필드는 인스턴스에 프로퍼티를 만들어주나, 클래스 내에서만 수정이 가능한 프로퍼티를 생성한다. 둘다 문법적 설탕의 개념이다. 클래스 class Player { numLives = 10 #score = 0 constructor(first, last) { this.#onNewbee() this.first = first this.last = last } setScore(newScore) { this.#score = newScore } getScore() { return this.#score } loseLife() { this.numLives -= 1 } #onNewbee() { console.log("..
