본문 바로가기
728x90
반응형

DEV76

[why] 프론트엔드 개발자로써 알아야 되는 부분들 개요현대 웹 개발에서는 수많은 기술과 도구들이 끊임없이 진화하고 있습니다. 이러한 환경에서 개발자들은 단순히 사용법을 익히는 것을 넘어, 각 기술의 존재 이유와 작동 원리를 깊이 이해할 필요가 있습니다. 이 시리즈는 프론트엔드 개발의 핵심 영역들에 대해서 학습하고 정리해보려고 합니다.시리즈의 목적프론트엔드 기술의 근본적인 원리와 배경 이해기술 선택과 의사결정에 대한 깊이 있는 통찰 제공발전하는 웹 생태계에 대한 포괄적인 이해 도모실무에서 마주치는 문제들에 대한 해결 능력 향상주제 목록1. 자바스크립트의 핵심 개념undefined는 어떤 목적으로 탄생했을까?자바스크립트가 스크립트 언어로 설계된 이유는?객체 기반 언어로서의 자바스크립트의 특징은?싱글 스레드 동작 방식의 장단점은?호이스팅은 어떤 원리로 동작하.. 2024. 10. 26.
[FE] React Context API와 LocalStorage로 간단 상태관리 모듈 만들기 1. 개요지금까지 리액트로 여러 프로젝트를 했던 경험을 돌아봤을 때, Context API만으로도 충분히 해결할 수 있는 상황에서도 종종 Zustand나 Redux를 사용해야겠다는 생각에 치우쳤던 적이 많았습니다. 이러한 접근은 종종 '배보다 배꼽이 더 커지는' 상황을 초래했습니다. 즉, 핵심 기능 구현보다 상태 관리 라이브러리 사용법 익히는 데 더 많은 시간을 투자하게 되는 경우가 발생했습니다.이러한 경험을 바탕으로, 부스트캠프 후반기 미션에서는 React가 제공하는 기본 도구를 최대한 활용하고자 했습니다. 특히 Context API를 이용한 전역 상태 관리와 함께, LocalStorage를 활용하여 데이터 지속성까지 확보하고자 했습니다. 이 아이디어는 이전에 다른 개발자분이 localStorage를 .. 2024. 10. 9.
[FE] 아토믹 디자인 패턴에서 탈출: 컴포넌트 디자인 패턴, 방법론 찾아보기 개요프론트엔드 개발자를 희망하는 사람으로서 다양한 프로젝트를 진행하면서, 저는 몇 가지 디자인 패턴과 방법론을 경험해 왔습니다. 특히 React를 사용한 프로젝트에서는 아토믹 디자인 패턴이 큰 유행을 끌었고, 저 역시 이를 적용해 보았습니다. 그 과정에서 유행을 따라가다 보니 오히려 다른 디자인 패턴과 방법론을 많이 못 사용해본 문제도 생겼던 것 같습니다.하지만 시간이 지나면서 아토믹 디자인 패턴이 모든 상황에 적합한 것은 아니라는 점을 깨달았습니다. 작은 규모의 프로젝트에서는 오히려 과도한 구조화로 인해 복잡성만 증가하는 경우가 있었습니다. 또한, 프로젝트의 특성에 따라 다른 패턴이나 방법론이 더 효과적일 수 있다는 것을 알게 되었습니다.이러한 경험을 바탕으로, 이번에 새로운 React 프로젝트를 시작.. 2024. 10. 7.
[네이버 부스트캠프] 프론트엔드 프레임워크 비교하기(feat. typescript) 들어가며최근 네부캠에서 후반부 학습 스프린트를 진행하면서 프레임워크를 직접 구축해보는 경험을 하고 있습니다. 이 과정에서 각 프레임워크의 등장 배경, 그들이 해결하고자 했던 핵심 문제들, 그리고 그 해결 방식을 이해하는 것이 매우 중요하다는 것을 깨달았습니다.그룹 활동 중에 리액트가 주로 논의되었지만, 다양한 프레임워크를 폭넓게 이해하는 것이 장기적으로 더 큰 도움이 될 것이라 생각합니다. 따라서 이번 기회에 주요 프론트엔드 프레임워크들의 역사와 특징을 정리해보고자 합니다.참고해주셨으면 하는 부분은 jQuery와 React가 엄밀히 말해 프레임워크는 아니라는 것입니다. jQuery는 라이브러리이고, React는 라이브러리 혹은 UI 개발을 위한 JavaScript 도구로 분류됩니다. 그러나 이들을 이 글.. 2024. 9. 24.
[Next.js] SSR이 뭔데? SSR이 뭘까?ICT 인턴십으로 근무 중인 회사에서 내가 진행하게 되는 서비스의 기술 스택은 Next.js 12와 Node 14가 메인이었습니다. 그러다보니 Next.js에 대해서 공부도 해야 되고 Next.js를 사용하는 이유 중 하나인 SSR, SEO에 대해서도 공부를 해야 되었습니다. 3월 중에 그렇게 공부를 하면서 정리를 했던 글을 모아서 올리려고 합니다. 밑에 내용 부터는 혼자 공부하면서 적은 글이라 말투가 반말인 점 양해 부탁드립니다. 네이버 블로그의 경우구글에 SSR을 검색했는데 네이버 블로그 글이 먼저 나오길래 한번 읽어 봤다. 밑에 내용은 읽으면서 정리한 부분 그리고 궁금한게 생겼거나 간단하게 의견을 추가로 달아봤다.어서 와, SSR은 처음이지? - 도입 편SSR이란?서버에서 사용자에게 .. 2024. 5. 24.
[ICT인턴십] 그래프 라이브러리 nivo 사용해보기 ICT 인턴십 근무를 하면서 4월, 5월 달에는 기존에 맡았던 서비스의 어드민 페이지를 작업 중에 있습니다. 기존 서비스에 대한 어드민 페이지가 있지만 다양한 이슈(나중에 인턴십 후기에 정리해볼까 하는)로 인해서 새롭게 리뉴얼을 진행하고 있습니다. 그 과정에 개발하면서 적어둔 내용들을 하나 씩 올려볼까 합니다.특정 서비스에 대한 통계치를 보여주는 카드가 대시보드 작업을 하면서 필요로 했기 때문에 팀장님께서 의견을 주신 nivo를 활용해서 해당 컴포넌트를 구현해보려고 하였습니다.  Home | nivo nivo.rocksChart.js 나 d3.js와 같은 라이브러리를 이전에 사용은 해보았지만 특정 데이터를 잘 보여주기 위해서 컴포넌트를 구성하는 건 이번이 처음이라 최대한 공식문서를 잘 읽으면서 진행해보려.. 2024. 5. 23.
728x90
반응형

티스토리툴바