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

개요현재 사내에서 진행 중인 프로젝트 CSVtoHex를 개발중이다. 해당 프로젝트는 회사 자제 솔루션 제품에 들어가는 CSV 파일을 Hex로 읽을 수 있는 프로그램을 만드는 것이 목적이다. 프로젝트 기능 명세는 아래와 같으며 오늘 구현했던 것은 CSV 파일 업로드 기능 그리고 변환 없이 다운로드 되는 과정을 구현해보려고 한다.  기능 세부 사항으로 쪼개기우선 이 기능의 목적을 기억하자. 파일을 업로드하는 기능이라는 것. 여러 방법이 있겠지만, 나는 크게 두 가지로 분류했다.파일 업로드 기능 구현하기"업로드" 버튼 혹은 이 기능을 하는 요소를 통해 파일 업로드하기drag&drop을 통해 파일 끌어와서 업로드하기업로드 한 파일 값 보여주기그리고 기본적인 UI를 만들어주었다. ..

개요사내에서 진행 중인 프로젝트에 CSV 파일을 읽어들여서 데이터를 변환하는 프로그램을 제작 중이다. CSV 파일 내용을 가져와서 변환된 모습을 보여주어야 하기 때문에 내가 가장 보편적으로 다루는 형태로 내용을 가지고 있어야만 했다.가장 많이 쓰는 형태, JSON프로젝트를 하면서 가장 많이 쓰이는 데이터 형태가 어떤 형태일지 생각해보니, 객체 형태라는 것이 가장 많이 떠올랐다. 서버로 부터 데이터를 받았을 때도, 혹은 여러 정보를 하나의 객체로 표현할 때도 JSON 모양으로 받아오는 경우가 가장 많았고 이를 사용하기로 했다. 어떤 것을 고려해야할까?해당 파일의 샘플은 아래와 같다. 이 파일의 내용을 문자열 형태로 받을 것이다. 아직 진짜 파일 업로드 기능을 구현한 것은 아니기에, 파일..

개요지난 9월 UNITHON 10회차가 끝나고,회고록은 작성했지만 사용했던 기술에 대한 설명이 부족하다고 느껴져 작성하게 되었다.기획서는 여기를 참고하면 될 것 같고,지금부터는 내가 맡은 부분인 지도 부분을 어떻게 활용했는지 작성해보려고 한다. 기능 쪼개기우선 내가 하고자 하는 기능을 하나의 퀘스트를 깬다 생각하고 작성해보았다.그랬더니 아래와 같이 정리할 수 있었다.우리의 주 목적은 지도를 활용해 내 최애가 다녀간 장소,최애의 맛집 혹은 최애의 생일을 축하 할 수 있는 생일 카페에 대한 정보를 제공하는 것이다.나는 이 지도를 활용해 사용자에게 정보를 제공해야한다. 지도를 화면에 띄웁시다!첫 번째, 지도를 화면에 띄우기 위해 지도 API를 활용해야했다.네이버 지도, 구글 지도.. 등 다양한 지도 API가 ..