전체 글

-
[항해플러스 프론트엔드 2기] 5주차 후기 - 디자인 패턴
안녕하세요 초원입니다. 👩🏻‍💻기분 좋은 추억이 생겨서 공유하며 시작해볼게요!  오늘은 점심에 회사 근처에서 열린 K-푸드페스타에 다녀왔어요.막걸리 시음도 하고 떡볶이도 4개나 사왔답니다. 👼🏻 평소 점심시간에 노트북으로 이것 저것 하는 걸 좋아해서 혼자 샐러드를 먹는 편인데,가끔 팀원 분들이 맛있는 걸 먹으러 갈 때 챙겨주셔서 정말 감사해요.바깥 구경 무한한 감사 ... 🙇🏻‍♀️   5주차 후기항해플러스 과정이 어느덧 딱 반이 지났네요.열심히 달려온 만큼 많이 발전한 것 같아 뿌듯하기도 하고,공부할수록 부족한 점을 더 발견해서 주눅들기도 합니다.열정으로 가득 차다가, 부담이 되기도 하고, 다시 무한 긍정으로 ...롤러코스터 타는 기분이에요 😂 4주차까지는 과제에 집중하느라 회사 코드에 ..
DOM 조작을 최소화하여 성능 최적화하기 DocumentFragment
안녕하세요 초원입니다. 👩🏻‍💻최근 자바스크립트로 직접 DOM을 구현하는 과제 중,부모 요소에 appendChild를 호출하여 자식을 추가할 때마다브라우저가 매번 렌더링을 수행하는 문제를 겪었습니다.이 글에서는 DocumentFragment를 사용하여 이를 해결하는 과정을 소개드립니다.  > 자바스크립트 엔진과 렌더링 엔진'리액트에서 state, props가 렌더링을 유발한다'는 개념만 달달 외우다 보니자바스크립트에서는 언제 렌더링이 되는 것인지 당황스럽게도 기억이 안났습니다.그래서 다시 한 번 정리해봅니다. • 자바스크립트 엔진: DOM 조작을 수행하고, 변경 사항을 렌더링 엔진에 전달합니다.• 렌더링 엔진: DOM을 받아 레이아웃 재계산 및 화면 그리기를 수행합니다. (비용이 큼) > 렌더링 엔..
로컬 개발 환경에서 dev 환경으로 리다이렉트 되는 현상, 환경 변수 설정 실수 피하기
안녕하세요, 초원입니다. 👩🏻‍💻오늘은 회사에서 개발하며 겪은 문제를 공유해보려고 해요.   개발을 하다 보면 예상치 못한 문제가 발생하곤 합니다.특히 경험이 부족한 신입이라면 원인을 쉽게 예측하기 어려워 당황스러울 때가 많죠. (그게 나야 둠바ㄷ..) 문제 상황위에 첨부한 스크린샷처럼 로컬 환경에서 카카오 로그인을 시도할 때마다 dev 서버로 리다이렉트되는 문제를 겪었어요. 1. 본인인증 페이지 화면 및 로직 수정 요청2. 테스트 서버(localhost:3000)에서 회원 탈퇴3. 메인페이지에서 카카오톡으로 회원가입 버튼 클릭4. dev 서버의 본인인증 페이지로 이동5. 로컬에서 수정사항 바로 확인할 수 없음 악 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 나 빨리 수정해야 돼 !!!!..
2차 개발이 시작되고 피그마 디자인이 ... 공통 컴포넌트 제작 어떻게 하지?
안녕하세요, 초원입니다. 👩🏻‍💻 지난 6월, 1차 개발이 마무리되고 요구사항이 추가되면서 2차 개발이 시작되었습니다. 원래 두 장이었던 피그마 페이지가 이제는 셀 수 없이 많은 페이지로 늘어나면서,같은 기능을 하면서도 디자인이 다른 컴포넌트들을 몇 개 발견하게 되었습니다.(예: small, medium, large로 커버되던 버튼에 정사각형 버전이 추가되고, 접고 펼 수 있는 카드가 2개 이상 생성되는 등) 이러한 각각의 스타일이 여러 곳에서 사용된다면, 여러분은 어떤 기준으로 공통 컴포넌트를 제작하시나요? 카드 토글 컴포넌트 만들기버튼은 사수님이 수정하시기로 해서, 저는 접고 펼 수 있는 공통 카드 토글 컴포넌트를 구현하기로 했습니다!제가 어떤 순서로 구현했는지 설명드릴게요.  1. 어디에 어떻..
[항해플러스 프론트엔드 2기] 4주차 후기 - 클린코드
들어가며  안녕하세요, 초원입니다. 👩🏻‍💻이번 주 테오 코치님의 발제 중 가장 인상 깊었던 문장을 소개 드릴게요. 클린 코드보다 중요한 것은 일관성 이 문장이 특히 와닿았던 이유는,사수님이 초기 세팅 시 일관되게 작성한 코드 덕분에신입인 제가 프로젝트에 빠르게 적응할 수 있다는 걸 체감하고 있기 때문이에요.(물론, 그 외에도 많은 도움을 받고 있지만요!) 최근 팀 내에서 코드 스타일을 맞춰가는 경험을 통해, 일관성 있는 코드는프로젝트에 참여할 다른 사람들과 추후에 이 코드를 다시 볼 나 자신을 위해서도굉장히 중요하다는 것을 깨달았습니다. 팀 규칙에 맞게 일관성 있는 코드를 작성하여 작업 시간을 단축하는 것이클린 코드의 진정한 가치가 아닐까 .. 💁🏻‍♀️  클린 코드관련하여 테오 코치님께서 정..
초원kimfield
-