분류 전체보기 10

전기설계하던 사람이 개발자가 되기로 결심한 이야기

나는 전기공학과를 전공으로 졸업하고 좋아하던 교수님의 말에 혹해서 전기기술사를 꿈꾸게 되었다. 그래서 자연스럽게 관련있는 직무였던 건축전기설계 회사에 입사하여 일을 시작했다. 자아 탐구를 하지 못하고 남의 말에 이끌려 직업을 선택하게 된게 문제였던 것 같다. 나는 이 회사에서 3년 6개월 정도 일을 했다. 일은 생각보다도 더 힘들었다. 1년동안 야근 하지 않는 날을 손으로 셀 수 있을 정도였다. 업무 강도가 높다는 건 알고 시작하기도 했고, 나는 일과 삶의 균형보다는 가파른 성장을 추구했기 때문에 상관없다고 생각했지만 나와 맞지 않는 일을 체력이 바닥날정도로 지속하게 되니 점점 지쳐갔다.  왜 나와 맞지 않았을까? 설계 자체는 재미있었다. 나는 주로 건축물의 용도나 구조를 파악해서 알맞게 전등이나 전열,..

개발일기 2024.11.28

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트 2주차 회고록

[프로젝트 코스] 2024.08.05(월) ~ 2024.09.20(금)프로젝트 주제 : 컴포넌트 라이브러리 프로젝트 KPT 회고Keep 현재 만족하고 있는 부분, 계속 이어갔으면 하는 부분Problem 어려움을 느껴서 개선하고 싶은 것, 개선이 필요하다고 생각되는 부분Try Problem에 대한 해결책, 구체적으로 시도할 것 @Keep 현재 만족하고 있는 부분, 계속 이어갔으면 하는 부분1. 프로젝트 진행 상황전체 일정에 맞추어 세운 계획이 잘 지켜지고 있음.현재까지 계획대로 차질없이 진행되고 있어서 만족스러움. @Problem 어려움을 느껴서 개선하고 싶은 것, 개선이 필요하다고 생각되는 부분1. 시간 관리프로젝트 수행 중 여러 업무를 동시에 처리해야 하므로, 한정된 시간을 효과적으로 관리하는 데 어려..

개발일기 2024.08.21

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트 1주차 회고록

[프로젝트 코스] 2024.08.05(월) ~ 2024.09.20(금)프로젝트 주제 : 컴포넌트 라이브러리 프로젝트 KPT 회고Keep 현재 만족하고 있는 부분, 계속 이어갔으면 하는 부분Problem 어려움을 느껴서 개선하고 싶은 것, 개선이 필요하다고 생각되는 부분Try Problem에 대한 해결책, 구체적으로 시도할 것 @Keep 현재 만족하고 있는 부분, 계속 이어갔으면 하는 부분1. 매일 오전 10시 스크럼짧고 효율적인 회의를 통해 팀 내에서 필요한 정보를 신속하게 공유팀원 간의 일일 목표 및 진행 상황을 명확하게 파악할 수 있어 협업의 효율성 향상2. Trello를 통한 진행 상황 시각화각 팀원의 진행 상황을 한눈에 파악 가능업무의 우선순위를 명확히 할 수 있음3. Figma를 활용한 디자인 ..

개발일기 2024.08.11

[React] 불필요한 리렌더링을 방지하는 방법 : [유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 2기

리렌더링은 화면을 다시 그리는 과정인데, 이 과정이 불필요하게 자주 발생하게 된다면 성능이 저하될 수 있고 사용자 경험에 부정적인 영향을 끼칠 수 있습니다. 먼저 리렌더링을 방지하려면 리액트가 어떤 상황에서 리렌더링을 시키는지 알아야 할 필요가 있습니다. 리액트에서 리렌더링은 언제 일어날까? 🤔1. 컴포넌트의 state 변경리액트가 추적하고 있는 state 값이 변했을 때 해당 state를 관리하고 있는 컴포넌트가 리렌더링 된다. 2. 부모 컴포넌트의 리렌더링부모 컴포넌트가 리렌더링 되면 해당 컴포넌트의 모든 자식 컴포넌트가 리렌더링된다. 3. props 값의 변경props의 값이 변경되면 props를 받고 있는 컴포넌트가 리렌더링 된다.  따라서 최적화 도구를 적용하기 전에 기본적으로 코드를 짤 때 ..

개발공부 2024.08.04

[React] useReducer의 개념과 사용 예시 : [유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 2기

useReducer란?useState처럼 상태를 관리하고 업데이트할 수 있는 리액트 내장 훅입니다. useState와 useReducer 비교문법이 비슷하지만 dispatch와 reducer 함수가 달라 보입니다. //useStateconst [ state, setState ] = useState(initialState);//useReducerconst [ state, dispatch ] = useReducer(reducer,initialState); useReducer의 구성요소는 다음과 같습니다.state : 상태의 이름dispatch : reducer함수를 실행시키고 상태를 업데이트 할 때 필요한 정보(기능, 재료)를 전달하는 함수reducer : dispatch로 전달된 데이터를 기반으로 상태를 ..

개발공부 2024.07.26

[자바스크립트] 비동기 처리를 어떻게 할까?

동기 처리와 비동기 처리란 무엇일까?자바스크립트 엔진은 싱글 스레드 방식으로 동작합니다. 싱글 스레드 방식은 한 번에 하나의 작업만 처리할 수 있기 때문에 시간이 오래 걸리는 작업을 실행하는 동안에는 다음 작업을 시작할 수 없습니다. 이러한 처리 방식을 동기 처리라고 하는데, 동기 처리는 직관적이고 처리 순서가 보장된다는 장점이 있지만 시간이 걸리는 작업을 실행하는 경우 다음 작업이 블로킹된다는 단점이 있습니다. 비동기 처리는 동기 처리와 반대로 현재 실행 중인 작업이 종료되지 않은 상태라 하더라도 다음 작업을 실행하는 방식을 말합니다. 이 방식은 시간이 걸리는 작업이 실행 중이더라도 다음 작업이 블로킹되지 않습니다. 자바스크립트는 어떻게 비동기 처리가 가능할까?자바스크립트는 한 번에 하나의 작업만 처리..

개발공부 2024.07.21

[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 면접~1주차 회고

이전에 Next.js를 잘 알지 못하고 독학하면서 진행했던 프로젝트가 있었는데,Next.js의 기능들을 잘 활용하지 못했던 것이 아쉬워서 프로젝트 캠프 Next.js 2기에 지원하게 되었다.    서류 합격을 하고 2일 후에 Zoom으로 면접이 진행되었다.지원자 4명에 면접관 2명이 들어오셨고 간단한 자기소개를 시작으로 교육에 몰입해서 성실히 잘 들을 수 있는지, 지금까지 개발 공부를 얼마나 했는지를 주로 확인하는 질문들이 있었다.나는 어떤 면접이든 항상 긴장을 해서 굉장히 걱정했는데, 이 교육에 잘 참여할 수 있는지를 확인하는 자리여서 크게 걱정할 필요는 없을 것 같다.  1~3주차까지는 오전 9시부터 오후 6시까지 오프라인으로 진행된다. 온라인보다 집중이 잘 되고 강사님과 직접 소통도 할 수 있어서 ..

개발일기 2024.07.21

[React Hook Form] 선택 이유와 사용법

react-hook-form 이란?폼 관리 라이브러리로, 간단하고 효율적인 방식으로 폼 유효성 검사와 상태 관리를 처리할 수 있게 도와줍니다. 이번 프로젝트에서 react-hook-form을 선택한 이유1. 성능 최적화react-hook-form은 내부적으로 성능 최적화를 고려하여 설계되었습니다. 특히 리렌더링을 최소화하여 빠른 사용자 경험을 제공합니다. 2. 간편한 사용사용하기 쉽고 직관적인 api를 제공하여 필요한 기능을 Hook 함수로 호출하여 사용할 수 있습니다. 3. 유연성과 확장성react-hook-form은 유연하고 확장 가능한 구조를 가지고 있습니다. 커스텀 컴포넌트와의 통합이 간단하여 제가 사용하려는 shadcn/ui 컴포넌트와의 사용에 적합하다고 생각했습니다.기본적인 사용법사용하기 위해..

개발공부 2024.07.12

[React] Context Api와 createPortal로 모달 핸들러 만들기

Context Api와 createPortal을 사용하여 효율적으로 모달을 관리하는 방법을 정리해 보겠습니다. Context로 모달을 제어하면 어떤 점이 좋을까? 여러개의 모달을 사용할 경우 각각 열고 닫는 상태를 만들어주지 않아도 됩니다. 부모의 상태 개입없이 독립적으로 모달을 열고 닫을 수 있습니다. 한 곳에서 모달을 관리하여 유지보수성이 높아집니다. 구현 방법 정리 createContext - DispatchContext(모달 열고 닫는 기능), ModalStateContext(모달) 생성 ModalProvider - openedModals 상태 관리, open, close 함수 작성 Modals - createPortal을 이용해 오픈된 모달을 렌더링하는 로직 CustomModal - 모달 컴포넌..

개발공부 2024.03.20

[CSS] flex 속성 정리

flex 속성을 적용할 item들의 부모요소에 display: flex;를 적용해 주는 것이 시작이다. 1. justify-content 쉽게 말하면 메인축(가로)정렬을 어떻게 할 것인가. 가로정렬이라고 했지만 메인축이 기본이 가로방향이기 때문이고 만약 메인축 방향을 세로로 바꾸게 된다면 세로축 정렬이 될 수도 있다. flex-start: 왼쪽 정렬 flex-end: 오른쪽 정렬 center: 가운데 정렬 space-between: 아이템들 사이에 같은 간격을 준다 space-around: 아이템들의 둘레를 같게 한다. 2. align-items(아이템 전체 적용) / align-self(아이템 지정) 쉽게 말해서 세로정렬을 어떤 방식으로 할 것인가. 세로정렬이라고 했지만 메인축의 수직인 축을 말한다. ..

개발공부 2023.05.17