crabLab

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적입니다. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문입니다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해 주기도 합니다. 개념 미리 정리하기 액션 객체는 type 필드를 반드시 가지고 있어야 합니다. 이 값이 액션의 이름 액션 생성 함수(act..

📌강의 정리 해쉬라는 알고리즘을 쓸건데 js에서는 이 해쉬를 Map객체로 쉽게 표현할 수 있다. new Map() – 맵을 만듭니다. map.set(key, value) – key를 이용해 value를 저장합니다. map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다. map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다. map.delete(key) – key에 해당하는 값을 삭제합니다. map.clear() – 맵 안의 모든 요소를 제거합니다. map.size – 요소의 개수를 반환합니다. 우리가 중복을 제거할때 썼던 객체는 여기서 key의 중복을 카운트하지 않는 Set객체이다. 이 맵을 이용하여..

본격 프로젝트 시작 우선 HTML부터 어떻게 만들지 설계하기로 했다. 솔직히 쉬울줄알았는데 사실상 HTML을 이해한다는게 프론트엔드를 다 이해한다는 것과 마찬가지였다. 우선 내가 맡은 부분은 index페이지와 작성버튼을 눌렀을때 create하는 부분이었는데 메인페이지에는 DB에서 받은 정보들을 렌더링할때마다 받아와야 했다. 예전 첫 프로젝트때도 그리고 지금도 이 부분이 상당히 의문이었는데 항해99의 커리큘럼에서 그 답을 찾았다. 답은 jinja2 였다. jinja2 jinja는 SSR(server side rendering)을 flask진영에서 하게 해주는 기능이다. 서버사이드 렌더링이란 쉽게 말해 렌더링을 클라이언트쪽에서 하는것이 아닌 말 그대로 서버쪽에서 하게 한다는 것이다. 이 기능과 라우터 기능을..

코드 구조에서 알아본 바와 같이 한 줄짜리 주석은 //로, 여러 줄의 주석은 /* ... */로 시작합니다. 주석(comment)은 어떻게 코드가 동작하는지, 왜 코드가 동작하는지를 설명하는 데 쓰입니다. 주석을 작성하는 게 쉬워 보일 수 있는데, 초보 개발자들은 종종 잘못된 방법으로 주석을 작성하는 실수를 범합니다. 좋지 않은 주석 // 이 코드는 (...)과 (...)을 수행합니다 // A라는 개발자가 이 기능에 대해 알고 있으며... very; complex; code; 이와 관련된 좋은 규칙도 있습니다. “코드가 불분명해서 주석 작성이 불가피하다면 코드를 다시 작성해야 하는 지경에 이른 걸 수 있습니다.” 리팩토링 팁: 함수 분리하기 function showPrimes(n) { for (let i..

Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 이를테면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류가 있겠지요. Context API를 사용한 전역 상태 관리 흐름 이해하기 프로젝트 내에서 환경 설정, 사용자 정보와 같은 전역적으로 필요한 상태를 관리해야 할 때는 어떻게 해야 할까요? 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. G 컴포넌트는 전역 상태를 업데이트시키고, F와 J 컴포넌트는 업데이트된 상태를 렌더링합니다. 그렇다면 App 컴포넌트에서는 다음과 같이 상태와 업데이트 함수를 정의해야..

📌강의 정리 슬라이딩 윈도우라는 알고리즘 기법을 사용할 것이다. 슬라이딩 윈도우란 반복에서 하나의 창문처럼 구간을 설정해 그 구간을 옆으로 쭉 밀며 계산을 하는 알고리즘 기법이다. 이 문제에서는 이중포문을 사용해 슬라이딩 윈도우를 구현하면 조건이 최대값들일때 100000*500 해서 어마어마한 숫자가 나올 수 있기에 포문을 하나만 이용해서 구현한다. 그럴 경우 핵심은 하나의 윈도우에서의 값이 나오면 다음 반복에서 단순히 앞의 값은 더하고 뒤의 값은 빼주는 것이다. 이렇게 하면 하나의 반복문으로 복잡도를 늘리지 않고 이 문제를 풀 수 있다. 📌느낀점 드디어 옛날에 풀었던 부분을 다시 다 풀고 새롭게 푸는 첫번째 문제이다. 처음시작할때는 이걸 언제 다 풀어 했는데 생각보다 훨씬 빠르게 다 풀었다.. 정말 매..

마라톤 회의 정말 예상은 했지만서도 어마어마한 회의의 시간이었다. 결론부터 쓰자면 우리는 1시부터 9시까지 중간에 20분 정도를 빼고는 쉬지 않고 회의했다. 모두가 열쩡으로 활활 타올랐다. 그리고 9시에 다들 모든걸 하얗게 불태우고 돌아갔다.. 역할 분담 모두가 팀프로젝트가 익숙치 않다보니 아무래도 역할 분담 부터 쉽지 않았다. 나는 각자 자유롭게 협업을 최대한 중요시해서 먼저 페이지를 나누고 1페이지 백:a 프:b 2페이지 백:b 프:a 3페이지 백:c 프:d 4페이지 백:c 프:d 5페이지 백:b 프:c 같은 방식을 생각했었는데 완전 아웃이었다. 페이지별로 나누면 기능이 섞여서 이도 저도 아니게 되며 프론트,백 둘 다 복잡하게 얽혀 쉽지 않다. 그리고 우리 모두가 많이 아는 것이 아니기에 세부적인 디..

첫 프로젝트 마감일 나의 항해99 사전 스터디 첫 과제를 마감하는 날이다. 확실히 그냥 공부하는 것보다 무언가 만들면서, 마감에 쫒기면서 만드는것이 효율이 극대화된다. 마감 직전에는 집중도가 3~5배는 증가했던 것 같다. 그래도 우선 당초의 목적인 DB를 다룰때 쓰는 저장, 찾기, 지우기를 API의 GET방식과 POST방식으로 다 구현해내어 많이 뿌듯하다. 근데 사실 정확히 원하는 대로 다 구현해내지는 못했다… 나는 카드마다 삭제버튼을 만들어 따로 삭제하게 하고 싶었고 새로고침할때마다 카드가 나오게 하고 싶었는데 이 두가지는 구현을 못했다.. 이번주 주말에 조금 시간이 날 것 같으니 그때 날잡고 리팩토링 해야겠다. 남은 기능은 (필수) 배포, 도메인 설정 (선택) 개별 삭제버튼 만들어 삭제, 새로고침시 ..

개발자는 가능한 한 간결하고 읽기 쉽게 코드를 작성해야 합니다. 복잡한 문제를 간결하고 사람이 읽기 쉬운 코드로 작성해 해결하는 것이야말로 진정한 프로그래밍 기술입니다. 좋은 코드 스타일은 이런 기술을 연마하는 데 큰 도움을 줍니다. 😠 초보 개발자들은 아래처럼 코드를 작성하곤 하는데, 중괄호가 필요하지 않기 때문에 추천하지 않습니다. if (n < 0) *{*alert(Power ${n} is not supported);*}* 😠 중괄호 없이 새로운 줄에 코드를 작성할 수도 있는데, 이렇게 하면 새로운 코드 라인을 추가할 때 에러가 발생합니다. 절대 이 방법은 쓰지 마세요. if (n < 0) alert(Power ${n} is not supported); 😏 코드가 짧다면 중괄호 없이 한 줄에 쓰는 ..

비동기 작업의 이해 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있습니다. 예를 들어 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신합니다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간이 걸리기 때문에 작업이 즉시 처리되는 것이 아니라, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리합니다. 이 과정에서 해당 작업을 비동기적으로 처리하게 됩니다. 비동기적 처리 요청을 처리하더라도 웹 애플리케이션이 멈추지 않고 동시에 여러 가지 요청을 처리 가능 기다리는 과정에서 여러 함수도 호출 가능 서버 요청외에 특정 작업을 예약할 때 동기적 처리 한 요청이 끝날 때까지 기다리는 동안 중지 상태..