Journal/Today I Learned

TIL - VuePress 블로그로 이동

VuePress를 이용해 TIL용 블로그를 따로 만들었다. 앞으로 매일 학습한 단순 내용은 새 블로그에 일지 형식으로 기록한다. TISTORY도 그대로 유지한다!! 주제를 가지고 있는 개발 관련 글, 작업 과정 등은 계속해서 여기에 올릴거임! Jooeun's TIL Blog 바로가기

TIL - 2022.07.29 금요일

오늘 배운 것 1. 입문용 CSS 강의 촬영 완료 강의 촬영을 전부 마치고 수업 자료 제작에 들어갔다. 강의용 자료와 레퍼런스 코드를 제작하는 단계, 실제 촬영을 진행하는 단계, 수업과 함께 실제 수강생들이 보게 될 수업 자료를 제작하는 단계에서 각각 고려해야 할 것이 너무도 달라 내 마인드셋을 변경하는데에 시간이 좀 걸리는 중. 2. Apollo-client의 fromPromise와 flatMap 회사 개발팀 쪽에서 로그인 인증 관련하여 치명적인 오류가 발생했다는 소식을 들었다. 자세한 사항은 보안상 설명할 수 없지만, 해당 이슈에 대한 리포트를 들으며 Apollo-client에서 fromPromise와 flatMap이라는 메서드를 제공한다는 사실을 알게 되었다. 그리고 이 부분에 대해 공부를 충분히 ..

TIL - 2022.07.20 수요일

오늘 배운 것 1. Webpack과 Babel Webpack과 Babel이 보통 함께 언급되기 때문에 지금까지 두 모듈의 역할을 헷갈리고 있었는데, 그 차이점을 확실하게 이해하게 되었다. 먼저 Webpack은 모던 자바스크립트 웹 서비스 & 웹 어플리케이션을 위한 번들러(Bundler)이다. MPA 웹 실무를 뛸 때부터, 괜찮은 웹사이트를 보면 소스코드를 뜯어보는 습관이 있었다. 기존의 jQuery 웹페이지의 경우에는 대부분 개발자 도구로 웹페이지를 열어보면 분리된 html/css/js 파일을 확인할 수 있다. php나 asp 등으로 작업을 진행하더라도 웹 브라우저에 그릴 때에는 html/css/js 파일로 렌더링되기 때문인데, 이상하게 최근 핫한 웹 서비스 페이지의 경우에는 html/css/js가 용도..

TIL - 2022.03.14 월요일

오늘 한 것 1. react 드래그 앤 드롭 라이브러리 스터디 우리가 만들고자 하는 서비스의 프론트엔드 핵심 기능을 세가지로 추려서 프론트엔드 멤버 셋이서 각각 하나씩 담당하기로 했다. 그 중 내가 맡은 것은 여행 일정을 드래그 앤 드롭으로 등록 및 수정하는 기능. 그 기능을 구현하기 위해 필요한 세부 기능은 총 두가지이다. 1) 드래그 앤 드롭으로 데이터 배열 변경 2) 드래그 가능한 Item을 리사이징해서 해당 일정의 소요시간 변경 1번 기능 구현 자체는 어렵지 않았다. react-beautiful-dnd 등의 라이브러리를 이용하면 간단하고 깔끔하게 만들 수 있다. 해당 라이브러리에서 제공하는 snapshot 인자를 이용하면 css 수정도 가능하고. react-beautiful-dnd는 대상 Item..

TIL - 2022.03.11 금요일 (+팀프로젝트 시작)

오늘 배운 것 1. Git-flow Wordflow 지금까지는 개인 프로젝트와 공부를 병행하면서 짬나는 시간에 팀프로젝트를 진행했지만, 정규 수업이 종료된 오늘부터는 본격적인 팀프로젝트 시작이다. 팀 프로젝트를 시작하면서 협업시 Git workflow를 어떻게 관리하면 좋은지 학습하는 시간을 가졌다. Git workflow란, Git을 이용한 협업시 브랜치를 어떻게 사용할지에 대한 규칙을 뜻한다. Git workflow도 리액트 컴포넌트 디자인 패턴과 마찬가지로 정해진 표준이 있는 것은 아니다. 회사나 팀별로 합의된 방식을 이용하면 된다. 오늘은 그 중 현재 가장 많이 사용되고 있는 Workflow 중 하나인 Git-flow를 예시로 배웠다. Git-flow의 경우 각각의 브랜치의 역할이 명확하며, 버전..

TIL - 2022.03.08 화요일

오늘 배운 것 1. SSG/SSR 배포 지난 주 금요일부터 오늘까지는 배포의 회오리에 풍선인형처럼 휩쓸려 팔랑거리고 있다. VM 인스턴스만 사용하는 단순 동적 배포는 경험이 있지만, 로드밸런서를 이용해서 부하를 분산시키고 클라우드와 VM을 동시에 이용하는 형태의 현대적 배포는 경험이 없다보니 뭐가 뭔지도 모르겠고 정신이 혼미하다. 지금까지 이해한 것을 먼저 적어보자면. SSG란? : Static Site Generation / 정적 타입 배포 SSR이란? : Server Side Rendering / 동적 타입 배포 로드밸런서(LB)와 CDN을 이용하면 정적 url로 들어갔을 때에는 SSG 방식으로 소스코드를 내려받고, 동적 url로 접속했을 때에는 SSR 방식으로 소스코드를 내려받도록 분기를 나누어 웹..

TIL - 2022.03.03 목요일

이제까지 배운 것 1. 여러개의 요소에 useRef를 병렬로 적용하는 방법 위와 같은 페이지에서 상단의 서브메뉴를 눌렀을 때 페이지를 리로드하지 않고 내용 부분의 컨텐츠만 교체하고 싶었다. 레이아웃을 이용하자니 pageProps 내에 뿌려지는 컨텐츠 안에 레이아웃을 하나 더 만들어서 넣는 방법을 모르겠고. 한동안 고민하다가, 결국 메뉴 버튼와 내용 부분의 index를 연결해서 수동으로 display를 컨트롤하는 방법으로 해결했다. 그것을 위해 필요한 DOM 조작은 useRef를 배열로 넣어서 처리 완료. (props.buttonRef.current[0] = el)} > 내가 산 물건 (props.buttonRef.current[1] = el)} > 내가 파는 물건 (props.buttonRef.curre..

TIL - 2022.02.23 수요일

오늘 배운 것 1. 오늘의 집 클론코딩에 결제 시스템 입히기 아임포트를 활용해서 결제 기능이 작동하도록 하는 것에는 성공했다. 결제에 대한 return 값도 성공적으로 들어오는 것을 확인. 그런데 해당 return값에서 imp_uid 정보를 뽑아 포인트 등록 API에 쏘려고 하니 404 에러가 발생했다. 체크해본 요소들을 기록차 정리해둠. - 액세스 토큰 만료 문제인가? : 아님 - useMutation하는 함수 스크립트라 잘못되어있는가? : 결제 기능 정상 작동하는 정환님 코드와 비교해보았는데, 문제 없는 것으로 보임.. - 테스트하는 계정에 문제가 생겼나? : 그래서 다른 계정으로도 테스트해봄. 아님. 400 에러가 아니라 404 에러가 뜨니까 애초에 네트워크탭에 에러 메시지가 뜨지를 않는다. 그래서..

TIL - 2022.02.22 화요일

오늘 배운 것 1. 아임포트를 이용해서 결제 시스템 구축하는 법 아임포트라는 결제 솔루션 서비스를 이용해서 결제 시스템 구축하는 방법을 간략하게 배웠다. 실세로 아임포트 API 소스코드를 사용해서 user 정보에 결제한 만큼의 포인트가 충전되는 실습도 해봤다. 결제 시스템을 구축할 경우 개발 기간을 최소 1~2달 잡아야 한다고.. 2. 오늘의집 클론코딩 UI 정비 기능 우선 구현하느라 방치해뒀던 문의 및 문의 답변 부분 UI를 잡았다. 레이아웃의 Navigation도 해당 페이지의 asPath를 인식해서 자동으로 현재 위치에 하이라이트 표시가 되도록 만들었다. 관리자 메뉴에서만 볼 수 있는 버튼이나 수정/삭제 부분은 userInfo를 글로벌 스테이트로 넘긴 뒤 만지려고 남겨두었다. (구조 변경의 가능성이..

TIL - 2022.02.18 금요일

오늘 배운 것 1. 브라우저 저장소 브라우저 저장소에는 총 세 가지 종류가 있다. Cookie, LocalStorage, SessionStorage 종류 Cookie LocalStorage SessionStorage 비고 브라우저를 종료해도 데이터가 유지된다. 단, 만료 기한까지만 저장됨. 브라우저를 종료해도 데이터가 유지된다. 새로고침해도 데이터가 유지되지만, 브라우저를 종료하면 데이터가 사라진다. localStorage.getItem("key") // localStorage sessionStorage.getItem("key") // sessionStorage document.cookie // Cookie 세가지 저장소 모두 브라우저에 저장된 정보를 위와 같은 코드로 쉽게 읽어올 수 있다. 따라서 보안..