분류 전체보기

23년 9월부터 24년 6월까지 약 1년간 두런두런 동아리 활동을 했다.돌이켜보면 엄청나게 성공적인 활동은 아니었기에 조금 부끄럽기도 하고, 어떻게 보면 여전히 아쉬움이 남는 활동이기도 하다. 하지만 1년 동안 열심히 참여했고, 의미 있는 성과를 거둔, 내 23~24년의 많은 부분을 차지했던 활동이기에 기록으로 남겨본다. 멋쟁이 사자처럼 11기 활동을 마무리하던 23년에, 프로젝트를 함께 진행했던 프론트엔드 파트장 친구와 이야기를 나누다가 게임 형태의 챌린지 앱을 만들면 재미있겠다는 아이디어가 나왔다. 친구와 아이템을 사용해 우스꽝스럽게 상대를 때리는 모션이 있고, 서로 목표를 달성하며 응원하는 소셜 기반의 챌린지 앱을 상상했다. 당시에는 멋사 활동으로 자신감도 있었고, 사회복무요원 활동 덕분에 시간 여..

프론트엔드 개발을 시작할 때, “명령형과 선언형 프로그래밍”이라는 용어를 종종 듣게 됩니다.이 글에서는 두 개념의 차이를 간단히 알아보고, 자바스크립트 예시를 통해 감을 잡아봅시다.1. 개념 정리명령형(Imperative) 프로그래밍“어떻게(How)” 동작할지를 직접 단계별로 지시하는 방식입니다.예를 들면, 배열을 순회하는 코드에서 반복문(for, while)을 돌고 if문으로 조건을 확인한 뒤, 일치하면 push로 새 배열에 넣는 식으로 모든 과정을 명시하는 스타일이죠.선언형(Declarative) 프로그래밍“무엇을(What)” 만들고 싶은지를 의도 위주로 작성합니다.내부적으로 반복문이 어떻게 돌아가는지는 추상화하고, “이 조건에 맞는 결과가 필요하다”처럼 결과만 선언합니다. 예를 들어 Array.pr..

모달이란?모달이란 사용자에게 중요한 정보를 제시하거나, 특정 액션을 수행하기 전에 사용자의 확인을 받기 위해 기존 화면 위에 레이어 형태로 표시되는 컴포넌트를 말합니다. 프로젝트를 진행하다 보면 모달을 만들어야 하는 상황이 자주 생기는데, 단순히 isVisible 같은 state를 이용해 화면에 표시하거나 숨기는 방법으로도 간단하게 구현할 수 있습니다.다만, 복잡한 형태의 모달이 많이 생기거나, 여러 화면에서 재사용해야 하는 상황이라면 자칫 코드가 중복되고 유지보수가 어려워질 수 있습니다. 이 때문에 많은 프로젝트에서는 재사용 가능한 모달 컴포넌트를 만들어 사용하거나, 상태관리 도구(Redux 등)를 활용해 전역에서 모달 표시 여부를 관리하는 방식을 택하곤 합니다.이번 글에서는 Ref를 이용해 모달을 제..

이전 글에서는 재귀 호출을 통해 데이터 구조를 트리 형태로 변환하여 컴포넌트의 데이터로 활용했던 방법에 대해 설명드렸습니다. 재귀적 트리구조를 활용한 데이터 변환사용자 지역 정보를 입력받는 Form을 개발하면서, 서버에서 전달하는 평면 데이터(flat data)를 Cascader 컴포넌트에서 요구하는 트리 구조로 변환해야 하는 문제가 있었습니다.예를 들어, 서버에서는hin6150.tistory.com 사용자 지역 정보를 입력받는 폼(Form)을 개발하는 과정에서, 서버에서 전달되는 평면 데이터(flat data)를 Cascader 컴포넌트에서 요구하는 트리 구조로 변환해야 하는 상황이 있었습니다. 이번 글에서는 해당 컴포넌트를 개선해서, 특정 단체에 속한 지역만을 반환하는 기능을 구현하고자 합니다.문제 ..

문제 상황사용자 지역 정보를 입력받는 Form을 개발하면서, 서버에서 전달하는 평면 데이터(flat data)를 Cascader 컴포넌트에서 요구하는 트리 구조로 변환해야 하는 문제가 있었습니다.예를 들어, 서버에서는 아래와 같이 데이터가 전달됩니다.{ "data": [ { "name": "서울시", "last": false, "id": 1, "parentId": null }, { "name": "중구", "last": true, "id": 2, "parentId": 1 } ]} 하지만 실제로는 다음과 같은 트리 형태가 필요했습니다.{ "data": [ { "name": "서울시", "id": 1, "children": [ { ..

멋쟁이 사자처럼 11기를 수료했다.3월달에 서류 합격을 받고 떨리는 마음으로 면접장을 향했던 때가 엊그제 같은데 어느새 1년이라는 시간이 다 지나간다.더 늦기전에 2023년과 함께 어쩌면 가장 큰 이벤트였던 멋쟁이 사자처럼 11기 활동을 회고해보고자 한다.  멋쟁이 사자처럼이란?멋쟁이 사자처럼은 대학 연합 동아리로, 사단법인 멋쟁이 사자처럼을 기반을 두고 각 학교에서 자치적으로 운영되는 형태의 동아리이다. 이러한 구조에 맞춰 실제 중앙 운영진이 존재하고 이와 연계한 각 학교별 운영진이 별도로 존재하는 것으로 알고 있다.사실 이러한 형태는 장단점이 명확하게 존재하는데, 이 부분은 넘어가보자. 강남대학교에서는 예전에 멋사(멋쟁이 사자처럼)이 있었지만, 중간에 잠깐 활동이 끊겼다가 이번 11기로 다시 돌아오게..