전체 글

React 개인 프로젝트를 진행하며 성능 개선 작업을 하게 됐다. 그동안 작업한 개인 프로젝트들은 토이 개념이 강해 기능에 신경쓰고 성능에는 조금 무게를 덜었었는데 데이터 연동하며 좀 각잡고 규모 있게 진행하려다보니 성능 체크가 필수적이였다. 이전 팀 프로젝트에서 수행했었던 성능 개선 작업 목록을 참고하며 따라갔는데 그 중에서도 Lazy Loading에 대해서 기록해보려고 한다. 코드 스플리팅 (Code Splitting) 자바스크립트의 split 메서드가 스쳐 지나간다. 조각조각! 코드 분할. 하나로 크게 뭉쳐진 코드를 조각 조각으로 나누는 작업 그리고 나누어진 부분들 중 해당 부분이 필요한 시점에 동적으로 로딩하는 기술이다. 즉, 사용자가 필요한 코드만 비동기적으로 로딩하는 방법이다. 리액트 앱(SP..

노마드코더에서 주관하는 트위터 클론코딩 챌린지에 참여하게 됐다! 2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders노마드 컨테스트nomadcoders.co 오랜만에 Firebase를 다루고 싶기도 하고새로 습득한 기술 스택들로 CRUD를 혼자서 완성도 있게 만들어보고자 챌린지에 임하게 됐다.  목표는 챌린지 참여에 그치지 않고 제대로된 개인 프로젝트로 발전시키기!제시하는 기능 외에 추가적인 기능 작업과 성능 개선까지 할 수 있는 만큼 완료 시키는 것이 목표로 한다   컨셉단순히 구twitter 현X 의 UI를 따라가는 것도 좋겠지만동작하지 않는 기능들까지 노출하는 것은 개인적으로 아쉽게 느껴져 컨셉과 디자인에 변화를 주었다. Z세대들을 타깃으로 한 레트로한 컨셉의 메신저!이름하여 Zwi..

한 번씩 잊어먹어서 메모처럼 정리해보기로! 동시에 Promise와 async/await의 작성 방식도 복습하자 JavaScript의 API 데이터 가져오는 방법 (1) XMLHttpRequest 오래된 방법..! 사용 경험이 없어 낯설지만 기록해둔다. let xhr = new XMLHttpRequest(); xhr.open("GET", "https://api.example.com", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 & xhr.status === 200) { let responseData = JSON.parse(xhr.responseText); console.log(responseData); } } xhr.send..

발단, 에러 상황 발견 Next.js 기초 공부하던 어느 날 여태 노트북으로 작업하다가, 데스크탑에서 이어 작업하기 위해 GitHub 저장소부터 새로 clone 하고 있었다. 그런데 웬열? 패키지 설치까지 하고 파일들을 살펴보고 있는데 에러가 발생하고 있는 컴포넌트를 확인..! 분명히 노트북에서 에러 없이 정상 작동하도록 작업한 뒤 push 한 상태일 텐데 특정 코드에서 type error가 발생했다. Type '{ children: string; jsx: true; global: true; }' is not assignable to type 'DetailedHTMLProps'. styled JSX를 사용한 영역에 지정된 타입이 없다는 문제였다. 이게 갑자기 어디서 나타난 에러지? 원래 전에는 됐는데??..

React Query (TanStack Query) https://tanstack.com/query/v3/ TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting (I could keep going...), you literally write a tiny fraction of the code you normally would. You will be surprised at how little code you're writing or how much tanstack.com (r..

작업 내용 GitHub - sryung1225/javascript-racingcar-6 Contribute to sryung1225/javascript-racingcar-6 development by creating an account on GitHub. github.com 작업 주요 일정 과제 기한 : 2023.10.26(목) - 2023.11.01(수) 10/27(금) : 구현해야 할 기능 목록 정리 & 프로젝트 셋팅 10/28(토) : 기능 구현 & 리팩토링 & 회고 작성 11/1(수) : 리팩토링 & 테스트 & 회고 작성 및 제출 회고 1) 주석이 필수는 아니구나! 지난 회고 1 에서는 동작 순서나 세부적인 내용에 대해 주석을 다양하게 활용해봤고 이게 좋은 습관인 것 같아 앞으로도 활용해보겠다고 ..

작업 내용 [숫자 야구 게임] 이성령 미션 제출합니다. by sryung1225 · Pull Request #184 · woowacourse-precourse/javascript- 작업에 대한 회고는 블로그로 대체합니다! https://s-ryung.tistory.com/66 (26일 게시 예약) github.com 작업 주요 일정 과제 기한 : 2023.10.19(목) - 2023.10.25(수) 10/20(금) : 작업 레포지토리 설정 & 구현해야 할 기능 목록 정리 10/22(일)-10/23(월) : 주요 기능 작업 10/25(수) : 회고 작성 및 제출 회고 1) 구현 기능 체크리스트의 필요성 기능을 구현하기 전 docs/README.md 에 구현할 기능 목록을 정리하는 것이 과제 진행 요구 사항..

스파르타코딩클럽 [GPT] 웹개발 종합반 : 최지웅 https://spartacodingclub.kr/online/web_chatgpt 스파르타코딩클럽 | [GPT] 웹개발 종합반 입문자부터 실무자까지 개발자 커리어에 꼭 필요한 웹 페이지 제작의 모든 것을 배웁니다. spartacodingclub.kr Flask 프로젝트에 DB 연결하기 앞서 만들던 멜로디쉐어 프로젝트에 SQLite를 연결해 사용해본다. 만들고 싶은 기능은 form으로 부터 받은 데이터(최애 음악)를 DB에 저장하는 것이다. # app.py 상단 from flask import Flask, render_template, request app = Flask(__name__) # DB 기본 코드 import os from flask_sqla..

스파르타코딩클럽 [GPT] 웹개발 종합반 : 최지웅 https://spartacodingclub.kr/online/web_chatgpt 스파르타코딩클럽 | [GPT] 웹개발 종합반 입문자부터 실무자까지 개발자 커리어에 꼭 필요한 웹 페이지 제작의 모든 것을 배웁니다. spartacodingclub.kr Database (DB) 데이터의 모음. 파일. 우리 눈에 보이지는 않지만 Database에는 Index라는 순서로 데이터들이 정렬되어 있는데 이를 이용해서 데이터를 잘 넣고, 나중에 찾을 때도 쉽게 찾을 수 있다. Database의 두 가지 종류 RDBMS(SQL) ex) SQLite, MS-SQL, My-SQL 등 행/열의 생김새가 정해진 Excel에 데이터를 저장하는 것과 유사하다. 정형화되어 있는 ..

스파르타코딩클럽 [GPT] 웹개발 종합반 : 최지웅 https://spartacodingclub.kr/online/web_chatgpt 스파르타코딩클럽 | [GPT] 웹개발 종합반 입문자부터 실무자까지 개발자 커리어에 꼭 필요한 웹 페이지 제작의 모든 것을 배웁니다. spartacodingclub.kr Flask 플라스크란? 파이썬 기반의 웹 프레임워크 사용자의 요청에 맞춰 HTML 파일을 응답해주는 Flask 서버를 만들 수 있다. +) 1대의 컴퓨터에다가 서버도 만들고 요청을 하게되는 경우 클라이언트 = 서버 인 상태가 되는데 이를 로컬 개발환경이라고 한다. Flask 시작하기 기본 설치하기 사용할 프로젝트를 열람한 뒤 > 가상환경 설치 (* 설치 방법) 후 확인 > flask 설치 $ pip ins..