날쌘 개발자

교육을 듣던중, 분명히 수없이 써왔던 개념이지만 용어 자체는 낯선.. 부분이 있어서 제대로 알아가고 싶어 정리해보려 한다.자바스크립트의 DOM 이벤트 모델에서 중요한 개념인 버블링 / 이벤트 캡처링 이다. 먼저 이벤트 전파 단계(Event Prepagation Phases)에 관하여 간단하게 알아보자면,브라우저에서 이벤트가 발생했을 때 이벤트가 전파되는 순서를 의미한다. 이벤트 전파단계는 아래의 세 가지 단계로 나뉜다.캡처링 단계 - 이벤트가 최상위 요소에서 타겟 요소로 내려가는 단계.타겟 단계 - 이벤트가 실제로 발생한 요소에서 실행되는 단계.버블링 단계 - 이벤트가 타겟 요소에서 시작하여 최상위 요소로 올라가는 단계.이벤트 버블링특정 요소에 이벤트가 발생했을 때, 그 이벤트가 해당 요소에서 시작하여 ..

1년하고도 4개월만의 글이다.곧 졸업을 앞두고 이것저것 하고있는데, 포트폴리오를 노션에 정리해두고는 있지만 따로 공부 기록을 남겨두고 싶어 블로그를 다시 시작하려한다! 최근에 공모전에 출품하여 좋은 성과도 거둔 프로젝트가 있다.프로젝트 기간은 길지 않았지만, 중간중간 막혀서 골머리를 앓은 적이 많았다.(트러블슈팅을 성공한부분도 있고, 반쯤(?) 성공한 것들도.. 타협한 오류들도 있지만...)한번 정리해둬야지..둬야지... 하면서 미루다가 블로그도 다시 시작할겸 블로그에 정리해두기로 했다.거창하게 트러블슈팅을 했다고 하긴 좀 그렇고, 프로젝트 회고 식으로 부딪혔던 문제와 원인, 해결 방법으로 정리해보겠다프로젝트 소개'2024 서울 열린데이터광장 공공데이터 활용 창업 경진대회' 에 참가한 프로젝트이다.공모전..

연결리스트(Linked List)란 각 노드(데이터 덩어리) 가 데이터와 포인터를 가진 채 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료구조 이다. 자료구조 중 배열과의 차이점으로는, 자료의 크기에 제한을 받지 않음 동적으로 메모리 공간을 관리 빈번하게 삽입/삭제가 일어나는 응용 문제 해결에 용이 하다는 특징이 있다. C언어로 기본적인 연결리스트 생성 , 삽입 , 삭제에 대해 알고리즘과 코드를 짜보며 살펴보겠다. 먼저 자료구조부터 설계해보도록 하겠다. - [int] data : int 형 노드에 들어갈 자료로 구성 - [node *] link : 다음 노드에 대한 포인터 typedef struct node { int data; struct node* next; }node; 데이터 덩어리인 노드의..

패스트캠퍼스 환급챌린지 드디어 마지막날이다! 비록 프로젝트는 30일만에 완성하지못했지만, 차근차근 강의를 따라가며 완성해볼 생각이다. 오늘 해볼 것은 더치페이 서비스의 주 기능이라고 할 수있는, 정산 메인페이지의 좌측 하단에 위치할 정산 결과 컴포넌트 이다 먼저, 정산결과컴포넌트를 만들어줄 SettlementSummary 파일을 만들어준다. 만든 후 ExpenseMain의 LeftPane 내부에 주석처리 해놓았던 정산결과컴포넌트 렌더링 부분을 다음과 같이 수정한다. const LeftPane = () => ( ) 이제 SettlementSummary만 완성시켜주면 프론트면에서는 어느정도 완성된 모습이 보일것같았는데 언뜻 생각해보면 그냥 사람 수대로 돈을 나눠서 알려주면 되는거 아닌가? 했던거에 비해 생각..

패스트캠퍼스 환급챌린지 29일차 화이띵 오늘은 정산 리스트 컴포넌트의 실제 구현과 Style 적용을 해보려 한다. 형태만 주석처리 해놓은 ExpenseMain의 LeftPane과 RightPane부분에, 목업을 짜놓은 대로 LeftPane에는 AddExpenseForm 컴포넌트를, RightPane에는 ExpenseTable이라는 새로운 컴포넌트를 만들어서 구현해 주었다. 먼저 RightPane에 들어갈, 화면에 지출내역을 출력해주는 컴포넌트인 ExpenseTable을 보겠다. import { Table } from "react-bootstrap" import { useRecoilValue } from "recoil" import styled from "styled-components" import { ..

패스트캠퍼스 환급챌린지 28일차 화이팅~ 이번에 해볼 내용은 정산 리스트 메인페이지를 테스트하는 테스트코드 구현이다. 정산 내역 입력 컴포넌트에 쓰였던 ExpenseMain 파일에 이어서 구현하였다. ExpenseMain.spec.jsx import { render, screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { RecoilRoot } from "recoil" import { groupMembersState } from "../state/groupMembers" import { ExpenseMain } from "./ExpenseMain" import { render, sc..

패스트캠퍼스 환급챌린지 27일차 화이팅 얼마안남았다 오늘은 테스트코드만 만들어져있는 비용추가 컴포넌트를 직접 구현 및 스타일링 해보도록 하겠다. AddExpenseForm.jsx import { useState } from "react" import { Button, Col, Form, Row } from "react-bootstrap" import { useRecoilValue, useSetRecoilState } from "recoil" import { groupMembersState } from "../state/groupMembers" import { expensesState } from "../state/expenses" import styled from "styled-components" ex..

패스트캠퍼스 환급챌린지 26일차 화이팅 오늘은 가장 중요한 기능 중 하나인 비용 정산의 메인페이지 컴포넌트를 테스트하는 테스트파일을 공부해보도록 하겠다. 먼저 ExpenseMain.jsx export const ExpenseMain = () => { return ( Expense Main Component {/* Left Pane */} {/* TODO: 비용 추가 폼 컴포넌트 렌더링 */} {/* TODO: 정산 결과 컴포넌트 렌더링 */} {/* Right Pane */} {/* 그룹명 헤더 렌더링 */} {/* 비용 리스트 컴포넌트 렌더링 */} ) } 다음은 Jest와 React Testing Library를 활용한 테스트 코드 이다. ExpenseMain.spec.jsx import { rend..

패스트캠퍼스 환급챌린지 25일차 화이또 테스팅 툴 오늘은 테스팅을 실제로 하기 전 사용할 툴에대해 먼저 알아보고 어떤 특징을 갖고있는지 알아보려고 한다. BrowserStack https://www.browserstack.com/cross-browser-testing 실시간으로 여러 브라우저 / 기기에서 사이트를 구동해 볼 수 있는 라이브 테스팅 지원 스냅샷 테스팅 지원 = 스크린 샷을 이용한 테스팅 지원 깃헙과 연동해서 브랜치 별 비교 가능 브라우저 별, 버전 별 스크린 샷 제공 OS 별 구분은 아직 없음 모든 해상도가 존재하는 것은 아님 시각적으로 달라진 부분 하이라이트 기능이 있음 협업하기에 좋은 툴 - PR 처럼 Review / Approve 기능이 있음 무료 플랜도 충분 스냅샷 테스팅을 위해서는..

패스트캠퍼스 환급챌린지 24일차 화이팅~ Quality Assurance Testing - functional testing Functional testing = 기능 테스트 사용자에게 제공하는 기능들을 테스트하는 것 소프트웨어의 품질을 보증하기 위해 기능이 정상적으로 예상한 대로 동작 하는지 확인하는 과정 기능 테스트의 순서 1. 스모크 테스트 (Smoke testing) 테스트 환경이 테스트 할 만 한지, 간단하게 하는 환경 테스팅 본격적인 테스팅을 할 만한 가치가 있는 빌드인지 확인하기 위한 것 서비스의 가장 기본적인 (핵심적인) 기능들이 동작 하는지 빠르게 검증 개발자나 QA 테스터에 의해 수행됨 2. 회귀 테스트 (Regression testing) 기능 추가 혹은 버그를 수정한 소프트웨어가 수..