FRONTEND STUDY

react에서는 해당 \_app.js 파일을 불러와서 페이지를 구성한다.하지만, 항상 다른 js파일에 페이지를 구성 할 코드를 작성하는데 어떻게 불러와지는 건지 궁금했다.\_app.js파일의 return 영역에 가면 해답을 찾을 수 있다.이 Component 부분에 우

프로젝트를 만들때 폴더 구조는 굉장히 중요하다.실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부른다.리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있다.React에

이전에, 리액트를 처음 접하면서 useState에 대해서 알게 되었다.코드를 많이 작성하고, 접해보면서 많이 익숙해진 훅이다.useState는 함수 컴포넌트 내에서 상태를 관리하고 갱신할 수 있도록 도와주는 역할을 한다.위처럼, setName함수를 사용해서 name의

Map으로 게시물 목록 렌더링 오늘은 현재 진행 중인 BoardProject에서 게시물 목록 페이지를 제작하게 되었다. 게시물 목록을 만들기 위해서, 백엔드서버에 있는 boards API를 호출해서 데이터를 받아온 후 렌더링해주는 방식이다.

우리가 게시물을 수정을 하게되면 수정한 값만 업데이트 되어야 합니다.하지만 기존값이 유지되도록 하지 않고 수정을 하게되면 모든 부분이 업데이트 되는것을 확인할 수 있습니다.그러나 실제 게시글은 수정된 부분만 업데이트 돼야 하므로 이 부분을 보완해야 합니다.❗️ 수정 인

게시물 수정 기능을 구현하다가, 이 오류로 전체 코드를 헤집고 다녔다...API 호출 과정에서 생긴 것이라는 정보는 알았으나 아무리 봐도 gql 셋팅, 매개변수에 인수 전달 등 잘못 작성한 부분이 없었다.그렇게, container 컴포넌트와 presenter 컴포넌트,

이전에 TypeScript에 대해서 들은 적이 있었다.명칭에서도 알 수 있듯이 Type이 있는 JavaScript였다.그런데, 처음 내가 TypeScript를 접했을 때 생각은 "타입에 구애받지 않고 자유롭게 코드를 작성하도록 만들어줬더니 왜 귀찮게 타입을 작성하려고

타입스크립트가 자체적으로 제공하는 특수한 타입들을 말한다.위 예시 코드 이외에도 다양한 utility type이 존재한다(참고: 공식 문서 바로가기)Partial객체의 모든 프로퍼티에 ?(optional chaining)을 부여한다.즉 선택적으로 만든다.Required

오늘은 기존에 JS 코드로 작성해놨던 BoardProject 컴포넌트 파일 전체를 Typescript로 변환하였다.변환하는 과정에서 실제로 Typescript가 상당히 엄격하구나 라는 생각이 들었고 그렇기 때문에 더더욱 추후에 타입 문제로 인한 오류로 골치 아플 일은

게시물 댓글 등록하기 UI와 기능 구현 완료.

이제 grqphql-API 사용에 많이 익숙해진 것 같다.처음에는 어디서부터 시작해야할 지 막막했는데 시행착오를 반복하다보니 자연스럽게 숙지가 되었다. 오늘은 게시물 댓글 조회(fetchBoardComments)와 삭제(deleteBoardComment)기능을 구현해보

프로젝트를 진행하면서 게시판 목록에서 목록을 클릭하여 상세보기로 넘어가는 과정에서 작동이 잘 되지 않는 부분이 있었다.그 이유는 Event Bubbling(이벤트 버블링) 때문이다.이벤트 버블링 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의

개발 공부를 하면서 프레임워크와 라이브러리 용어에 대해서 상당히 많이 접한 경험이 있다.그럴 때 마다, 항상 이 둘의 명확한 차이점을 설명하지 못했었다.이번에 라이브러리에 대해서 학습하게 되어, 이를 계기로 한번 알아보고 개념을 정립하게 되었다.내가 원하는 기능 구현하

모달이란?모달(Modal)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법을 말한다.모달의 종류를 세 가지정도로만 나누어보자면,안내창(Alert), 확인창(Confirm), 입력창(Prompt)로 크게 나눌 수 있는 것 같다.우선, ant-design에서 Modal

어제 배운 별점 기능을 현재 진행 중인 BoardProject 댓글 작성에 구현했다.우선, 댓글 등록 컴포넌트에 ant-design 라이브러리에 있는 rate 기능을 사용해서 UI를 만들었다.두 번째로, 해당 별점을 선택 후 댓글을 등록했을 때 작성자가 몇 개의 별점을

Daum-Post-Code 라이브러리를 사용해서 주소를 검색 후, 사용자가 선택한 주소의 정보(data)를 활용하는 방법에 대해 알게 되었다.ReactPlayer를 사용해서 사용자가 입력한 Youtube url을 가지고, 유튜브 영상을 게시물 상세페이지에서 감상할 수

레이아웃이란 프로젝트 전체의 UI 구조를 의미한다.쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미한다.아래는 레이아웃 컴포넌트의 폴더 구조의 예시이다.(index.tsx 파일은 각각의 컴포넌트를 하나로

글로벌스타일이란 우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미한다.이름만 봐도, 전역으로 적용될 것 같은 느낌이 든다! 이 글로벌스타일을 \_app.tsx 에 적용해 주어야 한다.emotion에서 Global을 import 시켜 태그로써 사용하

인터넷 카페 혹은 블로그 등을 방문해보면, 게시물을 작성하든 혹은 열람하든지 항상 고정되어 있는 레이아웃이 존재한다.이번에는 게시판 프로젝트에 레이아웃 구조를 적용해봤다.과정은 아래와 같다.먼저 고정할 레이아웃의 영역을 나눈다.Header, Banner, Navigat

Code Refactoring Layout 컴포넌트에 속한 네비게이션 메뉴를 만들었었다. 처음 작성한 코드는 아래와 같다. 만약, 위 코드와 같이 작성하게 되면 네비게이션 바에 버튼이 하나씩 추가될 때마다 함수 작성, props전달, 타입 작성 등 굉장히 수고스러워진

이전까지 구현한 Pagination에는 아래와 같은 치명적인 문제가 있었다.이전, 다음 페이지가 게시물이 없는데도 불구하고 무제한으로 생성되고 있다.따라서, 총 게시물 개수를 불러와서 이 데이터를 토대로 페이지 수를 생성하면 된다.그리고 이전 페이지, 다음 페이지를 클

데이터 복사? Javascript에서 데이터를 복사할 때, 두 가지 개념이 존재한다. 바로 얕은 복사(Shallow Copy) 와 깊은 복사(Deep Copy) 이다. 이전에도, 한번 이 복사에 대해 학습한 적이 있었는데 이번 기회에 다시 공부하면서 확실히 알게 되