본문 바로가기

분류 전체보기

(432)
맥북에서 원화(₩) 대신 백틱(`)만 뜨도록 설정하기 개발하다보면 맥북에서 원화를 사용할 일이 거의 없다시피한데, 백틱을 입력할 때 한글모드를 영문모드로 바꾸는게 너무 귀찮았다. 지인의 추천으로 인해 백틱 버튼을 누르면 무조건 백틱만 뜨도록 하는 설정을 알게 되었는데, 설정하고 나니 개발할 때 너무 편하더라! 설정하기 설정은 아주 간단하다. 터미널을 열고 해당 명령어 한 줄만 입력하면 끝! curl -sSL https://gist.githubusercontent.com/zi-gae/777c1b797bb01de79d35db556f760484/raw/4553ae02edd9a7d16568d8d8e69c229257b7d9db/wontobacktick.sh | sh 사용 중인 프로그램이 있다면 재실행해야만 해당 설정이 적용이 된다. 참고 자료 https://www...
[모든 개발자를 위한 HTTP 웹 기본 지식] 1. 인터넷 네트워크 🍒 Recap 인터넷 통신 복잡한 인터넷 망에서 메시지를 보내기 위해 “IP” 규칙을 사용 IP의 한계를 “TCP”로 해결 “UDP”는 IP와 거의 동일하지만 PORT가 추가된 백지 개념. 필요에 따라서 UDP 위의 애플리케이션에서 기능을 확장할 수 있음(ex. 최적화) 같은 IP 내에서 동작하는 애플리케이션을 구분짓기 위해 “PORT” 사용 IP = 아파트 PORT = 몇동 몇호 IP는 외우기 어렵고 변경될 수 있는 문제가 있는데, 이를 “DNS”를 등록하여 이 문제를 해결함 1. 인터넷 통신 인터넷에서 컴퓨터 둘은 어떻게 통신할까? 케이블로 연결되어 있으면 바로 요청(클라→서버), 응답(서버→클라)하면 됨 하지만 실제는 먼 거리도 통신해야 함 ⇒ “인터넷 망” 이용 복잡한 인터넷 망 수많은 노드(=서..
[CSS] Background 속성 작성 순서: The Order of the Background Shorthand Property Background 속성 작성 순서 background의 속성 중 여러 속성을 모두 사용하는 도중에, background만을 사용하여 한 줄로 합치고 싶었다. background-image background-size background-position background-color background-repeat ... 다섯 가지를 섞어서 background의 값으로 넣었는데 잘 안되어서 "The Order of the Background Shorthand Property" 검색어로 찾아보게 되었다. 결론적으로, When using the shorthand property the order of the property values is: 1. background-color 2. background-im..
점핏x삼성강남: 협업 잘하는 개발자 되는 방법 소개 강사 소개 유용태(테오) 시니어 웹 프엔 개발자 창업 - 6년 서비스 운영 경험 강의 소개 개발자가 되기 보다는 problem solver가 되자. 팁보다는 마인드를 중점으로 강의 좋은 개발자란 무엇일까요? 성장하면서 알게 된 개발의 가치관의 변화 좋은 개발자가 되기 위해선 당연히 개발을 잘해야 한다? 이론보다는 실전 할 줄 아는 것과 해내는 것은 다른 능력 구현을 잘하는 게 아니라, 높은 품질의 코드를 만들어내는 것이 중요하다 높은 품질의 코드는 생산성과 유지측면에서 매우 중요하다 단순히 구현하는 것을 너머 잘 유지가 되려면, 결국엔 기초로 돌아감 (기초를 잘 다져야 함) 예측가능한 퍼포먼스를 내는 개발자가 개발을 잘하는 개발자임 하지만 실전에서는 개발을 잘하는 것만으로는 충분하지 않더라. 사업과..
[TypeScript] Partial & Required / Record / Exclude & Extract Partial 제네릭 타입 T에 대해 기존의 타입은 유지하되, 모든 프로퍼티들을 Optional하게 변경함 type Partial = { [P in keyof T]?: T[P]; } 예제 필수 타입과 Optional 타입을 구분해서 사용해야 하는 경우에 응용하면 좋을 것 같다. type UserInformation = RequiredUserInformation & Partial; interface RequiredUserInformation { id: string; uid: string; name: string; } interface OptionalUserInformation { age: number; profile: string; phone: string; } Required Partial과 반대되는 개..
[Next.js 13] Image에서 auto width or height로 지정하기 width, height = 0 으로 주고, sizes는 100%나 100vw로 지정한다. 그리고 style로 width, height를 지정하면 된다(둘 중 하나를 auto로 지정)
[TypeScript] type이 없는 모듈을 사용할 때 발생하는 에러 해결하기 에러 원인: @rumess/react-flip-countdown은 type을 제공하지 않기 때문 해결 방법 방법-1 tsconfig.json에 noImplicitAny 를 추가하면 해결. "noImplicitAny": false noImlicitAny 암묵적으로 any 타입을 가지는 것을 허락하지 않음. false로 설정하는 경우? 기존 자바스크립트 프로젝트를 타입스크립트로 마이그레이션 하는 경우. 이를 제외하면 true로 설정하는 것이 좋다. 위의 이유에 따라서 noImlicitAny는 사용하지 않는 것이 좋다고 판단. 방법-2 node_modules/@rumess/react-flip-countdown/dist에 index.d.ts 파일을 생성하고, declare module '@rumess/react..
zustand: subscribeWithSelector로 subscribe하기 특정 state가 바뀌었을 때마다 어떤 action을 해야하는 경우 (subscribe), subscribeWithSelector 미들웨이를 사용하면 된다. subscribeWithSelector subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubscribe 사용법 미들웨어 사용 import { subscribeWithSelector } from 'zustand/middleware' const useDogStore = create( subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })) ) subscribe 작성 // 'paw'가 변경되었는지 감시..

반응형