전체 글

마이페이지 관심 로그인 메뉴 세 개 중 마이페이지와 관심은 누르면 해당 페이지로 이동하도록 해야 하지만, 로그인은 페이지 이동이 아닌 모달창을 띄워줘야 했다. 따라서 상위 두 개 요소는 Link 태그를 사용하면 되고, 마지막 요소는 p 태그를 사용하면 된다. 그렇지만 세 개의 스타일은 똑같다. 이럴 때 const MenuItem = styled(Link)` color: #666; font-family: Noto Sans; font-size: 0.8rem; font-weight: 400; text-decoration: none; &:not(:last-child) { margin-right: 30px; } `; MenuItem을 이와 같이 작성해주었다면, Link 태그는 사용할 때 to 속성을 쓰지 않으면 ..

이번 포스팅은 오랜만에 알고리즘 관련임 음하하 교재의 예제들과 함께 백준의 #1463 문제를 풀면서 오랜만에 문제 풀이 포스팅을 적으려다가 어쩌다보니 방향이 바뀌어버려서 글 흐름이 조금 이상할 수도 있는데 결과적으로는 다이나믹 프로그래밍이라는 알고리즘에 대해 내가 이해한 것을 정리한 개념 설명 글 입니다 . . . 나름 열심히 적어보았어요 당연한 내용들일 수도 있는데 DP 유형을 처음 접하는 사람이라면 도움이 될지도? https://www.acmicpc.net/problem/1463 1463번: 1로 만들기첫째 줄에 1보다 크거나 같고, 106보다 작거나 같은 정수 N이 주어진다.www.acmicpc.net 우선 DP 문제에 대한 경험이 없는 사람이 이 문제를 처음 보게 된다면 이게 왜 다이나믹 프로그래..

사실상 Slack의 클론코딩은 지난 주 6주차가 마지막이었고, 오늘은 보너스 섹션인데, 찐막이라고 할 수 있겠다... (벌써?) 바로 시작해보장~ 1. 이미지 드래그 업로드하기 이미지를 드래그하여 드랍하는 순간 바로 업로드되도록 할 것이다. 핵심 이벤트는 onDragOver : 이미지를 클릭하여 드래그하는 동안에 계속적으로 호출됨 onDrop : 이미지를 드롭하는 순간(드래그에서 손을 떼는 순간) 호출됨 이 두 가지이며, 이 두 가지 이벤트가 설정된 부분을 이미지를 드롭할 수 있는 영역, Drop Zone이라고 한다. (여기서는 Container가 드랍존이 되겠다.) 드랍한 이미지는 items 혹은 files 안에 들어있어 이를 서버로 보내면 업로드가 되는 것인데, 과정을 정리하면 다음과 같다. 1. 브..

1. 타입가드 (타입 점검하기) 두 가지 이상의 타입이 겹쳐져 있을 때, 타입을 구분해주는 역할을 한다. in 연산자 const user = 'Sender' in data ? data.Sender : data.User; // data라는 객체 안에 해당 속성이 있는지 검사함 if문 function a(b: number | string) { if (type of b === 'number') { b.toFixed()// b: string // number에는 toFixed라는 메소드가 존재하여 b가 number라는 것을 확실히 앎 } b.toFixed();// error // if문 바깥에서는 b가 문자열일 수도 있고 숫자형일 수도 있는데, string의 경우에는 toFixed를 사용할 수 없기 때문! fu..

이번 섹션에서는 Slack에서 빼놓을 수 없는 기능 중 하나인 실시간 채팅을 구현하기 위해 웹 소켓을 사용하는 방법을 배운다. 웹 소켓은 사용해본 적이 없는데 안그래도 지금 진행하는 프로젝트에서 웹 소켓을 사용해야하는 상황이 생겨서 배울 수 있음에 반가웠다..ㅎㅎ 추가로 커스텀 스크롤바, 멘션 기능, 리버스 인피니트 스크롤링 등 각종 프론트 기술에 대해서도 다루어볼 예정이다. 1. Socket.io를 통한 웹 소켓 통신 Socket.io 전용 훅스 만들기 const useSocket = () => { const socket = io.connect(`${backUrl}`);// 백과 연결 socket.emit('hello', 'world');// 서버에 hello라는 이벤트 이름으로 'world'라는 데이..

리덕스란? 자바스크립트 상태 관리 라이브러리 상태 관리 도구 상태란? 리액트에서 상태(State)는 컴포넌트 안에서 관리되는 것 상태 관리 도구가 필요한 이유? 리액트에서 자식 컴포넌트들 간의 다이렉트한 데이터 전달은 불가능하다. 따라서, 자식 컴포넌트들 간에 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. (props) 그렇지만 자식이 많아지면 상위 컴포넌트에서 props를 계속 내려 받아야 하는 불편함이 생긴다. (Props Drilling) 상태 관리 도구를 사용한다면 전역 상태를 저장하는 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있게 되어 이러한 문제를 해결할 수 있다. 리덕스 구성 요소 Store - 상태가 관리되는 공간 (Store는 앱 안에서 한 개이다..