100log

들어가며안녕하세요 초원입니다. 👩🏻‍💻3주 만에 돌아왔군요 ..  그동안 몇 개의 글을 임시저장 해두고 바쁘게 지내다 보니 어느새 수료를 해버려서, 올리지 못한 글들은 잠시 접어두고 찐_찐_찐막_최종회고 로 과정을 마무리 하려고 합니다.  간단한 자기소개, 그리고 시작하는 마음중국어과 졸업 후 방송국 인턴, 그리고 약국 직원까지 종잡을 수 없는 이력을 만들어가다,드디어 작년 초 '개발자'라는 뚜렷한 직업적 목표가 생겼습니다.KDT 멀티잇 2기 - SW정글사관학교 - 데브캠프 - 스파르타빌더스 외주 프로젝트 참여 등차근 차근 단계를 거쳐 현재는 6개월 차 프론트엔드 개발자가 되었어요 ✌🏻  2024 상반기 회고 중_   시작하는 마음 중_  무언가를 이토록 가져보고 싶던 적이 있었는지 놀라울 정도로..

들어가며안녕하세요 초원입니다. 👩🏻‍💻2주가 밀렸네요 .. 테스트 코드 💦이번 글은 무엇을 공부했고, 요구사항을 어떻게 구현했는지 차근차근 정리해보려고 해요. 미리보기상황추가 기능을 구현하던 중 반복일정이 캘린더 뷰에 (일정 * 주) 개수만큼 표시가 되는 문제 발생 해결expandRecurringEvent함수에 filteredEvents에서 중복을 제거한 이벤트(uniqueEvents)를 전달 관련 코드const uniqueEvents = Array.from( new Set(filteredEvents.map((e) => e.id)) ).reduce((acc, id) => { const event = filteredEvents.find((e) => e.id === id); ..

들어가며안녕하세요, 초원입니다. 👩🏻‍💻  새로운 티켓 할당 소식을 전하러 오랜만에 돌아왔어요! 📪그동안 퍼블리싱이나 데이터 패칭 등의 업무만 수행하다가, 이번에 라이브러리 적용이 가능한지 테스트해보라는 임무를 처음 부여받았는데요. 기분 좋고 설레고 .. 재밌게 작업한 내용을 공유해보려고 합니다. ☝🏻☝🏻 오예! Express 서버 설정부터, sign-generator 라이브러리를 활용한 전자직인 생성까지의 과정을 자세히 설명할게요.그럼 시작해볼까요?  GitHub - ketaro01/sign-generator: 도장 및 서명을 svg 형태로 생성하기 위한 라이브러리 입니다.도장 및 서명을 svg 형태로 생성하기 위한 라이브러리 입니다. Contribute to ketaro01/sign-gen..

안녕하세요 초원입니다. 👩🏻‍💻 회사에서는 반응형이 괴롭히고, 항해플러스에서는 낯선 CI/CD가 괴롭혀요 ..도망가고 싶지만 그건 또 멋이 없으니까 ㅋㅋ 일단 해보겠습니다 얍 ✌🏻 (으앙 ... 💦) 6주차 과제[목표]다양한 workflow job을 만들어보고 실행하여 적용해봅니다.모든 CI가 정상적으로 실행되어야 합니다. [요구사항1 - yaml 파일 작성]1. workflow는 PR이 올라오거나 혹은 PR에 commit이 push될 때 실행 된다.name: CI Assignment 6on: pull_request: types: - synchronize - opened - reopened paths: - 'packages/assignment-6/..

간단한 자기소개안녕하세요 초원입니다. 👩🏻‍💻회사에 들어온 지 두 달 된 열정 가득 신입 프론트엔드 개발자이고,지금의 나보다 앞으로의 내가 분명 더 바쁠 것이다 .. 라고 생각하며해보고 싶은 거 찾아서 해보는 중입니다!그 중 하나가 바로 항해플러스인데요,그동안 팀스파르타에서 제공 받은 교육에 모두 만족하여 신뢰가 있었고, (ex. SQL 강의, SW정글사관학교 ..)주니어 프론트엔드 개발자의 역량을 위한 커리큘럼도 매력적이었고,무엇보다 함께 하는 코치님들이 든든하여 .. 큰 고민 없이 바로 지원하였습니다. ✊🏻 이번 챕터를 시작하며 꼭 해내고 싶었던 목표챕터 1 리액트 파헤치기 : 리액트가 어떻게 동작하는지 깊은 원리까지 이해해 보기챕터 2 클린코드와 디자인패턴 : 회사 코드에 적용할 수 있는 b..

안녕하세요 초원입니다. 👩🏻‍💻기분 좋은 추억이 생겨서 공유하며 시작해볼게요!  오늘은 점심에 회사 근처에서 열린 K-푸드페스타에 다녀왔어요.막걸리 시음도 하고 떡볶이도 4개나 사왔답니다. 👼🏻 평소 점심시간에 노트북으로 이것 저것 하는 걸 좋아해서 혼자 샐러드를 먹는 편인데,가끔 팀원 분들이 맛있는 걸 먹으러 갈 때 챙겨주셔서 정말 감사해요.바깥 구경 무한한 감사 ... 🙇🏻‍♀️   5주차 후기항해플러스 과정이 어느덧 딱 반이 지났네요.열심히 달려온 만큼 많이 발전한 것 같아 뿌듯하기도 하고,공부할수록 부족한 점을 더 발견해서 주눅들기도 합니다.열정으로 가득 차다가, 부담이 되기도 하고, 다시 무한 긍정으로 ...롤러코스터 타는 기분이에요 😂 4주차까지는 과제에 집중하느라 회사 코드에 ..

안녕하세요 초원입니다. 👩🏻‍💻최근 자바스크립트로 직접 DOM을 구현하는 과제 중,부모 요소에 appendChild를 호출하여 자식을 추가할 때마다브라우저가 매번 렌더링을 수행하는 문제를 겪었습니다.이 글에서는 DocumentFragment를 사용하여 이를 해결하는 과정을 소개드립니다.  > 자바스크립트 엔진과 렌더링 엔진'리액트에서 state, props가 렌더링을 유발한다'는 개념만 달달 외우다 보니자바스크립트에서는 언제 렌더링이 되는 것인지 당황스럽게도 기억이 안났습니다.그래서 다시 한 번 정리해봅니다. • 자바스크립트 엔진: DOM 조작을 수행하고, 변경 사항을 렌더링 엔진에 전달합니다.• 렌더링 엔진: DOM을 받아 레이아웃 재계산 및 화면 그리기를 수행합니다. (비용이 큼) > 렌더링 엔..

안녕하세요, 초원입니다. 👩🏻‍💻오늘은 회사에서 개발하며 겪은 문제를 공유해보려고 해요.   개발을 하다 보면 예상치 못한 문제가 발생하곤 합니다.특히 경험이 부족한 신입이라면 원인을 쉽게 예측하기 어려워 당황스러울 때가 많죠. (그게 나야 둠바ㄷ..) 문제 상황위에 첨부한 스크린샷처럼 로컬 환경에서 카카오 로그인을 시도할 때마다 dev 서버로 리다이렉트되는 문제를 겪었어요. 1. 본인인증 페이지 화면 및 로직 수정 요청2. 테스트 서버(localhost:3000)에서 회원 탈퇴3. 메인페이지에서 카카오톡으로 회원가입 버튼 클릭4. dev 서버의 본인인증 페이지로 이동5. 로컬에서 수정사항 바로 확인할 수 없음 악 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 나 빨리 수정해야 돼 !!!!..

안녕하세요, 초원입니다. 👩🏻‍💻 지난 6월, 1차 개발이 마무리되고 요구사항이 추가되면서 2차 개발이 시작되었습니다. 원래 두 장이었던 피그마 페이지가 이제는 셀 수 없이 많은 페이지로 늘어나면서,같은 기능을 하면서도 디자인이 다른 컴포넌트들을 몇 개 발견하게 되었습니다.(예: small, medium, large로 커버되던 버튼에 정사각형 버전이 추가되고, 접고 펼 수 있는 카드가 2개 이상 생성되는 등) 이러한 각각의 스타일이 여러 곳에서 사용된다면, 여러분은 어떤 기준으로 공통 컴포넌트를 제작하시나요? 카드 토글 컴포넌트 만들기버튼은 사수님이 수정하시기로 해서, 저는 접고 펼 수 있는 공통 카드 토글 컴포넌트를 구현하기로 했습니다!제가 어떤 순서로 구현했는지 설명드릴게요.  1. 어디에 어떻..

들어가며  안녕하세요, 초원입니다. 👩🏻‍💻이번 주 테오 코치님의 발제 중 가장 인상 깊었던 문장을 소개 드릴게요. 클린 코드보다 중요한 것은 일관성 이 문장이 특히 와닿았던 이유는,사수님이 초기 세팅 시 일관되게 작성한 코드 덕분에신입인 제가 프로젝트에 빠르게 적응할 수 있다는 걸 체감하고 있기 때문이에요.(물론, 그 외에도 많은 도움을 받고 있지만요!) 최근 팀 내에서 코드 스타일을 맞춰가는 경험을 통해, 일관성 있는 코드는프로젝트에 참여할 다른 사람들과 추후에 이 코드를 다시 볼 나 자신을 위해서도굉장히 중요하다는 것을 깨달았습니다. 팀 규칙에 맞게 일관성 있는 코드를 작성하여 작업 시간을 단축하는 것이클린 코드의 진정한 가치가 아닐까 .. 💁🏻‍♀️  클린 코드관련하여 테오 코치님께서 정..