DDODI TIL 🚀

디프만에서 패키지 매니저로 Yarn Berry를 사용하기로 했다. Yarn Berry의 특징을 이해하기 위해, 모듈화와 패키지 매니저의 개념부터 차근차근 짚어보았다. 🗂 모듈화의 필요성 자바스크립트는 파일을 분리해도 모두 같은 전역 스코프 위에서 실행되므로 전역 스코프를 공유한다. 따라서 모듈화를 위해선, ES6 모듈 문법을 사용해야만 한다. script 태그에 module 타입을 설정하면 자바스크립트 파일을 모듈로 로드할 수 있다. 모듈로 로드한 자바스크립트 파일은 모듈 스코프에 포함된다. 모듈 스코프 내의 자바스크립트 파일은 별도의 독립된 스코프를 가지며, 외부에서는 export한 변수와 함수만 접근할 수 있다. ES6에서는 named export 라는 모듈 문법을 사용한다. export 키워드를 사..

자바스크립트 패키지 매니저 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"]; // 대괄호 연산자 사용 두 방법의 용례 상의 차이는 접근하려는 프로퍼티 값을 동적으로 변경할 수 있는가 에 있다. 식별자의 경우 자바스크립트 데이터 타입이 아니기 때문에, 프로그램에서 조작할 수 없다. 반면 문자열은 데이터 타입이기에 프로그램이 실행되는 동안 새로 생성하고 조작할 ..