첫날 프론트엔드 심화과정에 참여한 나는 사실 기대 반, 걱정 반이었다. 특히 Next.js 라는 녀석은 이름은 많이 들었지만 제대로 파고 들면서 학습해본 적이 없어서 더욱 그랬다.역시나 첫 수업부터 쉽지 않았지만, 정리를 해보면서 기록으로 남기려고 한다. 1. 왜 Next.js를 배워야 하는가?항상 어떤 프레임워크나 라이브러리를 고르기 전에 응당 해야하는 질문이었다고 생각한다.그렇지만 이전에 내가 React를 선택했을때에는 지인의 추천, 그리고 사용하다보니 편해서가 주된 이유였다.그래서 편했다는 이유 외에 굳이 왜 ? 라는 질문에는 현재도 대답하기 힘들다.그렇지만 이번 멋쟁이 사자처럼 프론트엔드 심화과정은 왜 Next.js를 배워야 하는지 부터 수업을 진행했고, 그에 대한 이유를 어느정도 이해하게 되었다..

1. 프롤로그많은 사람들이 하는 회고록, 하지만 단순히 유행처럼 따라가는 것이 아니라, 꼭 해야만 할 것 같고 또 하고 싶어서 시작해보려 한다.누가 이 글을 보게 될지는 모르겠다. 하지만 나는 이곳에서 하고 싶은 말을 마음껏 쏟아내고, 앞으로의 다짐을 새기며, 스스로의 시간을 조금 더 의미 있게 만들고 싶다. 무엇보다도, 내가 어떤 사람인지 좀 더 깊이 들여다볼 수 있는 매개체가 되었으면 좋겠다. 그리고 이 회고록이 내게 원동력이 되어 앞으로 한 걸음 더 나아가는 계기가 되길 바란다.이 블로그에 남길 이야기들이 면접관님들, 지인들, 혹은 우연히 들른 누군가에게 마냥 좋은 인상을 남기지는 않을 수도 있다. 하지만 그만큼 솔직하게 나 자신을 돌아보고, 더 강하게 채찍질하며 앞으로 나아가고 싶다. 2. 대학 ..

웹 포트폴리오 제작 후기MZ 사전 프로젝트를 마친 이후로, 웹 포트폴리오를 제작하게 되었습니다.개발을 진행하면서 Next.js와 TypeScript의 필요성을 느껴 학습과 개발을 병행했고, 완벽하다고 할 수는 없지만 나름 성공적으로 마무리했다고 생각합니다.👉 웹 포트폴리오 링크:My Website My Website© 2025 MyWebsite. All Rights Reserved.port-next-webportfolio-front-m61t9knhb5c1f236.sel4.cloudtype.app이곳에서 제 웹 포트폴리오를 만나보실 수 있습니다 ! 그리고 프로젝트 마치고 난 뒤 이제 후기를 작성해 볼게요. 1. TypeScript & Next.js & Tailwind CSS이번 프로젝트를 통해 TypeS..

모던 자바스크립트 정리를 하다가 var, let, const의 차이점을 한번 정리하고 가면 좋을 것 같아서 따로 빼서 글을 써보려고 해요. 우선은, 블록 스코프(Block Scope)와 함수 스코프(Function Scope), 그리고 호이스팅에 대해서 개념을 알면 var, let, const의 차이점에 대해서 이해하는데 훨씬 도움이 될 것 같아요. 블록스코프와 함수 스코프변수에는 접근할 수 있는 범위(스코프)가 정해져 있어요. 1. 블록 스코프(Block Scope){ } 중괄호로 감싸진 범위를 벗어나면 변수에 접근할 수 없어요.let과 const는 블록 스코프를 따라요.하지만 const는 선언과 동시에 값을 할당해야하며, 이후 값 변경이 불가능해요.if (true) { let a = 10; ..

1. 배포된 URL이번에는 githubio를 사용해서 배포를 진행했습니다.https://harang-dev.github.io/Poke-Dict.io/ Poke-Dict harang-dev.github.io클라우드 타입과 다르게 따로 건들지 않아도 24시간 동작합니다 ㅎㅎ2. 어려웠던 점 & 아쉬웠던 점이전에는 useInfiniteQuery를 사용해서 무한스크롤만 구현했었습니다.이번에는 포켓몬의 상세한 정보까지도 알기 쉽게 하고 싶었는데, 처음에 제가 요청한 엔드포인트에서는 한글로 반환을 해주지 않았습니다.그래서 구글링 및 여러 가지 엔드포인트를 건드리다 보니 어떤 조건의 맞는 값을 반환하는 코드를 작성할 수 있었습니다.const koreanNameObj = (await axios.get(`${API}/p..

1. 진행상황주말까지 마무리 하려고 했던 Figma 작업을 어느정도 끝냈습니다.조금의 페이지들이 남아 있긴 하지만 우선적으로 개발할 페이지들을 먼저 작업해봤습니다.메인 페이지 입니다.1. 우측상단의 LOGIN 을 클릭하여 로그인 페이지로 이동할 수 있습니다.2. WORD BOOK을 누르게 되면, 모든 단어 목록이 나오게 됩니다.3. 시작하기 버튼 위로 마우스를 올리면 좌우로 늘어나면서 검색창으로 바뀝니다.  각각 로그인과 회원가입 페이지 입니다. 내 단어장 페이지 입니다. 로그인 후 북마크된 단어들을 한눈에 볼 수 있습니다. Word Book 페이지 입니다. MZ 사전에 존재하는 모든 단어들을 확인할 수 있습니다.단어 상세 페이지 입니다. 검색한 단어의 상세 정보를 확인할 수 있고, 단어에 대한 댓글들로..

1. 프로젝트소개MZ 사전은 MZ 세대(Millennial & Generation Z)가 사용하는 독특한 언어와 표현을 수집하고 설명하며 세대 간 소통을 돕기 위한 프로젝트 입니다. 디지털 환경에서 주로 사용되는 약어, 유행어, 비속어 등을 정리하고 정의와 실제 사용 사례를 제공합니다.2. 기술 스택 및 환경사용할 기술 :ReactFigmaNotion개발 환경 :VSCode3. 프로젝트 기능 설명핵심 기능 :용어 검색사용 예시 제공단어장4. Structural Design5. 일정

1. 프로젝트 소개프로젝트 소개: 포켓몬 목록을 불러와 화면에 무한 스크롤로 표시하는 애플리케이션입니다. React와 React Query, Ant Design, Styled-components를 사용해 데이터를 비동기적으로 가져오고, 화면을 스크롤할 때마다 포켓몬 목록을 추가로 로드합니다.목표: Poke API에서 데이터를 가져와 무한 스크롤 기능을 구현하고, React Query를 통해 효율적인 데이터 fetching을 학습합니다.2. 기술 스택 및 환경사용한 기술:React: UI 구성 및 상태 관리React Query: API 요청과 상태 관리Styled-components: 스타일링Ant Design: UI 구성 요소useInView: 화면에 들어온 요소만 렌더링하여 성능 최적화개발 환경:VSC..