오늘은 프론트에서 card의 get, post를 테스트해볼꺼고 sequence update에 대해서도 수정하려 합니다.
get을 연결 후 확인해보니 잘 나오지 않고 columnId가 없다는 문제만 떠서 js파일에서 console로 찍어보며 찾았습니다. 문제는 columnId가 html에 뿌려지기도 전에 get에서 먼저 찾고 있어 순서가 바뀌었어서 난 오류여서 수정해주었고, post는 처음 작성할때 sequnce값이 들어가지않아 계속 오류가 나서 찾다가도 도저히 모르겠어서 좀 쉬면서 생각만 해보다가 혹시나 싶어 card를 생성하는 버튼에 data-index(이부분이 마지막 sequence값이 들어감)에 값이 들어가나 확인해보니 들어가지 않았습니다.
처음에는 저 card의 데이터들을 for(let i in data) 로 for문을 돌려가며 값을 innerHTML에 넣어줬는데, 저 i값이 들어가지 않았어서 밖으로 빼주고 하니 data-index에는 값이 잘 들어갔습니다.
하지만 컬럼이 하나 더 생기고 나서 다른 컬럼에서 카드를 추가하는데 또 오류가 났습니다.
카드 추가는 되나, 처음 컬럼에만 카드가 들어가는 것입니다.
그래서 전체적으로 찾아다니며 수정을 해줬습니다. 결과로는 처음에 컬럼 생성시 for문으로 생성해주는데 그 for문안에 card를 get하는 부분을 넣어줬습니다. 이 get api 안에 있는 card html 함수안에 create가 있었습니다.
그래서 for문으로 하도 돌아서 일단은 column get api에서 columnHtml함수 밑에 넣어주었고, create버튼도 수정해주었습니다.
그렇게 post도 작성을 완료하였고, 이부분이 제일 시간이 오래걸린거 같습니다. 그 후로 sequnce를 작성을 하는데 column만 움직이고 card는 움직이지 않았습니다.
아무리 수정을 해도 움직이지 않자 일단 다시 sortable로 원상복구 시키고 해당 sortable이 있는 함수를 여기저기 옮기며 테스트를 해나갔습니다.
그 결과 card를 그려주는 html함수 제일 밑에 넣어주니 잘 작동됬습니다.
하지만 잘 움직여서 좋았으나 새로고침을 하니 1column에 있던 것을 2column으로 옮겨 주었는데도 다시 돌아가는 현상이 생겼습니다.
그래서 생각을 해보다가 columnId값을 부모로부터 받아와서 card service에서도 sequnce만 수정하는게 아닌 column도 같이 수정되게 변경을 해주니 잘 작동됬습니다.
기술면접 top30
7. 브라우저의 작동방식에 대해서 설명해주세요.
-> 브라우저의 주요기능은 사용자가 자원을 서버에 요청하고 요청한 자원을 브라우저에 표시하는것입니다. 예를 들어 웹 브라우저에서 url을 입력하면 웹 서버라고 불리는 프로그램이 웹 브라우저의 url 요청을 받아 해당 웹 페이지를 제공해줍니다.
때문에 웹 브라우저가 웹 서버에 연결을 하려면 웹서버가 실행중인 컴퓨터의 주소를 알아야하는데 이 주소를 ip주소라고하며 각 컴퓨터가 가지고 있는 주소입니다. 이 주소는 숫자로 구성되있어 저희가 보기 편하게 도메인을 사용합니다. 이 도메인을 ip주소로 변환할때 사용하는것이 DNS(Domain Name Server)입니다. 그래서 웹브라우저에서 url을 입력하면 웹 브라우저에서는 도메인 이름에 해당하는 ip 주소를 요청하고, DNS는 ip 주소를 응답으로 제공합니다.
- sortable시 참고 코드
$('.kanban-items,.todo-task1 tbody')
.sortable({
connectWith: '.kanban-items,.todo-task1 tbody',
stack: '.kanban-items ul,.todo-task1 tbody',
start: function (e, i) {
// console.log('start : ', e, i);
},
stop: function (e, i) {
// console.log('stop : ', e, i);
CardListReorder();
},
})
.disableSelection();