전체 글

프로그래머스에 접속한 지윤👸이가 알려줘서 접속해봤더니 올해 2023년 코딩 테스트 연습 문제를 얼마나 풀었는지 알려주는 서비스를 제공하고 있었다! 이런건? 그냥? 못지나치지? 바로 확인해본다 👉 이벤트 바로가기 2023년 연말결산 회고 이벤트 2023년 연말결산 회고 이벤트 programmers.co.kr 상위일건 예상하고 들어갔는데 정답을 맞춘 문제가 334개나!! 평균인 32개의 10배나 되는 수를 기록했다 ㅎㅎㅎ 수치로 보니 꽤나 뿌듯 🤗 작년 12월 처음 코딩테스트를 대비를 시작했고 하반기에 네부캠 지원을 목표로 하는 과정에서 특히 많이 이용했었는데 그 때의 영향이 큰 것 같다 하루 5문제씩 풀이하던 날이 있었지~ 덕분에 중간 중간 실전으로 마주했던 코딩테스트에서 잘 풀이하고 나오는 날도 많았던 ..

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

노마드코더에서 주관하는 트위터 클론코딩 챌린지에 참여하게 됐다! 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 에 구현할 기능 목록을 정리하는 것이 과제 진행 요구 사항..

React HooksReact v16.8에서 도입된 새로운 기능함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 함이전에는 클래스 컴포넌트에서만 상태를 가질 수 있었음 클래스 기반 컴포넌트의 단점컴포넌트 간 상태 로직을 재사용하기 어려움비슷한 형태의 상태 로직을 각 컴포넌트에서 직접 작성해야 했음생명주기 메서드에서 서로 관련 없는 로직들이 얽혀 코드의 복잡성을 증가시키는 문제가 있었음생명주기 메서드란? 컴포넌트의 특정 시점에 호출되는 메서드componentDidMount: 컴포넌트가 마운트된 직후에 호출componentDidUpdate: 컴포넌트가 업데이트된 직후에 호출위와 같은 생명주기 메서드에서만 상태 업데이트에 대한 사이드 이펙트를 처리할 수 있었음 정리하자면 클래스형 컴포넌트는 프로젝트 ..

스파르타코딩클럽 [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..