전체 글

🚨 Delete `␍` 에러 로그 확인다른 사람이 작업하던 프로젝트를 이어받아 진행하게 되던 과정에서 만난 문제이다. 무사히 프로젝트를 설치하고, 개발환경을 켜서 수정하려고 하던 찰나였는데이게 뭘까? 코드의 모든 줄에 경고가 발생했다. 뭐 하기도 전에 왜 이러시는거에요?  모든 줄에 발생하는 경고는Delete `␍` eslint(prettier/prettier) 찾아보니 Mac OS에서 진행하던 작업을 Windows에서 실행시키게 될 경우 자주 마주하는 문제라고 한다.   원인은 개행 문자 방식의 차이, LF vs CRLF LF는 Line Feed를 의미하며 Unix 계열 시스템(Linux, macOS)의 기본 개행 방식이다.줄바꿈을 표시할 떄 LF(\n)를 사용한다. 반면, CRLF는 Carrage ..

React의 Hook 중에서도 성능 최적화를 위해 사용되는 useCallback 이전에 Hook들을 전부 다뤄본 적이 있음에도 막상 활용할 때에는 어려움이 있었다.(관련 포스팅 📜 [REACT] React Hooks 탐구하기) [REACT] React Hooks 탐구하기React HooksReact v16.8에서 도입된 새로운 기능함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 함이전에는 클래스 컴포넌트에서만 상태를 가질 수 있었음 클래스 기반 컴포넌트의 단s-ryung.tistory.com 정확히 어떤 때에 적용하는건지 프로젝트에서는 잘 떠오르지 않는다고 해야 하나?또 뭔가 성능 최적화를 위해 사용하는 것이다 보니까 '아 일단 일반 함수로 기능 만들고 나서 나중에 성능 챙기며 변환하자'라고..

본 포스팅은 인프런 강의한 입 크기로 잘라먹는 Next.js(15 +) - 이정환 Winterlood>의 내용을 기반으로 작성합니다 ✍ 한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | 한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다., [임베딩 영상]한 입 크기www.inflearn.com 데이터 캐시(Data Cache)fetch를 통해 서버로부터 불러온 데이터를 Next 서버에 보관하는 기능을 말한다.한 번 불러온 데이터를 영구적으로 보관하거나, 특정 시간을 주기로 갱신 시키는 것이 가능하다. 이..

본 포스팅은책 [코팅 테스트 합격자 되기: 자바스크립트 편 - 이선협, 박경록]의 내용을 기반으로 작성합니다 ✍️  이전에 DFS에 대해서는 따로 학습하고 포스팅을 작성한 적이 있지만, 여전히 코딩 테스트에서 만나면 어려움을 겪는다.어떤 문제를 만났을 때 DFS와 BFS를 활용해야 하는 지를 위주로 조금 더 풀어서 정리하며 이해해본다.  깊이 우선 탐색 (Depth-first Search, DFS)가장 깊은 노드까지 방문더 이상 탐색할 노드가 없으면 최근에 방문했던 노드로 되돌아 가, 아직 방문하지 않은 노드를 방문 1️⃣ 시작 노드 선정. 스택에 시작 노드를 푸시스택에 있는 노드는 아직 방문하지 않았지만 방문할 예정인 노드만일, 스택이 비었다면 이는 방문할 수 있는 모든 노드를 방문했음을 의미. 따라서..

이전에 한 번 딜레마를 겪었던 주제 "비동기" !!!! 비동기 함수인 async-await에 대해서 처음 학습하고 나서 자바스크립트의 비동기를 검색했다가 자바스크립트 엔진에 대한 이야기로 빠져서 '이걸 공부하려고 한 건 아닌데... 근데 연관되는 거 같긴 해... 근데 어렵네...😶‍🌫️' 여러 가지 생각을 하며 일단 학습했던 기억이 있다. 지금은 어느정도 각각에 대한 이론을 알고 있다고 생각하지만, 이를 말로 표현하려고 하니까 여전히 말문이 막힌다.말문을 강제로 트이게(?)하기 위해 포스팅을 통해 정리해 본다.  비동기 (Asynchronous)둘 이상의 객체 또는 이벤트가 동시에 존재하지 않거나 발생하지 않는 경우(또는 이전 객체 또는 이벤트가 완료될 때까지 기다리지 않고 발생하는 여러 관련 작업..

본 포스팅은 인프런 강의한 입 크기로 잘라먹는 Next.js(15 +) - 이정환 Winterlood>의 내용을 기반으로 작성합니다 ✍ 한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | 한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다., [임베딩 영상]한 입 크기www.inflearn.com   App RouterPage Router만 존재했던 전과 달리 Next.js 13 버전에서 완전히 새롭게 추가된 라우팅 방식 App Router이 변화로 인해 여러 가지 기능들의 변화가 생기거나 새로운 기능이 많..

이것은 나의 랜선 선생님인 정환님(winterlood)의 새 강의 오픈 소식을 듣고 부랴부랴 해보는 포스팅...! 이래 봬도 나는 정환님 강의는 나오는 대로 족족 수집하는 열혈 수강생이다.- 유데미 | 한 입 크기로 잘라먹는 리액트(React.js)- 인프런 | 한 입 크기로 잘라먹는 타입스크립트(TypeScript)- 유데미 | 프로젝트로 배우는 React.js & Next.js 마스터리 클래스3개 강의 다 소장 중....이란 사실 부트캠프에서 한입 리액트 강의를 하도 추천하고 다녀서 바이럴이냐는(...) 소리도 들었었고디스코드 커뮤니티에도 속해 있고, 오픈 카톡에도 속해있다.심지어 유데미에서 열린 라이브 세션도 참석했었다. 진짜 열혈 수강생 맞음  아무튼 때마침 정환님 새 강의 소식을 보게 돼서이 참..

왜 줄 바꿈이 적용되질 않는 거야?다음은 내가 만든 텍스트 입력 폼이다. 내용  를 이용해서 폼을 만들다 보면 매번 맞닥뜨리는 문제가 하나 있는데Enter 키를 쾅쾅 쳐서 위 이미지와 같이 긴 텍스트를 입력했는데도 불구하고값을 화면에 렌더링 하면 줄 바꿈이 공백으로 대체된다. {value} {/* textarea의 value 값 */}   이 현상에 대한 ChatGPT의 답변을 한 번 정리해 보았다. 사용자가 에서 줄 바꿈을 입력하면이는 텍스트 형태로 저장되면서 newline character(줄 바꿈 문자)로 표현된다고 한다.그리고 이 줄바꿈 문자는 운영체제에 따라서 `\n` 또는 `\r\n` 으로 저장된다고 한다.Unix/Linux, macOS: Line Feed(LF)로 표현. ..

책에 대한 이야기를 하기 이전에 배경을 설명하자면 나는 프론트엔드 개발자 취준생이다. 신입으로 발돋움하기 위하여 많은 개발자 취준생들이 그렇듯이 채용 공고를 보며 '아 이런 기술 스택을 요구하는구나', '이런 거 공부해야 하는구나' 하고 도움을 얻곤 하는데 여러 가지 중에서도 가장 생소하게 느껴지는 스택이 바로 테스트 도구였다. Jest, Cypress,... 어.. 뭐.. 조금은 알 것 같기도 한데 그게 뭔데? 내가 어떻게 공부해야 하는데? 어째 접할수록 막막하기만 했다. 어쩔 수 없이 후순위로 밀리면서 (실제로도 다른 스택들과 비교하여 우선순위가 낮긴 하다. 신입일 때보다는 연차가 있을 때 요구되는 경우가 잦았기 때문) 테스트에 대해서 알아가기 어려웠는데, 이 때 접하게 된 것이 아래에서 소개할  입..

Supabasehttps://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com Supabase는 데이터베이스와 API를 쉽고 간단하게 구축할 수 있는 severless DB 솔루션.PostgreSQL을 데이터베이스 엔진으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있다. "Supabase is an open source Fireba..