728x90
반응형
- [팀] 겸상 - Postman에서는 GET요청에서 body를 보낼 수 있는데, Axios에서는 불가2022-07-03 11:52:42겸상 팀 프로젝트에서 맡은 화면 및 기능 구현을 거의 마무리하였고 이제 API를 붙이고 있다. 밥상 목록 중 신청한 밥상만 추려서 가져오는 API를 붙이던 중에 경험한 일이다. [그림 1]과 같이 Postman에서는 GET 요청 시 body가 전달되고 원하는 응답을 받을 수 있었다. 하지만 Axios를 통해 요청하면 [그림 2]와 같은 현상이 발생하였다. 이 문제로 많은 시간을 보냈는데 결론은 Axios에서 GET 요청 시에는 body를 보낼 수 없다고 한다. 아래 링크는 참조한 자료이다. https://jacobgrowthstory.tistory.com/44 [Axios] get 요청 시 Query Params 보내기 (에러핸들링) 프로젝트 중 axios를 통해 get 요청 시 에러가 발생했다. req..
- [팀] 겸상 - Vue.js에서 textarea에 동적 메시지 값 데이터바인딩 처리2022-06-30 00:37:06겸상 프로젝트 팀 회의에서 선택된 숟갈에게 각 숟갈의 닉네임이 포함된 단체 메시지를 발송하는 것에 대해 부정적인 의견이 모아졌다. 숟갈의 프라이버시를 침해할 수 있다는 것이 이유였다. 사실 숟갈이 선택될 때마다 textarea에 동적으로 default 메시지를-자동적으로-생성하는 기능을 구현하기 위해 꽤 애를 먹었기 때문에 그런 팀원들의 의견이 반갑지 않았다. 그래도 팀 내 다수의 의견이므로 이 기능을 빼기로 했고, 아쉬우니 블로그에는 남겨 두고자 이 글을 작성한다. [그림 1]과 같이 함께할 숟갈이 모두 선택되면 textarea가 표시된다. textarea에는 사용자가 입력하지 않아도 default로 메모가 작성되어 있고 이 메모는 수정이나 삭제가 가능하다. 사실 여기까지의 구현은 매우 간단하다. 문제..
- [팀] 겸상 - CSS의 linear-gradien와 rgba를 이용해 투명 그라데이션 적용2022-06-23 01:24:17그간 작성했던 함께할 숟갈 페이지를 팀 회의 때 보여 주었다. sticky를 적용하여 선택된 숟갈을 모니터링할 수 있도록 처리한 부분은 좋게 평가를 받았다. 하지만 하단의 "선택 완료" 버튼 부분의 처리가 아쉽다는 의견이 지배적이었다. 회의가 끝나고 계속 고민하던 중에 하단부가 자연스러울 수 있도록 그라데이션 효과를 주면 어떨까 하는 생각이 들었다. sticky가 적용된 "함께할 숟갈"의 bottom 부분을 자연스럽게 처리하기 위해서 흰색 투명 그라데이션을 주기로 하였다. 그래서 아래 코드와 같이 linear-gradient 안에 rgba를 각각 0(투명), 1(불투명)으로 주어 밑에서 위로 올라가면서 점점 불투명해지는 효과를 주고자 하였다. 하지만 [그림 1]에서 빨간색으로 표시한 부분에 해당 효과가 ..
- [팀] 겸상 - CSS의 z-index로 HTML요소에 우선순위 부여하여 sticky 적용한 요소를 화면 전면에 위치시키기2022-06-20 18:56:10포토샵에서 레이어의 위치를 조정하듯 원하는 HTML 요소를 화면에서 가장 위쪽에 보이도록 할 필요가 있었다. [그림 1]의 "함께할 숟갈"에 sticky를 적용하여 스크롤을 내리면 화면 최상단에 고정되게 하였다. 그런데 "함께할 숟갈"이 화면의 전면에 위치하지 않고 뒤로 숨어버리는 문제가 발생하였다. 원했던 결과는 "함께할 숟갈"이 [그림 3]과 같이 화면의 가장 앞쪽에 표시되도록 하는 것이었다. 이때 z-index를 이용하여 HTML 요소에 우선순위를 지정하면 간단히 해결할 수 있었다.
- [팀] 겸상 - 5주차 전체미팅: 데이터베이스 설계(220605)2022-06-06 18:15:29| 데이터베이스 설계 진행 과정 부트캠프에서는 구글 워크시트를 이용해 데이터베이스 설계를 진행했었다. 그런데 우리 팀장이 ERDCloud라는 서비스를 사용할 것을 제안하여 이번에 처음으로 사용해 보았고, 서비스 경험은 매우 좋았다. 그 이유는 크게 세 가지인데 다음과 같다. 테이블명과 컬럼명을 실제 DBMS에서 사용하는 이름과 별개로 한글로 알아보기 좋게 기입할 수 있다. 협업이 가능하다는 점이다. 작업 후 sql 내보내기가 가능하다. sql 뿐만 아니라 png, xlsx로도 내보낼 수 있다. 1번과 2번의 작업은 엑셀 워크시트에서도 가능하다. 하지만 3번은 MySQL에서 다시 작업해야 한다. ERDCloud를 사용함으로써 단번에 1, 2, 3번이 가능해졌으니 사용하지 않을 이유가 없었다. 사용방법도 직..
- [개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #13 | 연속적인 역슬래시(\)를 슬래시(/)로 변경하는 정규식2022-06-05 15:16:10| 이슈 역슬래시(\) 입력할 경우 처리 문제 프런트단에서 input type=file로 mdb 파일의 경로를 가져오려고 했다. 그런데 보안 정책으로 인해 경로가 "fakepath"로 가려져서 전체 경로를 가져올 수 없었다. 따라서-사용자 입장에서는 번거롭겠지만-[그림 1]과 같이 사용자가 직접 경로를 작성하는 방식으로 구현하였다. 그런데 만약 사용자가 경로를 입력할 때 슬래시(/)가 아니라 역슬래시(\)를 입력한다면 어떻게 해야 할까? 이 부분을 처리하기 위해 고민을 많이 했다. 사용자가 역슬래시를 입력할 경우 모든 역슬래시를 슬래시로 바꿔야 하는데 replaceAll을 사용해 봤으나 잘 안됐다. 결론적으로 replace와 정규식을 이용하여 해결했는데 해당 코드는 다음과 같다. async setMdbP..
- [개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #12 | CORS 허용했는데 CORS 문제로 난감한 상황 해결2022-06-04 21:54:56| 이슈 비어있는 req.body 카스 전자저울의 mdb 파일이 있는 경로를 영속적으로 관리하기 위해 mdb 파일이 있는 경로를 mdbpath.txt에 text 형식으로 써두고자 하였다. 그래서 프런트단에서 사용자가 입력한 경로 정보를 post 방식으로 백단으로 보내고자 하였다. 그런데 [그림 1]과 같이 CORS 문제가 발생하였다. 문제는 백단인 Node.js에서 이미 프론트단에 해당하는 "http://localhost:8080"를 CORS 허용해 주었음에도 불구하고 이 같은 문제가 발생했다는 것이다. 결론부터 말하자면 프론트단에서 post로 data를 서버로 넘길 때 data의 형태가 반드시 객체이어야 한다는 것이다. 그걸 모르고 문자열 형태로 계속 넘기면서 다른 데서 원인을 찾고 있었으니 문제가 해..
- [개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #11 | Node.js에서 req.body의 빈 객체 문제로 인해 body-parser 모듈 적용2022-06-02 15:01:57| 이슈 비어있는 req.body 카스 전자저울의 mdb 파일이 있는 경로를 영속적으로 관리하기 위해 mdb 파일이 있는 경로를 mdbpath.txt에 text 형식으로 써두고자 하였다. 그래서-Node.js에서-post 방식으로 req를 받았는데 req.body가 빈 객체로 왔다. 코드와 실행결과는 다음과 같다. app.post('/mdbpath', (req, res) => { console.log(req.body) res.send('Ok') }) PS C:\Users\J\Documents\GitHub\auuto_packing_make\server> node .\papp.js 서버가 포트 3000번으로 시작되었습니다. {} req.body가 빈 객체로 오는 문제는 body-parser 모듈로 해결이 가..
728x90
반응형