개발 블로깅/오늘의 TIL
-
[2020.04.26] Javascript 깊은 복사의 함정... 모르고 사용하다 뒤통수 맞았다...개발 블로깅/오늘의 TIL 2020. 4. 26. 22:32
사이드 프로젝트 진행 중, 내게 엄청나게 스트레스를 안겨준 요소가 있었다. Javascript의 깊은 복사의 함정.. 우선 이 깊은 복사의 함정을 설명하기 위해서, Object 복사의 개념에 대해 간단히 설명을 해보려고 한다. Javascript의 복사 개념 얕은 복사(Shallow copy) 우리가 흔히 알고 있듯이, 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. const person1 = {name:'inyong'}; const person2 = person1; person1.name = 'jung'; // result person2.name // 'ju..
-
[2019.11.02] base64 Image Data를 File 객체로 변환하는 법개발 블로깅/오늘의 TIL 2019. 11. 2. 12:45
프로필 이미지를 적용하는 기능을 구현 중, 엄청나게 유용한 라이브러리를 찾아냈다. https://github.com/mosch/react-avatar-editor mosch/react-avatar-editor Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. - mosch/react-avatar-editor github.com 이 라이브러리를 쓰면, Input File 객체로 받은 이미지 데이터를, 유저가 지정한 부분만 Base64인코딩을 통해 잘라내어 반환하게 된다. 그러나 AWS S3 버킷에 저장하기 위해서는 File객체가 필요로 한데, 반환받은 Base64 ..
-
[2019.10.30] input type file 커스터마이징 방법개발 블로깅/오늘의 TIL 2019. 10. 31. 00:01
input type file을 쓰면, 각 브라우저마다 아래와 같이 나타나게 된다. 이처럼 input type을 file로 사용하는 태그는, 브라우저 내부에 정해진 대로 나타나기 때문에, 해당 디자인을 직접 변경할 수가 없다. 대신 이 태그를 숨기고, 직접 만든 태그 요소에 input file태그가 동작하도록 할 수 있다. #HTML 업로드 #css .filebox label { display: inline-block; padding: .5em .75em; color: #999; font-size:inherit; line-height: normal; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid #e..
-
[2019.10.28] source tree - Invalid username or password개발 블로깅/오늘의 TIL 2019. 10. 28. 13:49
평소 터미널에서 git push나 Pull 등 원격 저장소에 접근하는 것은 잘 되는데, 소스트리를 이용해서 접근을 하려고 하니 아래와 같은 메세지가 자꾸 나타나면서 접근이 되지 않는다. Invalid username or password github user 정보에는 이상이 없다... 구글링을 해보니 아래와 같이 해결할 수 있다. # 해결방법 소스트리 창이 켜진 상태에서, 소스트리의 '설정'을 클릭한다. 설정 창에서 'git' 탭 클릭 후, '시스템 Git 사용'을 클릭한다. 위와 같은 창이 뜨면, 바로 '열기' 버튼을 클릭하면 된다 이제는 정상적으로 소스트리에서 github 저장소로 접근이 가능하다~!
-
[2019.10.11] Mac 터미널로 VScode 여는 'code' 명령어를 영구적용 시키는 법개발 블로깅/오늘의 TIL 2019. 10. 11. 22:23
mac 터미널에서 VScode를 열기위해 사용하는 명령어 'code' 그런데 해당 명령어를 사용하게 위해서는 vscode를 들어가서 shell path 적용을 해주어야 해당 명령어를 사용할 수 있다. 그러나 이 방법은 VScode를 완전히 끄면, 다시 code 명령어를 사용할 수 없다. 그래서 이 명령어를 영구적으로 사용하는 방법을 구글링 해보면 대체적으로 아래와 같은 방법이 많이 보인다. # .bash_profile 혹은 .zshrc에 PATH 설정 cat > ~/.bash_profile # Visual Studio Code export PATH="\$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin/" EOF 그러나 나는 해당 ..
-
[2019.10.03] 오늘의 TIL - 같은 class의 특정 태그에만 Style을 다르게 적용시키기개발 블로깅/오늘의 TIL 2019. 10. 3. 12:45
똑같은 Element에 똑같은 Style을 적용시키기 위해 아래와 같이 코드를 작성한다. .item { width: 100%; height: 100%; border: 1px solid black; } 첫번째 두번째 세번째 위 코드는 세개의 div 태그에 똑같은 item의 style이 적용된다. 그러나 특정 div 태그에만 border 색을 다르게 하고 싶다면? 해결책은 다음과 같다. # 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법 .item { width: 100%; height: 100%; border: 1px solid black; } .item: first-child { border: 1px solid yellow; } # 첫 번째 div 태그에만 border색을 다르게 적용 시..
-
[2019.09.24] 오늘의 TIL - must be owner of table (postgresql sequelize migration error)개발 블로깅/오늘의 TIL 2019. 9. 25. 09:32
우선 나는 시퀄라이즈가 전역 설치로 되어있다. # you have to install pg package 테이블 칼럼의 변경사항이 생겨서 sequelize-cli을 이용해서 migration 작업을 하기위해 아래와 같이 명령어를 사용했다. sequlize db:migrate 그러나 아래와 같은 에러 메세지가 나타났다. you have to install pg package 뭔지 모를 pg를 설치하라고 하는데, 우선 로컬 설치 전역설치 둘 다 해보았다. 그래도 여전히 pg를 설치하라고 한다. 구글링 결과, 전역 설치된 sequalize를 사용하지 말고, 프로젝트 로컬로 설치해서 로컬 라이브러리에 내장되어있는 cli을 사용하라고 한다. 그래서 아래와 같이 사용했다. .node_moudules/.bin/seq..
-
[2019.09.13] git stash 사용법 - 현재 상태를 저장해보자개발 블로깅/오늘의 TIL 2019. 9. 13. 19:49
최근에 A브랜치에서 작업을 완료 후 pull Request를 올렸다. 그리고 새로운 기능의 작업을 위해 B브랜치를 따서 쭉 작업하는 중, A브랜치에서 작업한 내용의 코드 리뷰를 받아 수정할 사항이 생겼다. A브랜치로 넘어가 코드 수정을 해야하는데, B브랜치에서는 작업 중이다 보니 A브랜치로 그냥 넘어갈 수가 없다. 위 상황을 해결할 수 있는 방법은 아래와 같다. 현재 작업 중인 상황을 그대로 commit을 한다. 새로운 브랜치를 따서 commit 후, 다시 현재 브랜치로 돌아온다. git stash 명령어를 이용한다. 3번의 git stash 명령어를 이용하면, branch를 새로 따거나, 불필요한 commit을 막을 수 있다. git stash 현재의 상태를 임시로 저장한다. 사용법 예시를 위한 세팅 ..