0. 이번 주는 공통 컴포넌트를 만들기로 했다.현재 프론트 2명, 백엔드 1명, AI 1명으로 구성된 프로젝트에 참가 중이다. 나랑 같이 웹 프론트엔드로 참가하는 친구는 교내 개발동아리와 연합 개발동아리에서 프로젝트 개발을 하며 경험치를 많이 쌓아서 개발에 능통하다. 이 친구와 이번 주에는 프로젝트의 공통 컴포넌트를 제작하기로 했다. 친구는 컴포넌트를 어떻게 만들까? 친구의 코드를 살펴보기로 했다.1. 폴더(파일) 구조부터 확인하자src 안에 components 폴더를 만드는 것은 똑같은데, common components들을 저장할 common 폴더를 따로 만들고, 도메인별로 폴더를 만들어서 컴포넌트 파일들을 분리한다.input 컴포넌트를 만든다고 가정하자. 친구는 components/common 안에..

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.6주차 영상을 올리고 나서, OOO 파트장님이 제가 올린 코드들을 리팩토링해주셨습니다 XD그리고 파트장님이 어떤 부분이 리팩토링해주셨는지 전부 비교 분석해서 알려주셨습니다!! 그러면 코드가 어떻게 바뀌었는지, 전후 코드들을 비교해보면서 같이 살펴볼까요? 1. InputBar 컴포넌트에 product props를 내려주는 이유?비어있는 product 객체를 생성하고 이를 사용해서 값을 채워주려고 만든 것 같은데, 이렇게 하면 확장에 유연하지 못하다.구현체가 아니라 인터페이스를 기반으로 구현하는 것이 바람직하다(객체지향 기본 원칙) 그리고 이 구현체를 FilterableProductTable에서 생성해서 내려줄 이유가 없어보인다. 응집도 측면에서 In..

이 글은 KUIT Web 부원분들을 대상으로 쓴 글입니다.DefinitelyTypedDefinitelyTyped 프로젝트는 일종의 자원봉사 프로젝트→ 여러 개발자들이 자발적으로 자바스크립트 모듈의 타입을 추가해주고 있다.→ 이렇게 추가된 타입은 npm 을 통해 다운받을 수 있다.→ IDE 에서 자바스크립트 모듈에 대한 타입 지원이 가능해진다. 출처: https://jake-seo-dev.tistory.com/209@types 라이브러리@types 라이브러리는 TypeScript를 사용하여 JavaScript 라이브러리를 사용할 때 필요한 타입 정의를 제공하는 라이브러리→ JavaScript 라이브러리의 API에 대한 타입 정보를 TypeScript에 제공하여, TypeScript 컴파일러가 타입 검사를 ..

1. 인트로 수정 저번에도 언급했듯이 카카오로 소셜로그인을 하는 대신 이메일로 로그인과 구글로 로그인을 구현하기로 해서 인트로 화면을 변경해야 했다. 카카오 로그인 버튼을 빼고 이메일과 비밀번호 입력란, 회원가입(이메일) 버튼, 구글로 로그인 버튼을 새로 만들었다. 이메일로 회원가입도 진행해야 되니 회원가입 화면도 새로 구현했다. 비밀번호 확인은 비밀번호 코드를 복붙해서 만들었는데 비밀번호에 input을 입력하면 비밀번호 확인에서도 똑같은 input이 입력되는 오류가 생겼다. 아무래도 수정이 필요할 것 같다. 2. Quill 에디터 도입 전에는 글 작성을 그냥 textarea로 구현했었는데, 생각해보니 게시물에는 사진도 첨부되는 것이 맞는 것 같아 어떻게 하면 좋을까 생각하다가 에디터 라이브러리를 도입하..

이번에 프로젝트를 진행하면서 useState()를 활용한 상태관리를 하고 있는데, 상태관리에 대한 확실한 이해 없이 무작정 작업을 하다보니 코드가 내가 이해하기도 어려울 정도로 복잡해져 있었다. 그래서 상태관리에 대한 공부를 하고 다시 코드를 수정했다. 이번에 알게 된 내용을 한 번 정리해 보려 한다. 1. 상태 관리는 부모에서 이루어지고, 자식에게 props로 전달한다. 부모 컴포넌트 A와 자식 컴포넌트 B,C가 있다고 가정하자. 그렇다면 상태를 관리하는 로직은 부모 컴포넌트 A에 작성하고 이를 자식한테 props로 전달하면 된다. 만약 자식 컴포넌트에서 버튼을 클릭하면 상태가 업데이트되는 것을 부모한테 전달하고 싶다고 가정하자. (여기서 부모는 SearchResult.tsx이고, 자식은 BtmShee..

이제 곧 프로젝트를 시작하는데 Typescript를 활용한다고 한다. 그래서 노마드코더님의 타입스크립트 무료 강의를 듣고 개념을 정리해보았다. 강의 링크 https://nomadcoders.co/typescript-for-beginners 타입스크립트로 블록체인 만들기 – 노마드 코더 Nomad Coders Typescript for Beginners nomadcoders.co (타입스크립트를 입문하는 분들에게 추천한다!) Typescript 특징 TypeScript는 JavaScript에 추가적인 구문을 통해 단단한 통합을 제공하며 초기 오류를 감지할 수 있다. TypeScript 코드는 JavaScript로 변환되어 브라우저, Node.js, 앱 등에서 실행될 수 있다. JavaScript를 이해하며..