후니후니

개발자 카페를 둘러보다가 CORS에 대한 내용을 봤었는데, CORS CORS 들어보기만 했지, 정확한 뜻을 이해하지 못하고 있던 것 같아 조금 더 정보를 찾아봤다. 일반적으로 https://domain-a.com 에서 https://domain-b.com 자료를 요청하는경우 불가능하다. 왜 불가능할까? 동일출처 정책에 의해서 같은 도메인인 경우에만 자료 요청이 가능하고, 다른 도메인으로 요청하는 경우 가능하지 않다. 하지만, 해당 도메인을 CORS 허용 해준다면, 자료를 가지고 올 수 있다. CORS는 Cross-Origin Resource Sharing의 약자다. 그렇다면 허용을 어떻게 해줄 수 있을까? 서버에서 Access-control-allow-origin 설정을 통해 할 수 있다고 한다. 이 부..

요즘 결혼식 준비한다고 공부를 거의 못 했다. 오랜만에 유튜브 클론 강의를 다시 듣기 시작했다. 거의 일주일을 보지 않았더니, MongoDB 명령어를 기억에서 삭제해버렸다. mongod로 mongo를 실행한 후, start mongo로 터미널을 먼저 열었는데, 컬렉션을 조회하거나, 정보를 조회하는 명령어를 기억해내느라 애먹었다. 먼저 show dbs로 생성된 db 목록을 확인한 후, use "db 이름" 으로 이동했다. show collections로 생성한 collection을 확인하고, db.stats()로 현재 db의 정보를 확인하며 공부했던 기억을 떠올려갔다. 오늘 사용한 명령어를 정리해보자면, DB 조회 = show dbs 해당 DB 이동 = use "db" Collections 조회 = sho..

#TDD TDD 스터디 중 축약 문법을 사용하여 최대한 짧게 작성한 함수와, 코드를 조금 길게 작성하더라도 가독성을 위한 코드, 둘 중 무엇이 좋을까 의견을 나누어봤다. 의견을 나누어보니, 코드를 길게하더라도 성능 이슈가 크지 않다면 가독성을 높이는 게 더 좋겠다는 의견이 많았고, 요즘 컴퓨터 성능이 좋아지면서 크리티컬한 성능 문제가 있지 않을 경우 코드 길이를 조금 길게한다고 하여 성능에 큰 이상을 줄 것 같지는 않아 가독성 있게 코드를 작성해보기로 했다. 오늘 공부할 테스트 코드는 [평균 구하기]로, 배열을 전달받아 배열의 수를 모두 더한 후 평균을 구하는 코드다. // 테스트 코드 import { solution } from "./평균구하기"; const array1 = [1, 2, 3, 4]; c..

#TDD 수박수박.js 테스트 코드를 작성하고 리팩토링을 했다. --- 수박수박.js export const solution = (n) => { const arrayWaterMelon = []; for (let i = 1; i a + c); }; --- 수박수박.test.js import { solution } from "./수박수박"; describe("수박수박 테스트", () => { it("수박수박", () => { expect(solution(3)).toEqual("수박수"); expect(solution(4)).toEqual("수박수박"); expect(solution(1)).toEqual("수"); }); }); 별로 리팩토링 한 건 없다. 처음에는 변수로 const water = "수" co..

# TDD 어제 작성한 "두 정수 사이의 합" 테스트 코드를 리팩토링 했다. const arrayCompare = (a, b) => { const array = []; const maxNum = a > b ? a : b; const minNum = a ac + cu); }; 숫자가 같을 경우 정수 사이의 합이 없기 때문에 그대로 리턴해주는 코드를 추가하고, maxNum & minNum에 담는 값을 바로 계산하여 indent를 줄이고, 삼항연산자를 사용하여 if 문을 제거했다. 조금 더 간결하고 가독성있고, 좋은 코드가 있을 거 같은데..

# TDD TDD, 개발할 때 TDD 방식으로 하면 정말 장점이 많다는 말을 많이 들었다. 평소에 관심만 가지다가, 회사에서 동료분들과 스터디를 할 기회가 생겼고, 매주 프로그래머스의 문제를 하나씩 테스트 코드를 작성하여 풀어보기로 했다. 예전에 JEST로 테스트 코드를 맛보기(?) 정도로 작성했던 적이 있지만, 정확한 사용법은 알지 못 했다. 이번에야 말로 확실히 TDD의 개념을 잡아보려 마음먹었다. TDD는 순환 방식으로 진행한다. Test fail -> Test Success -> Refactoring 먼저 테스트 코드를 작성해서 fail 시킨 후, 작성한 테스트 코드에 통과하기 위한 함수를 작성한다. 테스트에 통과하면, 해당 함수를 리팩토링한다. 리팩토링 기준은 아래의 기준으로 잡고 진행하려고 한..

JavaScript 작동 원리가 어떻게 될까요? 매일 같이 JavaScript를 사용하고, 어느덧 코딩을 시작한지 1년이 다 되어가는데, 자바스크립트의 동작 원리를 스스로 잘 모르고 있었습니다. Front-end에서 빠질 수 없는 언어, JavaScript의 작동 원리를 알아보았습니다. JavaScript 는 싱글스레드 기반의 콜백 큐를 사용합니다. 따라서 한번에 한 작업만 실행할 수 있는 인터프리트 방식입니다. 자바스크립트 엔진 관련해서 사용되는 것들을 알아보겠습니다. Stack Queue Heap Event Loop Stack a(x, y) { return x + y; } b(x, x) { const sum = a(x, x); console.log(sum); } b(10,20); 위 코드를 실행했을 ..

MVVM = Model View ViewModel의 약자입니다. Vue.js 에서는 이 패턴을 사용하고 있음을 아래의 사진으로 알 수 있습니다. 사진의 ViewModel이 양방향 데이터 바인딩을 가능하게 해줍니다. M(모델) : 프로그램에서 실제 사용하는 데이터를 다루는 부분. V(뷰) : 사용자에게 데이터를 보여주는, 사용자가 눈으로 볼 수 있는 부분. VM(뷰모델): View와 Model 사이의 인터페이스 역할, 모델의 데이터를 뷰에 바인딩하고, 뷰에 보여질 동작들을 제어한다. var vm = new Vue ({ }) // Vue instance Create 이렇게 생성된 Vue instance는 VM이 됩니다. $el 은 MVVM 에서 View로 볼 수 있고, $data는 MVVM에서 Model로 ..

MVP = Model View Presenter 의 약자입니다. M(모델) : 프로그램에서 실제 사용하는 데이터를 다루는 부분. V(뷰) : 사용자에게 데이터를 보여주는, 사용자가 눈으로 볼 수 있는 부분. P(프리젠터): View에서 요청받은 정보를 Model에서 가공해 다시 View에게 전달해주는 부분. MVC 패턴과 달리, View와 Model의 의존성 부분이 해결됩니다. 하지만 View와 Presenter의 의존성이 높아집니다. 사용자의 요청은 View를 통해 들어온다 -> View는 요청을 받고, Presenter로 요청한다. -> Presenter는 Model 에게 데이터를 요청한다 -> Model는 요청받은 데이터를 Presenter에 보내준다 -> Presenter는 View에게 데이터를 ..

MVC 라는 말은 참 많이 듣기도 하고, 어느정도 이해는 하고 있는데 누군가 나에게 MVC패턴이 뭔가요? 라고 하면 설명을 해주지 못 할 것 같아 MVC에 대해 정리해보았습니다. MVC 패턴이란? MVC = Model View Controller 의 약자입니다. M(모델) : 프로그램에서 실제 사용하는 데이터를 다루는 부분. V(뷰) : 사용자에게 데이터를 보여주는, 사용자가 눈으로 볼 수 있는 부분. C(컨트롤러): Model에 명령을 보내 데이터를 바꿔줄 수 있고, View에 명령을 보내 표시될 데이터를 바꿔줄 수 있는 부분. MVC 패턴 관련해서 많이 찾아봤지만, 내용이 미세하게 달랐습니다. 저는 이렇게 이해했습니다. 사용자의 입력을 컨트롤러에 요청(입력)한다 -> Model은 요청을 받고, 데이터..