[CSS] - visibility VS display 애니메이션 적용 차이  어떻게 해야 더 깔끔하게 코드를 작성할 수 있을까? 공부중 다른 개발자분의 드롭다운 메뉴 CSS 코드를 보게 되었다. 여기서 지나칠 수 있었지만 나는 드롭다운 메뉴를 구현할 때 display(block, none)를 이용해 작성하는데왜 이분은 visibility(visible, hidden)를 사용할까? 라는 의문을 계기로 코드를 동작시켜보며 알게된 내용을 공유하고자 포스팅하게 되었다. Display우리가 흔히 사용하는 display 속성은 요소를 어떠한 형태로 나타나게 할 것인지를 말하는 속성으로 4가지가 있다.display : blockdisplay : inline-blockdisplay : inlinedisplay : no..

input type="submit" VS button type="submit"   강의를 들으면서 공부 중 제출 버튼을 구현하는데 button이 아닌 input에 type을 submit으로 지정해서 버튼을 구현하는 모습을 보고 궁금증이 생겼다. 결론적으로는 둘 다 사용가능하지만 button을 더 많이 사용합니다. 기능적 차이는 없을까?폼 전송 기능을 담당하는 과 은 기능적으로 동일합니다.기능적으로는 button에 type을 명시하지 않으면 기본적으로 submit을 실행하기 때문에 form에서 사용하기에 딱 입니다. Button의 type 속성값브라우저별 기본 button 요소의 기능이 다를 수 있기 때문에 꼭 넣는걸 추천합니다.- type="submit" : 폼의 전송 기능을 담당합니다.- type="..

3D 애니메이션 구현 (backface-visibility, perspective)완성본 배운점요소 회전 시키기 (동전 뒤집기)요소를 회전시켰을 때 원근감이 느껴지도록 하려면 rotate와 perspective를 함께 사용해야 합니다.스타벅스 배지가 실제로 이미지에 붙어 있는 것 같은 효과를 주기 위해 회전 효과가 필요했는데 rotateX 뿐만 아니라, 다음처럼 스크린을 감싸는 부모 요소에 perspective라는 프로퍼티를 추가해줘야 했습니다.그 이유는 perspective가 원근감을 결정하기 때문! 1.  초기 모습, 코드 앞 뒤     2. absolute- front에 absolute를 넣어 부모 요소를 기준으로 배치해줍니다..container .item...

RSC VS SSR 무슨 차이가 있을까?   포스팅 하게 된 계기 유튜브에서 프론트관련 영상을 보던중 RSC라는 단어를 처음 들어서 검색하던 중 React와 관련된 내용인데 React를 사용하는 입장에서 처음 들어보는 단어이기에 흥미가 생겨 찾아보기 시작했습니다. 필자는 Next.js App router를 사용해 프로젝트를 진행해본 경험이 있습니다.App router를 사용해본 사람은 'use client'를 무조건 보고 사용해 본 경험이 있을겁니다. 이러한 지시어가 RSC에서 온 개념 생기면서 나오면서 생긴 기능이라는 말이 흥미로웠습니다. React18에서 새롭게 등장한 가장 핫한 기능인 React Server Component(RSC)에 대해 작성해보겠습니다. React Server Component..

JavaScript Array.fill()의 함정 (참조 타입과 원시 타입의 차이)  작성 배경DFS, BFS와 같은 그래프 알고리즘을 구현하면서 2차원 배열을 만들어 초기화하는 경우가 많습니다.특히 인접 리스트를 만들거나 방문(boolean) 배열을 초기화할 때 충분히 만날 수 있는 문제라고 생각합니다. (그게 바로 저..)  사전 지식JavaScript에서 데이터 타입은 크게 두 가지로 나뉠 수 있습니다.1. 원시 타입- Number, String, Boolean, null, undefined 등- 값 자체가 복사됨2. 참조 타입- Object, Array 등- 메모리 주소가 복사됨 예시 코드// 1. 원시 타입 예시const 원시타입배열 = new Array(3).fill(false);원시타입배열[..

[트러블 슈팅]React Suspense + TanStack Query 무한루프 문제 해결하기  게시글 리스트를 Tanstack Query에서 제공하는 useInfiniteQuery를 사용해 무한 스크롤을 구현했습니다. 그러면서 당연하게 로딩과 에러 처리를 쉽게 도와주는 isLoading, isError를 사용해서 관리를 해야겠다는 생각을 했습니다. isLoading, isError를 사용하게 되면 아래와 같이 명령적 데이터 패칭 방식을 사용합니다.// useQuery 부분은 공식문서 코드를 예시로 가져왔습니다!const { data, isLoading, isError } = useQuery({ queryKey: ["super-heroes"], queryFn: getAllSuperHero,});if ..

코딩 테스트 문제를 풀다보니 다른 사람의 코드에서 어떤 사람은 parseInt 어떤 사람은 Number를 사용하는 모습을 보고(필자는 주로 Number 사용) 무슨 차이점이 있는지 공부해 봤습니다. 한국인을 위해 결론을 먼저 말하자면둘 다 문자열을 숫자 형태로 변환시킬때 사용합니다.parseInt()는 문자열 형태에 있는 숫자를 숫자(정수)만 뽑아서 변환해주는 기능이 있고Number()는 문자열 전체가 숫자일 때 소수점까지 가져오는 기능이 있습니다. parseInt() 기본 형태parseInt(string, radix); // radix는 진수의미 (2진수, 10진수) 문자열 타입의 매개변수를 정수로 리턴해주는 함수 입니다.  Number() 기본 형태Number(값); Number()는 인자로 들어온 ..

들어가기 앞서..처음 프로젝트를 배포하고 중간 피드백을 받았습니다. 약 50명의 부트캠프 동료들과 실제 직원분들께 유저 테스트를 진행했고, 그 결과 "검색 시 로딩 상태가 불편해요", "페이지 전환할 때 깜빡임이 있어요", "에러가 났을 때 어떻게 해야 할지 모르겠어요" 등의 피드백을 받으면서 코드가 '동작하는 것'과 '잘 동작하는 것'의 차이를 실감했습니다. 더 나은 서비스를 만들기 위해 Next.js와 Tanstack Query를 공부했고 최적화 관련 강의를 들으면서 선언형 프로그래밍, 체계적인 에러 처리, SSR 등 다양한 기술을 접하게 되었고, 프로젝트에 적용해 보기로 했습니다. 단순히 기능만 동작하는 코드가 아닌, 유지보수 하기 좋고 사용자 경험도 개선된 서비스를 만들기 위해 아래와 같은 최적..

Next.js App Router + NextAuth.js authOptions 오류 해결    상황Next.js App Router + NextAuth 강의를 들으면서 마지막에 빌드 & 배포 부분을 공부하는 중yarn build를 하니까 아래와 같은 에러가 나와서 스택 오버플로우랑 깃허브, 블로그를 아무리 뒤지고 바꿔도 해결이 안됐는데 정답을 알고나니 허무해졌지만 다른분들은 나와 같은 고민을 안겪게 하고 싶기 때문에! (다 아실수도,,,) 이유아래 코드를 보다시피 authOptions를 따로 만들어줘서 NextAuth의 인수로 넣어주고도 있고 export해서 내보내주고도 있다.nextJs 13.4+ 에서는 /app/api/auth/[...nextauth]/route.ts는 route hanlder을 이..