IT 연합동아리인 코테이토에 신입 부원으로 들어와 9기에서 운영진으로, 10기에서는 회장으로 활동했다. 그리고 현재 시점에서 11기에서도 활동을 이어나갈 예정이다.  코테이토 9기 교육팀 활동 회고록24년 3월부터 시작해 8월을 끝으로 IT연합 코테이토 9기 활동이 종료됐다.필자는 코테이토 9기에서 교육팀장으로 활동을 했다. 교육팀은 코테이토 정기 세션에서 CS교육을 담당하는 부서이다. 주hochi-dev.tistory.com9기에서 교육팀장으로 활동한 회고는 이전에 작성했었고, 10기에서 회장으로 활동한 회고는..... 그간 활동한 내용을 정리할 필요가 있어서 작성하기에는 시간이 조금 더 필요할 거 같다.... 11기 활동을 앞두고 있는데 이 시점에서 8기 활동 회고를 작성하는 이유는 9 ~ 11기 동..

카카오 지도 API장소를 저장하고, 저장한 장소를 지도로 보여주는 ODIT 프로젝트를 진행하는 과정에서 지도 API를 사용해야 했다.지도 API는 카카오 지도 API를 사용했는데, 공식 문서에서는 특정 라이브러리를 사용하지 않고 순수 JavaScript 코드를 사용한 예시 코드만 존재했기 때문에 리액트에 맞게 어느 정도 코드 변환이 필요했다. 이번 글에서는 리액트에서 카카오 지도 API를 사용하는 방법과, 지도 API 관련 로직들을 hook으로 묶어 따로 처리한 방버에 대해 작성해 보겠다. 리액트에서 카카오 지도 API 사용하기지도 API 등록하기카카오 지도 API를 사용하기 위해서는 카카오 개발자 사이트에서 애플리케이션을 등록하고, 앱 키를 발급받아야 한다.https://developers.kakao...

리액트의 렌더링브라우저에서 렌더링이란 웹 페이지를 화면에 그리는 과정이다. 만약 리액트 없이 바닐라 자바스크립트만을 사용해 렌더링을 한다면, DOM을 직접 조작해야 한다.const app = document.getElementById("app");app.innerHTML = ` 새롭게 렌더링되는 app 태그`;위 코드처럼 DOM을 직접 조작하여 요소의 내용을 변경하거나 새로운 내용을 추가해야 한다. 하지만 리액트를 사용해서 코드를 작성하면 위와 같이 DOM을 직접 조작하지 않는다. 리액트는 이러한 과정을 자동으로 처리하는 라이브러리이기 때문이다. 그럼 리액트는 언제 렌더링을 할까? 그것은 리액트에서 state가 변경될때이다.import React from 'react';const App = () => ..

개발자가 되기 위한 지금까지의 과정2025년은 개발자가 되려 하는 나에게 시작과 같은 의미를 가질 수 있는 해이다. 2022년 편입학을 통해 컴퓨터학부에 입학해서 처음으로 컴퓨터와 관련된 공부를 시작했고, 3년의 학교생활을 끝으로 졸업(정확히는 아직 졸업이 아닌 수료)을 했다.23년 6월, 처음에 아무것도 모르고 주변에서 다들 팀 프로젝트를 하는 거를 보고 나도 따라서 웹 페이지를 만드는 프로젝트를 시작했고, 거기서 프론트엔드로 참여한 인연으로 나는 프론트엔드 개발자를 꿈꾸고 있다. 이후 IT 동아리에 들어가서 너무나도 많은 경험을 하고, 개발자가 되기 위한 초석을 다지기도 했다.그렇게 1년 반동안 개발자가 되기 위해 준비를 했고, 이제 학교를 떠나 신입 개발자가 되기위한 시기를 만났다. 이번 글은 사회..

스켈레톤(Skeleton) UI란?스켈레톤 UI라 하면 데이터를 가져오고 콘텐츠가 화면에 렌더링 되기 이전까지 로딩 중임을 나타내는 컴포넌트이다. Skeleton을 사전에서 찾아보면 '뼈대'라고 나오는데, 여기서 뼈대의 의미는 콘텐츠는 아직 보여주지 않지만 콘텐츠가 어느 위치에서 어떤 크기로 보이는지 윤곽을 나타내는 의미이다.위의 이미지는 유튜브에서 동영상 정보와 썸네일 이미지를 불러오기 이전까지 스켈레톤 UI를 보여주고 있는 화면이다. 물론 일반적인 환경에서 유튜브에 접속하면 스켈레톤이 너무 빨리 지나가서 눈치를 못 채고 지나갈 수도 있다. (본인도 스켈레톤에 대해서 알아보기 전 까지는 유튜브에서 이를 적용하고 있는지다 몰랐다.....) 유튜브 외에도 많은 사이트에서 스켈레톤 UI를 적용하고 있는데, ..

리액트 프로젝트를 처음 시작하면 거의 npx create-react-app을 통해서 프로젝트를 만들었다. 이렇게 프로젝트를 세팅하면 명령어 한 줄로만 리액트 프로젝트를 세팅 가능하기에 처음 리액트를 배울때 부터 이 방법을 사용했지만, 이렇게 프로젝트를 세팅하다보니 실제 리액트가 어떻게 동작하는지 전혀 이해를 하지 못하고 있었다. babel, webpack을 리액트 하면서 분명 보기는 했지만 이게 전혀 어떤 기능을 하는지 모르고 사용해왔다.작년에 'Slack 클론 코딩'강의를 들으면서 1장에 있던 내용이 CRA 없이 리액트 프로젝트를 세팅하는거였다. 당시에는 리액트를 시작한지 얼마 되지 않아 크게 감흥을 느끼지 못했지만, 지금 시점에서 다시 보니 프로젝트가 동작하는 방식을 이해하는데 도움이 될 수 있을거 ..

Meet In The Middle AlgorithmMeet In The Middle(MITM)을 한글로 직역하면 '중간에서 만나기'라고 해석할 수 있다. (백준 알고리즘 분류로는 중간에서 만나기라고 되어 있다.) MITM 알고리즘은 문제의 크기를 절반으로 나누어 해결하는 기법이다. Brute Force로 접근하여 문제를 해결이 불가능하게 n이 큰 경우 최적화하는 방법이다. MITM은 문제를 두 부분으로 나누고, 각각의 부분 문제를 해결한 다음 다시 결합하는 방식이다. Divde and Conquer랑 비슷하게 보이지만, Divide and Conqeuer은 부분 문제를 쪼갤 수 없는 작은 크기로 문제를 나누고 이를 재귀적으로 병합하는 방법이지만, MITM은 문제를 두 부분으로 나누어 Brute Force..

코테이토 프로젝트코테이토 프로젝트는 IT 연합동아리 코테이토의 자체 사이트를 제작하는 프로젝트이다. 필자는 해당 프로젝트에서 프론트엔드 파트로 참여하고 있다. 프로젝트는 23년 9월, 코테이토 8기 프로젝트로 시작해서 현재까지 진행되고 있다. 버전은 23년 9월부터 24년 2월까지 V1, 24년 3월부터 8월까지 V2, 그리고 24년 9월부터는 V3를 시작하여 현재 새로운 버전을 준비하고 있다.이번 회고록에서는 코테이토 프로젝트는 어떤 프로젝트인가와, 어떻게 프로젝트를 진행했는지에 대해 정리하는 글을 작성하고자 한다.CS 문제풀이 프로젝트 (V1)코테이토 프로젝트의 시작은 동아리 활동에서 진행하는 CS교육을 위한 페이지였다. CS교육은 코테이토 교육팀에서 CS와 관련된 주제로 교육을 진행하고, 발표가 ..