전체 글101 그래프(Graph) 그래프(Graph)란? 정점(node 혹은 vertex)과 정점 사이를 잇는 간선(edge)으로 구성된 자료구조이다. SNS, 네비게이션, 추천 알고리즘 등 실생활에 많이 사용된다. 특징 정점들 사이 순서가 있는 경우엔 방향 그래프, 없는 경우엔 무방향 그래프라고 한다. 간선에 가중치(비용 등)가 주어지면 가중 그래프가 된다. 순환 혹은 비순환 구조를 이룬다. 노드 간에 2개 이상의 경로도 가능하다. 부모 - 자식 관계라는 개념이 없다. (네트워크 모델) 그래프와 트리의 비교 그래프 트리 관계 그래프 ⊃ 트리 방향성 방향, 무방향 모두 존재 방향만 존재 사이클 순환, 비순환 모두 존재 (자기 순환도 가능) 비순환만 존재 루트 노드 X O 부모 - 자식 X O 모델 네트워크 모델 계층 모델 간선의 수 자유.. 2023. 9. 26. 프론트엔드 성능 개선기 - 이미지 최적화 관련 피드백을 받지 못했던 걸 보면 나만 느낀 것일 수도 있는데, 우리 프로젝트를 이용하면서 처음 화면 렌더링 시간이 좀 느린 것 같다는 생각이 들었다. 그래서 간단하게 라이트하우스(Lighthouse; 웹페이지의 품질을 측정하기 위한 오픈소스 자동화 도구)를 돌려보게 되었다. 크롬 개발자 도구에 들어가 이렇게 설정을 하고(모바일 환경에서 이용되는 경우가 많아 기기는 모바일로 선택), 분석 버튼을 누르니 이런 결과 화면이 나왔다. 역시 좀 느린 게 맞았어..! 여기서 눈에 띄는 항목으로 최대 콘텐츠 렌더링 시간(Largest Contentful Paint)이라는 것이 있는데, LCP라고 불리는 이 지표는 최대 텍스트 또는 이미지가 표시되는 시간을 의미한다고 한다. 즉, 페이지 주요 내용의 렌더링 완료 시.. 2023. 9. 26. 버블 정렬, 선택 정렬, 삽입 정렬 버블 정렬 (Bubble sort) 서로 인접한 두 원소의 대소를 비교하고, 조건에 맞지 않으면 자리를 교환하며 정렬하는 알고리즘. 오름차순의 경우 가장 큰 값을 가장 뒤로 보내며 정렬하고, 내림차순의 경우 가장 작은 값을 가장 뒤로 보내며 정렬한다. 버블 정렬이라는 이름은 원소의 이동이 가벼운 거품이 수면 위로 올라오는 모습과 닮아 붙여진 것이다. // 구현하기 function bubbleSort(arr){ for(let i = 0; i arr[j+1]){ // SWAP! // [arr[j], arr[j+1]] = [arr[j+1], arr[j]] let temp = arr[j];.. 2023. 9. 11. 웹소켓을 이용하여 실시간 채팅 구현하기 [React / STOMP] 약 3개월 전쯤 지역 기반 심부름 커뮤니티 서비스를 만들면서 채팅방을 구현했던 적이 있다. 당시 여러 번의 회의를 거쳐 서비스의 특성이나 기술적인 어려움 등의 이유로, 웹소켓이 아닌 일반 Ajax를 이용하여 해당 기능을 구현했었다. ( → 관련 포스팅 : https://ddppp.tistory.com/148 ) 실시간 통신이 필요한 부분은 대부분 웹소켓을 이용하여 만들기 때문에 기술적으로는 좀 아쉬웠지만, 그래도 목표한 대로 기능을 완성해서 정말 뿌듯했던 기억이 있다. 그리고 이번에 또 채팅방을 구현할 기회가 생겼다. 이번 프로젝트의 주제는 '함께 작성하는 여행 플래너'라 실시간 통신이 주된 기능이었다. 아무래도 웹소켓은 처음 접해보는 기술이라 부가 기능인 실시간 채팅방을 만들며 관련 공부를 먼저 해보기.. 2023. 8. 24. HTML의 메타데이터 최근 예전에 만들었던 프로젝트 코드를 정리하면서 큰 고민 없이 써왔던 html 코드가 신경 쓰이기 시작했다. 그래서 이번 기회에 한 번쯤 정리해두고 싶었던 메타데이터에 대해 정리해 보기로 했다. 참고로 메타데이터란 일련의 데이터를 정의하고 설명해 주는 데이터를 의미한다. 먼저, HTML 문서의 구조를 보면, This is my page 로 이 문서가 HTML 문서임을 나타내고, 태그 안에 요소와 요소가 위치해 있는 것을 확인할 수 있다. 요소는 실제 화면에 보이는 부분은 아니지만, 검색 결과에 노출될 키워드, 홈페이지에 대한 설명 등을 담고 있으며, 요소는 실제로 페이지에 표시될 콘텐츠가 포함되는 부분이다. 위 예제의 안에 있는 은 문서의 문자 인코딩 설정을 UFT-8 (전 세계에서 사용되는 대부분의 문.. 2023. 8. 22. 우당탕탕 에러 해결 로그 ① 초대장 공유하기 기능을 만들 때였다. 링크 복사 버튼을 만들고, 페이스북이랑 트위터 공유는 react-share라는 라이브러리를 이용하였다. 그리고 카카오톡 공유는 카카오 메시지 api를 활용했는데, 여기서 카카오톡 버튼을 누르면, 이렇게 카카오톡 공유를 위한 새 창이 뜨게 되는 것이다. 그런데 이게 다른 때는 문제가 없는데, 새로고침을 하고 나면 이 창이 뜨질 않았다. https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.k.. 2023. 8. 21. 초대장 서비스 [ 여기 여기 붙어라 👍 ] 완성 후기 간단하게 시작했던 프로젝트가 생각보다 커져서 두 달 만에 드디어 버전 1 배포를 성공했다. 거의 카카오 api 활용 스터디였던 것 같다. 카카오 지도, 톡캘린더, 카카오톡 공유, (다음) 우편번호 서비스, 그리고 카카오 로그인까지 열심히 배우고 찾고 적용해 보면서 REST API 사용에 더 익숙해질 수 있었다. 정말 삽질도 많이 했는데, 이와 관련해서는 따로 정리해 둘 생각이다. ( → https://ddppp.tistory.com/160 ) >> 서비스 사용해 보기 www.here-here.co.kr 여기 여기 붙어라 www.here-here.co.kr >> 코드 보러 가기 https://github.com/dd-stack/here-here GitHub - dd-stack/here-here: 캐주얼 초.. 2023. 8. 20. 카카오 로그인 구현하기 [React] 카카오 api를 많이 사용하는 이번 프로젝트의 특성상 카카오 로그인을 먼저 구현하게 되었다. 카카오 로그인이 선행되어야 톡캘린더와 같은 기능을 이용할 수 있기 때문이다. 관련 로직을 이해하고 적용하는 데 거의 2주가 걸린 것 같은데, 물론 모든 시간을 프로젝트에 쏟은 건 아니지만 생각보다 꽤 오래 고생을 했다. 분명 프론트단은 어렵지 않다는 이야기를 들었었는데...! 우선, 카카오에서 제공하는 공식 문서를 찾아보았다. 상당히 꼼꼼하고 친절하게 사용 방법이 안내되어 있었다. https://developers.kakao.com/docs/latest/ko/kakaologin/common#intro-login-process Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요.. 2023. 7. 27. 이전 1 2 3 4 ··· 13 다음
