동아리 공식 사이트인 COTATO 프로젝트에는 동아리 활동 기록을 확인할 수 있는 '세션 기록 페이지'가 있다. 동아리의 활동인 세션을 사진과 같이 기록할 수 있는 페이지이다. (사이트 링크 : https://www.cotato.kr/session?generationId=7)카드를 클릭해서 상세 보기를 통해 세션의 기록과 썸네일 사진 말고도 다른 사진들도 같이 확인을 할 수 있다.페이지에 어드민 권한으로 접근하면 모달 접근을 통해 세션 기록을 추가, 수정할 수 있고, 사진의 경우 하단의 카드를 드래그하여 순서를 조정할 수 있다. 정상적으로 동작하면 위와 같이 부드럽게 DnD가 동작해야 하지만, 처음 구현을 한 당시에는 아래와 같이 드래그를 하는 순간 드래그된 카드가 비정상적인 위치로 이동하는 문제가 발..

최근에 프론트엔드 파트별 네트워킹에서 '타입스크립트를 사용하는 이유'에 대해서 준비를 하고 얘기를 나눈 시간을 가졌다. 타입스크립트 공식 문서를 보면 첫 페이지에 타입스크립트에 대해서 다음과 같이 설명하고 있다.JavaScript and More : 타입스크립트는 자바스크립트에 정적 타입(type)을 추가한 언어A Result You Can Trust : 타입스크립트로 작성한 코드는 신뢰할 수 있는 자바스크립트로 변환Safety At Scale : 타입스크립트는 타입 시스템과 강력한 에디터 지원으로 대규모 프로젝트에서도 안전하게 코드를 관리내용을 정리하면 타입스크립트로 코드를 작성하면 쉽게 프로젝트를 관리할 수 있고, 이는 자바스크립트로 변환되기 때문에 자바스크립트와 완전히 호환된다고 설명한다. 이런 이..

22년 3월에 컴퓨터학부에 입학해서 C, Java, Python을 통해 처음으로 코딩을 하기 시작했고, 23년 7월부터 JavaScript와 React를 사용해서 지금까지 프론트엔드 개발을 하는 중이다. https://hochi-dev.tistory.com/5 나는 왜 프론트엔드 개발자가 되어야 하는가2024년 7월 기준, 필자는 프론트엔드 개발자가 되고 싶어 한다. 하지만 목적을 가지고 앞만 보고 달려갔을 뿐, 그 이유는 중요하게 생각하지 않았다. 뒤에서 나오는 이야기이지만, 나의 꿈이 프론hochi-dev.tistory.com대략 9개월 전에 컴퓨터학부에 입학하고, 프론트엔드를 하게된 사연에 대해서 글을 적은적이 있다. 그때는 나의 인생???에 대한 글을 적었다면 이번에는 지금까지 웹 개발을 하면서 ..

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를 적용하고 있는데, ..