ougi FE

오늘은 저에게 너무 배운 게 많은 2025년도를 보내고 2026년도를 반길 준비를 하려고 이렇게 글을 써보게 되었습니다올해 내가 한 일일단 제가 올해 한 가장 큰 일들은 전교 회장이 된 것과 학교기업의 리더가 된 것 같습니다이 두 가지를 하면서 맡은 일도 굉장히 많았고 한 번에 일이 몰려올 때가 많아 버거웠던 거 같습니다각각 어떤 고비들이 있었는지 정리해보자면전교 회장먼저 당선을 위해 선거운동을 하는 과정부터 힘든 것이 굉장히 많았던 거 같습니다 공약 중에 자격증 페이백이라는 공약이 있었는데 처음에는 괜찮다고 하셨는데 갑자기 안된다고 하셔서 2일 만에 공약을 삭제하기도 하고그리고 나머지 공약을 이루는데도 엄청나게 많은 시간과 들이고 논의를 많이 하여 결국 가능하게 되었습니다. 이뿐만 아니라 올해 선생님들..

오늘은 저희 팀 친구가 정말 가볍고 좋은 무한 스크롤 그리고 가상 스크롤 라이브러리를 내서 저희 프로젝트에 적용 하는 겸 이렇게 무한 스크롤과 가상 스크롤에 대해서 글을 쓰게 되었습니다무한 스크롤이란?무한스크롤이란 말 그대로 연속적인 스크롤을 제공하는 UI/UX 요소입니다화면에 표시된 아이템 목록의 끝까지 내려갔을 때 자동으로 다음 데이터를 요청하여 추가 아이템을 불러오는 기술입니다페이지네이션과의 차이는 페이지네이션은 다음 페이지로 넘어갈 때 api가 호출되어 데이터를 불러오지만무한 스크롤은 스크롤할 때마다 api가 데이터를 불러옵니다한 번에 모든 데이터를 불러오는 것이 아니라서 큰 장점이 있습니다적용 사례는 유튜브, 인스타그램 등 많은 소셜 미디어에 적용되어 있습니다하지만 페이지에 과도한 요소가 추가되..

오늘은 제가 매일매일 확인하는 메일매일 질문에서 동시성 모드라는 것이 왔는데 제대로 아는 것이 없어서오늘 알아보고자 이렇게 글을 써보게 되었습니다동시성 모드(Concurrent mode)란?여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능입니다 예전 리액트는 스택 구조로 이루어져 있습니다현재는 Fiber 구조로 이루어져 있어서 동시성 모드로 중간에 멈추거나 작업을 잠시 뒤로 미뤄둘 수 있게 되었습니다 동시성 모드를 사용하면 더 부드럽고 즉각적인 반응의 애플리케이션 경험을 줄 수 있습니다반응성과 성능이 향상됩니다 특징1. 비동기 렌더링한 번에 끝내지 않고 필요에 따라 나누어 처리합니다중요한 작업이 생기면 중단, 해당 중요 작업을 ..

오늘은 최근 제가 일정이 겹치면서 꼭 필요하고 나한테 꼭 필요한 일인지 판단하기 어렵고 판단할 생각조차 하고 있지 못했던 거 같습니다그래서 최근 깨달은 바가 있는거 같아 이렇게 글을 작성하게 되었습니다 제 주관적인 내용이 많이 들어있으니 글을 읽으시면서 주의하셨으면 좋겠습니다 여러분들이 이 글을 읽는다면 읽고 자신의 생각을 남겨주셔도 좋을 거 같습니다이런 생각을 하게 된 계기저는 이 학교에서 현재 회장 자리에도 있고 학교기업이라는 팀에 소속되어 있습니다 그리고 현재 고등학교 2학년입니다... 저는 도전할 기회가 있다면 무조건 다 잡는 것이 좋다고 생각을 해서 뭐든 할 수 있고 기회가 되는 일을 다 해보려고 했던 거 같습니다 물론 도전하는 것도 좋지만 그렇게 일을 하고 나서 내가 쏟은 노력에 비해서 얻어가..

이번에 드디어 제가 열심히 준비하던 광주탈렌트페스티벌이 끝났습니다 9/27에 실제 공연장에서 실시간으로 했었는데 이 공연장에서 겪었던게 많은거 같아요프로젝트 시작먼저 이 프로젝트를 어떻게 시작하게 되었는지부터 이야기 해보려고 합니다저희 학교에서는 매주 목요일에 전공 동아리 활동을 진행하는데 저는 새로 신설 된 인큐브 동아리에서 새로 시작하는 마음으로 참여하게 되었습니다동아리 활동 두번째 시간쯤 되었을 때 갑자기 동아리 부장 선배님이 광탈페라는 프로젝트를 할 사람을 모으신다고 하셨습니다저는 이 프로젝트가 외주라는 이야기를 듣고 좋은 경험이 될 것 같아서 바로 저도 합류하고 싶다고 말씀드렸습니다첫 회의첫 회의 때는 프로젝트 인원을 확정 짓고 일정을 정리했습니다그리고 저희는 디자인이 중요한 프로젝트 였어서 디..

오늘은 제가 광주탈렌트페스티벌이라는 프로젝트를 하다가 실시간 투표를 구현하면서 SSE를 쓰게 될 뻔해서 글을 적어보았습니다하지만 결론적으로 사용하진 않았습니다 ㅠㅠSSE란?SSE는 Server-Sent-Events의 약자인데 서버에서 클라이언트로 실시간 이벤트를 전송하는 기술입니다하지만 web-socket과 다르게 HTTP 프로토콜을 기반으로 하여 동작합니다서버에서 클라이언트로 단방향으로 데이터를 푸시합니다주로 실시간 알림, 주식 시세 업데이트 등 같이 서버에서 발생하는 이벤트를 클라이언트에 즉시 반영해야 할 때 사용합니다 SSE는 웹소켓과 달리 Client가 Server로부터 데이터만 받을 수 있는 방식입니다구현이 간편합니다접속에 문제가 있으면 자동으로 재연결 시도를 하지만 클라이언트가 close해도 ..

오늘은 제가 처음으로 책 스터디를 진행하게 되어서 JS 코딩의 기술을 읽고저는 제5장 반복문을 단순하게 만들어라에 대해서 써보려고 합니다책에 대한 평가를 하고 제가 적기로 한 5장에 대해 설명하고 책 스터디 느낀 점, 마무리 순서로 이야기해 보겠습니다책에 대한 평가먼저 저의 개인적인 평가는 너무 이론만 담겨있는 게 아니라 많이 유용하게 쓰이는 꿀팁들이 여러 가지 들어있는 거 같아서다른 이론을 중시하는 책보다는 좋다고 느꼈습니다그리고 그냥 팁들만 있는 것이 아니라 좋은 예시 코드들이 내용을 탄탄하게 받쳐주고 있는 느낌을 많이 받았습니다목차들의 제목들도 안에 있는 내용들이 잘 와닿게 작성되어 있어서 원하는 부분만 골라먹어 볼 수 있을 거 같았습니다그리고 새로운 장을 시작하기 전에 분위기를 풀어주는 문장들도 ..

오늘은 개발하다가 친구가 모든 코드에 이 낙관적 업데이트를 적용 해놓은 걸 보았습니다..근데 저의 생각으로는 이렇게 모든 곳에 낙관적 업데이트를 적용하는게 바르지 않다고 생각하여서이게 무엇이고 어떻게 하는지 구체적으로 알아보려 합니다낙관적 업데이트란?낙관적 업데이트는 웹 애플리케이션에서 사용자 경혐을 향상시키기 위해 사용되는 개념이라고 합니다주로 네트워크 요청이나 데이터 업데이트와 관련하여 사용합니다낙관적 업데이트는 서버로 보낸 요청이 정상적일 것이라고 미리 예상하고클라이언트 요청에 대한 응답이 오기 전에 클라이언트의 데이터를 미리 업데이트 된 상태로 변경하는 작업을 말합니다장점사용자가 행동을 하면 즉각적으로 피드백이 되어서 사용자 경험이 향상됩니다단점만약 오류가 발생한다면 ui가 잠깐이라도 불일치할 수..

오늘은 예전부터 자세히 알아보고 싶었던 가비지 컬렉션에 대해서 알아보겠습니다가비지 컬렉션이란?쓸모 없어진 객체가 차지하는 메모리를 자동으로 해제하는 것입니다가비지 컬렉터가 자동으로 메모리 관리를 해줍니다 장점메모리 누수가 감소합니다메모리 관리에 신경쓰지 않을 수 있어서 생산성이 향상됩니다성능 손실을 최소화합니다단점가비지 컬렉션이 언제 발생하는지 실행 타이밍을 예측할 수 없습니다메모리 누수를 완전히 막지는 못합니다개발자가 제어할 수 없습니다가비지 컬렉션을 실행할 때 CPU 자원을 소모하므로 대규모 애플리케이션에서는 성능 저하 요소가 될 수 있습니다가비지 컬렉션 알고리즘자바스크립트의 가비지 컬렉션에 사용되는 알고리즘은참고-세기(Reference-counting)와 표시하고-쓸기(Mark-and-sweep) ..

오늘은 저희 프로젝트가 빌드 시간이 굉장히 오래 걸려서 해결방법을 찾다가 도입해볼까 고민하게 된 webpack-bundle-analyzer를 소개해보려고 합니다webpack-bundle-analyzer가 무엇일까webpack-bundle-analyzer란 웹팩으로 빌드를 할 때 최종 결과물이 어떻게 번들 됐는지 시각적으로 보여주는 도구입니다프로젝트의 JS 번들 크기, 어떤 라이브러리가 얼마나 차지 하는지 그래프로 예쁘게 시작적으로 보여준다고 합니다크기를 보면서 너무 큰 공간을 차지하는 것을 제거하여서 최적화할 수 있습니다 대표적으로 큰 라이브러리 몇가지를 말하자면Three.js, TensorFlow.js, Chart.js, moment.js, lodash.js 등등이 있다고 합니다사용하기npm insta..