전체 글

주니어 프론트엔드 개발자의 기록들 ʕ •ᴥ•ʔ✎
· 프로젝트
WAVED와 함께 챌린지의 파도를 넘어 취업으로!   안녕하세요!저희는 멋사로켓단 1기의 팀 세니티 입니다 🦁 🚀 멋사로켓단이란?프로그래밍 교육 업체 멋쟁이사자처럼에서 주관하는 실무 프로덕트 개발 프로그램입니다. 제가 소속된 팀 세니티는 UI/UX 디자이너 2명, 프론트엔드 개발자 3명, 백엔드 개발자 2명, 총 7명으로 구성되어 있습니다. 그리고 저는 이곳에 프론트엔드 개발자로 참여하게 됐어요 👩🏻‍💻   이번에 장장 2개월의 개발 기간을 거쳐개발 직군 취준생을 위한 챌린지 플랫폼 WAVED를 런칭(04/22)하게 되었습니다!! 이 기쁜 마음을 담아 제 블로그를 통해서도 웨이브드를 가볍게 소개해봅니다 🐋   🔗 서비스 링크 : https://w..
· DEV
로컬 개발 환경을 모바일 기기에서도 확인해 보기 위한 수단! 아주 유용하게 사용하고 있는 ngrok에 대해서 알아보자 Ngrok https://ngrok.com/ ngrok | Unified Application Delivery Platform for Developers ngrok is a secure unified ingress platform that combines your global server load balancing, reverse proxy, firewall, API gateway and Kubernetes Ingress Controller to deliver applications and APIs. ngrok.com Secure tunnels to localhost Ngrok는 방화벽을..
· 일상
올 한해는 의미있는 한해가 되었으면 하는 마음으로 경기도청년봉사단 (이하 경청봉) 6기 단원으로 활동하게 됐다! 😉 경청봉은 경기도에 거주하는 만19-39세 청년들로 이루어진 경기도자원봉사센터 주관의 청년봉사단으로 이번 6기는 육각형 청년이라고 칭해지며 2024년 한 해 동안 경기도의 다양한 봉사활동에 참여할 수 있게 된다. 기본적으로 자유로운 참여가 가능하고 대부분의 봉사활동이 주말에 이루어지는 점에서 현재 취준생 신분인 내가 활동하기에도 좋을 것 같아 지원했다. 서류 지원은 1/21까지 진행됐고 1/31에 최종적으로 합격 소식을 받았다! 🏡 https://cafe.naver.com/ggvcyouth/ 경기도청년봉사단 공식카페 : 네이버 카페 경기도자원봉사센터에서 운영하는 경기도청년봉사단 공식카페 입니..
· MARKUP
우연히 예전에 방치한 velog에서 작성한 글이 꽤나 많은 조회수를 낸 사실을 알았다...! 내용을 조금 더 보완해서 티스토리로 다시 가져와본다. 👉 Velog 글 원본 바로가기 - wai-aria 이용해서 탭 UI 만들기 wai-aria 이용해서 탭 UI 만들기 평소에 사용하던 탭 UI를 제작하고 수정하던 와중에 동료분이 wai-aria 한 번 이용해보면 어떨까 말씀을 남겨주셔서 찾아보게 됐다. 이번 기회에서는 dom에 수정을 해야하는 불가피한 상황에 놓여 velog.io (마크업 개발자 시절) 평소에 사용하던 탭 UI를 유지보수하는 업무 중 동료분이 wai-aria 한 번 이용해보면 어떨까 말씀을 남겨주셔서 관련한 내용을 찾아보게 됐다. 이번 기회에서는 기존에 작성된 dom에 수정을 해야하는 불가피한..
· JAVASCRIPT
이전에 작성한 포스팅인 [JAVASCRIPT] Variables : 변수와 상수 - let, const, var 중 심화에 해당하는 변수 선언과 할당과 var에 대한 내용을 정리한다. [JAVASCRIPT] Variables : 변수와 상수 - let, const, var Variable 변수 변할 수 있는 데이터 사용자나 서버로부터 입력 받은 데이터를 저장할 때 쓰이는 "이름이 붙은 저장소" 데이터 저장을 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하 s-ryung.tistory.com 변수 앞서 정의했던 변수(Variable)에 대해 되짚어보자면 변수는 하나의 값을 저장하기 위한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이는 고유한 이름(식별자)이다. var result..
· REACT
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
React 개인 프로젝트를 진행하며 성능 개선 작업을 하게 됐다. 그동안 작업한 개인 프로젝트들은 토이 개념이 강해 기능에 신경쓰고 성능에는 조금 무게를 덜었었는데 데이터 연동하며 좀 각잡고 규모 있게 진행하려다보니 성능 체크가 필수적이였다. 이전 팀 프로젝트에서 수행했었던 성능 개선 작업 목록을 참고하며 따라갔는데 그 중에서도 Lazy Loading에 대해서 기록해보려고 한다. 코드 스플리팅 (Code Splitting) 자바스크립트의 split 메서드가 스쳐 지나간다. 조각조각! 코드 분할. 하나로 크게 뭉쳐진 코드를 조각 조각으로 나누는 작업 그리고 나누어진 부분들 중 해당 부분이 필요한 시점에 동적으로 로딩하는 기술이다. 즉, 사용자가 필요한 코드만 비동기적으로 로딩하는 방법이다. 리액트 앱(SP..
· 프로젝트
노마드코더에서 주관하는 트위터 클론코딩 챌린지에 참여하게 됐다! 2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders 노마드 컨테스트 nomadcoders.co 오랜만에 Firebase를 다루고 싶기도 하고 새로 습득한 기술 스택들로 CRUD를 혼자서 완성도 있게 만들어보고자 챌린지에 임하게 됐다. 목표는 챌린지 참여에 그치지 않고 제대로된 개인 프로젝트로 발전시키기! 제시하는 기능 외에 추가적인 기능 작업과 성능 개선까지 할 수 있는 만큼 완료 시키는 것이 목표로 한다 컨셉 단순히 구twitter 현X 의 UI를 따라가는 것도 좋겠지만 동작하지 않는 기능들까지 노출하는 것은 개인적으로 아쉽게 느껴져 컨셉과 디자인에 변화를 주었다. Z세대들을 타깃으로 한 레트로한 컨셉의 메신저! 이름하여..
개발하는 이령
Ryung Log