본문 바로가기

분류 전체보기

 (99)
if(kakao)dev2022 후기: 사진편집기! 이것DOM 적용해볼GL? 👏🏻 if(kakao)dev2022 2022년 12월 08일 진행되었던 카카오 기술 컨퍼런스 프론트엔드 발표 중 몇가지를 정리해볼까 하는데 그 중에서 가장 먼저 눈길을 끌고 재밌었던 "사진편집기! 이것DOM 적용해볼GL?" 강연에 대해 생각을 정리해볼까 한다. 일단 부트캠프 메인 프로젝트에서 우리팀이 시간상 구현못했던 기능 중 가장 아쉬웠던 기능이 사진 편집이였기에.. 더 흥미가 갔던것 같다. 이 강연은 크게 사진 편집기를 WebGL방식으로 바꾼 이야기와, 사진 스티커를 (Canvas가 아닌)DOM 방식으로 바꾼 이야기로 나뉜다. 일단 이중에서 첫번째 WebGL에 대한 이야기가 basic하고 두번째 스티커에 대한 이야기는 좀더 specific한 감이 있어서 블로그엔 먼저 첫번째 주제에 대한 이야기를 해볼..
[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 3탄 ✨[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 1탄 ⬆️아이디어 미믹, 기획, 디자인, api 문서 작성, 화면정의서 작성한 이야기가 궁금하다면 ✨[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 2탄 ⬆️기술 스택 선정과, 개발 밑작업에 대한 이야기가 궁금하다면 🏃🏻‍♀️공통 컴포넌트 개발 : 모달 컴포넌트 👍🏻 잘했던 점: 반응형과 전체 프로젝트에서 모든 경우의 활용을 생각해서 대응할 수 있도록 작성한점. 팀원들이 내가 제작한 컴포넌트를 어떻게 하면 더 잘 활용할 수 있을까 연구하고 문서로 남긴점 👎🏻 아쉬웠던 점: 모달 컴포넌트를 프로젝트에 도입할때, 코드 구조를 단순하게 하려면 어떻게 해야할까라는 추가적인 고찰이 필요했다. 결국 외관적으론 대응을 잘했지만, 똑똑한..
[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 2탄 ✨[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 1탄 ⬆️아이디어 미믹, 기획, 디자인, api 문서 작성, 화면정의서 작성한 이야기가 궁금하다면 🏃🏻‍♀️개발에 본격적으로 들어가기 앞서 탄탄한 밑작업! 👍🏻잘했던 점: -개발에 들어가기 앞서서 css global style 미리 다 선언한 것 -아이콘등의 이미지 에셋을 svg로 다 첨부해놓았던 것 -타입스크립트를 도입한 점 👎🏻아쉬웠던 점: -이건 그냥 개인적인 아쉬움인데 리액트 쿼리를 못썼다는 점. 좀 무리해서라도 리액트 쿼리까지 도입했음 어땠을까 싶다. 이제 각종 문서와 디자인 작업을 마치고 드디어 본격적인 개발에 들어갔다. 개발에 본격적으로 들어가기 앞서 styled component의 global style로 자주 쓰이는 컬러,..
[코드스테이츠 FE 부트캠프 40기] 메인 프로젝트 회고와 꿀팁 1탄 😎 메인 프로젝트 회고 시작 메인프로젝트가 끝나고 어느덧 길고 길었던 약 6개월 간의 부트캠프가 4일 밖에 안 남았다. 그리고 올해는 진짜 한달도 안남았다니... 정말 많은 일이 있었고 힘든기간도 있었지만 그래도 잘 마무리 되어가는 것 같아서 정말 다행이다. 흡...! 대망의 메인 프로젝트 회고. 시작해보려한다. 혹시라도 코드스테이츠 프로젝트를 앞둔 분이라면 각 소제목 아래에 적는 "잘했던 점, 아쉬웠던 점" 부분을 잘 읽고 참고하시면 한층 실수를 줄일 수 있지 않나 생각한다. 😌 축복받은 팀 구성 👍🏻잘했던 점: -이제까지 꾸준히 스터디 모임으로 나와 잘 맞을 만한 팀원들과의 인맥을 쌓아놓았다는 점. 미리 팀 짜는게 무조건 좋은거 같다. 👎🏻아쉬웠던 점: -결론적으론 좋은 팀 구성이었지만, 시간이 있었..
[코드스테이츠 FE 부트캠프 40기] 프리 프로젝트 회고 😎 프로젝트를 마치고 프리 프로젝트, 메인 프로젝트를 연달아 끝내고 다시 블로그에 돌아오니.. 개념 정리하면서 공부하던 때가 옛날 이야기처럼 멀~~게 느껴진다. 엄청나게 바빴던 두달. 밤이고 낮이고 새벽이고 주말이고 노트북 앞에 앉아보낸 내 두달....!!!!!! 천천히 회고해보려한다. 일단 프리 프로젝트 부터!! 🤯 일단 해보자! 프리 프로젝트 코드 스테이츠에서 정해준 프리프로젝트는 모든 팀에게 일괄적으로 동일했다. 스택오버플로우 클론 코딩 개발에 발가락이라도 담가봤다면 모를 수 없는 스택오버플로우 사이트를 클론코딩하는 일이었다. 랜덤으로 구성된 프론트3, 백3명의 팀원분들과 함께 프로젝트를 하게되었고, 사용자 요구사항 정의서부터, API 문서까지 모두 회의를 통해 작성하고 본격적인 프로젝트에 들어갔다..
[코드스테이츠 FE 부트캠프 40기] 섹션4 회고 🏔나의 목표 되새기기 너무너무너무 믿기지 않지만 벌써 섹션 4가 끝나간다. 섹션4는 유난히 일도 많고 페이스도 많이 잃기도 한 힘든 기간이었던것 같다. 처음 코스를 시작할 때 "괜찮은 주니어 개발자가 되겠어!!"하며 힘차게 시작했던거 같은데 초심이 어디로 갔는지 너무 많이 잊혀진거 같다. 그래서 프로젝트를 시작하기 전에 백투더베이직...! 괜찮은 개발자가 되서 괜찮은 연봉 받으면서 괜찮은 생계유지를 해보자는 목표를 되새겨보게 된다. 👍🏻KEEP 달리기 시작한 일 하루종일 집에만 있어서 정신 집중도 안되는거 같아서 달리기를 시작하기로 했다. 아침 달리기가 나에겐 너무 현실성 없는 계획인듯하다. 결국 매번 실패해서 일주일에 3회 이상 저녁 달리기를 목표로 세웠다. 웨이트 트레이닝도 좋지만 역시 정신차리는덴 ..
Greedy Algorithm 탐욕 알고리즘 기본 + 예제 😋 탐욕 알고리즘이란? 이름부터 greedy, 탐욕 말그대로 "탐욕스럽게" 그때그때 좋은걸 선택해서 조건에 부응하는 가장 최적의 조합의 값을 찾는 계산법이다. 사전적 정의는 아래와 같다. 탐욕 알고리즘은 최적해를 구하는 데에 사용되는 근사적인 방법으로, 여러 경우 중 하나를 결정해야 할 때마다 그 순간에 최적이라고 생각되는 것을 선택해 나가는 방식으로 진행하여 최종적인 해답에 도달한다. 다소 어려운 정의를 풀어서 설명하자면, "최적해를 구하는 데에 사용되는" 여기서 '최적해'를 구할때 탐욕알고리즘이 사용된다고 했는데 여러개 중에 골라서 최대 혹은 최소의 값을 만들어야 할때, (다시말해, 몇가지를 선택하여 최적의 값을 만들어야 할때) 그 최적 값을 구하는 데에 사용된다는 것이며 "근사적 방법" '근사적'이..
hoxy...Proxy가 왜 필요한지 아시나요? 정확히요... 🙏🏻 thanks to 생활코딩 Create React App - Proxy 코스 교육과정 중 proxy관련 부분이 이해가 잘 안되서 다른 교육 자료를 찾아봤는데 생활 코딩님의 유튜브 영상을 보고 너무 잘 이해가 갔다..감덩... 샤라웃투 생활코딩, 구독 좋아요 박았숩니다!👍🏻 무튼 이번 블로깅은 그 영상으로 부터 배운 것들을 판서하는 식으로 작성했다. 영상을 다 보기 어려울 때 아래 내용을 보고 참고하고, 영상을 볼 수 있는 경우 영상으로 볼 것을 추천한다. 🤔 어떤 경우 , 왜 Proxy가 필요할까? CRA(Create React App)로 개발을 할 경우 개발환경을 편하게 만들어 주기위한 proxy라는 기능이 있다. 이 기능이 왜 필요한가에 대해 먼저 알아보고자 한다. 일단 CRA로 웹 개발을 하다..
배포, CI/CD란 + github actions 사용해서 s3에 자동배포하기 🚀 클라이언트 배포 배포란 작성한 코드를 빌드(실제 실행할 수 있는 상태로 최적화)하고, 빌드가 완성된 파일을 사용자가 접근할 수 있는 환경에 배치하는 일을 말한다. 열심히 만든 코드를 비밀로 할건 비밀로 하고, 줄일건 줄이고, 환경에 맞출건 맞춰서 유저가 접근할 수 있도록 배치하는 일을 말한다. 🛠 CI/CD CI란 지속적인 통합(Continuous Integration)를 의미하며, "CD"는 지속적인 서비스 제공(Continuous Delivery) 및/또는 지속적인 배포(Continuous Deployment)를 의미한다. CI(지속적 통합)는 조금씩 늘어나는 코드 변경 사항을 개발 팀이 정기적으로 구현하고 테스트한 후, 공유 버전 관리 리포지토리에 병합하는 방식을 설명합니다. 그러면 자동화된 빌..
Lighthouse로 웹사이트 최적화하기 💡 Lighthouse, 성능최적화로 인도하는 등대 Lighthouse란 영어로 등대를 의미한다. 이 말처럼 Lighthouse는 우리가 공들여 만든 사이트가 제대로 굴러갈 수 있는건지, 혹은 부족한 면은 없는지 검사해주고 그에 대한 해결책을 제시해준다. 말그대로 등대같이 우리를 성능최적화의 바른 길로 이끌어주는 프로그램이다. 🔥 Lighthouse의 Performance항목 Performance 항목에서는 웹성능을 측정한다. 화면에 콘텐츠가 표시되기까지의 시간이나, 화면이 나오고 나서 클릭등의 상호작용이 먹힐때까지의 시간, 혹은 화면에 불안정한 요소가 있는지 여부를 체크한다. ⚡️ Performance를 개선하기 위한 Opportunities항목 조금 아래로가면 '추천' 영역이 보인다. 이 부분이 우리..

티스토리툴바