도각도각 필기노트

input으로 이메일 입력 받고 check 버튼을 눌러서 형식 체크를 하려는게 내가 짜려는 코드의 목적이었다. 그런데 자꾸 버튼을 누르면 첫번째 클릭은 무시되고 두번째 부터 정상적으로 작동하는 문제가 있었다. 왜 그런지 콘솔창에 찍어보니, 입력값이 들어올때마다 useState로 넣어놓고 있었는데 이게 원래의 입력값보다 한박자씩 늦게 useState 변수에 들어가면서 자연스럽게 이메일 형식 체크 이벤트도 하나씩 늦는 것이었다. 그 전에도 버튼 click 이벤트 등을 통해 useState 값을 변경하고 반영하는 코드가 있으면 항상 클릭 한번씩 반응이 느리곤 했었는데 그 이유를 알아냈다. 바로 useState의 비동기 문제 때문이었다. useState를 통한 변수 상태 변경은 비동기식으로 이루어지기 때문에 내..

psql 설정 psql 시작하기 Server [localhost]: Enter Database [postgres]: Enter Port [5432] : Enter Username [postgres]: Enter Password for user postgres: postgres \du : 계정들 리스트와 각 계정의 권한과 역할 확인 처음에는 postgres 밖에 없다. create role admin_wj with login password 'admin_wj'; admin_wj이라는 계정을 생성한다. alter user admin_wj with createdb; 방금 만든 admin_wj에게 db를 생성할 수 있는 권한을 준다. alter user admin_wj with superuser; superus..

get: axios.get(url[, config]) post: axios.post(url[, data[, config]]) patch: axios.patch(url[, data[, config]]) delete: axios.delete(url[, config]) 여기서 일단 get과 post 연습을 해보았다. 간단히 console창에 찍어볼 예정이다! npm axios 설치 npm install --save axios Spring boot 의 FriendwithLombok.java package com.example.demo.model; import lombok.Getter; import lombok.Setter; @Getter @Setter public class FriendwithLombok { p..

참고 블로그 https://kdevkr.github.io/spring-boot-integration-vuejs/ 1. spring initializer https://start.spring.io/ 원하는 폴더 위치에서 zip파일 압축 해제 디렉터리 구조 src ├─ main │ ├─ java │ └─ resources gradle build.gradle Vue 2. vue 설치 후 버전확인 sudo npm i -g @vue/cli vue --version 3. vue 프로젝트 생성 (참고링크의 개발자가 만들어놓은 preset 가져옴) 더보기 제가 참고한 kdevkr/vue-preset 프리셋은 다음의 vue 라이브러리들을 포함합니다. Babel ESLint + Prettier SCSS (with dart..

Lombok 적용 전 package com.example.demo.model; public class Friend { private String id; private String name; public Friend(String id, String name) { this.id = id; this.name = name; } public String getId() { return this.id; } public void setId(String id) { this.id = id; } public String getName() { return this.name; } public void setName(String name) { this.name = name; } } Lombok 적용 후 package com.ex..

px, pt 창이 바뀌어도 크기가 변하지 않는 고정단위인 애들로는 px, pt, cm, mm, in 등이 있다. 나는 반응형 웹 제작에 필요한 상대단위들을 공부할 것이기 때문에 얘네는 간단히 알고만 갈 것이다! px : 가장 기본적으로 사용되는 단위. 고정단위로, 창의 크기를 변경해도 변하지 않는다. pt : 1px = 0.75pt %, rem, em % : 부모 요소를 기준으로 비율을 표현한다. body { font-size: 14px; } div { font-size: 120%; /* 14px * 1.2 = 16.8px */ padding: 2em; /* 16.8px * 2 = 33.6px */ } Rem (root Em) 최상위 요소인 를 기준으로 해당 요소의 크기를 정함. html { font-s..

용어 정리 * 리모트 Refs : 리모트 저장소에 있는 포인터 레퍼런스 $ git ls-remote : 리모트 Refs 조회 리모트 Refs 대신 보통 리모트 트래킹 브랜치를 이용한다. * 리모트 트래킹 브랜치 = 리모트 브랜치를 추적하는 레퍼런스이자 브랜치. 로컬에 있지만 임의로 움직일 수 없다. 리모트 서버에 연결할 때마다 리모트의 브랜치 업데이트 내용에 따라 자동으로 갱신된다. /형식. 예제를 통해 자세히 알아보자. git.ourcompany.com 이라는 Git 서버가 있다. 로컬에 clone해온 서버의 저장소는 origin 이라고 한다. origin 으로부터 저장소 데이터를 모두 내려받고 master 브랜치를 가리키는 포인터(=origin/master)를 만든다. 이 포인터는 맘대로 변경할 수 ..

$ git branch : 브랜치 목록 보기. 목록에서 *이 붙은 건 현재의 브랜치 $ git branch —merged / $ git branch —no-merged : merge된 브랜치인지 아닌지 목록 merge되지 않은 브랜치는 아직 merge하지 않은 커밋을 담고 있기 때문에 git branch -d 명령으로 삭제할 수 없다. 강제 삭제는 -D 브랜치와 merge 기초 아래 상황에 따라 알아보자! 나는 현재 hotfix 만들고 merge하는게 서툴러서 의 3번 과정 부터 자세히 다룰 것이다! 1. 웹사이트가 있고 뭔가 작업을 진행하고 있다. 2. 새로운 이슈를 처리할 새 Branch를 하나 생성한다. 3 새로 만든 Branch에서 작업을 진행한다. 이때 중요한 문제가 생겨서 그것을 해결하는 Ho..