전체 글

간단한 자기소개안녕하세요 초원입니다. 👩🏻‍💻회사에 들어온 지 두 달 된 열정 가득 신입 프론트엔드 개발자이고,지금의 나보다 앞으로의 내가 분명 더 바쁠 것이다 .. 라고 생각하며해보고 싶은 거 찾아서 해보는 중입니다!그 중 하나가 바로 항해플러스인데요,그동안 팀스파르타에서 제공 받은 교육에 모두 만족하여 신뢰가 있었고, (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. 어디에 어떻..