react.js11 [BTM] 1탄 - 리팩토링, 그리고 배포를 준비해보자. 📝 포트폴리오로써의 가치 향상내가 React.js를 처음 배우기 시작하면서 진행했던 프로젝트가 하나 있다.바로 이 블로그에 포스팅을 작성하며 삽입할 썸네일을 간단하게 만들기 위한 '블로그 썸네일 메이커' 다.다른 분이 만드신 걸 보고 '재밌겠다', '나도 필요하겠다' 싶어 제작했었다. HTML Canvas Element를 useRef를 통해 활용하고 Color Picker 라이브러리와 이미지 저장 기능까지, React.js를 넘어 웹 애플리케이션으로써 경험해 볼 수 있는 많은 기술들을 공부할 수 있었던 즐거운 프로젝트였다. 하지만 몇 년 동안 사용하는 내내 신경쓰이는 몇 가지 단점이 존재했는데...항상 localhost에서 열어야 하는 번거로움, 즉 배포가 안되어있음!처음 시작했을 때의 목표, '이미지.. 2024. 6. 24. [React.js] TypeScript에서의 setState 등등에 대해 알아보자 🤔 any 지양하기. 졸업 작품의 프론트를 Next.js + TypeScript로 작성하고 있다. 자식 컴포넌트에서의 상호 작용이 state를 변경시켜야 할 필요가 있어서 부모 컴포넌트에 선언된 setState 함수를 자식 컴포넌트에 props로 넘겨주면서 의문이 생겼다. TypeScript를 통한 React 개발에서 보통 props를 넘겨받을 때, interface나 type alias를 활용하여 해당 props의 타입을 지정해주고는 하는데, props로 number, string 같은 원시 타입만 넘기는 것도 아니고 때때로 ReactNode 같은 타입들도 넘겨야 할 필요가 생기고는 한다. 이전까지는 ReactNode나 HTML 엘리먼트, setState 함수 등을 props로 넘겨줄 때에 정확한 타입.. 2023. 10. 20. [React.js] React에서 페이지네이션 구현하기 🧑🏻💻 그런 욕심이 들 때가 있다. 대학교 졸업 학기, 현장 개선 캡스톤 디자인 수업 (일명 졸업작품)을 듣고 있다. 팀장을 맡아서 우리 대학의 취업 역량 강화 프로그램 점수를 기반으로 하는 랭킹 커뮤니티 사이트를 개발하고 있는데, 사용자들의 랭킹을 보여줄 때 한 페이지에 30개의 데이터만 보여주고 싶었다. 못해도 전체 재학생 수가 1,000명은 족히 넘을 것이므로 한 페이지만으로 랭킹을 보여주기에는 가독성이 떨어지니까. 그래서 페이지네이션 처리가 필요했는데, 백엔드를 개발하는 팀원에게 부탁하기에는 이미 그가 만들어 주기를 기다리고 있는 수많은 API가 줄을 서 있었기에 팀장으로서 이 정도 처리는 프론트에서 하겠다 자신있게 말을 하고는 페이지네이션에 대한 자료를 이것저것 찾아보았다. 💡 페이지네이션(P.. 2023. 10. 18. [JavaScript] ES6 문법을 간단히 정리해보자. 👀 갑자기 이런걸 정리하는 이유 최근 Udemy에서 React.js 강의를 듣고 있다고 블로그에 한 두 번 거론했던 기억이 있다. 그 강의를 들으면서 절실히 느껴지는 것이 기본기였고, 기본기를 다지려 이런저런 방면으로 노력을 하고 있다. 그 중 리액트로 웹 애플리케이션을 작성하는 데에 있어서 가장 기본적이고 가장 중요한 것이 '차세대 JavaScript 문법 (ES6)'이라는 생각이 들었다. 그래서 동영상 강의를 비롯해서 구글을 돌아다니기도 하고, 책도 읽어가며 나름대로 정리해 본 내용을 블로그에도 포스팅을 해놓아야겠다는 생각이 들어서 이렇게 갑작스럽게 ES6의 핵심적인 문법들을 올리게 되었다. 부족한 내용도 있고, 아직은 어떻게 해야 잘 활용할 수 있는지 잘은 모르겠지만, 혹시라도 부족한 부분이, 더 .. 2022. 11. 25. 이전 1 2 3 다음
