미루고 미뤄왔던 모던스크립트 Deep Dive 정리를 해보도록 하겠습니다.이번에 면접을 몇 군데 보면서 CS 지식 혹은 제가 다루고 있는 언어의 개념들이 정말 중요하다고 느꼈어요.구현에만 초점을 맞추고 학습한 것 같아서, 조금은 개념적인 부분을 공부하기 위해 미뤄뒀던 공부를 해보려고 합니다.1-1) 프로그래밍이란?프로그래밍은 컴퓨터에게 실행을 요구하는 커뮤니케이션이라고 할 수 있습니다.만약에 우리가 어떠한 문제를 해결하고 싶다면, 먼저 요구사항을 명확히 정의해서 전달해 주는 것이 좋겠죠? 프로그래밍 = 문제 해결을 코드로 표현하는 과정 컴퓨터는 사람처럼 직관적으로 이해하지 못하기 때문에, 논리적으로 문제를 분해하고, 패턴을 추출하고, 평가가 가능한 형태로 변환해주어야 합니다. 이를 컴퓨팅 사고라고 합니다..
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. 진행상황진작 프로젝트는 마무리가 되었고, cloudtype을 사용해 배포까지 완료했습니다.https://web-mz-dict-front-m61t9knhb5c1f236.sel4.cloudtype.app/ MZ 사전 web-mz-dict-front-m61t9knhb5c1f236.sel4.cloudtype.app 무료 버전을 사용해서, 오전 5시가 되면 서버가 자동으로 다운되기 때문에, 혹여나 접속이 되지 않는다면 시간이 조금 지난 이후에 사용해 주시면 감사하겠습니다.(수동으로 매번 켜줘야 합니다... ㅠㅠ) 2. 개발 예정인 항목들우선 현재는 취업준비로 바쁜 나머지.. 개발을 마무리 한 상태이지만, 추가적으로 구현하고 싶은 것들이 남아있습니다.MZ 단어에 대한 정형화된 데이터가 없어서 현재도 있는 데..
원래 제가 MZ 사전을 개발하면서 꾸준히 블로그 글을 포스팅 하려고 했는데, 그러지 못했습니다 ㅠㅠ댓글 기능 구현 중에 오류가 생겼는데, 서버와의 통신 중에 에러가 생겼습니다.그런데 백엔드 담당하는 개발자분이 현재 시간이 없으셔서 수정이 어렵고, 저도 취업을 목표로 하고 있기 때문에,최대한 마무리 짓고 면접 준비를 하는데에 바빠서 글을 올리지 못했네요... 죄송합니다.정리해서 차후에 포스팅 할게요 ! 1. 첫 면접 후기프론트엔드 개발자가 되어야 겠다고 생각한 뒤로 첫 면접을 보고 왔습니다 !...12월 말부터 서류를 넣기 시작했는데 이번에 처음 연락이 와서 면접을 보고 왔어요 !아마도 아직까지 연락이 없어서 결과는 불합격 인것같긴 하지만...ㅎㅎㅎ 그래도 적어두고 다음에 보면 도움이 될 것 같아서 적으..
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..
※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※ 1. 프로젝트 소개간단하게 무한스크롤(Infinity-Scroll) 구현을 해보았습니다. 유튜브의 코딩알려주는누나의 영상을 참고하여 만들어 보았습니다.영화 데이터를 기반으로 한 무한 스크롤 영화 리스트를 구현한 프로젝트입니다. React와 React Query를 활용하여 데이터를 불러오고, 사용자가 스크롤할 때마다 새로운 페이지를 불러오는 기능을 구현했습니다. 특히, useInfiniteQuery를 사용하여 페이지네이션을 처리하고, react-intersection-observer로 화면에 영화 목록이 보일 때마다 데이터를 추가로 불러오도록 했습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components, Rea..