지난 5월, Build with AI Seoul 2026 with Google DeepMind 컨퍼런스에 참가하며 인상 깊었던 세션들을 정리해 보았습니다.AI가 개발 생태계 전반에 빠르게 자리 잡으면서 이제는 단순히 새로운 기술을 접하는 것을 넘어, 이를 실제 업무에

이번 주 학습 주제는 크게 두 가지 였습니다. 디버깅과 에러 유형 정리 React Navigation 세팅 및 주요 Navigator 이해 완전히 새로운 개념을 배운 주차는 아니었습니다. 하지만 React Native에서 Navigation을 구현할 때 어떤 방식이

2주차 React Native CLI 스터디 주제는 Core Components였습니다. 강의 내용을 기반으로 학습하되, 부족하다고 느낀 부분은 React Native 공식 문서를 참고하여 보완하며 정리하였습니다. React Native에서 사용하는 컴포넌트 구조 자

이번 주부터 React Native CLI 스터디를 시작했습니다.학습은 Udemy 강의를 기반으로 진행하고 있으며, React Native CLI 강좌 자체가 많지 않아 선택지가 제한적이었던 점도 있었습니다.이번 주차에서는 주로 개발 환경 세팅과 React Native

이번 스텝에서는 Mock API 서버를 구성하고, 이를 기반으로 인스타그램 피드 리스트를 세로 스크롤로 출력하는 작업을 진행했습니다.아직 좋아요, 댓글 등의 인터랙션 기능은 구현하지 않았고, 레이아웃과 리스트 렌더링에 집중한 단계입니다.!처음에는 웹 인스타그램의 모바일

이전에 Flutter 기반 앱 프로젝트에 초기 단계부터 참여해 약 반년 정도 투입된 경험이 있다. Flutter는 러닝 커브가 낮고, 실무에 빠르게 적용할 수 있다는 점이 큰 장점이었다. 물론 고급 기능이나 세밀한 커스터마이징이 필요해질수록 지속적인 학습이 필요하지

프로젝트를 진행하던 중, S3에 업로드된 이미지를 클라이언트에서 직접 다운로드할 수 있게 구현해야하는 요구사항이 있었습니다.일반적으로 S3에 올린 이미지는 URL로 접근하면 화면에 렌더링하는 데에는 문제가 없지만, 아래와 같은 문제가 발생할 수 있습니다.브라우저가 자동

리액트와 같은 자바스크립트 기반의 애플리케이션은 JavaScript로 동작하기 때문에,JavaScript를 다운로드한 후 브라우저에서 실행되어야만 UI가 화면에 표시된다.이런 방식은 클라이언트 쪽에서 렌더링한다고 하여 클라이언트 사이드 렌더링(CSR)이라고 한다.자바스

React Dev Tools 도구를 활용하여 더 심도있는 성능 최적화를 진행해보았습니다. 크롬 익스텐션을 다운 받아 개발자 도구에서 도구가 활성화되는 웹 사이트에서 사용할 수 있습니다. 해당 도구는 처음 사용해보기에 잘 정리되어있는 블로그를 참고하여 사용방법을 먼저 익

인프라란 무엇일까? 그동안은 필요할 때마다 얼렁뚱땅 찾아서 사용하는 정도에 그쳤고, 깊이 있게 고민해본 적은 없었다.개발에서 인프라(Infra, Infrastructure)란 소프트웨어나 서비스를 안정적으로 운영하기 위해 필요한 기반 시스템 전체를 의미한다.즉, 개발한

3번째 챕터가 끝이 났습니다. 이번 챕터는 유난히 길고 끝나지 않은 싸움의 연속이었죠. 어째서 과제 통과 100%를 달성하기 어려운가, 그것을 이번에 제대로 깨달았다. 테스트 코드는 할 것도 많고, 기능 구현과 리팩토링까지 같이해야 해서 진짜 힘들었기 때문이었다...저

팀원분의 블로그를 보다가 마음에 들어 나도 사진 한장 넣어보았다. 기다리고 기다리던 대망의 테스트 코드 작성 챕터가 되었다. 내가 작성했던 테스트 코드라고는 함수에 대한 간단한 단위 테스트 밖에 없었다. 그렇기에 비동기 처리에 대한 것도 해본적이 없다! 그럼에

글을 시작하기 전, 이번 주의 소감을 짧게 요약하자면 딱 이 말이 떠오른다.“모래사장에서 바늘 찾기.”4~5주차부터 클린코드 과제를 빌드업하면서, 마침내 가장 힘들다는 난관에 직면해버렸다.FSD 아키텍처를 적용해 의존성을 분리하는 건 기본이고, Tanstack Quer

컴포넌트를 분리하고 커스텀 훅과 유틸 함수를 도입하면서 props 개수가 많아졌다. 그 결과 가독성이 떨어지고, 테스트 코드에서도 반복적으로 많은 props를 일일이 넘겨줘야 하는 번거로움이 생겼다.관련된 로직끼리 묶어서 부모 컴포넌트에 상태와 함수를 모은 뒤, 하위

과제를 하면서 가장 어려웠던 건 리팩토링 중 기존 로직이 망가지지 않도록 유지하는 것이었다. 코드가 처음부터 모듈화가 안 되어 있고, 한 파일에 기능이 덩어리처럼 뭉쳐 있어서, 뭔가 수정하면 어디서 오류가 나는지 파악하기가 힘들었다. 특히 calcCart() 같은 거대

웹과 모바일 분야에서 3년 정도 실무 경험이 있다. 다양한 프로젝트를 경험했지만, 아직 지식적으로 부족한 부분이 많다고 느껴 항해 플러스 프론트엔드에 승선하게 되었다! 아래는 우리팀 코어 타임 사진 ⛴️ 코어 타임에 모여서 모각코를 진행한다. 모르는 것이 있을때 언제

이전 과제에서는 라우팅을 직접 구현하고 이벤트 관련하여 작업을 진행 하였는데, 이번에는 VirtualDOM을 직접 구현해야했다. DOM이란 것이 무엇인지는 알고 있지만 VirtualDOM에 대해서는 공부가 필요했다. VirtualDOM이 무엇인지, 어떻게 사용되는 것

첫 과제는 프레임워크 없이 SPA를 구현하는 것이었습니다. 기존에는 항상 프레임워크를 활용해 개발했기 때문에, 처음부터 "라우팅을 어떻게 구현하지?"라는 고민이 들었습니다. 과제와 함께 제공된 참고 자료를 활용했지만, 세부적인 구현 방식까지는 다루지 않아 "이렇게 사용

시작하는 마음지금까지의 회고개강 후 커리큘럼과 학습 과정을 들으며 오랜만에 본격적으로 공부하게 되어 두근거리는 동시에, 끝까지 잘 해낼 수 있을지 걱정도 되었습니다. 첫 번째 발제를 들으며 ‘어떻게 과제를 해결해야 할까?’ 하는 고민이 들었지만, 관련 자료가 잘 정리되

작년부터 사용률이 늘어나고 있는 클라이언트 상태 관리 라이브러리이다. 주스탠드는 특정 라이브러리에 종속되어 만들어진 도구는 아니기 때문에 바닐라 자바스크립트에서도 사용이 가능하다. 간단하고 직관적이다초기 설정이 쉽고 간단하다.Zustand의 사용법은 store를 만들고