Pie_Archive

최근 프로젝트를 설계하면서 공용 컴포넌트를 어떻게 짜야되는지에 대한 고민이 깊다. 그래도 하나씩 설계하는 가운데, 팝업창 컴포넌트를 만드는 과정과 생긴 오류에 대해 적어보고자 한다. 0. 목표 설정 일단 이런 형태의 팝업창을 만들 예정이다. 안에 들어가는 컨텐츠에 대한 고민은 나중에 하기로 하고, 화면 가운데에 뜨는 하얀 창 + 외부 어두운 창 의 컴포넌트를 만들고 싶었다. 실패기 1. Styled-components로 만들기 사실 이건 볼것도 없이 실패했다. 팝업 창을 만들려면 내부 흰 부분 + 밖 검은 부분 두개의 div 가 필요한데, 재사용성을 위해 두개의 Outer, Inner 를 따로 사용하려면 여간 번거로운게 아니었다. 2. React Components 형태로 제작하여 Element 전달하기..

최근 데이터를 설계하다가 이런 구조를 짜게 됬다. (아래는 위 케이스를 간소화 한 코드입니다.) const projects = { name: "1번 프로젝트", files : { 0: ["1번 파일", "2번 파일"], 1: ["3번 파일", "4번 파일"], 2: ["5번 파일"] //... }, } // 실제로는 배열이 중첩되어 좀 더 복잡한 형태이지만, 간략하게 쓴다. 원래라면 Array 형태로 파일 형태를 구성했겠지만, 이렇게 Object의 각 연결된 index값을 key로 주는 편이 접근하기 용이할 것 같아서 이런식으로 구조를 작성했더니 인터페이스 작성에서 오류가 잔뜩 생겼다. 나름대로 코딩테스트 1 단계씩 통과한 머리로 열심히 머리를 굴려봤지만, 아래 실패작들밖에 짜지 못했다. 실패 케이스 1..