나의 코딩일지

서버 액션(alpha) 서버 액션은 API를 작성하지 않고 함수 수준에서 서버에 직접 접근해 데이터 요청 등을 수행할 수 있는 기능이다. 서버 액션을 사용하기 위해서는 함수 내부 혹은 파일 상단에 'use server' 지시자를 선언해야 하며, 해당 함수는 반드시 async여야 한다. form의 action export default function Page() { async function handleSubmit() { **'use server'** console.log('해당 작업은 서버에서 수행합니다. 따라서 CORS 이슈가 없습니다.') const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'post..

이번 프로젝트 목표: react-query 정복한 것: 타스한테 제발 에러나지 말라고 빌기사실 그렇게 애착이 가는 프로젝트는 아니였다. 근데 혼자 코드 122,427 ++, 53,746 --.. 일단 AI가 핵심이다보니 메인 서비스에서 프론트가 할 수 있는게 없었다. 프론트단의 기능같은 경우에도 그냥 친구 요청, 수락, 거절/ 모든 유저 조회 및 탭별 조회/ 채팅기능 정도였는데, 이미 2차 프로젝트에서 경험한 것들이어서 엄청나게 신선하지 않았다. 특히 채팅은 프로젝트 끝나고 진행하면서 엄청나게 신기하고 재밌었는데, 이번에는 그냥 대충 예상이 가니까 그냥 컴포넌트 몇개 더 만드는 수준이었다. 그럼에도 이 프로젝트가 나한테 의미가 큰건, 아는 기능이다보니 개선을 많이 할 수 있었고 그에 대한 고민을 많이 했..

import 이미지가 너무 많아서 interface StackItemType { name: string; description: string; imgUrl: string; } src/assets 에 아이콘 이미지 하나씩 다 넣고 map할 데이터 안에서 불러오니 이미지가 너무 많아졌다. 이건 누가봐도 성능 최적화가 필요했다. 전부 한 페이지에서 렌더링되다 보니 모든 이미지를 하나씩 불러와야했고, 깜박임 현상도 눈에 띄게 보였다. 안그래도 이틀 구현에 급해서 컴포넌트 모듈화없이 500줄 이상 하드코딩해놨더니 import문으로만 20줄 가까이 잡아먹는게 굉장히 불편,, => 이미지 하나만 불러와서 재사용해보자 이미지 스프라이트 여러 이미지를 하나의 이미지로 결합하여 이미지 스프라이트 시트(Image Sprit..

HOC, higher-order component 컴포넌트를 매개변수로 받아 새로운 컴포넌트를 반환하는 함수 React 특성상 사용되는 디자인 패턴 중 하나 컴포넌트 로직을 재사용하고 컴포넌트 간의 코드 공유를 단순화하는 방법을 제공 고차 컴포넌트는 다른 컴포넌트를 감싸고, 해당 컴포넌트에 추가적인 프로퍼티, 상태 또는 메서드를 제공하는 함수 컴포넌트 간에 로직을 공유하려면 로직을 HOC로 추출하여 여러 컴포넌트에서 사용 가능 상태를 다루는 로직을 분리하고, 여러 컴포넌트가 동일한 상태를 공유하도록 돕는데 사용 라우팅 라이브러리와 통합하여 특정 라우트에서 특정 컴포넌트를 렌더링하는데 사용 => 컴포넌트와 컴포넌트 사이에 로직을 추가하고 싶고, 그 로직을 공통적으로 사용하고 싶을 때 사용한다! 로그인 고차..

현재 부트캠프에는 프론트엔드 같이 하시는 분이 안계셔서 온갖 프론트 커뮤니티를 찾아다녔다. 그러다가 추천받아서 테오의 스프린트 디스코드 채널에 들어갔고, 개발 정보를 많이 구경할 수 있었다. 그러다가 한달정도 지났나, 테오의 스프린트 16기를 모집한다길래 호다닥 신청! 마님님 기대하고 닉네임 설정했는데 다른 사람들 돌쇠만드는 금쪽이 짓 한게 아닌가 싶다사실 부트캠프 마지막 프로젝트 5주차중 3주차랑 겹쳐있어서 고민을 많이 했는데, 백엔드분들끼리 역할분담이나 소통 경험하는 거 부럽기도하고, 혼자서 레포지토리 난리부르스 치는거 지치기도 해서 도망나왔다. 이런 이유 아니여도 요즘에 개발하면서 자꾸 이 다음엔 뭘해야할지 모르겠다는 생각이 먼저 들어서 전환이 필요했다.테오의 스프린트 16기도근도근 떨면서 들어간 ..

한달 지난 시점에서 뒤늦게 진행하는 프로젝트 회고엘리스 AI 8기에서 진행한 2차 프로젝트에 프론트엔드 개발자로 참여했다. 1차 프로젝트는 사실 초반에 스켈레톤 코드가 주어졌고, 백엔드와의 협업이 어떻게 진행되고 어떤게 필요한지 느끼기 바빴던 프로젝트였기 때문에, 솔직히 내 프로젝트라고 말할 수가 없었다. 그냥 좀 주어진 로직의 구조를 바꾸는 정도였다. 사실 다같이 초보자였기 때문에 경험으로 충분했고, 이번 프로젝트가 나의 포트폴리오에 넣을 수 있는 내 프로젝트였던 것 같다.기획을 합시다처음에는 프론트가 한 분 더 계셨기 때문에, 같이 알 수 있는 리액트를 사용했고, 이왕 리액트를 사용하는 김에 인터넷 앱처럼 만들고 싶었다. 사실 기획에 대한 감조차 안잡힌 상태였기 때문에, 일단 어떤 페이지를 만들지, ..

웹 브라우저의 구조 User Interface 주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스 Browser Engine 유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진 Rendering Engine HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 Network 각종 네트워크 요청을 수행하는 네트워킹 파트 UI Backend 체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트 Javascript Interpreter 자바스크립트 코드를 실행하는 인터프리터(V8) Data Persistence localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트 렌더링 HTML, CSS, JS..

리액트는 가상 DOM을 바탕으로 useEffect, useCallback, useMemo 등의 hook을 통해서 빠른 렌더링을 지원하며 인기를 끌었다. 그러나 최근에는 다양한 프레임워크 및 라이브러리가 나오고 있기 때문에, 리액트에서 벗어나서 효율적인 렌더링을 하는 방법에 대해서 고민해볼 필요가 있다. 프론트엔드 개발자가 고민해봐야하는 측면에는 어떤 것이 있는가? 1. 코드 최적화 가상 우선적으로 불필요하거나 중복된 코드를 제거하고 경량화된 HTML, CSS, JavaScript를 작성하여 코드를 최적화한다. 또한 JS와 CSS 파일의 경우 압축하고 미니파이하는 방법도 있다. 2. 브라우저 캐싱 이미지, 스타일시트, 스크립트 등의 정적 파일을 브라우저 캐싱을 통해 저장하고, 브라우저가 중복된 요청을 하지..