따뜻한 베지밀

해당 글은 Recoil Github 페이지를 직접 돌아다니면서 확인했던 부분을 다루고 있습니다. Recoil 라이브러리는 이슈를 꾸준히 관리하고 있고, 정식버전을 내기 위해서 활발하게 업데이트되고 있는 라이브러리임으로 글을 읽는 시점과 아래 글은 다를 수 있음을 미리 밝힙니다. Recoil은 어떤건가요? Recoil은 React에서 상태 관리를 위해 만들어진 라이브러리입니다. Atom이라는 독립적인 Store로 전역으로 관리하고 싶은 상태가 있으면 언제든지 사용하면 됩니다. 전역 상태를 사용할 수 있는 Context API, Redux, Mobx 등의 라이브러리에 비해서 러닝커브가 낮은 편이고, 코드가 간단해서 아직 첫 정식버전이 출시되지도 않았지만 많은 사람들이 사용 중입니다. Context API와는..

Context API로 상태관리를 해보자 😁 이번 글은 전역적으로 상태를 관리하는 방법 중 리액트 자체에서 제공하는 Context API를 사용해서 다루어 보는 법을 알려드리려고 합니다. Context API가 뭔데요? 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달됩니다(props drilling). 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있습니다. Context API를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. 쉽게 풀어서 얘기하자면, 위에서 아래로 주면서 props가 너무 많이 전달되는 현상을 없애기 위해서..

When do we use React LifeCycle? 먼저, 리액트의 생명주기가 어떤 점에서 필요하고, 무엇인지에 대해 알아봅시다 😁 사용자와 함께하는 동적인 페이지를 만들기 위해 state와 props는 사용자에 어떤 특정 행동에 의해 값이 변합니다. 사용자가 사이트에 들어오기 전에는 특정한 API를 호출해서 데이터를 가져와야 하는 경우가 필요할 수도 있습니다. 리액트에서는 DOM(Document Object Model)에서 특정한 시간에 특정한 행동을 일어나게 할 수 있도록 생명주기를 만들었다고 생각합니다. 즉, 리액트에서 말하는 생명주기는 내가 원하는 것과 화면에 렌더링하는 구성 요소들을 일치시킬 수 있도록 DOM을 관리하는 일종의 수단이 됩니다👍 What is React Life Cycle? ..

코로나 시국에는 42서울 체크인 서비스로 출석명부를 관리했던 때가 있었습니다. 기존에 있던 체크인 사이트 코드를 분석해보면서, 혼자 새로운 데이터베이스를 설계할 때 제가 생각했던 것을 글로 남겨보고자 작성합니다. ERD가 뭔데 그래요? Entity Relationship Diagram의 약자로서 시스템의 엔티티들이 무엇이 있는지, 어떤 관계가 있는지를 나타내는 다이어그램입니다. 쉽게 설명하자면 하나의 클래스를 만든다고 생각하면 됩니다. 예를 들면 운동하는 공을 정의하기 위해서는 Ball이라는 클래스를 만들고 speed, location 등을 통해서 공의 위치와 속도를 나타낼 수 있는 것처럼 하나의 객체를 정의하고 어떤 속성을 가지고 있는지를 정의하면 되는 것입니다. Ball말고 ! 서비스에서는 어떻게 만..

로그 로그는 프로그램에서 발생하는 이벤트에 대한 기록입니다. 클라이언트에서 할 수 있는 어떤 행동들이나, 상태가 변하였을 때 "디버깅"이나, "상태 관리"를 위하여 로그를 관리합니다. 어느 한 게임에서 유저가 게임 아이템을 샀는데 서버가 날라갔다면 유저는 게임 아이템을 샀다는 것을 어떻게 증명할 수 있을까요? 회사는 유저에게 보답을 해줄 수 있을까요? 로그가 없다면 힘듭니다. 우리는 모든 이벤트에서 로그를 찍을 수 있게 해 놓았다면 시간의 흐름에 따라서 원하는 것을 하고자 하기 편합니다. 로그에는 어떤것이 담겨있어야 할까요? 로그는 위에서 언급했듯이 "상태 관리"를 담아야 합니다. 그러다보니 시간 순이 중요해졌습니다. 위와 같은 상황을 방지하기 위해서도 날짜와 시간은 담기는게 좋습니다. "상태 관리"이기..

우리는 웹사이트를 만들 때 로그인 기능을 구현하는 일이 많습니다. 프로젝트에서도 로그인 기능은 다룰려고 하는 추세입니다. 그러나 로그인 자체가 보안적으로 굉장하게 신경을 써야 하고, 이런 상황 저런 상황을 고려해야 합니다. 해당 글은 필자가 부족한 지식으로 작성한 글임을 알립니다. 이상한 내용이 있다면 댓글남겨주시길 바랍니다. 로그인 유지가 필요한 이유 메인 페이지에서 로그인 후에 다른 페이지에 들어갈 때 로그인을 새로 해야 한다면, 사용자 경험이 좋게 느껴질 수 있을까요? 저라면 그런 사이트는 이용하고 싶지 않을 것 같습니다😭😭 웹 브라우저와 웹 서버가 데이터를 주고 받을 때 HTTP(HyperText Transfer Protocol) 통신을 이용합니다. HTTP는 서버의 부담을 줄이기 위해 비연결성(..

React Fiber Architecture https://www.youtube.com/watch?v=ZCuYPiUIONs 위의 동영상은 React Fiber Architecture가 처음 나왔을 때 소개해 주는 영상입니다. What is Fiber Architecture ? 영상 초반에서 프랙탈 구조의 삼각형이 좁아지고, 넓어지면서 각각의 숫자가 바뀌는 모습을 볼 수 있습니다. 삼각형이 좁아지고 넓어지는 과정은 최상단의 노드를 기점으로 바꾸면 됩니다. 렌더링 과정에서 페이지 내부 애니메이션이 부드럽게 보이려면 16ms 내에 작업이 처리되어야 합니다 ❗️❗️ 하지만, 기존 알고리즘으로는 각각의 숫자가 바뀌는 과정이 16ms에 맞추기가 어렵습니다 😭 그렇기에 Virtual DOM을 최소화하고, 업데이트 일..

최종 합격을 했다. 재밌게 놀아보자.

마지막 주가 밝아왔다. 같은 피시너끼리 항상 "우리 클러스터 몇 번오면 끝나요!"라고 얘기하며 장난을 쳤었는데 이제 장난을 치면 아쉬움이 남는 주가 되어버렸다. 3주 동안 생각보다 많은 정을 콸콸콸 쏟아버렸다. 새벽까지 개더 타운에 모여서 개인 진도를 나가고 사담을 나누던 게 곧 끝난다는 말이 내 일상이 없어지는 것처럼 섭섭했다. 특히, 개더 타운에서 춤추면 10명 넘는 사람들이 다 같이 아이돌 대형을 서서 춤추는 장면은 아직도 기억이 새록새록하다. 그러다 보면 몇 시간은 순식간에 지나갔다. 4주차에서 나는 개인 진도를 원하는 목표만큼 나갔었기에, BSQ팀플과 기존에 시험에 나왔던 것을 정리하면서 시험 대비를 했다. BSQ는 생각보다 순조롭게 진행이 되었고, 실행이 조금 걸리지만 이론적으로 우리는 생각보..

화요일 드디어 2번째 팀플의 평가를 받는다. 첫 번째의 팀플에서 실수했던 부분을 만회하기 위해서, 생각할 수 있는 예외란 예외는 다 생각해서 갔었고 질문에 대한 대비도 철저하게 해서 갔다. 그렇게 우리는 다시 0점을 받았다 ❗️❗️ 아쉬웠다. 우물 안에 개구리라는 말이 이런 거지 않을까라는 생각을 하기도 했고, 카뎃님께 들었던 내용들이 정말 많은 것을 돌아보게 해 주셔서 라피신을 다시 생각하게 되었다. 이쯤부터 나는 학교 수업보다는 라피신이 우선이게 되었다. 라피신에서 얻어가는 게 정말 많다고 생각이 되었기 때문이다. 그래서 22학점을 듣고 있던 나는 한 과목을 드롭해서 19학점으로 학교를 다니기 시작했다. 19학점이라고 쉬운 게 아니잖아요;; 화요일은 추석 당일 날이었기 때문에 몇몇 분들은 집에 빨리 ..