오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

final 프로젝트 2022.02-2022.03 Banthing 배달비와 최소 주문금액의 부담을 덜어주기 위한 서비스 github: https://github.com/codestates/BanThing 사용 스택 : Next.js, typescript, HTML/CSS 배포: https://www.banthing.kr/ (비용상의 이유로 사이트를 내렸습니다.) Front-end Map 지도 생성 및 200m 원 표시를 해주었습니다. 방을 생성하고 새로고침시 지도에 마커를 생성하게 해주었습니다. 마커 클릭시 중심점을 마커의 위치로 변할 수 있게 해주었습니다. 커스텀 마커 생성 및 지도 중심점 이동 구현 지도 마커 별 채팅방 기능 구현 Main 덧글 기능 방 삭제 기능 방 생성 기능 Plan 프로젝트 설계 ..

최근 모의 면접을 보면서 'react의 최신 버전에 대해 공부하고 있나요?'라는 질문을 받게 되었는데 최근에는 타입스크립트와 프로그래밍의 페러다임에 대해서 공부하고 있습니다. 라고 답했다. 모의 면접이 끝나고 생각을 해봤다. 해야할 공부들이 너무 많다는 것을 당장 프론트엔드만 하더라도 react.js, next.js, typeScript, 프로그래밍의 패러다임, graphQL, babel, webpack등등 그래서 내 나름대로 우선순위를 정해봤다. 1순위 코딩테스트, cs지식, 기술 면접 2순위 자바스크립트, 타입스크립트 3순위 리액트, next.js 4순위 바벨, 웹팩 나는 우선 프론트엔드 취준생이다. 코딩테스트, cs지식, 기술면접이 가장 우선시 되야 되겠지 그다음이 자바스크립트, 타입스크립같은 언어..

어떠한 nav바를 클릭했을 시 다른 상태를 보여줘야 한다고 생각합니다. 어떻게 할 수 있을까요? 일일히 버튼이 에스프레소 버튼, 프라푸치노 버튼이 클릭될 때마다 이벤트를 줘야할까요? $('americano').addEventListener('click', e => { ... }) $('frappuccino').addEventListener('click', e => { ... }) $('blended').addEventListener('click', e => { ... }) 이렇게 한다면 굉장히 비 효율적일 것입니다. 이럴 때 이벤트 위임을 이용할 수 있습니다. 이벤트 위임에는 이벤트 버블링과 캡쳐링이 있습니다. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의..

OTCP/IP설정을 수동으로 설정할 때의 항목입니다. TCP/IP 설정항목 IP주소 서브넷 마스크 기본 게이트웨이 DNS 서버 IP 주소 컴퓨터에 IP주소를 할당한다고 가정하자 수동으로 주소를 할당해주는 방법이 있고 자동으로 할당해주는 방법이 있습니다. IP주소 할당 방법 정정 할당 동적 할당 수동 설정 자동 주소 설정 DHCP(Dynamic Host Configuration Protocol) DHCP 먼저 DHCP 클라이언트는 DHCP서버가 있는지 물어봅니다.(DISCOVER 임대 요청) 있다면 사용할 수 있는 TCP/IP설정을 묻습니다. 디스커버리 단계에서 클라이언트는 주소를 할당 받기 전이기 때문에 IP주소는 0.0.0.0입니다. 또한 DHCP통신은 브로드캐스트를 이용하기에 목적지 주소는 255.2..

커밋 메시지를 수정하고 싶다거나 변경된 파일 일부를 되돌릴 수도 있습니다. 현재 작업 중인 커밋(HEAD) 간단하게 수정할 때 git commit --amend를 사용합니다. 아래에 있는 커밋들 중 일부를 수정하거나 변경할 때 git rebase --interactive를 사용합니다. TIP git revert의 경우 대상 커밋을 되돌리는 새로운 커밋을 만드는 기능이며, 커밋 자체를 변경하지는 못합니다 git commit --amend --amend는 현재 커밋(HEAD) 위에 변경사항을 덮어씌울 때 사용하는 옵션입니다. 커밋을 한 후 추가적인 변경사항이 생겼거나 커밋 메시지를 변경하고 싶을 때 많이 사용합니다. 만약 변경사항을 추가하고 싶다면 commit을 할 때와 마찬가지로 staging(index)..

if-else 조건문을 많이 사용하게 되면 코드 라인이 길어지고 indent가 많아져 가독성이 떨어지는 문제가 발생합니다. 이때 Guard Clausing과 Polymorhism(다형성)을 사용하면 코드를 클린하게 짤 수 있습니다. Guard clause 일반적으로 if-else문이 중첩(nestsed)될수록 코드는 복잡해지고 보기 지저분해집니다. // BAD if(){ ... if(){ ... if(){ ... while(){ ... ... } } } } nested 코드를 줄이고 가독성을 높이기 위해선, 코드 상단에 Fail이 되는 로직을 위로 넣어두는 것이 좋습니다. as-is function sayHiToSpringUser(developer){ if (developer.isFrontEnd){ th..

오류 코드보다는 예외 사용하기 오류 코드를 사용하게 되면 상단에 오류인지 확인하는 불필요한 로직이 들어가게 됩니다. 오류의 범주에 들어가지 않은 상태를 나타내는 것이 아니라면, 예외(Exception)로 명시적으로 에러 처리를 표현해주는게 좋습니다. enum ErrorCodes{ VALUE_ERROR = "VALUE_ERROR" } function weCanRaiseError(){ return ErrorCodes.VALUE_ERROR } function useUglyFunction(){ result = weCanRaiseError() if(result === ErrorCodes.VALUE_ERROR){ } } function weCanRaiseError(name, message){ if(...){ thr..

최근에 리팩토링 스터디를 진행하고 있다. 주먹구구식으로 만든 코드를 더 읽기 쉽게 관리하기 쉽게하고 더 좋은 개발자가 되기 위해서 이다. 언젠가 이러한 지식들로 다른 사람들을 가르쳐보고 싶다는 생각을 하고 있다.

이전 커밋의 변경사항을 되돌려야 하는 상황은 꽤 많이 발생합니다. 에러를 발생시키는 커밋이 있다면, 빠르게 해당 커밋의 변경사항을 되돌려야 합니다. git revert {커밋 ID} 다음과 같은 세 개의 커밋이 있는 상황이라고 합시다. $ git log --oneline 875a6e6 b 파일을 추가한다 1fc71a0 a 파일을 수정한다 b014111 a 파일을 추가한다 이때 우리는 1fc71a0 (a 파일을 수정한다) 커밋이 문제가 있다는 걸 알게 됐습니다. 1fc71a0 커밋 내용은 이미 remote repository 공간에 올라갔습니다. 기존 커밋들을 지우지 않고 현재 커밋 위로 이전 커밋 내용을 다시 되돌리는 커밋을 만듭니다. $ git revert 1fc71a0 Revert "a 파일을 수정한..

단일 책임 원칙(SRP) 지키기 하나의 클래스는 하나의 책임만 가지도록 합니다. as-is #Store가 많은 역할을 혼자서 수행합니다. class Store{ // 유저랑 커미니케이션 하는 메서드 communicate_user(self){ ... } // 상품 재고 관리 manage_products(self){ ... } // 돈을 관리하는 메서드 manage_money(self){ ... } } to-be # 책임을 나눠서 Manger 클래스에게 책임을 전가합니다. class CounterManager{ communicate_user(){ console.log(1) } } class ProductManager{ manage_products(){ ... } } class Owner{ manage_mon..