시럽로그

Traditional IT 방식의 문제점 Datacenter 렌트 비용을 지불해야한다. (보통 monthly/yearly contract) Power supply, cooling, maintenance 비용을 지불해야한다. 새로운 하드웨어(서버)를 추가하거나 교체할 때 시간이 많이 소모된다. 확장하는데 제한사항이 많다. 현재 유지되고 있는 인프라를 24/7 모니터링 할 인원을 고용해야 한다. 천재지변에 대응하기 어렵다. (지진, 화재, power shutdown 등) - 우리나라는 천재지변으로 침수되거나 하는 경우가 많지 않아 잘 해당되지 않음 Cloud Computing Cloud computing 이란, IT리소스를 인터넷을 통해 on-demand 로 제공해주는 서비스 Cloud 서비스를 이용하면 사..

📖 멀티라인 커밋 작성 방법 git commit → 에디터 열림 에디터에서 아래 template에 맞춰 커밋 메세지 작성 :wq 로 저장 ✅ 분류 Add - 레이아웃 / 기능 추가 Remove - 내용 삭제 (폴더 / 파일 삭제) Modify - 수정 (JSON 데이터 포맷 변경 / 버튼 색깔 변경 / 폰트 변경) Fix - 버그/오류 해결 Refactor - 코드 리팩토링 (멘토 리뷰 반영 / 스스로 리팩토링 / 중복 코드 제거 / 불필요 코드 제거 / 성능 개선) Docs - 문서에 관련된 수정작업(README.md 등) 🧾 Template 분류: 한줄 제목 - 구현내용 detail - 구현내용 detail 📌 예시 1 - Add Front-end Add: 이미지 슬라이더 추가 - 메인페이지 이미지 ..

이전에 포스팅에서 아래와 같은 코드를 작성했었는데 // 부드러운 스크롤 const goTop = () => { window.scrollTo({ top: 0, left: 0, behavior: 'smooth', }); }; // 스크롤 시 나타나는 버튼 const fadeBtn = () => { if ( document.body.scrollTop > 200 || document.documentElement.scrollTop > 200 ) { document.getElementsByClassName('btnForUp')[0].style.right = '0'; } else { document.getElementsByClassName('btnForUp')[0].style.right = '-50px'; } }; ..

상품리스트를 컴포넌트로 뺐기 때문에 그 안에서 수량 변경이나 계산이 모두 이루어져야 한다고 생각했는데, 그렇게 계산된 요소를 부모 컴포넌트로 끌어올리고 다시 사이드바의 최종 금액에 반영해야 한다고 생각하니 어려웠다. 그걸로 며칠을 붙잡고 고민했는데 멘토님의 피드백을 받고 수량을 +,-로 변경하는 minusCount 함수와 plusCount 함수를 부모 컴포넌트에서 함수를 쓰고 prop으로 끌어오도록 수정했다. 그리고 - 버튼에는 disabledMinus 함수를 작성하여 1 이하로는 숫자가 떨어지지 않게끔 disabled를 주었다. cartList를 useState()로 설정해놨는데, state를 직접적으로 건드는 방식은 지양하는 게 좋다고 해서 spread 연산자로 복제해서 계산하도록 했다. 클릭한 버튼..

푸터는 거의 퍼블리싱 위주여서 수월하게 진행했다. 장바구니하다가 푸터하니 정말 단순 작업처럼 느껴졌다. 클론코딩한 사이트의 푸터가 우리가 메인 폰트로 정한 'Gowun Dodum'보다는 고딕체에 가까워 보여서 구글 폰트에서 유사한 느낌의 'IBM Plex Sans KR'을 사용했다. 컴포넌트는 상단의 로그인 옆 SNS 부분과, 그 아래 카테고리 부분, 그리고 푸터 로고 옆의 회사소개, ... 와 같이 반복되는 부분을 상수데이터로 넣기 위해 사용했다. 상수 데이터 형식은 다 동일하기에 SNS 부분만 적용한 코드를 넣어보겠다. const FOOTER_SNS = [ { id: 1, url: 'https://blog.naver.com/wecode', icon: 'fa-brands fa-blogger-b', },..

장바구니 초기 셋팅 후 레이아웃만 구현했다. 장바구니에 담은 상품리스트는 반복되는 요소라 map() 메소드를 사용해서 컴포넌트로 만들었다. 안에 있는 데이터는 Mock data로 만들었고, Trello로 공유받은 키값을 맞춰 작성했다. 지금 로직으로는 for문을 돌려서 모든 상품을 선택한 기준으로 최종 금액을 계산해서 표기하도록 짜여있는데 나중에 선택한 상품만 골라서 금액을 합산하려면 로직을 다시 써야겠지... 어렵다 어려워 😔

인증 Authentication 인증은 왜 필요할까? 우리 서비스를 누가 쓰며 어떻게 사용하고 있는지 추적이 가능하도록 하기 위해 (ex. 회원가입한 사람들이 좋아요를 누른다거나 게시글을 쓰는 등의 행위를 DB에 저장하여 추적하기 위함) 인증에 필요한 것은 무엇이 있을까? ID, Email, Password 가장 중요한 것은 비밀번호 비밀번호 어떻게 관리해야 하는가? 법규상의 강제 Database에 저장 시 개인 정보를 해싱하여 복원할 수 없도록 함 통신 시 개인정보를 주고 받을 때 SSL을 적용하여 암호화 (HTTPS) 암호화는 어떻게 할까? 단방향 해쉬란? 본래 해쉬(hash) 함수는 자료구조에서 빠른 자료의 검색, 데이터의 위변조 체크를 위해서 쓰이지만, 복원이 불가능한 단방향 해쉬함수는 암호학적 ..

전 회사에서 근무하며 어떻게 하면 코드를 효율적이고 가독성이 좋게 쓸 수 있을까, 고민이 많았다. 이번 세션을 통해 리팩토링이 뭔지는 알고 있었지만 그 방법에 대해 알 수 있어 굉장히 유용한 시간이었다. 전 회사에서는 '어제의 나와 오늘의 내가 다르기 때문에 지나고 보면 모든 코드가 마음에 안 들 수 있다, 리팩토링보단 다음 프로젝트에서 더 효율적이고 가독성 좋은 코드를 쓰자'는 입장이었다. 난 이제 그 방법을 알았으니 처음 코드를 짤 때부터 리팩토링을 고려한 코드를 짜야 하겠지! 1. Code Refactoring 코드는 한 번 작성되고 끝나는 게 아닌, 계속해서 많은 추가와 수정을 한다. 이러한 유지보수를 용이하게 하기 위해서는 코드의 가독성과 확장성이 좋아야 하는데, 이 작업을 리팩토링이라고 한다...

데이터베이스 세션을 듣고 직접 데이터의 흐름에 따라 스타벅스의 모델링을 진행해봤다. 모델링 사이트는 dbdiagram.io 를 사용했다. (튜토리얼 노션) dbdiagram 사용법 우선 Table 을 이용해서 원하는 이름의 테이블을 생성할 수 있다. 또한, 각 테이블은 고유한 PK , Primary Key 를 갖고 있으므로, id 를 기입해준다. id int [pk] 의 뜻은 이름이 id, 자료형이 int, 키의 종류 [pk]를 뜻한다. 맨 밑에는 Ref 즉, Reference(참조)를 어떤 방향으로 할지 선택할 수 있다. 필수 구현 사항 : 음료, 카테고리, 영양 정보, 알러지, 음료 이미지, 음료 설명, 신상 여부 구현 제외 사항 : 프로모션, 음료 사이즈 제시한 필수 구현 사항을 충족하려면 카테고리..

👾 Git이란? Git의 공식 명칭은 분산 버전 관리 시스템 (VCS) 이다. 쉽게 말해, 프로젝트 파일의 변경 사항을 추적하는 시스템이다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있다. 이런 버전 관리 시스템은 많은 사람들이 효율적으로 함께 작업하고, 프로젝트를 중심으로 협업할 때 사용할 수 있다. 각 개발자가 자신만의 프로젝트 버전을 본인 컴퓨터에 갖게 된다. 나중에 이러한 개별 버전의 프로젝트를 병합하여 기준이 되는 버전의 프로젝트에 적용 할 수 있게 된다. 그렇다면 버전 관리를 하는 이유는 뭘까? 아래 왼쪽 이미지를 보자. 파일이나 문서를 왼쪽 이미지처럼 관리한다면 이러한 단점이 있다. 만든 사람만 알아볼 수 있음 원본파일 수정본이 혼재되어 ..