728x90 DEV71 [why] 프론트엔드 개발자로써 알아야 되는 부분들 개요현대 웹 개발에서는 수많은 기술과 도구들이 끊임없이 진화하고 있습니다. 이러한 환경에서 개발자들은 단순히 사용법을 익히는 것을 넘어, 각 기술의 존재 이유와 작동 원리를 깊이 이해할 필요가 있습니다. 이 시리즈는 프론트엔드 개발의 핵심 영역들에 대해서 학습하고 정리해보려고 합니다.시리즈의 목적프론트엔드 기술의 근본적인 원리와 배경 이해기술 선택과 의사결정에 대한 깊이 있는 통찰 제공발전하는 웹 생태계에 대한 포괄적인 이해 도모실무에서 마주치는 문제들에 대한 해결 능력 향상주제 목록1. 자바스크립트의 핵심 개념undefined는 어떤 목적으로 탄생했을까?자바스크립트가 스크립트 언어로 설계된 이유는?객체 기반 언어로서의 자바스크립트의 특징은?싱글 스레드 동작 방식의 장단점은?호이스팅은 어떤 원리로 동작하.. 2024. 10. 26. [why] "왜" 시리즈를 한번 적어볼까 합니다. Why 시리즈: 당연한 것들에 대한 질문개발을 하다 보면 당연하게 받아들이는 것들이 참 많습니다.JavaScript에서 undefined를 마주치면 "아, 값이 할당되지 않았구나"라고 생각하고 넘어가고, React에서 클로저를 사용할 때도 "이렇게 하면 되겠지"하고 넘어가곤 합니다.하지만 정작 "왜?"라는 질문을 받으면 제대로 된 답을 하지 못하는 경우가 많은 것 같습니다.시리즈를 시작하며부스트캠프 8주차, 늦은 저녁 오프라인 활동이 끝나고 양꼬치를 즐기며 7,8주차 그룹 동료들과 이야기를 나누던 중이었습니다. 프론트엔드 스프린트가 끝나가던 시점이었습니다. 바닐라 자바스크립트로 프레임워크를 직접 만들어보고, 리액트로 프로젝트까지 진행하면서 많은 것을 배웠지만, 동시에 더 깊은 의문도 생겼던 시기였죠.그날.. 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. 이전 1 2 3 4 5 6 ··· 12 다음 728x90
