Devlog 48

Heroku 배포 - 백엔드 배포 과정 중 나를 당혹스럽게 만들었던 상황 모음집

프론트 배포는 Netlify로, 백엔드는 Heroku로 배포하기로 했다. Netlify를 통한 프론트 배포는 나름 easy peasy lemon squeezy였는데, 백엔드 배포는 정말이지 나를 하루웬종일 괴롭혔다. 🤯 내가 무지한 탓에 필요 이상으로 헤매고 고생한거긴 하지만 ㅎ... 어쨌든 정말 산 넘어 산이었다. 1. Heroku Git을 통한 deployment - 뭐 이렇게 복잡하지? 사실 Heroku는 documentation를 정말 친절하고 자세하게 제공해주기 때문에, 사용방법을 제대로 이해한 후 시키는대로 잘 따라가기만 한다면 헤맬 일이 거의 없다. 하지만 난 떠먹여줘도 못 받아먹었다는 점 🙄 한참을 헤매고 헤매다가 겨우 배포했다. ❓ Heroku CLI 설치가 안 되는 것 같은데? Inst..

Devlog/Web 2022.03.18

[SQL] Basic SQL Statements

데이터베이스 생성 CREATE DATABASE [IF NOT EXISTS] database_name; 데이터 여러개 한꺼번에 추가 INSERT INTO MyTable (Column1, Column2, Column3) VALUES ('John', 123, 'Lloyds Office'), ('Jane', 124, 'Lloyds Office'), ('Billy', 125, 'London Office'), ('Miranda', 126, 'Bristol Office'); 데이터 수정 UPDATE Customers SET ContactName = 'Alfred Schmidt', City= 'Frankfurt' WHERE CustomerID = 1; ALTER/MODIFY COLUMN ALTER TABLE table..

Devlog/Web 2022.03.02

Netlify 배포 - 빌드 에러 해결방법

Netlify는 워낙에 사용하기 쉬운 서비스고, 사용 방법은 검색만 하면 수도 없이 나오는데 에러날게 뭐가 있나 싶겠지만... 혹시나 나처럼 삽질하시는 분들이 계실까봐 남겨놓는 기록 ㅎㅎ 💢 Deploy failed - Failed during stage 'building site': Build script returned non-zero exit code: 2 ▪에러내용 : 여러 블로거분들께서 정리해주신 배포 셋팅 방법을 (대충) 보고 따라했다. 처음에 basic build settings에서 base directory, build command, publish directory를 입력해줘야 했는데, 대부분의 블로거분들은 base directory는 빈칸, publish directory는 "/buil..

Devlog/Web 2022.02.28

[Express+MySQL] DB 연결 시 발생하는 access error 해결방법

💢 Access denied for user ''@'localhost' (using password: NO) ▪문제상황 : mysql 연결 객체 모듈화, dotenv 설치 후 환경 변수 설정까지 모두 완료했지만, 연결 확인을 해보려고 하면 저런 에러가 떴다. Error: ER_ACCESS_DENIED_ERROR: Access denied for user ''@'localhost' (using password: NO) ... code: 'ER_ACCESS_DENIED_ERROR', errno: 1045, sqlMessage: "Access denied for user ''@'localhost' (using password: NO)", sqlState: '28000', fatal: true root가 들어가..

Devlog/Web 2021.11.23

[React] hover effect 이벤트함수가 child element에 제대로 적용이 안 될 때 해결방법

💢 onMouseOver 이벤트가 child element에는 적용 안 되고 parent element에만 적용될 때 ▪에러내용 : 마우스 커서를 메뉴버튼 위에 올렸을 때 버튼이 회색으로 바뀌고, 커서를 떼면 원래 색으로 돌아오도록 이벤트함수를 만들었다. 잘 작동하는 듯 했는데, 자세히 보니까 메뉴버튼에 위치한 svg 아이콘 위에 마우스를 올리면 색이 제대로 안 바뀌는 현상이 발생했다. 메뉴 component 안에 child로 아이콘을 넣어놨으니까, child element에는 parent에 적용된 이벤트함수가 제대로 적용이 안 되는 문제라고 생각하고 해결방법을 찾아봤다. ▪원인 : e.target 사용 ▪해결방법: e.currentTarget 사용 function MouseOverUserMenu(e) ..

Devlog/Web 2021.10.11

[Android: Kotlin] ScrollView에 CardView 여러개 추가하기 / 동적으로 CardView 추가하기

ScrollView에 CardView 여러개 추가하기 🔼 무작정 ScrollView에 CardView 여러개를 욱여넣으면 java.lang.IllegalStateException: ScrollView can host only one direct child 라는 에러가 뜨게 된다. 처음엔 당황스러웠는데 곰곰이 생각해보니 답이 쉽게 나왔다. 'one direct child만 host 할 수 있다고? 그럼 추가하고자 하는 모든 cardview들을 하나로 묶어서(?) 하나의 child로 만들어버리면 되지 않을까?' 🔼 LinearLayout 안에 ScrollView 배치, 그리고 그 안에 LinearLayout. root_layout에 CardView를 계속 넣어주다보면 스크롤바가 생김. 간단하게 해결! 동적으..

Devlog/Android 2021.10.02

[Android: Kotlin] ViewPager로 fragment 스와이프 - 옆으로 밀어서 넘기는 단일문항 설문지 기능 구현하기

"부장님 추가하기" 기능을 구현할 차례. 문제 상황 우리가 구상한 방식은 스와이프 방식의 설문지 형식이었고, 다른 방식으로의 타협은 없었다. 이 기능만큼은 무조건 한 문항씩 답변하고 다음 문항으로 스와이프하는 형식이어야만 했다. 그런데 이게 말이 쉽지, 막상 구현하려니 제일 애먹은 부분 중 하나였다. 뭐라고 검색해야 할지조차 모르겠어서 더 어려웠다. 어찌저찌 생각나는 단어 다 열거해서 검색해보고, (동적 layout 추가 삭제, fragment 슬라이드, 레이아웃 재사용, programmatically include layout, ...) 여러 깃허브 프로젝트들 기웃거리면서 며칠간 헤매다가 드디어 원하던걸 찾았다. 내가 필요했던건 ViewPager!!!!!🤪 처음엔 시간에 쫓겨서 일단 어떻게든 돌아가도록..

Devlog/Android 2021.10.02

[React: CSS] CSS도 효율적으로 깔끔하게 적용하자✨

✅ flex display: flex; // 세로로 정렬 flex-direction: column; // 가로로 정렬 flex-direction: row; // 진행방향 기준 정렬 justify-content: flex-start // default justify-content: flex-end justify-content: center; // 아이템 사이 공간 제어 justify-content: space-between; justify-content: space-around; https://naradesign.github.io/flex-justify-align.html CSS flexible 레이아웃: flex item의 정렬과 간격. HTML, CSS(flex/grid), UI/UX, Accessib..

Devlog/Web 2021.09.29

[Unity: C#] VS Code로 script 작성하기 - 초기셋팅 / 참고사항

초기 셋팅 1. Extensions에서 C# extension을 설치해준다. VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp 2. .NET Core를 설치한 적이 없다면 설치해준다. .NET Framework 4.8: https://dotnet.microsoft.com/download/dotnet-framework/thank-you/net48-developer-pack-offline-installer 3. Unity에서 기본 Script Editor를 VS Code로 설정해준다. Edit → Preferences → External Tools → External Script Edito..

Devlog/Unity 2021.09.13

[Unity] Unity 자주 쓰는 단축키 / 기본설정 / 주의사항 (Windows 기준)

Tools Rotate Tool 이용 시 Ctrl + drag - 15도씩 끊어서 회전 가능 X - object 좌표축 Local ↔ Global 변경 Scene View 마우스 휠 스크롤 - 확대/축소 Alt + drag - orbiting (화면 중심 기준 회전) Ctrl + Alt + drag - panning (화면 중심을 이동) F - focus (Hierarchy에서 오브젝트 선택 후 scene 위에 마우스 올리고 F) Shift + F - lock view (선택된 이동하는 오브젝트를 가상의 카메라로 따라가서 보듯 focusing) V + 오브젝트의 꼭짓점 클릭 후 drag - vertex snapping (꼭짓점끼리 자석처럼 연결해서 붙이기) (Animator) A - 화면 사이즈에 맞게 ..

Devlog/Unity 2021.09.13

[Android: Kotlin] Bottom Navigation (화면 맨 아래 탭 기능) 구현하기

프로젝트를 시작하면서 제일 먼저 무대뽀로 만들었던 기능은 '탭' 기능이었다. 이게 처음에 기획한 prototype인데, 이렇게 앱을 구현하기 위해서는 제일 먼저 홈, 내 정보 등의 탭들 간의 이동이 가능하도록 만드는 것이 중요하다고 판단했기 때문이다. 안드로이드에서 제공하는 BottomNavigationView를 이용했고, 각 탭이 선택될 때 MainActivity에서 fragment로 띄워지는 형태이다. 이 글을 쓰는 시점에서는 android.material gradle 버전이 1.4.0으로 업그레이드 됨으로써 BottomNavigationView는 deprecated code가 되었다. 대신 NavigationBarView로 바뀌었던데, 잘 모르겠다. 일단은 그냥 gradle 1.2.0 버전을 유지하..

Devlog/Android 2021.09.06

[React] useAsync 조건문 사용하기 (if문 ❌)

💢 if문 내에서 useAsync 사용이 안 되는 문제 ▪문제상황 : 한 페이지 내에서 두 가지의 상태(buyer, seller)를 관리해야돼서 userType에 따라 buyer/seller data를 fetch하려고 했다. if (userType === 'buyer') { const [buyerState] = useAsync(() => InfoService.getBuyer(user), []); } else { const [sellerState] = useAsync(() => InfoService.getSeller(user), []); } 근데 if문 안에 useAsync 선언하자마자 ESLint가 경고문을 띄움. React Hook "useAsync" is called conditionally. Rea..

Devlog/Web 2021.08.27

[React] MacOS onKeyDown 이벤트 시 한글 깨짐 문제 해결방법

💢 맥에서 한글로 text input 입력 후 이벤트를 trigger했을 때 단어가 제대로 인식이 안 되고 깨지는 문제 ▪에러내용 : 세 명의 팀원 중 두 명은 윈도우 환경에서 개발 중이고, 한 명은 맥북을 쓰고 있다. input란에 키워드를 입력하고 enter키를 누르면 키워드태그가 생성되는 기능을 구현했는데 이상한 문제가 발생했다. 윈도우를 쓰는 사람들 기준에서는 아무 문제 없이 태그가 정상적으로 등록됐는데, 똑같은 코드인데도 불구하고 이상하게 맥북에서는 기능이 정상적으로 수행이 안 되는 것이다. 예를 들어 사과, 토마토, 복숭아를 입력한다고 치면 윈도우에서는 위의 gif처럼 키워드 태그 3개가 각각 예쁘게 잘 생성됐는데, 맥북에서는 '사과', '과', '토마토', '토', '복숭아', '아' 이렇게..

Devlog/Web 2021.08.04

[React] 이미지파일 import 실패 에러 해결방법

💢 이미지파일 import 실패 ▪에러내용 : png react Module parse failed: Unexpected character (1:0) ▪원인 : 이미지파일 loader 부재 ▪해결방법: 1. install file-loader $ npm install file-loader --save-dev 2. add loader to webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, }; 1, 2를 차례대로 수행한 후에 이미지파일을 다시 import 해보면 문제없이 잘 컴파일된다. 참고자료 https://v4.we..

Devlog/Web 2021.08.04

[React] 프로젝트 초기 설정 / 협업 규칙

React 설치, 초기 세팅 1. Visual Studio Code, Node.js 설치 2. 적당한 위치에 작업 폴더 생성 3. VSCode에서 open folder로 작업폴더 열기 4. VSCode 터미널 열기 (Ctrl + Shift + `) 5. 터미널에 "npx create-react-app 프로젝트명" 입력 (ex. npx create-react-app myproject) cf) npx create-react-app . 을 입력하면 프로젝트 파일 생성 없이 진행 가능 (개발할 때 매우 편리함) → 프로젝트 파일을 확인해보면 react 개발에 필요한 모든 파일들이 설치된걸 확인할 수 있음 6. src 파일 내에서 코드 작성 7. 코드 작성한걸 미리보기로 띄우려면 터미널 열고 npm start 입..

Devlog/Web 2021.07.18
반응형