B41 TIL Blog

함수형 프로그래밍

함수형 자바스크립트 책 읽으면서 정리하기 함수를 쓴다고 함수형 프로그래밍은 아니다. 함수를 통해 데이터 흐름 제어와 연산을 추상할 수 있게 구현 사이드 이펙트(부수효과)를 방지하고 상태 변이를 감소(Immutableity)시킴 함수형 프로그래밍은 선언적(declarative) 프로그래밍 ...

웹에서 Apple 로그인 흐름 (백엔드와 함께)

들어가기 이전에도 애플 로그인을 구현할 때 세팅하는 부분 때문에 애를 먹었지만, 이번에 다시 애플 로그인을 구현하면서 문제가 발생 문제는 기존 애플 로그인에서 사용하던 서비스 아이디 세팅 그대로 기존과 다른 서버의 API에 애플 로그인 결과 토큰을 보냈더니 에러 발생. 그 서버에서 사용하는 애플 로그인 세팅으로 바꾼 후 URI, Redi...

Object에 특정 항목 삭제하기 (+destructuring)

문제 key a는 1, key b는 2, key c는 3… 이렇게 많은 숫자가 연속적으로 커지는 객체가 있다고 생각해보자 여기에서 key a, b 부분을 빼고 나머지 값만 있는 객체를 새로 하나 만들고 싶다 그럼 어떻게 하면 좋을까? 라는 문제에 답변을 못해서 정리… 먼저 mdn에서 살펴보기 delete라는 연산자가 있...

Array.reduce() 활용하기

들어가기 회사에서 프로젝트를 진행하면서 Array.map()을 주로 사용하고 있다. 다른 개발자 분께서 Array.reduce()를 많이 쓴다고 하시는 걸 들었는데, 보통 누적 값의 합을 계산할 때 쓰는게 아닌가? 라고 생각하다 다른 여러 활용 방안이 있다는 것을 알게 되었다! 정리하자! +_+ 먼저 Array.reduce() m...

Next.js 13 새로운 점!

Next.js 13 새로운 점! 들어가기 Next.js 13이 새로 발표되었다! (는 이야기를 CTO님께 전해 들었다.) 간단하게 바뀐 점을 확인! app/ 디렉토리 기존 Next.js에서는 pages/폴더를 통해 간단하게 라우팅을 할 수 있었다. 새로운 13버전에서는 app/폴더를 같이 사용할 수 있다. (베타 버전) ...

이미 올려버린 커밋 작성자 바꾸기, safari에서 `overflow:hidden`이 적용되지 않는 현상...

이미 올려버린 커밋 작성자 바꾸기 들어가기 집 컴퓨터로도, 회사 컴퓨터로도 열심히 랜딩 페이지 작업을 했다. 이제 모든 작업이 끝나고 메인 브랜치에 merge하려고 하는데 git history에… 내 개인 계정이 올라와 있는 것이다…(헉) 그래서 열심히 검색해서 커밋 작성자(author)를 바꾸고 메인 브랜치에 성공적으로 머지했다....

git 브랜치 관리할 때 merge와 rebase의 차이

들어가기 회사 프로젝트 진행 중 일부 프로젝트에서 협업할 때 merge를 쓰지 않고 rebase를 사용해서 브랜치를 관리하는 것을 봄. 기존 프로젝트를 할 때 merge만 사용했으므로 rebase를 사용하는 이유에 대해서 궁금해짐. merge와 rebase의 차이 merge는 새로운 커밋의 가지가 분기되어서 열심히 쌓이다가 나중에...

경로에 따라 움직이는 애니메이션 구현

들어가기 주로 백오피스 개발을 담당하다가 팀에서 개발한 다른 제품의 랜딩페이지를 제작하게 되었다. 디자이너님이 준비해 주신 예쁜 애니메이션들 중에 비행기가 날아가는 애니메이션이 있었다. 정해진 경로대로 날아가는 애니메이션을 구현하기 위해 SVG 벡터 경로를 활용하기로 한다. 선을 그려주는 SVG ARTISTA는 회사의 다른 동료 분께...

JSDoc

JSDoc 주석 및 타입을 적어두고 보여주는 기능을 함. 해당 주석이 달린 함수를 사용하는 부분에 IDE에서 마우스를 올리면 써 두었던 주석이 출력됨 /** 내용 */ @~~~로 속성을 알려줄 수 있음 @type {string} 타입 @todo 할 일 @deprecated 주석 달린 함수 취소줄 그어짐 Refere...

[JavaScript] Array 역순으로 출력하기 (Array.reverse)

Array.reverse 테이블 내용을 역순으로 출력하기 위해 검색 array 배열 .reverse() 를 사용해서 역순 출력 ``` const array = [1, 2, 3]; const reverse = array.reverse(); console.log(reverse, ‘reverse’); // output : [3, 2, 1], ...