나의 코딩일지

기업 규모에 따라 자체적인 IT 인프라를 사용하거나, 아마존 웹 서비스(Amazon Web Service), 구글 클라우드 플랫폼(Google Cloud Platform), 마이크로소프트 에저(Microsoft Azure) 등 클라우드 서비스를 활용하기도 한다. 같은 서비스를 개발하더라도 내부 설계에 따라 배포하는 방법은 다양하다. 그리고 일반적으로 개인 및 소규모 프로젝트는 별도의 서버없이 손쉽게 배포할 수 있는 Netflify, Vercel, DigitalOcean 등 SaaS 서비스를 사용한다. 깃허브와 연동만 해두면 알아서 배포를 해주기 때문에 서버가 종료된 프로젝트의 경우 vercel을 이용했었는데 인프라의 어려움을 옆에서 보다보니 vercel이 무엇인가 궁금해졌다. 문제는 내가 인프라는 한번도..

혼자서 프로젝트를 할 때는 모든 파일이 내 머릿 속에서 존재했기 때문에, 아키텍처에 대한 고민은 크게 해보지 않았다. 컴포넌트 구조에 대한 고민도 어떻게 하면 내가 편리하게 활용할 수 있을까 정도였다. 그러다가 협업을 시작하니, 아키텍처의 구조를 설계할 때 각 폴더의 역할을 정의해주고 깊이도 어디까지 들어갈지 협의할 필요가 있었다. 특히 아토믹 디자인 패턴이든 컴포넌트 컨테이너든, 모든 아키텍처에 대한 정의가 생각보다 다 다르기 때문에 상의를 하고 가야한다. 프로젝트에 아토믹 디자인 패턴을 적용하자고 결정을 했고, 파일 구조에 따라 organisms에 넣고 갔다. 하지만 이걸 templates에 넣어야할지, 아니면 pages에 넣어야할지를 추가로 고민하고 이야기하는 과정이 필요했다. 혼자서 개발하는게 편..

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