closure란? 간단히 말하자면 함수 내에 함수를 정의하고 사용하면 클로저라고 한다. MDN 에서는 다음과 같이 정의한다. 클로저는 독립적인 변수를 가리키는 함수이다. 또는, 클로저 안에 정의된 함수는 만들어진 환경을 '기억한다'. function outerFunc() { var x = 10; var innerFunc = function () { return x; }; } var inner = outerFunc(); console.log(inner()); // 10 outerFunc()은 innerFunc을 반환하고 innerFunc 은 outerFunc 내부의 변수를 참조하고 있다. outerFunc이 실행이 되면서 함수가 풀어지게 되지만 innerFunc은 여전히 outerFunc 내부의 변수를 참..

자바스크립트의 모든 객체는 자신의 부모 역활을 하는 객체와 연결되어 있다. 그리고 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용하는 것이 가능하다. 이러한 부모 객체를 Prototype 객체 또는 Prototype 이라고 한다. var foo = { name : "foo", age : 30 }; console.log(foo.toString()); // "[object object]" foo에는 toString() 메서드가 없으므로 에러가 발생해야 하지만 제대로 출력되고 있다. 그 이유는 foo 객체의 프로토타입에 toString()메서드가 이미 정의되어 있기 때문이다. foo객체를 출력하여 확인 해보면 toString()메서드가 정의되어 있는 것을 확인할 수 있다. ECMAScript 명세서에는 자바..

오늘 한일 client는 S3, sever는 EC2, 데이터베이스는 RDS를 사용하여 프로젝트 배포를 진행하였다. 배포를 완료하고 확인해 해보았는데 처음엔 RDS에 접속이 되지 않았다. 뭐가 문제인진 정확히 알아내진 못하였지만 DB connect정보를 새롭게 작성하니 해결이 되었다. 그리고 EC2 접속이 안되는 문제가 발생하였는데 여기서 많은 시간을 소비하였다. err connect refuse .... 이러한 에러가 발생하였다. 처음엔 권한 문제인가 싶었지만 권한은 전부 allow해둔 상태였다. CORS 문제인가도 싶었지만 그것도 문제가 아니였다. 문제는 client에서 fetch IP 주소를 EC2 퍼블릭IP 주소로 변경해 줘야 했는데 그러질 않았던 것이다. 배포후 에러를 확인해보는데 아직 수정할 곳..

오늘 한일 레이아웃을 제외한 css를 다듬어 주고 card를 이동시키는 부분을 만들어 주었다. react DnD 라이브러리를 사용하여 구현 하고 싶었지만 꽤나 시간이 걸릴것 같아서 다른 방법을 생각했다. card의 move를 클릭하면 container마다 클릭 할수 있는 이모지가 나타나고 해당 이모지를 클릭하면 이동하는 방식으로 만들었다. -move를 클릭했을 때 해당 card의 key가 state에 저장이 되고 container 마다 웃고 있는 이모지가 나타 난다. -이모지를 클릭 했을 때 containerkey를 인자로 넘겨주어 함수가 실행이 되고 card가 클릭한 이모지 의 container로 넘어 간다.

오늘 한일 container의 이름을 변경 하기 위한 방법으로 text를 클릭하면 input 으로 변경이 되게 하여 수정을 하게 해주려고 하였다. 원래의 코드는 아래와 같았다. 아래의 코드에서 부분을 state의 true/false 값으로 변환을 시켜주려고 했다. 하지만 여러 container가 하나의 state를 공유하고 있어서 하나의 보드를 클릭하면 모든 보드의 값이 변화 하였다. {this.state.containers.map((con, index) => {con.ct_name} 수정 삭제 {con.cards.map((card, index)=> x )} 그래서 새로운 컴포넌트를 만들어서 각각의 버튼마다 각각의 state를 가지게 만들어 주었지만 map이 돌아가지 않는 에러가 발생하였다. 그리고 하나..

오늘 한일 백에서 구현한 기능들을 프론트와 대부분 연결을 시켜주었다. API 연결 시키는건 그렇게 어려운 일이 아니였는데 어떤 버튼을 사용할지 클릭을 했을경우 해당 컴포넌트에 변화를 주는 등 css를 사용하는 부분에서 많은 시간을 소비하였다. 그래도 reactstrap을 사용하여 시간을 단축 할 수 있었다. 아직 css로 다듬어 줘야 하는 부분이 꽤 많이 남았다.(drag & drop도 적용해줘야 한다...) button => input 창으로 변환 state의 addCtBtn의 true/false 값에 따라 불러오는 컨포넌트를 변경하도록 해주 었다. {this.state.addCtBtn ? ( : ( + Add another list )} 클릭 전 클릭 후 reactstrap을 사용한 Input 창 add