제가 맡은 부분을 테스트중 카드 생성을 할때 문제가 생겼습니다.
카드를 옮긴 후 생성을 하려니 오류가나서 처음에 칼럼아이디만 받는것을 보드 아이디도 받게 해서 시퀀스가 겹쳐도 구분이 되게 했습니다.
현재 되돌리기 후 npm run start를 실행해보니 실행이 되지않고 아래와 같은 오류가 나타났습니다.
Error EPERM: operation not permitted, unlink 'C:\Users\tnals\OneDrive\바 탕 화면\NBD_Sparta\node\nodejs_7\workflow-service\dist\_common\security\jwt'인터넷에서 나온 방법대로 시도해봤지만 결과는 달라지지 않았습니다.
EPERM: operation not permitted 에러날때 이 사이트가 처음에 따라했을땐 되지않았으나 댓글처럼 바탕화면이 아닌 해당 폴더에 가서 다시 해보니 잘 됐습니다.
테스트중 카드가 for문이 도는 만큼 생성된다는것을 알았습니다.
그래서 카드 만드는 함수를 빼서 컬럼을 뿌려주는 것 뒤에 붙였는데 값이 들어오지 않아 고민하다가, 컬럼이 뿌려지는 for문안에 카드 get을 받아와 map을 돌려 html을 join해서 넣어주고 해당 변수를 카드가 붙는 자리에 넣어줬습니다.
그리고 카드를 생성하려는 버튼을 뿌려지는 함수 제일 밑에 넣어주니 잘 나오고 잘 들어갔습니다.
- card get 함수
// card get api
async function CardGet(columnId) {
// url에서 쿼리가 필요한 경우 -> 예시 : url: `/board-columns?boardId=` + boardId,
// console.log(columnId);
const result = await $.ajax({
type: 'GET',
url: `/cards?board_column_Id=${columnId}`,
beforeSend: function (xhr) {
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('authorization', `Bearer ${accessToken}`);
},
success: (data) => {
return data;
},
error: (error) => {
console.log(error);
},
});
return result;
}- columnHtml() - columnGet api success안에 넣어주는 함수
위 cardGet을 받아 뿌려주었습니다.
let cardIndex = 0;
async function BoardColumns(data) {
...
let i = 0;
for (i in data) {
const card = await CardGet(data[i].columnId);
const cardHtml = card
.map(
(c) =>
`<li class="d-flex justify-content-between align-items-center " draggable="true" id="card-list-item" data-columnId=${data[i].columnId} data-cardId=${c.id}>
<div class="lists-items-title" style="background-color: ${c.color}" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@mdo72">
${c.name}
</div>
<button class="open-popup-modal" type="button">
<img src="./assets/img/svg/edit-2.svg" alt="edit-2" class="svg">
</button>
<div class="popup-overlay">
<!--Creates the popup content-->
<div class="popup-content">
<div class="mb-10 popup-textarea">
<textarea class="form-control" rows="3" placeholder="Edit title..."></textarea>
</div>
<div class="d-flex align-items-center popup-button">
<button class="save-title-changes btn btn-primary btn-sm btn-squared rounded" type="submit">Submit</button>
</div>
<div class="overlay-close"></div>
</div>
</div>
</li>`
)
.join('');
cardIndex += Number(card.length);
if (data[i].columnName == 'Done') {
kanbanList.innerHTML += `...
<ul class="kanban-items list-items drag-drop " style="min-height: 50px; max-height: 350px" data-columnId="${data[i].columnId}">
${cardHtml}
</ul>
<button class="add-card-btn" data-bs-toggle="modal" data-bs-target="#createCardModal" id="createCard" data-columnId="${data[i].columnId}" data-index="${cardIndex}"><img src="./assets/img/svg/plus.svg" alt="plus" class="svg"> Add a
card</button>
...`;
} else {
kanbanList.innerHTML += `...
<ul class="kanban-items list-items drag-drop " style="min-height: 50px; max-height: 350px" data-columnId="${data[i].columnId}">
${cardHtml}
</ul>
<button class="add-card-btn" data-bs-toggle="modal" data-bs-target="#createCardModal" id="createCard" data-columnId="${data[i].columnId}" data-index="${cardIndex}"><img src="./assets/img/svg/plus.svg" alt="plus" class="svg"> Add a
card</button>
...`;
}
console.log(cardIndex);
}
...
init(); // sequence 자리 변경 함수
...
// card create button click
//모달 창이 열리면 해당 columnId값을 보내줘야함
let cardSequence;
let cardColumnId;
document.querySelectorAll('#createCard').forEach((data) => {
data.addEventListener('click', (e) => {
const id = e.target.getAttribute('data-columnId');
cardColumnId = id;
const sequence = e.target.getAttribute('data-index');
cardSequence = Number(sequence) + 1;
console.log('sequence, columnId', cardSequence, cardColumnId);
});
});
document.getElementById('CardCreateBtn').addEventListener('click', () => {
const cardTitle = document.getElementById('cardTitleCreate').value;
const cardColor = document.getElementById('cardColorCreate').value;
const cardContent = document.getElementById('cardContentCreate').value;
const cardFile = document.getElementById('cardfileCreate').value;
const card = {
name: cardTitle,
color: cardColor,
content: cardContent,
fileUrl: cardFile,
members: selectedMemberNumber,
sequence: cardSequence,
};
console.log('create 보내기 전 :', cardColumnId, cardSequence);
CardCreate(cardColumnId, card);
});
}기술면접 top30
12. 객체지향 프로그래밍이란 무엇이고 어떻게 활용할 수 있나요?
-> 프로그래밍 패러다임 중 하나로,구조적 방식의 문제점을 극복하고 인간이 사고하는 방식대로 프로그램을 개발하려는 노력으로 탄생되었습니다. 그리고 상태(state)와 행위(behave)로 이루어진 객체들간의 상호작용을 통해 프로그램을 설계, 개발 하는 것입니다.
특징으론 캡슐화, 정보 은닉, 추상화, 상속성, 다형성이 있고 구성요소로는 클래스 객체 메시지가 있고 객체의 구성요소로 개체, 속성, 메소드가 있습니다.
현실 세계의 개체 엔티티를 기계 부품처럼 하나의 객체(Object)로 만들어 객체들을 조립해서 프로그램을 작성할 수 있습니다.
시도해봤으나 되지않은 사이트
