코드노트

실시간 이벤트처리 및 웹소켓 연결을 하게 되면서 웹소켓을 바로 사용하는게 아니라 StompJS, SockJS를 사용하는 것을 알게 되었다.기존 서비스에서 사용되고 있는 코드들을 해석하면서 꼭 알고 넘어가야하는 것들을 정리 해보려고 한다. WebSocket- http의 단방향 통신(클라이언트가 서버로 요청을 보내고, 서버에서 응답을 받는)과 다르게 서버와 양방향으로 연결하는 것을 말한다.클라이언트가 서버로 요청을 보내게되면 서버의 응답을 받고 끝나는 것이 아닌 연결이 계속해서 유지가 된다.Rest API와 WebSocket 관련한 내용들은 따로 정리를 해둔 링크를 참고하면 좋을 것 같다. REST API vs WebSocket 차이점 정리 feat.Polling, LongPolling, Streaming,..

어떻게 보면 마지막 파이널 프로젝트를 위해 부트캠프를 시작한것인지도 모르겠다. 부트캠프를 통해서 협업을 경험하기위해 온것인 만큼, 기업과의 연계를 통해 실제 현업에서 어떻게 프로세스가 진행되고 실제 기획부터 참여하며 협업을 통한 경험을 얻고 싶었다. 결과적으로는 협업을 하기는 했지만 정말 매운맛 프로젝트 경험을 하게 되었다. 담당 멘토님 또한 현업에 가게 되더라도 이정도로 매운맛을 보지는 않을것이니 걱정하지마라고 하셨다... 그만큼 열악한 상황에서 우리들은 큰 사건사고없이 프로젝트를 마무리할 수 있었다. 이번 프로젝트에서도 팀장을 하게 되었다. 일정 조율 및 프로젝트 진행을 하면서도 부족한 점들이 많이 있었지만 1인분이상을 해주며 마무리까지 완주한 우리 프론트엔드 팀들에게 박수👏🏻를 쳐주고 싶다. 특히 ..

개인프로젝트 이후 이번 프로젝트는 2023.05.01 ~ 2023.05.15 2주간 진행했다. 이번 팀프로젝트는 프론트엔드와 백엔드가 같이하는 프로젝트였다. 개인프로젝트 회고는 추후에 따로 남기도록해야겠다..리팩토링도 진행해야하는데 시간이 부족하다.. 이번 프로젝트도 팀장을하게되었다. 부족하지만 잘따라와준 팀원들 너무 고생했다.. GitHub - kjungit/smash-teams-FE Contribute to kjungit/smash-teams-FE development by creating an account on GitHub. github.com 백엔드와 협업은 처음이였고. 생각했었던것만큼 쉽지않았던것 같다. 처음이기도 했지만 기획 디자인부터 시작해서 처음부터 같이 시작하다보니 백엔드가 구현되고나서..

1차 과제였던 클론코딩 후 2차 과제로 영화검색 사이트를 제작했다. 영화 API를 들고와서 구현하는 검색사이트였다. 이번 영화 검색사이트를 제작하면서 비동기에 대해서 많이 배우게 된거 같다. 그리고 Jquery, React, Vue를 사용하지않고 바닐라 자바스크립트로 구현하다보니 자바스크립트에 대해서도 공부를 할 수 있는 계기가 되었다. Vue를 사용해서 영화검색 사이트를 만들었던 경험이 있지만 바닐라 자바스크립트로 구현하는건 또 달랐던거 같다. 1년도 채 되지 않았는데 같은 API를 사용하는데도 사용하는데 힘이 들었다.. 역시 코드를 짜고나면 바로 기억속에서 사라지는거 같다... Movie Search strong-rolypoly-f45a54.netlify.app 코드를 짜고 Readme.md에 정보와..

Branch - 분기점을 생성하고 독립적으로 코드를 변경할 수 있도록 도와주는 모델 - 다른 브랜치의 영향을 받지 않기 때문에 여러 작업을 동시에 진행할 수 있다 Branch command git branch - 현재 브랜치 확인 git branch 이름 - 브랜치 생성 git switch 이름 - 브랜치 이동할 때 git branch -D 브랜치이름 -브랜치 지우기 git merge 브랜치이름 - 다른 브랜치로 작업한 결과물을 가져온다. - 가져올 브랜치로 이동 -> 가져올 브랜치 이름을 명령 git branch --merged - merge된 branch 표시 git branch -no--merged - merge되지 않은 branch 표시 브랜치 이동 후, git push origin -u 브랜치..

연결리스트 - 각 노드가 데이터와 포인터를 가지며, 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조. HEAD -> Node -> Node -> Node -> null Node() : data와 point를 가지고 있는 객체 //Node(): data와 point를 가지고 있는 객체 function Node(data) { this.data = data; this.next = null; } LinkedList() : head와 length를 가지고 있는 객체 // LinkedList(): head와 length를 가지고 있는 객체 function LinkedList() { this.head = null; this.length = 0; } LinkedList.size() - 노드 개수 확인 / ..