본문 바로가기

전체 글98

'나는 네이버 프론트엔드 개발자입니다'를 읽고 네카라쿠배~로 시작하는 개발자가 가기 좋은 대기업들에 당당히 합격해 다니고 있는 프론트엔드 선배 개발자들은 어떤 생각을 가지고 개발을 할까 하는 막연한 기대로 이 책을 구매했습니다. 총 8인의 네이버 프런트엔드 개발자분들이 자신의 경험과 중요하게 생각하는 부분들을 작성해주셨습니다.프론트엔드 개발자부터 시작하신 분부터, 다른 분야에서 일하다 프론트엔드에 매력을 느껴 프론트엔드로 일하시게 된 분까지 모두 다양한 경험들을 가지고 계셨습니다.이 책은 읽고 수많은 부분을 메모하며 한 챕터, 한 챕터 메모하며 읽는 것이 아닌 빠르게 읽으면서 기억하고 싶은 키워드를 짧게 기록하며 읽었습니다. 포스트잇이 없어 티슈에 기록한 키워드입니다.CS 기본기, 자바스크립트 기본기, 알고리즘 이해테스트 코드 작성, 성능 최적화오픈.. 2024. 12. 6.
플러그인 세미나 - 웹 개발 트렌드 및 직군 가이드 F-Lab 웹 개발 트렌드 및 직군 가이드를 듣고, 관심이 있는 프론트엔드 직군과 백엔드 직군에 관련된 내용만을 메모했습니다.백엔드 엔지니어- 주요 업무는 CRUD + α이다. α가 얼만큼인지에 따라 달라진다.- 주요 기술스택은 Spring, Nest.js, ASP.NET, Fast API 등이 있다.- Database 중재자다. (RDB, DocumentDB, Distribute DB, Graph DB, Metric DB, Key-Value DB, In-Memory DB 등등)완벽히 분류하려고 하는 것이 아니라, 내가 사용하는 DB가 어떤 조합이지를 떠올리는 게 좋다.조합을 추천한다면 MySQL, PostgreSQL 배우기 / MongoDB / Redis- Sharding(분산 저장 개념), Repli.. 2024. 11. 16.
'더 나은 웹 개발을 위한 가이드'를 읽고 이전에 받아 책장 속 고이 모셔두다가 요즘의 고민과 일맥상통하는 책 제목에 급 눈길이 가 꺼내 들었습니다. 과연 나는 웹 개발자로서의 얼마큼의 기본기를 갖추고 있는 사람일까를 돌아보게 하는 책이었습니다. 요즘 책을 읽으면 일에 대해 내가 진심으로 다가갔던 게 맞는지에 대해 되돌아보고 반성하게 되는 것 같습니다.이 책은 웹에 대한 기본적인 이해를 돕고 개발이 흘러가는 사이클을 크게 이해할 수 있도록 합니다. 단순히 웹 개발자의 시선이 아니라 사업 아이템이 선정되기부터 개발, 그리고 배포 및 운영까지를 알아봅니다. 이 과정에서 예전 기획자로 잠시 일하던 시절의 기억이 새록새록 떠오르기도 했습니다.웹 개발자로서 비즈니스에 대한 명확한 이해를 기반으로 개발을 진행하는 것과 그렇지 않은 것에는 큰 차이가 있습니다.. 2024. 11. 13.
MSW(Mock Service Worker) 프론트엔드 개발은 프로젝트 완성의 마지막 단계입니다. 디자인이 완료되면 UI를 작업하고, UI 완료 시점에 API가 완성이 되어있다면 더할 나위 없이 좋겠지만 실상은 그렇지 못하게 흘러가는 경우가 많습니다. 현재 사이드 프로젝트를 진행하면서 해당 이슈가 생겨 백엔드의 의존도를 줄여 개발 속도를 향상시키기 위해 MSW를 도입해 사용해 격차를 줄이기 위한 노력했습니다! Mocking이란?웹 개발 과정에서 백엔드 시스템이나 외부 API와의 통신이 필요한 경우가 많습니다. 이때, 실제 서비스나 API가 준비되지 않았거나, 테스트를 위해 특정 응답을 조작해야 할 필요가 있을 때 모킹이 필요합니다.Mocking을 통해 개발 초기 단계에서부터 백엔드와의 통신을 가정하고 프론트엔드 개발을 진행할 수 있게 해주며, 단위.. 2024. 11. 12.
F-Lab 프론트엔드 2개월 후기 TMI시간이 너무 순식간에 사라져 버리는 것 같은 기분이 든다. 하루하루를 충실히 살아내고 있는가가 내가 요즘 갖는 가장 큰 고민인 것 같다. 멘토링을 시작하고 시간이 꽤나 흘렀다. 1개월 리뷰를 쓰고 시간이 꽤나 흘렀지만 횟수로 치면 이제 12회 차를 진행한 시점이긴 하지만 부랴부랴 적어본다. 1개월 차가 지나고 2개월 차가 되기까지 배운 것들5~8회 차까지 내가 멘토님과 함께 학습했던 부분들은 (매 회차 진행에 대한 부분을 노션으로 기록하고 있다.)1. 알고리즘 풀고 해당에 대한 코드리뷰받기2. react-app 동작원리에 대한 학습을 바탕으로 나만의 적용 원칙 세워보기3. 개념에 대해 간단한 기술면접형 진행 (css-in-js vs css-in-css, session vs JWT)4. 프로젝트 진행.. 2024. 11. 10.
웹 성능 최적화 - 정적 리소스 최적화 정적 리소스 최적화하기해당 글에서는 정적 리소스에 해당하는 부분의 최적화를 어떻게 할 수 있을까에 대한 내용을 공유해 보겠습니다.가장 접근하기 쉬운 부분부터 알아보고자 정적 리소스 최적화라는 해당 주제를 먼저 선정했습니다!사실 이미 당연한 듯하고 계신 분들도 있을 것 같아요!정적 리소스는 초기 로딩 속도에도 영향을 주기 때문에 잘 알고 적용하는 것이 좋습니다. 시작해 보겠습니다. 정적 리소스라고 하면 대표적으로 이미지, 동영상, 폰트들이 있을 수 있겠죠!이미지이미지도 다양한 포맷이 존재합니다.- JPEG (Joint Photographic Experts Group) : 손실 압축 방식을 사용하는 포맷으로, 이미지 파일 크기를 줄이면서도 비교적 높은 화질을 유지합니다. 웹 브라우저 대부분에서 지원되어, 웹.. 2024. 11. 8.
웹 성능 최적화 필요성 이해하기 웹 성능 최적화 경험이 있으신가요?참 답변하기 어렵게 느껴지는 것 같아요. 내가 한 게 웹 성능 최적화라고 말해도 되는 부분인가? 확신이 서지 않아 뭔가 항상 더 배워야 할 것 같은 기분이 드는 것 같습니다. 사실 제가 그런 기분입니다.그래서 웹 성능 최적화에 대해 제가 학습했던 내용들을 훗날의 저를 위해 또 이 글을 볼 누군가를 위해 다시 정리해서 남겨보려고 합니다. 우선 최적화란 무엇일까요?위키백과에서 보면 시스템을 수정해 어떤 면의 작업이 더 효과적으로, 또는 자원을 덜 사용하게 만드는 작업을 말합니다. 캐시, 메모이제이션 등을 통한 방법도 있겠고, 자원 자체를 덜 사용할 수 있는 방법이 있겠죠. 왜 최적화 작업이 왜 필요할까요?인내심의 한계의 시간은 '3초'라고 합니다. 구글 리서치 자료에 따르면.. 2024. 11. 7.
React Hook Rule에 대해 이해하기 react-hooks/rules-of-hooks error를 마주해 보신 적 있으신가요? const [a, setA] = useState('a'); if (a === 'a') { const [b, setB] = useState('b'); // eslint error }위와 같이 코드를 선언하면 아래와 같은 error를 마주하게 됩니다.React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. eslint react-hooks/rules-of-hooksReact Hooks는 모든 컴포넌트 렌더링마다 정확하게 같은 순서로 호출되어야 한.. 2024. 10. 30.
React에서 컴포넌트를 분리한다는 관점에 대해 다시 생각해보기 이 글의 시작은 지뢰 찾기 게임을 만들었는데, 그 코드 중 cells 데이터로 map을 돌리고, row로 다시 map을 돌려 버튼을 만드는 코드를 컴포넌트로 분리하면 성능이 향상된다는 말에 의문을 품은 게 시작이었습니다.{cells.map((row, rowIndex) => row.map((cell, colIndex) => ( )),)}컴포넌트 분리에 대한 대화를 나누면서도 확실하게 해소되지 않는 부분이 생겼기 때문입니다.컴포넌트 분리에 대해 다시금 이해하고, 저만의 원칙을 정한 뒤 작업이 필요할 것 같다는 판단이 들었습니다. React에서 컴포넌트를 분리하는 목적은 뭘까요? 왜 분리해야할까요?잘 알고 있듯 코드의 재사용성, 가독성, 유지보수성을 높이고, UI 구조를 명확하게 하기 위함이라고.. 2024. 10. 21.

티스토리툴바