분류 전체보기215 리액트에서 기본 컴포넌트를 만들때 이번에 사이드 프로젝트를 하며 맞닥뜨렸던 문제인데, 잊기전에 간단히 정리해두려 합니다. 문제 상황 프로젝트를 처음 시작하면, 디자인을 적용하기 위해 자주 쓰는 기본 HTML 요소들을 커스텀 컴포넌트로 만들게 됩니다. 예를 들면 태그나 태그등이 있습니다. 보통 아래처럼 다양한 props들을 받을 수 있도록 여러가지 인자를 선언해두고 사용합니다. export interface InputProps { isValid?: boolean; hasUnderline?: boolean; } const Input = ({ isValid = true, hasUnderline = false, }: InputProps) => { return ; } 그러나 이미 존재하는 태그를 덮어씌워 반환해주는 이러한 기본 컴포넌트의 경우 그.. 2022. 12. 22. 썸네일 생성기를 리뉴얼 했어요 지금으로부터 약 1년 전, 블로그 포스팅에 사용하기 위해 썸네일을 생성해주는 프로그램을 만들었습니다. 이때 만든 프로그램을 지금까지도 만족스럽게 쭉 써오고 있었는데, 몇 가지 불편한 점이 있었으나 기술적인 역량이 부족하여 손대지 못하고 있었습니다. 🚩 이전에 만들었던 썸네일 생성기 제작기 썸네일 생성기를 만들었어요 (Thumbnail generator) 이번에 우아한테크코스를 진행하며 생각해오던 목표 중 하나가 기술적으로 성장해서 이전에 진행했던 프로젝트들을 리팩토링 하는 것이었습니다. 현재까지 가장 많이 사용했었고, 앞으로도 계속 사용할 예정이며 직접 사용하며 느꼈던 불편점들이 명확했던 썸네일 생성기가 첫 번째 대상이 되었습니다. 현재 프로젝트의 문제점 우선 기술스택부터 점검하였습니다. 기존의 썸네일 .. 2022. 12. 12. Canvas API 사용해보기 이번에 사이드 프로젝트를 다시 설계하는 작업을 진행하며 처음으로 Canvas API를 직접 사용하게 되었습니다. 이전에는 라이브러리를 통해 Canvas를 간접적으로 다루어 잘 몰랐었는데, 참 특이하면서도 재미있는 API라는 생각이 들었습니다. 이번 포스트에서는 Canvas API의 기본적인 사용법부터 사용하면서 직접 겪었던 문제들까지 함께 공유해보도록 하겠습니다. Canvas API Canvas API는 주로 2D 그래픽 요소를 그리기 위해 사용됩니다. 간단한 도형 뿐 아니라 이미지를 추가하거나 편집하는 용도로도 많이 사용되며, jpg, png, base64 등 다양한 형식으로 출력이 가능합니다. 예시로 이렇게 사용할 수 있습니다. HTML Javascript const canvas = document... 2022. 12. 9. 우아한테크코스 4기 수료 후기 지난 11월 25일부로 10개월간의 교육 기간이 모두 끝났습니다. 작년 11월부터 진행된 프리코스 기간까지 합하면 딱 1년의 시간동안 이어져와서 그런지 익숙해진 크루들과 헤어지게 되어 아쉽고, 시원하면서 섭섭한 마음이 크게 들었습니다. 한 주가 지났는데도 끝났다는 실감이 들질 않아서 후기 글이 많이 늦어지게 되었네요. 그래도, 이번 후기를 기회로 지난 1년간의 추억들을 되돌아보려고 합니다. 🤝 누군가와 함께 하기 우테코에 와서 가장 큰 수확을 꼽아보자면 바로 찐한 협업 경험을 여러 번 했다는 점입니다. 우테코와 같은 특별한 자리가 없었을 때는 주어진 미션에 100% 집중해서 함께 할 상대를 찾기 어려웠습니다. 함께 프로젝트를 진행할 사람을 찾는다고 해도, 팀원 모두가 이 프로젝트를 최우선 순위로 두고 아.. 2022. 12. 4. Context API 개념 잡기 리액트의 데이터 전달 방식 리액트는 컴포넌트 사이의 데이터를 전달할때 Props라는 이름의 속성을 사용합니다. 이 Props는 부모 컴포넌트에서 자식 컴포넌트 방향으로만 전달되는 특징이 있는데, 이 덕분에 리액트는 단방향 데이터 바인딩 구조를 형성할 수 있게 됩니다. 이러한 단방향 데이터 바인딩은 데이터의 흐름을 추적하기 쉽고 디버깅이 편하다는 장점이 있지만, 단점이 하나 있습니다. 바로 아래와 같은 경우입니다. 부모 컴포넌트에 있는 데이터가 아래쪽에 있는 컴포넌트에서도 필요한 경우, 해당 데이터를 한 번에 전달해 줄 방법이 없고 그 사이에 있는 모든 자식 컴포넌트들을 거쳐서 전달해야합니다. 이런 데이터들이 많아질수록 컴포넌트의 인자들은 각종 Props들로 자연스럽게 두툼해지기 마련이죠. 이렇게 많아진 .. 2022. 11. 22. 우아한테크코스 4기 리크루팅 데이 후기 지난 11월 11일 우아한테크코스 4기의 리크루팅 데이가 열렸습니다. 각종 미션들과 프로젝트가 모두 끝나고 본격적인 취업 준비 시즌이 되었는데, 이번에 진행된 리크루팅 데이 같은 행사도 취업 준비의 연장선으로 볼 수 있을 것 같습니다. 리크루팅 데이에는 총 20개의 정말 다양한 기업들이 참여하였습니다. 이름만 들으면 알 만한 대기업부터 하루가 다르게 쑥쑥 성장하고 있는 스타트업까지 있었는데, 그 중에는 우아한테크코스 3기 출신 크루가 창업했던 회사도 있었습니다. 회사 소개도 받고, 선배 기수 크루와의 만남까지 할 수 있어서 개인적으로 기대되었어요. 이건 나중에 알았는데, 해당 행사가 기사로도 쓰여졌었네요. 리크루팅 데이란? 우아한테크코스(신입)와 우아한테크캠프(경력) 수료생들을 대상으로 열린 취업 박람회.. 2022. 11. 13. 이전 1 ··· 8 9 10 11 12 13 14 ··· 36 다음
