Age of Discovery

프로그래밍을 시작하면서 지금까지 쿠키, 세션, 캐시, 토큰에 대한 개념이 정확히 안잡혀있어서 '언젠간 정확히 공부해봐야지' 라고 생각만했고 그 때 그 때 필요한 정보들만 받아들였다는 생각이 들었다. 오늘 공부를 한 후 나름대로 정리를 해보려고 한다. 클라이언트와 서버가 데이터를 주고받는 방식으로 HTTP프로토콜을 사용한다. HTTP프로토콜은 이렇게 데이터를 주고받을 수 있도록 상호간에 정의한 규칙을 의미한다. 클라이언트(브라우저)가 서버에 데이터를 요청하고 서버에서는 해당하는 데이터를 응답한다. HTTP프로토콜은 Connectionless(비연결지향)과 Stateless(상태정보비유지)의 특성을 가지고 있다. 비연결지향은 서버에 연결 후 응답을 받으면 연결을 끊어버리는 특성이고 상태정보비유지는 연결을 끊..

내가 코딩교육을 받았던 항해99 부트캠프를 수료 후 바로 취업전선에 뛰어들지 않고 교육 수강생들을 관리하는 담임매니저 일을 맡게 되었다. 이 업무에 지원하게 된 계기는 크게 두 가지인데 1. 당장 개발자 취업에 도전할 만한 실력은 안된다고 생각했으며 더 배우고 싶은게 많았다. 2. 내가 관리하는 수강생들과 소통하며 수강생의 입장으로서 몸소 느꼈던 것들에 대한 불편함을 어느 정도 해소해줄 자신이 있었다. 결과적으로 좋은 선택이었다. 위의 두 가지뿐만 아니라 예비 개발자들과 현직에 종사하고 계시는 많은 기술매니저, 멘토님들을 알게 되었다. 두 달동안 정신없이 일을 하며 틈틈이 기술면접 스터디와 프로젝트를 동시에 진행하게 됐고 여러모로 정신없이 시간이 흘러갔다. 업무가 한 달 정도 남은 이 시점에 임시로 소속..

https://jurgen-94.tistory.com/93 [React] - Intersection Observer로 무한스크롤 (1) 프로젝트 내에서 무한스크롤을 구현하기 위해 Intersection Observer API를 사용했으며 그 원론적인 상세내용은 React 무한 스크롤 구현하기 with Intersection Observer 🔥🔥 Intersection Observer API를 이용한 React jurgen-94.tistory.com 1탄에 이어 두번째 글!! 현 프로젝트에서 Intersection Observer를 사용하여 무한스크롤을 구현한 곳은 총 세 곳인데 우선은 공지사항을 받아오는 것부터 해보자! Intersection Observer의 동작원리에 대해서는 1탄에서 설명했고 실제로..

프로젝트 내에서 무한스크롤을 구현하기 위해 Intersection Observer API를 사용했으며 여러 곳에서 재사용하기 위해 커스텀훅으로 만들어 놓았다. 동작원리를 간단하게 설명하면 먼저 observer(관찰자)를 생성해준다 사용자가 브라우저에서 스크롤을 내려 observer가 타겟을 보게끔 해주면 추가적인 데이터를 받아와 화면에 렌더링 하는방식이다. 현재 프로젝트에서 Intersection Observer를 세개의 컴포넌트에서 사용하고 있기 때문에 커스텀 훅으로 만들었으며 그 훅을 먼저 설명하겠다. import { useEffect, useRef } from 'react'; export default function useObserver(options) { const { fetcher, depen..

https://jurgen-94.tistory.com/91 [React] - 라이브러리 없이 무한 슬라이드 구현 (1) 프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 하단 동그라미 클릭시 해당 이미지로 움직이기 2. 좌우 Arrow버튼으로 이미지 슬라이드 3. 약 3초마 jurgen-94.tistory.com 이전에 했던 포스팅에 이어 이제는 실제로 함수를 만들고 동작시켜보자. useEffect훅에 handleOriginSlide가 있기 때문에 handleOriginSlide 함수먼저 살펴보자 function handleOriginSlide(index: number): void { setTimeout(() => { setNum(index); setCarous..

프로젝트 하면서 맡게 된 캐러셀 기능을 라이브러리없이 구현해보자! 내가 원하는 기능들은 1. 좌우 Arrow버튼으로 이미지 슬라이드 2. 약 3초마다 자동 슬라이드 3. 무한 슬라이드 이정도라고 할 수 있겠다. 코드를 한줄씩 파헤쳐보자 const imageBox = useRef(null); 우리가 만들 캐러셀의 사진배열들을 보관하는 div 컨테이너에 imageBox라는 변수명의 useRef를 지정해준다. 타입스크립트를 사용했기 때문에 useRef가 지정될 Dom타입을 붙여준다. const [num, setNum] = useState(1); 현재 구현하려는 기능의 핵심중의 핵심이다. 이 state를 어떻게 갖고노느냐에 따라 이미지를 좌우자재로 이동시킨다. const [carouselTransition, s..

비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로..

리액트와 Next.js에 대해 공부하면서 CSR과 SSR에 대해 자연스럽게 헷갈리게 됐고(?ㅋㅋ) 찾아보았다. 공부한 내용을 간략히 설명하자면 CSR과 SSR의 정의 CSR은 클라이언트 사이드 렌더링의 약어로 프론트엔드에서 렌더링을 해준다. SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 한 파일을 내려준다. 이번 글에서는 SSR만 다루겠다. SSR 전통적인 방식의 웹사이트들은 대부분 SSR 형태로 서비스 해왔다. 페이지를 이동할 때마다 새 페이지를 요청하고 서버연산에 의해 렌더링 된 후 완성된 페이지형태로 응답한다. SSR 의 장점 1. SEO - 검색엔진 최적화 이미 DOM이 다 구성된 파일을 브라우저가 내려받기 때문에 검색 엔진들이 정보를 수집할 때 정확한 정보를 검색할 수 있어서 사용자들이 웹사..

나는 운이 정말 좋은 사람이다. 프로젝트 하나를 마친 후 교육기관의 매니저를 맡게 됐는데 동시에 다른 프로젝트에 참가하게 됐다. 이름은 링크 게더 인적 자원과 기술적 자원을 공유하는 서비스이다. 쉽게 말하면 사이드 프로젝트 모집 플랫폼 누군가 보기엔 다소 진부할 수 있는 주제이지만 이 프로젝트가 나한테 특별하게 다가오는 이유는 현업에서 일하고 계신 분들과 같이 하게 됐고 또한 그 회사의 기획자, 디자이너 분까지 모셔 기획부터 탄탄하게 진행되고 있기 때문이다 유지보수가 용이하며 동시에 클린 한 코드를 작성할 수 있는 기회에 목말랐던 나에게는 둘도 없는 찬스이지 않을까.. 지난 프로젝트에선 6주 안에 결과물을 완성시키는 게 우선이었기 때문에 시간에 쫓기며 굴러가게만 만들었다. 그에 대한 대가는 바로 손도 못..

간단하지만 강력하다. useModalOverlay라는 jsx파일을 만들어 준다. import { useCallback, useState } from 'react'; export default function useModalOverlay() { const [isOpen, setOpen] = useState(false); return { isOpen, open: useCallback(() => { setOpen(true); }, []), close: useCallback(() => { setOpen(false); }, []), toggle: useCallback(() => { setOpen((e) => !e); }, []), }; } 위와 같이 useCallback과 useState를 import해온 다음 ..

프로젝트를 시작하기에 앞서 디자인 패턴을 어떻게 잡을지에 대한 고민을 꽤 많이 했다. 규모가 꽤 있는 프로젝트는 처음이었기 때문에 무턱대고 진행했다가는 불상사를 겪을 수 있겠다는 마음이었다. 결과적으로 커스텀 훅 디자인 패턴을 적용하기로 결정했고 실제로도 프로젝트 중반까지는 잘 지켜졌지만 그 후엔 로직이 복잡해지면서 커스텀 훅을 만드는 것 자체에 어려움을 느꼈다. (역량 부족 이슈..) CUSTOM HOOK 패턴이란? 위와 같이 pages를 폴더별로 나눠 UI가 렌더링되는 부분을 index.jsx로 따로 두고 렌더링되는 부분이 복잡해지면 파트별로 구분해 components폴더안에 둔다. 그리고 hooks 폴더안에 메인로직을 둔 상태에서 제어하는 것이다. 위와 같은 패턴의 장점은 로직과 렌더링이 분리되어 ..

내 기억이 맞다면 블로그를 시작한 후 2주 넘게 글을 안쓴적이 없었는데 지난 9월 초에 쓴 글을 마지막으로 한달넘게 공백기간을 가지게 됐다. 약 6주간의 프로젝트를 거치면서 정신적, 육체적으로 꽤 힘들었지만 그만큼 성장했다는 생각에 뿌듯하다. 프로젝트를 기획하는 날부터 마무리하는 날까지 팀원들간의 큰 갈등없이 순탄히 진행됐던 것이 정말 다행이라고 생각한다. 팀원들이 다들 실력도 좋은 데다가 빨리빨리 해치우지 않고는 못배기는 성격들이라 서로 부족한점을 보완하면서 일사천리로 진행됐던 것 같다. (타고난 인복이라 해야하나..?) 프로젝트를 한 문장으로 설명하자면 팀 프로젝트 협업툴 이라고 할 수 있겠다. 프로젝트 이름은 Developer들을 위한 Kit을 줄여 디벨킷 이라고 짓게 됐다. (내가 제안한 프로젝트..

글 쓰고 기록하는 습관이 점점 사라지고 있는 것 같아 무섭지만 틈틈이 조금씩이라도 써보려고 한다. 저번 주차 클론 코딩 때는 모달 창 띄우는 게 처음이고 도저히 구글링 해서 새로 공부할 시간이 없어서 모달 창 관리를 개떡같이 했는데 프로젝트 규모가 커졌기 때문에 기능 구현에 급급한 코드는 지양해야 할 것 같다. 리액트 portal을 사용하면 모달 라이브러리를 설치하지 않고도 간편하게 모달을 띄울 수 있다! public / index.html 파일에서 id가 root인 div아래에 같은 경로로 id가 modal인 div를 만들어주면 root(전역) 안에서 어떤 컴포넌트가 어떻게 렌더링 되던지 전혀 영향을 받지 않는 modal을 만들 수 있다. ModalContainer.jsx파일을 하나 만들어주자 impo..

코드 한 줄 없는 실전 프로젝트 첫 글을 포스팅해보려 한다. 왜냐? 아직 코드를 안 짰기 때문이다ㅋㅋㅋㅋ 앞으로 6주 동안 실전 프로젝트를 시작하게 되는데 실질적으로 기능 개발하는데 몰입할 수 있는 기간은 3주 정도로 빠듯하게 잡아야 될 것 같다. 우리 팀의 기획은 첫날부터 큰 의견 충돌 없이 순조롭게 진행됐다. 주제도 다른 팀에 비하면 빨리 정해졌고 팀원들 간에 대화도 잘 통했다.. 한 가지 문제는 항해 측에서 섭외해준 디자이너분이 첫날(금요일)에 참석하지 못할 것 같다고 하더니 그날 저녁에 갑자기 주말 동안 참석 못한다고 하셨다. 최대한 빨리 디자인 작업이 들어가야 할 것 같아서 아쉬운 마음에 와이어프레임만 만들어놓고 오매불망 기다리고 있었는데 일요일 저녁에는 웹디자인만 기획하는지 몰랐다고 그냥 탈주..

약 이틀정도 걸린 것 같다... 리액트에서 파이어베이스로 이미지 업로드 하는 대부분의 블로그글을 다 찾아보고 적용해봤으나 내 프로젝트에 맞춰 수정하기가 매우 까다로웠다. 그리고 파이어베이스에 이미지를 업로드하고 URL을 다운받는 메소드와 문법을 새로 알아야했기에 시간이 꽤 소요됐는데 그래도 성공을 해서 다행이다 집념의승리 ㅠㅠ 파이어베이스를 꼭 사용하려고 했던 이유는 여러가지가 있는데 1. 이미지를 base64로 인코딩하여 백엔드에 넘겨주기엔 사진 하나의 url길이가 몇천줄이 넘어간다. 2. 파이어베이스를 이용하면 한번에 여러장을 업로드 할 수 있다. 3. 파이어베이스를 통해 배포가 가능하다. 4. mock서버를 이용할 수 있다. 등이 있는데 사용하지 않을 이유가 없다. 처음 진입장벽이 조금 높았던것을 ..