나는 팀원들과 프로젝트를 하거나 단순 의사소통을 할 때 특히 슬랙으로 소통하는 일이 잦아서 슬랙을 자주 사용한다. 물론 뭐 클론코딩이지만, 내가 사용하고 있는 서비스를 직접 이렇게 구현해보고 있다는게 신기했다. 오늘 포스팅할 내용은 간단하게 채널과 DM 섹션이다. 현재 DM에 사용자로 등록되어있는 'a', 'aa', 'a', 'a', 'a' 이렇게 5개의 계정은 각각 로그인 및 회원가입 페이지를 만들 때 임시로 만들었던 계정들이다. 회원가입을 하면 자동으로 DM 섹션에 추가가 되는 것이다. 사실 실제 슬랙에서는 이 워크스페이스에 사용자를 초대해야 DM 섹션에 뜨게 되지만, 어쨌든.. 회원가입을 한 값이 여기에 추가된다는 게 중요한 게 아닐까? 싶다. 진행을 하기 전에 이전 포스팅에서는 전부 서버 주소가 ..

링크 https://www.acmicpc.net/problem/7576 난이도(solved.ac 참고) 실버1 풀이 음 .. IndexError가 계속 떠서 무엇이 문제인가 했는데, 위 코드는 정답 코드지만 내가 계속 제출했다가 틀린 코드는 마지막 행에서 bfs(m, n)이 아니라 bfs(queue[0][0], queue[0][1])로 넣었었다. 이렇게 되면 상자 내에 토마토가 없을 때, 즉 리스트의 값이 전부 -1 또는 0만 있을 때 -1을 출력할 수 없고 IndexError가 뜨게 된다. 풀이 과정 함수 바깥에서 일단 이중 for문으로 input값을 받아서 만든 리스트(a) 내에 1이 있으면 큐에 그 좌표를 넣는다. 큐가 있다는 건 결국 1로 바뀐 무엇인가가 존재한다는 뜻이므로, while queue..

링크 https://www.acmicpc.net/problem/1697 난이도(solved.ac 참고) 실버1 풀이 BFS 활용했고, 다음 큐가 비어있을 때까지 계속 진행하는데, 우선 popleft를 한 뒤에 그 값에 대해 1을 뺀 값, 1을 더한 값, 2를 곱한 값 중에 10만보다 작거나 같고, visited의 값이 0인 경우(그러니까, 방문하지 않은 경우) 그 값을 큐에 넣은 뒤 그 인덱스에 해당하는 visited의 값을 1 더해줬다. 여기서 visited는 방문 여부로도 판단할 수 있지만, 이동한 횟수로도 그 기능을 한다. 그 값이 0이라면 한번도 방문한 적이 없는 것이고, 0이 아니면 방문한 적이 있는 것이다. 시간 없어서 일단 여기까지 풀었는데, 이따 밤에 다시 풀어봐야겠다 ㅠㅠ 풀었는데, 통과..

링크 https://www.acmicpc.net/problem/18234 난이도(solved.ac 참고) 골드4 풀이 여기서 느낀 건, 시간 복잡도의 중요성이었다. 풀이(시간초과) 기존에 내가 풀었던, 시간 초과한 코드를 보면 min과 remove를 같이 썼다. 사실 min 하나만 들어가더라도 이미 이중 반복문과 다를 바가 없었는데, 예제는 다 맞아서 제출했더니 하나도 진행을 하지 못하고 오류가 났다. 다시 곰곰이 생각을 해보니까, t에 대한 for문을 전개할 게 아니라 n에 대한 for문을 전개해야 시간복잡도 선에서 발생하는 문제를 해결할 수 있을 것이라는 생각이 들었다. n(날짜)에 대해서 for문을 전개하려면.. for문 내부에서 가장 나중에 먹을 당근에 투여된 영양제의 횟수를 한번에 구해야했다. ..

링크 https://www.acmicpc.net/problem/1012 난이도(solved.ac 참고) 실버2 풀이 이렇게 좌표 형태로 나타난 문제는, dfs에서 x좌표와 y좌표를 구해준 뒤에 재귀 형태로 둔다. 그 다음, 테스트 케이스 횟수인 t회 도는 반복문 내부에서 input 받고 빈 행렬 만들고, a, b 입력받은 뒤에 넣어주고, 2중 for문을 통해 전체 행렬을 돌면서 값이 1인 부분을 조사한 뒤에 1이면 dfs 처리한다.

링크 https://www.acmicpc.net/problem/1260 난이도(solved.ac 참고) 실버2 풀이 걍 뭐.. 설명할 것도 없다. 이거 못풀면 다른 모든 그래프 탐색 문제도 못 푼다.. 일반적인 DFS와 BFS 구현에서 아주 살짝 달랐던 점은, 방문할 수 있는 정점이 여러 개인 경우에는 정점 번호가 작은 것을 먼저 방문한다는 점이다. 이 부분은, v 지점을 방문 표시한 뒤에 인접 리스트의 인덱스 v를 기준으로 연결된 여러 정점 중 가장 작은 것부터 방문해야 된다는 뜻이다. 따라서, graph에 대한 for문을 돌 때 sorted() 처리를 해주면 된다. 아 그리고, 인접 리스트의 총 길이는 n과 m 중 큰 값 + 1만큼 되어야 한다는 점도 고려해야 한다. 예를 들어 정점은 1000개지만 ..

클론코딩 강의를 들으면서 점점 구조가 복잡해지고, 어려워지고 있음을 몸소 느끼고 있다. 오늘 배운 부분은, 실제 Slack에서 워크스페이스를 API통신을 활용하여 만드는 것이다. 우선 시작하기에 앞서 스타일링은 전부 Slack의 개발자도구에서 그대로 가져온 것이므로, 따로 말할 게 없다는 점을 밝힌다. styled-components를 사용하긴 했지만, 이마저도 결국 뭐 직접 짠 거는 아니니까.. 그냥 그러려니 하면 될 것 같다. 사실 중요하지도 않고. 간단해 보이지만, 이것을 만들기 위해서는 많은 함수가 필요하다. + 버튼을 눌렀을 때 모달을 불러오는 것이라든지, 모달의 우측상단 X 버튼을 눌렀을 때 모달이 꺼지는 것이라든지.. 우선 페이지와 컴포넌트로 나눠서 설명을 해야할 것 같다. 1. 컴포넌트 이..

이전 포스팅에서 SWR을 사용할 때 revalidate를 사용하여 지속적으로 서버로 요청을 다시 보내서 데이터를 가져온다고 하였다. 이러한 revalidate는, 가만히 있어도 계속 보내고 있기 때문에, 그렇게 하고 싶지 않을 경우가 있을 것이다. 이럴 때 mutate를 대신해서 사용한다. axios.post의 then에서 revalidate() 대신에 mutate(response.data, false)를 넣어주면 된다. mutate의 인자 중 첫 번째는 mutate할 대상, 두 번째 인자는 shouldRevalidate 속성에 대한 값을 설정하는 것이다. 공란이라면 기본적으로 true 설정이 되어있으므로 정말 업데이트를 하지 않으려면 false로 해줘야 한다. const onSubmit = useCal..

1. withCredentials: true? 나의 경우는, 3090이 프론트였고 3095가 백엔드 서버이다. 이전 글에서 포스팅했듯이, 다른 URL로 데이터를 보내는 것에 대한 CORS 문제는 서버 단에서 cors의 origin과 credentials: true 설정을 해줌으로써 해결할 수 있었다. 그렇지만 프론트엔드와 백엔드 서버의 URL이 다를 경우, 백엔드 파트에서 프론트엔드 파트로 쿠키를 생성해줄 수도, 프론트엔드 파트에서 백엔드 파트로 쿠키를 보내줄 수도 없다. 왜냐하면, 쿠키는 기본적으로 같은 origin 에서 HTTP 통신을 하는 경우에 자동으로 들어가는 형태를 띠기 때문이다. 따라서, 요청에 쿠키를 포함하고 싶을 경우 프론트 단에서 axios로 데이터 요청을 보낼 때와 서버에서 CORS ..

이 글은 Slack 클론 코딩[실시간 채팅 with React] 강의의 내용을 담은 글입니다. TypeScript에 대한 이론을 어느 정도 익히고서, 이제 TypeScript를 사용한 React 프로젝트를 진행하는 강의를 수강 중에 있다. 여기서, 내가 궁금했던 axios의 활용법을 어느정도 익히게 된 것 같아서 그 내용을 포스팅 하고자 한다. 1. axios를 활용하여 서버로 데이터 보내기(+CORS, proxy) 우선 백엔드 서버로 데이터 보내기(http://localhost:3095/api/user에 axios 활용)는, 해당하는 서버가 켜져 있어야 한다. 즉, 데이터의 흐름은 localhost:3090(리액트 서버) -> localhost:3095/api/user (백엔드 서버)로 이뤄지게 되는데..