오늘은 주절주절 남겨보는 기록 데브옵스 팀과 김 연구원 님에게 민폐 아닌 민폐를 끼치고 복잡한 감정이 들었다. 최근들어 기록의 습관도 들이고, 개발도 더 재밌어지면서 조금씩 성장하고 있다는 생각을 했는데, 오늘 일을 겪으니 아직 갈 길이 멀다. 요즘 팀의 개발환경 세팅에 신경쓰고있다. 이 회사는... 서버 방화벽 여는데 상신할 기안이 왜그리 많은지. 결재도 빨리 되는게 아니라 업무 딜레이가 심해질 때도 종종 생긴다. 일을 하기 위해 일을 만드는 느낌이다. 그래도 직접 서버 방화벽을 알아보면서 기안 상신해보니, 어떤 서버가 필요한지, 어떤 메커니즘으로 업무가 돌아가는지 감이 생긴다. 시야가 점차 밝아지는 기분이다. 9월이 되면 본격적으로 프로덕션 개발을 시작한다. 지금까지는 프로토타입 개발과 개발환경 세팅..

💻 함수가 왜 필요한지 생각해보았는가 멋쟁이사자처럼 직장인 코스의 보조강사로 일할 때, 수강생 한분이 함수를 도대체 왜 배워야하는 거냐고 물어본 기억이난다. 그 당시에는 뭐 이런 질문이 다 있지 싶었는데, 어떤 기능을 실행시키고 싶을 때 필요하기 때문이예요~ 정도로 답변을 드렸는데 지금 생각하면 0점짜리 대답이네. 오늘 노마드 코더 자바스크립트 챌린지 과정에서 함수를 왜 사용하느냐 라는 문제가 나왔고, 답은 코드 조각을 캡슐화 하기 위함이었다. 코드조각을 캡슐화한다. 특정 코드들을 따로 묶는다. 이렇게 묶어둔 코드 뭉치는 필요할 때 다시 사용할 수 있다. 즉 어떤 기능단위로 뭉쳐 놓은 코드는, 해당 기능이 필요할 때마다 적절히 사용할 수 있게 된다. 프로그래밍에서 함수가 필요한 이유다. 함수를 사용하는 ..

상황 : nestjs 서버 접속시 db 연결이 되지 않는 문제 발생 에러메시지 : could not connect to server: Connection refused Is the server running on host "localhost" (::1) and accepting TCP/IP connections on port 5432? 원인: pg 서버가 정상적으로 종료되지 않아 발생하는 에러 (postgres server가 닫힌 상태) 해결방법: 터미널에서 아래 경로로 접속하여 postmaster.pid 파일을 찾는다. $ /Users//Library/Application\ Support/Postgres/var-13 $ ls // ls 명령어로 디렉토리 내의 존재 파일 확인 -> postmaster.p..

자바스크립트의 Map 객체 객체와 마찬가지로 key 기반 컬렉션이다.하나의 key에 하나의 value 가 매핑되어 데이터가 저장되는 자료형으로, 객체(object)와 비슷한 구조로 이뤄져 있다. 공부하면서 느낀 가장 큰 차이점은, object 와 달리 forEach() 함수를 적용할 수 있다는 점이다. forEach() 함수를 적용하면 Map() 객체의 value 가 iterable 하게 리턴된다. 물론 object 도, Object.keys(obj) 함수를 사용하면 forEach() 를 적용할 수 있지만, key 값을 기반으로 iterator 가 돈다는 차이점이 있다. Object와 Map 비교 1. Object의 키는 Strings이며(only strings), Map의 키는 모든 값(any)을 가질..

이걸 리팩토링이라 부르는지 모르겠지만 (오히려 클린코드에 가깝나?), 백엔드 로직 처리 코드를 대량으로 줄였다. ☑️ Old way 여기서 코드가 길어진 이유는, MBTI 형식으로 데이터를 리턴하기 위해 "E, I", "N, S", "F, T", "P, J" 순서로 데이터를 정렬하기 때문이다. 여기서는 정렬 대신, resultObj 라는 객체를 만들어, MBTI 순서를 하드코딩 하는 형식으로 구현했다. // old way saveAnswers(resultArray) { let mbti = {} resultArray.forEach(result => { mbti[result] = (mbti[result] || 0) + 1 }) const resultObj = { "IE": '', "SN" : '', "TF"..

❌ cors 이슈 front 단에서 axios 로 api 를 호출할 때 CORS 이슈가 발생했다. back 단(nestjs) 에서 app.enableCors() 처리를 해주었음에도 cors 가 발생하여 의아했는데, 이유는 front 에서 호출시 url의 문제였다. // wrong way await axios.post("localhost:4000/hospital/postAnswers", { ... }) // right way await axios.post("http://localhost:4000/hospital/postAnswers", { ... }) url 에 http:// 를 붙여주냐 아니냐의 차이임을 알게 됐다. ✅ 원인 아래 그림을 참고하면, http 는 scheme 의 해당되는 영역으로 프로토콜을..

React router 처리를 하기 위해 Link 태그를 사용했다. 그런데 아래 코드에서 명시한대로 /resultpage 주소로 리다이렉션 될 거라 생각했는데, url 에 변경이 없었다. 🌿 첫번째 케이스의 이유는 div 태그에서 선언한 onClick() 에 있었다. 라우팅 처리가 되기 이전에, onClick() 함수를 먼저 타버리면서 로직이 실행됐다. 그렇기 때문에 원하는 방향으로 라우팅 처리가 이뤄지지 않았다. ToNextStep(e)}> {answerB} 🌿 두번째 케이스의 이유는 클릭하는 위치의 문제였다. ToNextStep(e)}> {answerA} 주황색 하이라이트 부분은 Link 태그의 영역이고, 그 바깥 부분은 div 에 해당 (Link 에 해당되지 않는) 되는 부분이다. 개발 의도는 버튼..

❌ 자바스크립트 in 연산자 : 잘못 알고 있었던 점 switch(true) 분기문을 사용하기 위해 case 구문에 in 연산자를 적용했다. 배열에 속한 원소값을 in 연산자 앞에 명시하여, 해당 원소가 배열에 존재하면 true 를 , 그렇지 않으면 false 를 리턴할 것이라 생각했다. 아래 코드에서 적용한 In 연산자가 당연히 제대로 작동할 것이라 생각했지만 결과적으로 분기를 타지 않았다. const result = [] const IE = ["I", "E"] const SN = ["S", "N"] const TF = ["T", "F"] const JP = ["J", "P"] const switchResult = (key) => { // key = "I" || "E" || "S" || "N" ... ..

📗 whitelist:true 일 때 DTO의 어노테이션이 미치는 영향 이런 DTO에 맞게 데이터가 들어오는지 테스트를 해봤는데, 값이 제대로 들어오지 않았다. export class CreateStudyDto{ title: string; subtitle: string; purpose: string; dateTime: string; curriculum: string; noti: string; apply: string; } 이유는 @IsString() 어노테이션을 붙여주지 않았기 때문이다. 이유는 main.ts 에서 validator, 그중에서도 whitelist : true 를 사용했기 때문이다. app.useGlobalPipes(new ValidationPipe({ whitelist: true, tra..