전체 글

· 회고
경영악화로 인한 서비스 기획팀, 개발팀 해체 및 자사몰 폐지 2023년 2월 10일 퇴사를 하였습니다. 서비스 종료라는 단어만 봐도 아쉬움이 남습니다.ㅠ 1월 중순 대표님께서 slack에 메시지를 보냈습니다. 알림을 보고 아... 올게 왔구나 장문의 글이 올라와있었습니다. 뉴스, 기사에서만 권고사직만 보았지 내가 권고사직을 받을 거라는 생각이 든 적은 없었다 퇴사 전 대표님 개별 1:1 미팅을 진행하였습니다. 대표님께서는 미안합니다라는 말에 아무 말도 할 수가 없었습니다.정말 좋은 대표님이셨고 시기가 시기인 만큼 어쩔 수 없었다고 생각합니다 막상 퇴사를 해보니 생각보다 아무렇지 않았다 그저 덤덤하였습니다. 퇴사 이후 개발팀과 기획팀 인원 모여서 다 같이 식사를 하며 담소를 나누었고 다음에도 기회가 있으면..
· React/nextjs
SSG(정적 생성): 빌드하는 과정에서 페이지를 생성, 페이지 요청 경우 이미지 생성된 정적 페이지 제공. SSG는 페이지들을 서버에 모두 만들어둔 뒤, 요청 시 해당 페이지를 응답하는 것이기 때문에 바뀔 일이 거의 없어 캐싱해두면 좋은 페이지에 적합하다. 정적 페이지 업데이트가 필요하여 Next.js에서 제공하는 ISR을 적용하였습니다. ISR이란? 정적페이지를 새롭게 추가하거나 업데이트 할 수 있도록 하는 Next.js 기능. ISR은 페이지의 정적인 부분만 미리 렌더링한 후, 사용자가 필요로하는 동적 데이터를 렌더링할 수 있습니다. ISR은 빌드시간 더 빠르게하고 특정 주기마다 재생성하는 페이지와 캐시를 자동으로 무효화할 수 있게합니다. 전체 사이트를 다시 빌드하지 않아도된다. function Bl..
· React
이슈 : 개발이 지속됨에 따라 다양한 디자인 형태의 부가족인 요소가 계속 추가되어 props가 지속적으로 늘어있음. 1. 기존 컴포넌트 interface FieldProps { name: string title?: string description?: string inputType?: string fieldType?: 'default' | 'leftImg' buttonText?: string isButtonDisabled?: boolean placeholder?: string defaultValue?: string isRequiredField?: boolean isReadOnly?: boolean isLoading?: boolean pointerEvents?: string autoComplete?: st..
· 회고
농업 스타트업 생소한 분야인 만큼 신기하고 어려웠다. 업무를 하기 위해서는 어느 정도의 농업 지식이 필요하였다. 동료분들이 많이 설명해 주시고 가르쳐주셨지만, 이론으로는 스마트팜에 대해 전부를 알기에는 어려웠다. CRUD 간단한 기능 개발은 어르신 입장을 생각하여 UI 개발을 진행하였는데 반면에 차트, 온실 맵 농업데이터를 시각화 하는 작업에서 단순히 데이터를 시각화하는 게 아닌 스마트팜 관리자, 농장주 입장을 고려하여 개발을 해야 하는데 모르는 부분이 많아 다소 어려움이 있었다. 회사에서 신규 대농지(대신농사지어드립니다) 프로젝트를 진행하게 되었는데 스마트팜에 이해도를 얻고자 밀양 스마트팜을 방문하였고 농업 체험을 하였다. 생각한 것보다 농장 규모가 크고 스마트하지 않았다;; 역시 현장은 체험해야 그 ..
· React
&& 연산자 사용 리액트를 깔끔하게 작성하는 방법을 적은 저자 타일러 호킨스는 조건이true 면 렌더링하고 false 아무것도 렌더링 하지 않아야 하는 경우 삼항 연산자를 사용하지마세요. &&대신 연산자를 사용하세요 라고 주장하며, 저자 켄트 C. 도즈는 반대로 **JSX에서 && 대신 삼항 연산자 사용**하는 것이 좋다고 주장하고 있습니다. && 보다 삼항 연산자 사용 // BAD... function ContactList({contacts}) { return ( {contacts.length && contacts.map(contact => ( {contact.firstName} {contact.lastName} ))} ) } function Error({error}) { return error && ..
· CS
1. www.naver.com 를 검색한다. www.naver.com에 대한 요청은 일반적으로 케이블 인터넷 공급업체, DSL 광대역 공급업체 또는 기업 네트워크 같은 인터넷 서비스 제공업체(ISP)가 관리하는 DNS 해석기로 라우팅됩니다. 라우팅이란 ? 우리가 네트워크에서 특정 경로로 데이터를 보낼때 사용되는 과정을 말한다. DNS 란 ? 도메인 네임(이름) 시스템입니다. 사람이 읽을 수 있는 도메인 이름을 머신이 읽을 수 있는 IP 주소 192.02.2.44 로 변환하고 라우팅 정보를 제공하는 분산형 데이터베이스 시스템입니다. 2. 브라우저는 캐싱된 DNS 기록을 확인한다. 브라우저는 4가지 캐시를 확인한다 브라우저 캐시 - 일정 기간 동안의 DNS기록을 저장하고 있다. DNS query가 가장 먼저..
· React
Atomic Design Pattern 💡 효과적인 디자인 시스템을 만드는 것은 모든 것은 진정으로 서로 협력하고 의사 소통하는 사람들에게 달려 있습니다. !!!! 디자인 시스템은 하루를 절약합니다. vue, react 모두 컴포넌트 단위로 개발을 진행하여 컴포넌트 중심 설계 패턴이 주목 받게 되었다. 아토믹 패턴은 2013년 6월에 Brad Frost에 의해 처음으로 제시된 디자인 패턴이며, 패턴을 소개할 때 디자인 시스템을 위한 것이라는 점을 소개한다. 아토믹 패턴은 프론트엔드 시스템을 구성하는 컴포넌트들을 논리 구조 단위로 나누어 효율적으로 재사용하고 불필요한 코드 중복을 제거하여 클린한 아키텍처를 유지할 수 있도록 한다. 한마디로 컴포넌트를 재사용성이 강하고, 단단하게 잘 설계함으로서 점진적으로 ..
· React
필자는 재사용하고 싶을 때 사용한다는 말, 성능 최적화 등등의 말만 보고 대부분 함수에다가 useCallback을 남용하였습니다. 이로 인하여 코드가 복잡해지거나, 유지보수에 어려운 점을 겪는 경험을 하여 ..useCallback을 이렇게 남용해도 되는 건가냐는 생각 하게 되어, 여러 문서를 보고 정리해 보았습니다 ! 제대로 알고 사용하자 ! 모르고 사용하면 중범죄다! 반성 후 열심히 코드 고쳤습니다. useCallback 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다. 메모제이션 콜백을 반환합니다. 즉 리 렌더링 최소화하기 위해 사용합니다. 한번 만든 함수는 필요할 때만 만들어지고 재사용 ! Component에서 props 가 바뀌지 않으면 렌더링 하지 않습니다. 1. 함수 동등성 이해 ..