TypeScript - 튜플(Tuple)에 대해 알아보자!

자바스크립트를 사용할 때, 우리는 같은 형태의 연관된 데이터 여러개를 저장하기 위해 배열을 주로 사용합니다. 하지만 타입스크립트에서는 배열 뿐만 아니라 튜플이라는 데이터 구조가 있습니다. 튜플을 사용하면 더욱 자세한 데이터 관리가 가능한데요, 오늘은 타입스크립트 튜플(Tuple)에 대해 알아보도록 하겠습니다.🤔 튜플이란?튜플은 각 요소의 지정된 자리에 타입들을 고정시켜둔 배열입니다. 자바스크립트에서의 배열에는 다음과 같이 아무 값이나 넣을 수 있었습니다.let array = [1, "hello", true, 20]; 하지만 타입스크립트에서 똑같은 방식으로 배열을 사용하게 되면 다음과 같은 여러가지 문제가 발생할 수 있습니다.타입 안정성 부족예상치 못한 타입 오류 발생불명확한 배열의 의미 👍 튜플을 사..

• format_list_bulleted 프론트엔드
• · 2025. 3. 1.
• textsms

React Context로 전역 데이터 관리를 해보자!

리액트로 개발을 할 때 컴포넌트간의 데이터 전달은 props를 통해 이루어지게 됩니다. 하지만 최상위 컴포넌트부터 최하위 컴포넌트까지 데이터를 넘겨야 하는 경우 props를 사용하게 되면 어떻게 될까요? 컴포넌트 트리 내 존재하는 모든 하위 컴포넌트에 props를 추가하여 넘겨주어야 하는 번거로운 상황(Prop Drilling)이 생기게 됩니다. 오늘은 이런 불편함을 없애주기 위해 전역 데이터를 관리하는 방법인 리액트 컨텍스트(React Context)에 대해 알아보도록 하겠습니다.  🤔 React Context를 사용하지 않는 경우리액트 컨텍스트를 사용하지 않을 때 일어나는 Prop Drilling의 예시를 다음과 같이 생각해 볼 수 있습니다.function App() { const [usernam..

• format_list_bulleted 프론트엔드
• · 2025. 1. 31.
• textsms

nodemon 사용해서 서버 자동 새로고침 하기

혹시 개발하실 때 직접 서버를 껐다 켰다 하시나요?? 코드 작성하기도 바쁜데 수정사항이 있을 때마다 서버를 종료하고... 다시 재생 버튼을 누르고... 너무너무 귀찮습니다. 하지만 서버를 자동 새로고침되게 만들어 서버 on/off 시간을 줄일 수 있다는 사실! 이것을 해주는 패키지가 바로 nodemon 입니다. 🥳😈 nodemon의 설치와 기본 설정nodemon은 전역설치도 가능하고, 개발용도로만 설치하셔도 됩니다.#전역 설치npm i nodemon -g #개발 용도 설치npm i nodemon --save-dev 설치 후 package.json의 "scripts" 부분에 실행 시 사용할 명령어를 넣어줘야 합니다.형식은 "nodemon 실행할파일명" 입니다.{ "scripts": { "star..

• format_list_bulleted 백엔드
• · 2024. 12. 11.
• textsms

프로그래머스 데브코스 웹 풀스택 5기 - 11월 회고

데브코스를 시작한지도 벌써 한달이 다 되었네요! 11월 한 달 간의 회고를 작성해보려고 합니다. 이번 회고는 Keep, Problem, Try 순서대로 좋았던 것, 아쉬웠던 것, 시도해볼 것을 작성하는 KPT 방식으로 작성해보려고 해요. 그럼 시작합니다!🥳 Keep먼저 11월 한 달 간의 '좋았던 것, 유지하면 좋을 것' 입니다!💙 아침에 꾸준히 강의 듣는 습관 기르기원래의 코어타임은 1시부터 6시까지라 그 시간에만 필수로 ZEP 이라는 메타버스에 접속해 있으면 되는데요, 원래의 교육 시간은 9시부터이기 때문에 아침에 9시부터 ZEP에 접속하여 공부하려고 노력했습니다. 🔥 데브코스를 처음 시작 할 때는 9 to 6를 전부 화면공유 또는 캠을 키고 실시간 강의를 듣는 줄 알았는데 코어타임이 따로 진..

• format_list_bulleted 프로그래머스 웹풀스택 5기
• · 2024. 11. 30.
• textsms

프로그래머스 데브코스 웹 풀스택 5기 시작!

🔥 프로그래머스 데브코스를 신청하다! 원래 개발자로서 회사를 다니고 있었지만, 건강상의 문제로 퇴사를 하고 회복 기간을 가지면서 다시 취업 준비를 해볼까? 하며 독학을 시작했었습니다. 결과는? 완전 망함...😢 제가 생각한 독학의 단점은 다음과 같았습니다.- 같이 공부할 사람의 부재로 마음가짐이 느슨해짐- 피드백이 없어서 무엇이 부족하고 어떤 것 부터 공부해야 하는지 알기 어려움- 정해진 커리큘럼이 없음 이 상황에서 친구의 추천으로 취업지원제도를 진행하면서 내일배움카드로 들을 수 있는 강의를 알아보던 중, 지원 기간이 며칠 안 남은 프로그래머스 데브코스를 발견하게 되었습니다. 지원 마감이 10월 4일이었는데, 제가 발견했을 때가 마감 일주일 전이었던 것으로 기억합니다. 🙄 프로그래머스 데브코스는 온..

• format_list_bulleted 프로그래머스 웹풀스택 5기
• · 2024. 11. 30.
• textsms

깃 커밋 컨벤션(Git Commit Convention) 설정하기

🤔 커밋 메세지, 대충 쓰면 안되나요? 개발자라면 Git과 GitHub를 필수로 사용하게 됩니다. 코드를 수정하게 되면 커밋(Commit)을 생성하게 되는데, 이 때 협업하는 팀원들, 그리고 미래의 나를 위해 커밋 메세지(Commit Message)를 작성합니다. 혼자 보는 프로젝트라면 본인이 무엇을 했는지 알아 보기만 하면 될 수도 있습니다. 하지만 협업 시에 모든 개발자들이 자신이 보기 편한 방식대로 커밋 메세지를 작성하게 되면 자신은 알아볼 수 있지만 다른 팀원은 이해하지 못 할수도 있습니다. 안좋은 예시로 4년전의 제 커밋 메세지를 보여 드리겠습니다. 4년이 지난 지금 봤더니 도대체 무엇 때문에 어떤 내용을 바꾸었는지 알 수가 없습니다…🙄 다른 사람이 보면 더 알수 없겠죠. 이러한 불상사를 막..

• format_list_bulleted Git
• · 2024. 11. 21.
• textsms