전체 글

올 한해는 의미있는 한해가 되었으면 하는 마음으로 경기도청년봉사단 (이하 경청봉) 6기 단원으로 활동하게 됐다! 😉 경청봉은 경기도에 거주하는 만19-39세 청년들로 이루어진 경기도자원봉사센터 주관의 청년봉사단으로 이번 6기는 육각형 청년이라고 칭해지며 2024년 한 해 동안 경기도의 다양한 봉사활동에 참여할 수 있게 된다. 기본적으로 자유로운 참여가 가능하고 대부분의 봉사활동이 주말에 이루어지는 점에서 현재 취준생 신분인 내가 활동하기에도 좋을 것 같아 지원했다. 서류 지원은 1/21까지 진행됐고 1/31에 최종적으로 합격 소식을 받았다! 🏡 https://cafe.naver.com/ggvcyouth/ 경기도청년봉사단 공식카페 : 네이버 카페 경기도자원봉사센터에서 운영하는 경기도청년봉사단 공식카페 입니..

이전에 작성한 포스팅인 [JAVASCRIPT] var로 알아보는 변수 선언과 할당 에서 가볍게 다루었던 실행 컨텍스트에 대한 내용을 정리한다. [JAVASCRIPT] var로 알아보는 변수 선언과 할당 - 실행 컨텍스트 / 변수 호이스팅 / TDZ / 가비지 컬렉터이전에 작성한 포스팅인 [JAVASCRIPT] Variables : 변수와 상수 - let, const, var 중 심화에 해당하는 변수 선언과 할당과 var에 대한 내용을 정리한다. [JAVASCRIPT] Variables : 변수와 상수 - let, const, var Variables-ryung.tistory.com  실행 컨텍스트(execution context)는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다.실행 컨텍스트를 이해..

React.js와 Next.js의 차이점, 렌더링 방식React.js와 Next.js는 차이점을 말하라면 몇 가지가 존재하지만 가장 큰 차이는 렌더링 방식이라고 생각한다. React.js는 CSR만을 제공하고 있는 반면, Next.js는 CSR을 포함하여 SSR, SSG, ISR 등 다양한 렌더링 방식을 제공하고 있으며 이를 한 프로젝트 내에서 여러개 섞어서 사용할 수도 있다. 아래에서는 공통적인 방식인 CSR이란 무엇인지, 그리고 Next.js의 핵심이라고 할 수 있는 방식인 SSR은 무엇인지에 대해서 다룬다. +) 2024.08.24 Update  브라우저 렌더링브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말한다. (브라우저 렌더링에 대한 ..

우연히 예전에 방치한 velog에서 작성한 글이 꽤나 많은 조회수를 낸 사실을 알았다...! 내용을 조금 더 보완해서 티스토리로 다시 가져와본다. 👉 Velog 글 원본 바로가기 - wai-aria 이용해서 탭 UI 만들기 wai-aria 이용해서 탭 UI 만들기 평소에 사용하던 탭 UI를 제작하고 수정하던 와중에 동료분이 wai-aria 한 번 이용해보면 어떨까 말씀을 남겨주셔서 찾아보게 됐다. 이번 기회에서는 dom에 수정을 해야하는 불가피한 상황에 놓여 velog.io (마크업 개발자 시절) 평소에 사용하던 탭 UI를 유지보수하는 업무 중 동료분이 wai-aria 한 번 이용해보면 어떨까 말씀을 남겨주셔서 관련한 내용을 찾아보게 됐다. 이번 기회에서는 기존에 작성된 dom에 수정을 해야하는 불가피한..

이전에 작성한 포스팅인 [JAVASCRIPT] Variables : 변수와 상수 - let, const, var 중 심화에 해당하는 변수 선언과 할당과 var에 대한 내용을 정리한다. [JAVASCRIPT] Variables : 변수와 상수 - let, const, var Variable 변수 변할 수 있는 데이터 사용자나 서버로부터 입력 받은 데이터를 저장할 때 쓰이는 "이름이 붙은 저장소" 데이터 저장을 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하 s-ryung.tistory.com 변수 앞서 정의했던 변수(Variable)에 대해 되짚어보자면 변수는 하나의 값을 저장하기 위한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이는 고유한 이름(식별자)이다. var result..

Cloud Firestore Firebase 사용자는 데이터베이스 역할로 Cloud Firestore를 활용할 수 있다. 이 데이터베이스는 'collection > document > field' 3중 구조로 구성된다. Firestore가 책장이라면 collection은 책 '주민등록부'라는 collection은 여러 사람들의 개인 정보를 가진 책이다. 한 사람의 개인 정보 문서인 document들로 구성되어 있는 것이다. '이령'이라는 document를 하나 골라 열면 '이령'의 '생년월일', '주민등록번호', '주소' 등이 기입되어 있을텐데 이것 각각이 field인 셈이다. 데이터베이스의 구조에 대한 사전 설명은 이쯤하고 사용자는 이렇게 만들어진 데이터베이스를 앱 내에서 가져와 활용할 수 있다. Re..

문제 발생파이어베이스를 사용한 프로젝트 진행 중 어려움을 겪고 있던 부분이 있었는데바로 Firestore 사용량...  Firebase를 무료로 이용하는 경우, 하루 데이터 read 수를 50,000회로 제어하고 있다.보통이라면 이 50,000회를 넘치게 사용하기는 쉽지 않고실제로 조금 더 대형 프로젝트인 감자마켓도 하루를 제외하고는 일일 5만 건을 넘긴 적이 없었다.  그런데 개인 프로젝트인 내 제트위터🍧가 어느순간부터24시간 계속 열어두고 작업한 것도 아닌데, 조금만 켜두어도 사용량을 순식간에 다 먹어버리는 거다.   제발.... 제발 그만해 다오.....😱😱😱해야 할 작업이 산더미인데 자꾸 저러니 프로젝트 진행에 큰 걸림돌이 됐다.  이 참에 전체적인 성능 개선이나 하자하고SEO 강화, 이미..

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

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

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