개발하는 리트리버

하나의 일감을 진행할 때마다 깃 브랜치를 새로 따서 작업을 진행한다.

여유 있을 때는 일감을 끝내고 바로 브랜치를 지워주지만

일감이 밀리고 바쁜 시기에는 매번 지워주지 못하는 경우가 생긴다.

그러고 나면... 브랜치들이 여러 개씩 쌓여 있다.

git branch -D branch1001 ......  벌써 어지럽다

하지만 프로출신 개발자들은 명령어 한줄로 

깔끔하게 원하는 브랜치들을 지워버린다. 

오늘의 코딩 비기 제1장🌟

$ git branch -D `git branch --list 'branch*'`

git branch -D 이후에 ` ` 값을 이용하여 삭제할 브랜치를 변수로 지정할 수 있다.

이 변수로 git branch --list 를 활용하는 것, list 뒤에는 어떤 형식의 브랜치를

삭제해 줄지 정하면 된다.

해당 부분에 값을 넣으면 아래와 같이 된다!!

그럼 위에 노란 명령어를 실행하면~?

깔~끔하게

branch로 시작하는 모든 브랜치를 삭제해 준다.

고로 main 브랜치 하나만 남는다.. 진짜 미뗬다..

물론 어떤 일정한 형식이 있는 브랜치 그룹만

해당 방식으로 쉽게 지울 수 있다.

그럼.. 일정한 형식이 없다면,,?

오늘의 코딩 비기 제2장🌟

겁나 빠른 노가다 타이핑 두다다다다다다다다다닫

끝.

프로출신 개발자들의 도움 : https://stackoverflow.com/questions/3670355/can-you-delete-multiple-branches-in-one-command-with-git

(크롬 기준) 한번 로그인 하면

다음 부터 해당 페이지 진입 시에 아이디와 비밀번호를 채워준다.

사용자 입장에서는 너무 좋은 기능이지만

개발입장에서는 라벨 컨트롤 등의 이유 때문에

조금 귀찮을때가 있다.

이럴땐 가볍게

autocomplete를 꺼주면 된다.

하지만 공식 홈페이지에 이런글이 있다.

헉 그러면 무조건 자동 완성 되야한단 말인가..?

대신에

autocomplete="new-password"

가 있다.

이를 활용하면 로그인 페이지 렌더링시에

아이디와 비밀번호 칸에

바로 값들이 채워지는 것을 막을 수 있다.

물론 저장된 값을 클릭해서 채우는건.. 막을 수 없다.. (칙쇼.,.)

autocomplete 값에

on/off 사용시 끄고 키는 용도이고

다른 텍스트 값이 오는건 브라우저에게

무슨 값이 있을지 힌트를 주는 느낌이라고 한다.

new-password 설정 시

'나 새로운거 쓸거다?'

라고 이야기해주는 것이기에

자동으로 칸을 채우지 않는다고 한다.

참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

혹시 자동완성되는 값들을

프런트에서 캐치할 수 있나..... 찾아보는 중이다.

SOS

화면을 한번 클릭해야

해당 state 값들에 적용되고

버튼 disable 조건이 발생하는 등

한박자 늦게 로그인 페이지가 움직이는 문제가 있다..

어질

오늘도 제 입맛대로 정리하는 

(js와 친근한 내용만ㅎ)

vscode 업데이트!

바로 드루가시죠.

1. Activity Bar 위치 이동 설정 추가

기존 왼쪽에 붙어있는 일명 activity bar,

상단으로 옮길 수 있다는 사실을 알고 있었나요?

이번에 추가적으로 하단으로도 이동이 가능하다고 하는군요!

근데.. 확실히 뭔가 어색해요..

저건 그냥 왼쪽에 붙어있는 게..

2. source control에서 부분적 revert 추가

해당 탭에서 변경된 파일을 누르면 이제 변화를 부분적으로 수정할 수 있는 버튼이 추가되었어요

이렇게 차이를 비교하는 두 개의 윈도우 사이에 버튼이 생겼어요!

앞으로 이전의 코드와 좀 더 손쉽게 비교하고 수정할 수 있을 것 같아요.

3. VScode에  Typescript 5.4 버전이 반영

자세한 5.4 버전 내용은 하단에!

https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/

4. markdown 작업 시 이미지 추가 간소화

마크다운 작업할 때 이미지를 좌측 파일 목록에서 바로 끌어올 수 있게 되었어요!

오우 살짝 충격...

나중엔 그냥 js 파일에도 이미지를 끌어 쓰는 날이..?

조금 관심을 가지고 나니

vscode 도 계속해서 변화해가고 있는 게 느껴지지 않나요!?

우리의 IDE에게 소중한 관심 한 덩이씩 어떤가요~

텍스트로 검색하고 내용을 뽑아내는

구성은 많은 곳에서 볼 수 있다.

여기서 영어를 이용한 검색구현 시

단어 하나하나 체크하기에 쉬운 편이나,

한글로 똑같이 글자 하나하나 비교는 쉽지 않다. 

ㄱ, ㅏ ,ㄷ..... 이걸 언제 나누고 찾지..

그럴 때!

바로 이 라이브러리를 추천한다.

https://www.npmjs.com/package/hangul-js

해당 라이브러리는 한글을 다루기 좀 더 편하게 만들어준다.

// 라이브러리 설치
$ npm install hangul-js

// 페이지에서 import
import * as hangul from 'hangul-js';

Hangul.disassemble('아이유'); // ['ㅇ','ㅏ','ㅇ','ㅣ','ㅇ','ㅠ']

위처럼 '아이유'로 묶여있는 한글을

[ㅇ, ㅏ, ㅇ, ㅣ, ㅇ, ㅠ ]...로 분리해서 배열을 리턴해준다. OMG...

추가적 기능은 아래와 같다.

분리

Hangul.disassemble('이런', true); // [['ㅇ','ㅣ'],['ㄹ','ㅓ','ㄴ']]
Hangul.disassemble('이런'); // ['ㅇ','ㅣ','ㄹ','ㅓ','ㄴ']

병합

Hangul.assemble(['ㄱ','ㅏ','ㄴ','ㅏ','ㄷ','ㅏ']); // '가나다'

검색

Hangul.search('안녕하세요','안'); // 0
Hangul.search('안녕하세요','궈'); // -1

이렇게 3개의 기능 외에도

완성된 글자인지, 자음인지 모음인지, 종성으로 쓰일 수 있는지(이런 것까지..?) 등의

기능을 제공해 준다. 위에 링크로 들어가서 한번 확인해 볼 것을 추천한다!

다음 번에는 이를 활용하여 직접 검색기능을 한번..!

Warning 은 아래와 같다.  " " 속의 주소는 상황마다 다를 듯싶다.

Image with src "/_next/....." was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

프로그램을 돌리는 데에 큰 문제는 없지만, 저 에러가 계속 콘솔창에 떠 있는 건 두고 볼 수만은 없다.

내용은 " 저 주소의 이미지는 LCP야!! 첫 화면에 보이는 이미지라면 priority 특성을 추가해! "

LCP

Largest Contentful Paint의 약어로 웹의 성능을 측정하기 위한 대표적인 지표입니다.

페이지가 처음 로드를 시작하고 나서 화면 내에서 가장 큰 콘텐츠가 렌더링 되는 시간을 의미합니다.

측정 방법은 여기서 간략히 알아보기도 했다! ( https://choq.tistory.com/19 )

해결하기

이는 해당되는 이미지가 화면 내에서 용량을 많이 차지하고 있음을 뜻한다.

이에 priority 특성을 추가해서 로드할 순서의 우선권을 해당 이미지에게 주면 해결!!!

그러면 Nextjs가 해당 우선도를 파악하고 의미 있는 부스트를 보여준다고 한다.

https://nextjs.org/docs/pages/building-your-application/optimizing/images#priority

방법은 Next 이미지 태그에 priority를 추가해주기만 하면 된다. 

 크롬 개발자 창에서 [네트워크] 탭에서 priority 추가해 준 이미지 요청 순서가 빨라진 것을 확인해 볼 수 있다!!

추가적으로 'above the fold'라는 말이 사용되었는데, 이는 처음 보여주는 뷰포트 상태를 말한다.

딱 처음 렌더링 될 때 뷰포트에 있는 이미지에 해당되는 건이기 때문이다.

참고로 이 말은 신문에서 접는 선 위로 처음 보이는 부분을 의미하는 것에서 따왔다고 한다.

해당 우선순위로 다른 컴포넌트 렌더링이 걱정된다면 이미지 자체를 최적화하는 수밖에 없을 것 같다.

sharp library 설치하거나 layout, sizes 등의 props 등을 사용해서 최적화할 수 있겠다.

특히나 layout = 'fill' 일 때 따로 설정되어 있지 않으면 100vw 기준으로 이미지를 불러오기에

사용 크기에 비해서 너무 큰 이미지를 불러오는 등의 일이 있을 수 있으니 한번 체크해 보면 좋을듯하다.

어떤 로직으로 짠 코드가 더 빠른가.

개발자에게 흥미를 유발시킬 수 없는 소재 아닌가. 두근두근

코딩테스트를 준비 할때도 알고리즘에 따라

속도를 비교할 수 있는 좋은 방법이지 싶다.

두 가지 방법을 소개할 예정이다.

EZ 버전과 쌈뽕한 버전.

console.time()  console.timeEnd() 사용하기

위 처럼 해두고 node ${파일명} 해주면

얼마나 걸렸는지 빠르게 보여준다.

Benchmark js 사용해보기

좀 쌈뽕한 방법이다. 

바로 benchmark js 를 사용해보는 것

설명을 그대로 변역해보면

"고해상도 타이머를 지원하고 통계적으로 중요한 결과를 반환하는 강력한 벤치마킹 라이브러리"

이다.

야무지게 비교해준다고 한다.

사용방법은 

npm install benchmark 로 다운받아주고

아래와 같은 코드를 돌리면 끝!

const Benchmark = require("benchmark");
const suite = new Benchmark.Suite();

suite
  // 비교함수 A
  .add("convertAndAdd", function () {
    convertAndAdd("123", "123");
  })
  // 비교함수 B
  .add("digitByDigitAddition", function () {
    digitByDigitAddition("123", "123");
  })
  // Add listeners
  .on("cycle", function (event) {
    console.log(String(event.target));
  })
  // 끝나면 아래와 같이 결과 표시
  .on("complete", function () {
    console.log("Fastest is " + this.filter("fastest").map("name"));
  })
  //  Run asynchronously
  .run({ async: true });

.add 를 통해서 함수를 추가해준다.

.on('cycle') 은 listener 역할을 하고 끝나면 결과를 표시해주는 역할을 할 수 있다.

.on('complete') 는 전체 비교가 다 끝나고 결과를 보여준다. this는 객체로 비교 함수들 각각의 값을 가지고 있다.

위의 결과를 보면

두 함수의 속도를 매우 자세히 확인해준다.

timeEnd 보다 시간은 조금 걸리지만 괜히 좀 더 믿음이 가는 결과물이다.

좀더 정밀한 방법이 꼭 필요할 때 Benchmark 라이브러리가 유용하게 쓰이지 않을까 싶다!

Warning: Cannot update a component (`A`) while rendering a different component (`B`).

To locate the bad setState() call inside `B`, follow.....

 와 같은 귀여운 에러 해결하기!

 일단 에러에 답이 있다. A의 상태를  B를 그리고 있던 중에 변경하려고 하면 에러가 난다! B에 적절하지 못한 setState() 있다고 주장하고 있다.나의 경우는 아래와 같았다.

위 같은 구조에서 B를 렌더링 할 때 B 쪽에서, 

조건에 따라 A 페이지의 setState() 값을 변경하는 부분이 들어있던것!! 

setState() 값을 변경하면 또 렌더링 되는 건 알고 있죠?!

B렌더링 중에 A의 값을 변경하면 A가 또다시 렌더링 되는....

듣기만 해도 벌써 WARNING이 가득해 보이죠?

해결 방법은 2가지라고 봅니다. 

1. A에서 해당 부분에 대한 계산을 미리 해서 최종값만 B로 보낸다.

2. B에서 렌더링이 된 이후에 useEffect 등 의 방식으로 값을 바꿔준다.

저는 첫 번째 방법으로 해결했습니다.

해당 조건을 A로 가지고 와서, 조건을 다 해결하고

필요한 값만 B에 넘겨줘서 렌더링 하게 끔 수정하였습니다!

각자의 컴포넌트 상황을 보고 해결하면 될 듯합니다!

XCode를 빌드한 상태로 오래두다가,

한번씩 업데이트나 이런걸로 껐다 키면

새로운 에러를 만나게 된다. 일상이다

이번에는 Flipper 관련 에러가 나왔다...

 'facebook::flipper::SocketCertificateProvider' (aka 'int') is not a function or function pointer

역시 에러문구는 언제봐도 어지럽다

찾아보니 따끈따끈한 문제였다

SOS 현장 : https://github.com/facebook/react-native/issues/43335

해결책은 아래와 같다.

https://github.com/facebook/flipper/commit/b3dcdb87f930dbbc9dbacb53ad60996e0111e7d8

새로운 버전에서 돌리려면

해당 라인을 추가해야 한다고 말해주고 있다.

해당 파일에 

#include <funtional> 

을 추가해주면 된다!!

해당 파일 주소는 아래와 같다.

ios / Pods / Flipper / FlipperTransportTypes.h

오늘도 Xcode와의행복한 쎄쎄쎄

xocde 에서

ios 시뮬레이터 빌드 시 위와 같은 에러가 나왔다.

해결책을 제시해 준 블로그는 많았지만 좀 처럼 

나의 케이스는 없었나 보다.. 효과는 없었다.

하지만 결국...

 멋쟁이 형님들이 있는 stack overflow 를 통해 문제를 해결할 수 있었다.

https://stackoverflow.com/questions/63607158/xcode-building-for-ios-simulator-but-linking-in-an-object-file-built-for-ios-f

Targets > Build Settings 에 들어가서

Architectures > Excluded Architectures 부분에

any iOS Simulator SDK  arm64를

아래 처럼 추가하면 된다.

그리고 빌드를 돌리면 잘 돌아간다...!!

진짜 말도 안되는 해결책..

혼자서는 백만년 머리 박아도 도저히 못찾아낼 해결책이다.

그저 갓오버플로우.. 

그럼 왜 이 해결책이 내게 해당되었는지 정도라도 알아보쟈!

문제의 원인은 호환성 문제였다.

사용하는 라이브러리 중에

m1과는 호환이 아직 되지 않는 것이 있었던 것 같다.

그래서 intel 만...되었던것

그래서 arm64를 Excluded 시켜버리고 나서부터는

정상적으로 앱이 실행되었다. 

문제가되는 라이브러리를 업데이트하는게 이상적이지만,

그럴 수 없을때는 이런 방법을 사용하라고 공식적으로도 이야기하는 것 같다.

https://developer.apple.com/documentation/technotes/tn3117-resolving-build-errors-for-apple-silicon#Update-pre-compiled-libraries-from-vendors

진짜 Xcode 는 정이 가지 않는다....

계속 보면 볼매..일지도.. :(

조용하다 싶으면 다시 터지는 

너 M1 이자나 ㅋㅋ

에러 또한.. 상당히 마음을

옹졸하게 만든다

직업상 계속 책상에 앉아서 컴퓨터만 바라봐야 합니다..

물론 개발자 뿐만 아니라 많은 대한민국 회사원들이 흐극

이벤트로 다녀온 거북목 테라피에서

어깨 쪽이 많이 굳어 있고 어쩌구...

건강하게 오래 행복하게 살기위해서

열운동 해봅시다 여러분 :)

그렇기에 집앞 복합센터에 있는 헬스장에 다니다가

좋은 기회가 있어서

고객참여단으로

활동하게 되었어요.

그래서 여기에 조금씩 내용을 남길꺼에요 ㅎ

아마 홍보겸 헬스하는 방식들에 대해서

가볍게 다루어보지 싶어요. 물론

전문가가 절대 아닙니다!!

그냥 아하~끄덕 정도만! 

서울숲복합 문화센터에는

이런 기구도 있고, 어떻게 하고

또 어떤 효과를 볼 수 있는지 정도에 대해서 정도만요!

그럼 앞으로 조금씩 올려볼게요

아래는 야밤에 찍은

서울숲복합문화체육센터  랍니다~