[React.js] state가 undefined일 때 - this 바인딩

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 배경 boostcamp AI Tech 1기에 참여하여 팀 프로젝트로 리액트 앱을 개발한 적이 있었다. CSV 형태의 평가 데이터를 입력하면 그에 따른 모델 예측 결과를 이미지로 확인하는 애플리케이션이었다. 사용자가 CSV 파일을 입력하고 전송 버튼을 클릭하면 즉시 로딩 화면(스피너)이 보이면서 모델 서버에 요청을 보내게 된다. 서버로부터 응답을 받고 나면 상태 변화에 따라 예측 결과를 화면에 보여준다. render 메서드의 초기 화면(CSV input, button) render() { const { isLoadin..

→2022.03.08

[Vue.js] Vuex 언제 action을 사용해서 Store를 변경하는걸까?

배경 Vuex를 사용하여 쇼핑몰 애플리케이션에서 장바구니를 구현하고 있었다. 장바구니 페이지는 사용자가 장바구니에 담아놓은 상품들이 있고, 각 상품에는 해당 상품을 장바구니에서 지울 수 있는 삭제 버튼이 존재한다. 컴포넌트는 [부모 컴포넌트]장바구니(CartPage) -> [자식 컴포넌트]상품(CartItem) 방식으로 설계를 해두었고, 상품(CartItem) 내부에 구현된 삭제 버튼을 클릭할 때, Store에서 해당 상품을 제거하는 이벤트가 발생하게 된다. 기존에는 삭제 버튼을 클릭하는 경우, 부모 컴포넌트로 이벤트를 emit하여 부모 컴포넌트에서 Store 업데이트 작업을 처리하도록 구현했었다. 그러나, 코드 리뷰를 통해서 해당 기능은 Vuex를 사용하고 있으므로 부모 컴포넌트로 event를 전달하기..

→2022.02.22

[FE] img 태그 alt 속성 내용

아래의 Item 컴포넌트(Vue)는 상품 목록 페이지(ItemList)에서 하나의 상품 카드를 렌더링하는 컴포넌트이다. 과제를 완료하고 pull request를 통하여 피어리뷰를 진행하면서 다른 분께 받은 리뷰 내용이다. 평소 alt 속성의 내용이 중요하다는 점을 인지하고 있지 않았기 때문에 "image not found", "404 not found"와 같은 텍스트를 사용하고 있었다. 그런데 만약 이미지를 불러오는 과정에서 오류가 생기거나, 시각장애인이 서비스를 이용한다면 이 페이지를 통해서 얻어가는 정보는 "image not found" 밖에 없는 것이다ㅠㅠ 클라이언트를 개발하는데, 사용자가 필요한 정보를 얻지 못한다면 큰 문제라고 생각했다. 따라서 이미지가 로딩에 실패하거나, 스크린 리더를 사용하는..

→2022.01.28

[FE] jsconfig.json 알아보기

jsconfig.json 파일이 무엇인가? 타입스크립트 config 파일인 tsconfig.json를 상속받았다고 생각하면 된다. 해당 파일이 위치한 경로가 JS 프로젝트의 root 디렉토리라고 명시하는 역할을 한다. jsconfig 파일이 필요한 경우는 언제인가? 파일 스코프 - jsconfig 파일이 필요하지 않다. 어떤 방식으로도 a 파일과 b 파일이 서로 참조하지 않는 경우(import이든, CommonJS의 module이든) jsconfig는 없어도 된다. 즉, 이때는 VSCode에서 작업하는 JS 파일들은 각각 독립적인 유닛으로 처리된다. 명시적인 프로젝트 - jsconfig 파일이 필요하다. JS 프로젝트는 jsconfig 파일을 통해 구성된다. jsconfig 파일이 위치한 경로가 root..

→2022.01.06