능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 가령 데이터가 여러개 있는 경우엔 react에선 어떤 메소드를 사용해야할까? 그리고 이 데이터를 나열해야하는 상황에선 어떻게 해야할까? 물론 하나씩 뽑아서 쓰는 방법도 있겠지만 굉장히 비효율적이다. 때문에 JS에선 for문을 사용해 데이터 나열 시 사용하기도한다. 하지만 react에서는 map이란 메소드를 사용하는데, 이를 어떻게 사용하는지 예시와 함께 기록해 두려한다. 예시. 게시판 만들어보기 우선 코드파일은 전체를 보여줄 App.jsx, 글을 써서 저장하는 것이 아닌 임의로 게시글 데이터를 저장할 articleData.js 이러한 데이터 내용을 보여줄 Board.jsx로 나눠 작성하도록 한다. 우선 a..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 개념 이벤트 버블링(event bubbling)이란, 이벤트 위임의 작동메커니즘으로, 한 요소에 이벤트 발생 시 할당된 핸들러가 동작하고, 이어서 부모요소 핸들러가 동작, 동작 동작.... 해서 가장 최상단의 조상요소를 만날 때까지 반복되는 것인데, 리액트에서도 마찬가지로 이벤트 버블링이 발생한다. 예시 import React from 'react' function Bubble() { return ( alert('나는 부모태그입니다')}> 부모태그입니다 alert('나는 p 자식태그입니다')}> p자식태그입니다. ) } export default Bubble 여기서 자식캐그인 p를 클릭하게되면, 부모인 d..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). useEffect는React Hooks중에 하나로, 랜더링이 필요한 곳에 사용하는 내장메소드이다. 예를들어 컴포넌트를 만들었을 때, 컴포넌트가 시작될 때, 컴포넌트가 업데이트 될 때, 이 전체 주기를 생명주기라고 하며 이 과정에서 useEffect를 사용하면 된다. useEffect예시를 보기 전에 생명주기부터 살펴보자 0.Life Cycle(생명주기) 앞서 이야기 한 것 처럼 생명주기는 크게 세단계로 나눌 수 있다. mount(컴포넌트가 표시될 때) → update(컴포넌트의 "내부요소"가 업데이트 할 때) → unmount(컴포넌트가 사라질 때) 이 세단계 중 시점을 골라, 해당시점에 특정한 함수가 실..

✍️✍️✍️ 위 글은 면접을 위한 CS 전공지식 노트를 읽고 학습한 내용으로 구성되었으며, 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 0. 네트워크 개념 네트워크란 노드(node)와 링크(link)가 서로 연결되어 있거나 연결되어 있지 않은 집합체를 의미한다. 아래 그림은 네트워크를 표현한 이미지다. 위 그림을 보면 동그라미는 노드이고, 선은 링크라고 표현했는데, 앞서 작성한 설명처럼 노드가 연결되어 있거나 연결되어 있지 않다는 의미를 위 그림 처럼 나타내 네트워크가 어떤식으로 구성되어 있는지 짐작해 볼 수 있을 것 같다. 여기서 노드(node)는 서버, 라우터, 스위치 등 네트워트 장치를 의미하며, 링크는 유선 또는 무선을 의미 한다. 이렇게 복잡하게 연결되어있는 네..

✍️✍️✍️ 위 글은 면접을 위한 CS 전공지식 노트를 읽고 학습한 내용으로 구성되었으며, 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 공장의 컨베이어 벨트처럼, 들어가는 각 제품 공정을 통해 비슷 한 듯 새 제품을 추출해 낼 수 있는 구조를 빗대어 공장패턴(factory pattern)이라고 한다. 좀 더 CS적인 설명을 추가하자면, 팩토리 패턴은 객체를 사용하는 코드에서 객체 생성부분을 떼어 추상화한 패턴이자 상속관계에 있는 두 클래스에서 부모클래스가 중요한 뼈대를 결정하고, 자식클래스에서 객체 생성에 관란 구체적인 내용을 결정하는 패턴이다. 클래스가 상하위로 분리되기 때문에 객체 생성을 별도의 팩토리에 위임하여 클래스 간의 강한 의존성을 줄이고, 클라이언트 코드의 ..