프론트엔드10 [React] useEffect로 api 받아와서 렌더링하기 useEffect를 사용하면 입맛에 맞게 렌더링을 할 수 있다고 해서 사용했다. 그런데 api 비동기 요청 후 state 변경하는 과정에서 오류가 난다😥 대충 이런 식으로 코드를 작성했다. App = () => { var [data, setData] = useState({}); async function fetch1() { data["1"] = await fetchApi1(); } async function fetch2() { // fetch1 과 동일 } async function fetch3() { // fetch1 과 동일 } function getData() { fetch1(); fetch2(); fetch3(); } useEffect( ()=> { getData(); },[]); return (.. 2023. 7. 2. [React] 라이브러리 오픈소스가 많다 컴포넌트 하나하나 언제 구현하나 머리 빠개고 있는데 찾아보니 라이브러리가 엄청 많네? 부트스트랩 정도랑 통계, 그래프류는 있을 거라고 예상했는데 귀엽고 깔끔한 디자인된 컴포넌트까지...!! 갑자기 프론트 개발이 재밌어진다🤭 리액트만 알다가 플러터를 알았을 때의 새로움*1000 정도의 느낌을 받았다!!!!!!! 디자인, CSS로 고통받는 거 때문에 프론트 재미 없던 건데 미쵸따 귀여운 거 좋아 TOAST UI :: Make Your Web Delicious! TOAST UI is an open-source JavaScript UI library maintained by NHN Cloud. ui.toast.com MUI: The React component library you always wanted MU.. 2023. 6. 24. 3. Re:제로부터 시작하는 프론트엔드 생활 안녕하십니까 드디어 개발이 시작됐습니다. 이런저런 이유로 백이 아닌 프론트를 맡게 됐습니다. 좌충우돌 우당탕탕 리액트 개발기가 될 것 같습니다. 왜냐면 지금 input 박스조차 못 만들고 있기 때문이죠. 후후... JS 문법조차 몰라서 정말 zero부터 시작합니다. 개인 프로젝트야 유야무야 나만 알아볼 수 있게 해도 됐는데 팀플인만큼^^.. 깔끔하게 개발해 보겠습니다. 2023. 6. 21. 프론트엔드는 TDD가 필수인 것 같다 백엔드 준비하는 사람이 프론트엔드 종아리까지 담가본 후 느끼는 바이다. 프론트엔드야 말로 테스트 없이는 효율적인 코딩이 불가능한 것 같다. 프론트 개발하면서 고민이 컴포넌트 밑 컴포넌트 밑 컴포넌트의 state 변경 이벤트가 잘 작동되는지 확인하는 것이다. API로 데이터 호출해서 컴포넌트에 잘 띄워지는지 등등... 비즈니스 로직이 막 대단한 것도 아닌데 결합도가 높다고 해야 하나? 백엔드는 실행 비용이 그렇게 크지 않아서 테스트의 중요성을 못느꼈는데, 프론트엔드는 실행이 좀 많이 무겁다... 그리고 API 호출 할 수가 없잖아... 인가 기능도 해놔서 쿠키 설정도 해야 되는데... 맞아요... 지금 Mockito 이용해서 Mock API 호출 후 위젯에 잘 보여지는지 테스트 하고 있는데 계속 오류가 나.. 2023. 4. 11. [서평/23-15] Do it! 플러터 앱 프로그래밍: 오픈 API 활용 + 파이어베이스 + 구글 맵 + 광고 수익까지 독서기간_2023년 3월 26일 저자_조준수 출간일_2021년 2월 23일 Dart 언어는 문제가 아니다! Flutter 프레임워크가 고비다!!!!!! 생각보다 어렵다!!!!! Do it! React 편보다 더 괜찮았다(클론 코딩이긴 했지만). 설명이 자세하고 초심자의 눈높이에 맞춰 설명해준다. Stateful 위젯과 Stateless 위젯 차이부터 컴포넌트 배치, API 호출해 정보 표시하기까지 도움이 많이 되었다. 이 책 덕분에 async, await 키워드 개념을 이해했다. 리액트의 state 보다 플러터의 stateful이 더 편한 것 같다. 그래도 플러터는 확실히 편한 프레임워크는 맞다. 다양한 라이브러리 특히 커스텀하기 까다로운 AppBar, TabBar 등과 Cupertino라는 iOS 디자.. 2023. 3. 31. [Flutter / Dart] Flutter로 REST API 호출하기 먼저 플러터에서 HTTP API를 호출하기 위해 패키지를 설치해야 한다. flutter pub add http flutter pub add test 나는 테스트 코드에서 실행시킬 거라 test 패키지도 설치했다. 정확히는 Dart 언어로 Api 호출하는 방법이다. 참고로 아래의 웹 사이트를 이용해 JSON 호출을 할 거다! https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests ea.. 2023. 3. 26. [UI/UX] 디자인 레퍼런스 사이트 올 것이 왔다... 플러터보다 더 어려운 디자인ㅠ 이걸 구상하고 코딩하는 디자이너분들과 프론트엔드 개발자분들에게 존경을 표현합니다. 1. 디자이너스 (모바일) 디자이너스 세상의 모든 디자이너들을 위한 공간, 디자이너스(Designus) designus.io 2. Mobbin (모바일 / 웹 beta) https://mobbin.com 3. Dribbble (모바일 / 웹 / 일러스트) Dribbble - Discover the World’s Top Designers & Creative Professionals creative, modern, minimalist, logo, gradient, letter logo dribbble.com 4. WWIT (모바일) Lifeplus 한국의 UI/UX 모바일 패턴.. 2023. 3. 21. [Flutter] 기본 사용법 간단 정리 pubspec.yaml 파일 : 프로젝트의 메타데이터를 정의하고 관리 ios / android 폴더 : 각 플랫폼에 맞게 앱을 배포할 수 있도록 도와줌 test 폴더 ilb 폴더 : 작업 공간 MaterialApp()을 사용하면 '구글'스러운 템플릿 사용 가능 stless + tab키 class MyWidget extends StatelessWidget { const MyWidget({Key? key}) : super(key: key); // 클래스 파라미터 @override Widget build(BuildContext context) { return const Placeholder(); } // 아래처럼 리턴 타입을 명시하지 않아도 됨! // @override // build(context) { //.. 2023. 3. 19. 이전 1 2 다음
