지난 시간에는 Closure의 원리를 이용해 useState를 간단하게 구현해보았다.이번주에는 조금 더 깊이 있게 들어가보려고 한다. useMyState 여러개 사용하면 정상적으로 동작하지 않는다?!우리가 지난 시간에 만들었던 useMyState를 여러개 사용하게 되면정상적으로 동작하지 않는 모습을 확인할 수 있다. // ... 생략function Component() { const [count, setCount] = React.useMyState(1) const [text, setText] = React.useMyState('apple') return { render: () => console.log({ count, text }), click: () => setCount(count + ..

1. Closure란 함수가 선언 될 때, 렉시컬 환경을 기억해 함수가 해당 스코프 밖에서 실행되어도 그 환경에 접근할 수 있는 현상이다.2. Closure의 핵심원리는 내부 함수의 생명주기가 끝났음에도 외부 환경의 변수에 대해 참조가 가능하다는 것이며 이를 활용해서 useState를 구현할 수 있다.3. useState를 통해 데이터를 관리하고 유지할 수 있다. 배경이번 면접의 사전 과제에서 Closure에 대한 개념과 어떻게 쓰이는지에 대한 내용을 작성하였다.그리고 사전 과제를 기반으로, 기술 면접 진행 과정에서 useState를 구현하는 시간을 가졌다.Closure을 아는 것에서 나아가 어떻게 활용되는지에 대해 추론해볼 수 있는 기회가 생겨 뜻깊었고,이를 떠올려보면서 최대한 기록해보려고 한다. Ja..

글또를 시작하기 전 회고글을 적는걸 좋아했지만, 항상 적고 나면 아쉬웠다. 내가 적은 글이 잘 적은 글일까? 부족해보이진 않을까?와 같은 생각을 늘 했고, 글을 잘 적는 사람이 되고 싶었다. 여기서 말하는 잘 적는 글이란 많은 기준이 있겠지만, 3가지 정도만 꼽아보자면 조금 더 깊은 생각을 할 수 있는 글다양한 방향으로 생각이 넓혀지는 글가독성이 좋은 글이 정도로 정리할 수 있다. 글을 작성하면서 가독성은 어느정도 개선이 되었지만, 아직까지 깊은 생각을 이끌어낼 수 있는 글을 작성해보지는 못한게 아쉬웠다. 그리고 늘 저장된 글만 여러개 있고 세상 밖으로 나오지못한 글이 많아서, 이번 기회를 통해서 작성해보고 싶었다.글또를 참여하게 된 계기이 부분은 내 가치관과 관련있다고 말할 수 있다. 요즘, 내 가치관..

👉 서론이 조금 길어요! 이력서 작성법이 궁금하신 분들은,이력서 작성법 부터 읽어주시면 감사하겠습니다. 개요개발과 관련된 다양한 강의를 제공해주는 인프런에서는매년 인프콘을 개최해 다양한 세션과 네트워킹을 할 수 있는 자리를 마련해준다.아직 프론트엔드 주니어인 나는 개발을 잘 하고 싶은 마음이 커서이에 대한 조언을 얻을 수 있는 좋은 기회였다.그래서 인프콘에도 너무나 참여하고 싶은 마음이 컸는데, 아쉽게도 매년 떨어졌다.(올해도 역시나 ..)  다른 때보다 유독 올해는 더욱 속상했던게,나랑 여동생이랑 둘 다 지원을 했는데, 나만 떨어졌다는 것이다..(얄밉게 자랑하고 갔다...)아쉬운 마음에 인프콘 페이지만 계속 새로 고침하고 있었고,열심히 듣고 싶어서 짜낸 시간표만 애써 바라보고 있었다.   인프콘 20..

개요현재 진행 중인 개인 기술 블로그 제작 프로젝트를 진행하면서Next.js + Typescript와 tailwindCSS를 사용하게 되었는데,tailwindCSS가 먹히지 않는 문제가 발생했다. 이 문제가 해결되길 바라는 마음으로,또 나랑 똑같은 문제를 겪게될 사람들을 위해 글로 남겨본다. 문제의 발견어쩌다 이 문제에 대해 발견하게 되었냐면,Header와 Footer 컴포넌트 제작 후 레이아웃에 적용을 시켰을 때아무런 변화가 나타나지 않고 그저 이미지만 나타나는 것을 보고 알게 되었다. 정말 ... 놀랍게도 컴포넌트를 만들면서 아무런 의심을 못했다.왜냐하면 전체 레이아웃을 책임질 Theme의 구조를 뒤늦게 잡았기 때문에이 구조가 잡히면 해결 될 거라고 생각했기 때문이었다. 하지만, 구조를 잡았음에도 불..

Linking 그리고 NavigatingNext.js 라우터는 클라이언트 사이드 Navigation을 위한 서버 중심 라우팅을 사용한다.동시에 렌더링을 하거나 즉시 로딩이 가능하다. 이는 Navigation이 클라이언트 사이드 상태를 유지하며 비용이 많이 드는 재랜더링을 피할 수 있고, 중단이 가능하다는 것을 의미한다.  컴포넌트react의 태그를 확장하여 프리패칭과 라우트 간에 클라이언트 사이드 네비게이션을 제공한다.라우트 간에 이동하는 주요 방법이다. next/link로 부터 import해서 사용할 수 있다.import Link from 'next/link' export default function Page() { return Dashboard} a태그와 같이 herf속성을 사용하면 된다. 동적..

개요지난 글에서 Next.js의 대략적인 구조와, CSR과 SSR과 관련해서 이야기해보았다.오늘은 Rendering에 대해서 조금 더 본질적으로 파악해보려고 한다.Next.js 공식문서의 Rendering 파트를 참고하였다.그럼 시~작! Rendering이란?내가 작성한 코드를 사용자에게 보여주는 것.어떻게 렌더링 하느냐에 따라 SSR, CSR 방식이 있다.  우리는 오늘 렌더링 환경과 요청-응답 생명주기그리고 네트워크 바운더리에 대해 이야기해볼 예정이다. Rendering Enviromrnts : Client와 Server우리가 작성한 코드는 서버와 클라이언트에서 실행할 수 있다.Client : 브라우저에 요청한 서버 속 코드를 보여주고 서버에서 받은 응답을 사용자가 볼 수 있도록 전환한다.Server..

개요Vercel에서 만든 React 프레임워크 Next.js는 가면 갈수록 많이 사용되고 있다.지난 몇 년간 꾸준히 발전하며,이 추이가 계속되면 하루 아침에 Next.js가 앞서있을 것 같다고 생각도 했다.필자 또한 프론트엔드 개발자로서 기본적인 이해도를 높이고,제대로 사용해보고 싶어서 Next.js를 나만의 방식으로 파헤쳐보자는 결심을 하게 되었다.이 글은 Next.js가 처음이신 분들께 조금이나마 도움이 될 수 있을 것이라고 생각한다.  사전 지식 정리Next.js에 대해 이야기할 때면 항상 같이 있는 키워드가 있다. 바로, SSR(Server Side Rendering), CSR(Client Side Rendering)이다.이야기 하기전 키워드에 대한 정의를 바로 짚고 넘어가보도록하자.SSR은 초..

문자열 리터럴 타입 문자열을 하나의 타입으로 지정하여 사용하는 것. type selectedGroup = 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; const GroupFilter = ({ selectedGroup, setSelectedGroup, }: { selectedGroup: 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; setSelectedGroup: React.Dispatch; }) => { return ( setSelectedGroup('BTS')} > BTS setSelectedGroup('뉴진스')} > 뉴진스 setSelectedGroup('블랙핑크')} > 블랙핑크 setSelectedGrou..

타입 가드 Typescript에서 변수의 타입을 좁히는데 사용되는 메커니즘 사용자 정의 타입가드 타입 서술어 사용 function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } 보통 타입 가드는 isFish 와 같이 is를 많이 붙인다. is 는 타입 가드에서 사용되는 키워드이다. pet is Fish 파라미터(pet)가 실재 해당 타입(Fish)인지 구분하는 키워드이다. return (target as Developer).swim !== undefined 는 pet에 swim 프로퍼티가 있으면 Fish 타입으로 취급한다. interface Bird { fly: () => void; layEggs: ()..