DDODI TIL 🚀

Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 위 글을 읽다가 한 가지 의문이 생겼다. 이제는 직접적으로 DOM을 다루는 행위가 급격하게 감소했고, 상태(State) 를 기준으로 DOM을 렌더링 하는 형태로 발전한 것이다. DOM이 변하는 경우가 State에 종속 되어버린 것이다. 반대로 말하면, State가 변하지 않을 경우 DOM이 변하면 안 되는 것이다. 이 글은 DOM 요소에 직접 접근하는 것과 state에 따라 DOM을 렌더링하는 것을 서로 대척점에 있는 반대 개념으로 소개하고 있다. 난 이 두 가지가 어째서 반대 개념이 되는 것인지 이해가 잘 되지 않았다. state에 따라 DOM을 렌더링하는 아래 코드에서도, innerHTML API를 사용해 DOM에 접근하지 않나..

빌드, 테스트, 배포의 자동화를 의미한다. CI/CD란? Continuous Integration 빌드/테스트 자동화 과정 commit할 때마다 빌드와 일련의 자동 테스트가 이루어져, 코드 변경으로 인해 발생하는 문제를 사전에 방지한다. Continuous Deployment 배포 자동화 과정 코드 변경이 파이프라인의 이전 단계를 성공적으로 통과했을 경우 별도의 개입 없이 해당 변경사항을 프로덕션에 배포한다. 도입 효과 기존의 코드 통합 프로세스 각 개발자가 feature 브랜치에 push 각 코드를 통합 통합 과정에서 디버깅 👉 코드의 양이 많아질수록 디버깅이 오래 걸릴 수밖에 없다. CI/CD 적용 후 코드 통합 프로세스 각 개발자가 feature 브랜치에 push git push가 trigger로 ..

자바스크립트 패키지 매니저 npm, yarn, pnpm의 차이를 알아보자. 패키지 매니저란? 💁🏻‍♂️ 패키지란? npm에 등록된 node 모듈. 이러한 패키지들을 사용하기 위해서는 다운로드, 설치, 업데이트, 의존성 관리, 제거 등 복잡한 상황들이 많이 생기는데 패키지 매니저는 이러한 과정들을 자동화하여 편리하고 안전하게 수행할 수 있도록 해준다. 패키지 매니저의 등장 이전: 프로그램의 dependencies를 수동으로 다운로드 하고 관리 등장 이후: 패키지 매니저를 사용해 dependencies를 다운로드 및 관리 모든 패키지 매니저에서 통용되는 개념들은 다음과 같다. package.json은 프로그램의 메타데이터를 가지고 있다. node_modules 폴더에 dependencies를 설치한다. lo..

👩🏻‍💻 언제 사용하나요? ✅ React Component Tree의 서로 다른 부분에서 동일한 데이터를 필요로 할 때 위 상황에서 보통은 props를 사용해 데이터를 전달하게 됩니다. 그런데 컴포넌트 간의 거리가 먼 경우, 특정 컴포넌트로 데이터를 전달하기 위해 여러 개의 컴포넌트를 거쳐야 하는 상황이 발생합니다. A | B | C | D 위와 같은 구조로 이뤄진 React Component Tree를 가정해봅시다. A: useState로 데이터를 관리하는 컴포넌트 D: A의 데이터를 바탕으로 UI를 그리는 컴포넌트 라고 가정했을 때, D에게 A의 데이터를 넘겨주려면 어떻게 해야 할까요? B,C가 props로 부모 컴포넌트(각각 A,B)로부터 데이터를 전달 받고, 다시 자식 컴포넌트(각각 C,D)에게 ..

https://beta.reactjs.org/learn/synchronizing-with-effects 위 글을 제가 이해한 바대로 정리한 내용입니당 ‘٩꒰｡•◡•｡꒱۶’ React Docs BETA 라는 사이트인데, 기존 공식 문서보다 훨씬 이해하기 쉽고 친절하게 잘 되어 있어 React의 기본 원리를 이해하기에 좋습니다! React를 대강 쓸 줄은 아는데 깊이가 부족하다고 느껴지시는 분들에게 추천합니당 왕 추천 ❤️‍🔥 👩🏻‍💻 Effect란? two types of logic inside React components Rendering code: describes the UI, must be pure Event handlers: caused by a specific user action Effect..

프로그래머스 블로그에 있는 해설 글을 참고해 리팩토링한 내용 상태에 따라 바뀌어야 하는 영역이 크게 두 가지다. Nodes와 Breadcrumb! 리팩토링 전 App 컴포넌트 내에서 renderNodesSection 와 renderBreadcrumbSection 함수를 작성했다. 각 함수 내에서, 상태를 기반으로 마크업을 렌더링한다. 상태가 변경되면 해당 함수들을 호출해 업데이트된 상태로 화면을 렌더링한다. 구현 조건 및 프로그래머스 블로그에서 제시한 바람직한 방향은 다음과 같았다. 컴포넌트 형태로 추상화 DOM 접근을 최소화 명령형 프로그래밍보다는 선언적 프로그래밍 컴포넌트 형태로 추상화하기 '컴포넌트 형태로 추상화 하라'는 게 어떤 의미인지 잘 와닿지 않았다. 검색해 본 결과 추상화란 복잡한 자료, ..

탈탈 털렸던 면접😧 반성 위해 기록 남기기 어디까지나 제 개인적인 후기임을 미리 알립니다! 웹 개발자로 디프만 12기에 지원했고, 서류에 합격해 면접을 보게 되었다. 인터넷에 나와있는 후기 글들을 싹 긁어모아 답변들을 준비했는데 결과적으로 준비 했던 질문은 하나도 나오지 않았다. 어떤 것들을 물어보나요? 대부분의 후기에서 기술 질문이 별로 없다고 했는데 이 말은 절반은 맞고 절반은 틀리다. 우선 공통 질문이 없었고, 지원자 별로 돌아가며 각기 다른 질문을 하셨다. 그리고 질문들은 지극히 지원서와 포트폴리오 위주였다! 나는 면접관 두 분, 지원자 세 분과 함께 면접을 봤는데 세 명 모두에게 지원서와 포트폴리오를 기반으로 협업, 단체생활과 관련된 질문 한 개 기술적인 질문 두 개 이렇게 질문하셨던 것 같다...

Union type | 연산자로 여러 개의 타입이 연결된 타입을 의미한다. 이때 | 연산자는 or의 의미를 가지고 있다. 이러한 Union type을 활용해 인터페이스를 정의하고자 했다. 문제 정의 interface Props { data: LectureRoomsPerBuilding | LectureRoomInfo; children?: LectureRoomInfo[]; } 다음과 같이 인터페이스를 작성했는데, 타입 추론에서 문제가 발생했다. export interface LectureRoomInfo { room_name: string; room_uid: RoomUID; } export interface LectureRoomsPerBuilding { building_name: string; building..

사이드바를 구현해보자. 명확한 요구사항 없이 단지 강의실 목록을 조회할 수 있는 사이드바를 구현해야 했다. 어떤 식으로 작동해야 할 지 감이 안와서, 레퍼런스를 참고했다. Ant Design Ant design 컴포넌트에서 다양한 사이드바를 제공하고 있다. 실제로 조작해볼 수 있고, 대략적인 코드도 제공한다. 그 중 위 이미지에 있는 사이드바 컴포넌트를 참고했다. Ant Design 코드의 일부분을 발췌해왔다. 이중 Menu 컴포넌트를 보면, props로 items를 받고 있다. items에 전달되는 예제 객체를 살펴봤더니, children이라는 프로퍼티를 확인할 수 있었다. 여기에는 서브 메뉴들의 정보가 담겨 있다. 즉, Menu 컴포넌트에 서브 메뉴가 포함된 정보를 전달하면 Menu 컴포넌트 내에서 ..

객체의 프로퍼티 값에 접근하는 방법은 두 가지가 있다. 점(.) 연산자 사용 대괄호([]) 연산자 사용 두 방식은 다음과 같은 차이점을 가진다. 점 연산자를 사용한다면 오른쪽에는 프로퍼티 이름인 단순 식별자가 와야 한다. 반면 대괄호 연산자를 사용한다면 오른쪽에는 문자열로 평가되는 표현식이 와야 한다. let author = book.author; // 점 연산자 사용 let title = book["main title"]; // 대괄호 연산자 사용 두 방법의 용례 상의 차이는 접근하려는 프로퍼티 값을 동적으로 변경할 수 있는가 에 있다. 식별자의 경우 자바스크립트 데이터 타입이 아니기 때문에, 프로그램에서 조작할 수 없다. 반면 문자열은 데이터 타입이기에 프로그램이 실행되는 동안 새로 생성하고 조작할 ..