React

드디어 기다리고 기다리던 리액트 첫시간!!!! 어떤 것일지 궁금하면서도 잘 따라갈 수 있을지 걱정도 되고 만감이 교차하는 순간이다. 오늘은 개인과제의 내용을 면밀히 살펴보고 기초 강의를 찬찬히 집중 수강하는 것이 목표이다🔥A JavaScript library for

부모-자식 요소 활용해보기 > Child 컴포넌트는 '나는 자식입니다'를 출력, Mom 컴포넌트는 Child 컴포넌트를 호출, Grandpa 컴포넌트는 Mom 컴포넌트를 호출하면 되는데, 나는 Mom, Grandpa 컴포넌트가 그 자식 요소를 호출만 하지 않고 각각

컴포넌트 내부에서 바뀔 수 있는 값. 자바스크립트에서 let, const로 변수를 선언했었는데, 리액트에서는 UI를 변경(렌더링을 다시)하기 위해서 State라는 독특한 형태로 상태를 관리하게 된다.const name, setName = useState(initial

불변성 메모리에 있는 값을 변경할 수 없는 것. 원시데이터는 불변성이 있고, 객체/배열/함수는 불변성이 없다. 자바스크립트 기초 강의에서 몇 번이나 본 내용!!! 리액트에서 컴포넌트를 렌더링하려면 State에 변화가 있어야 하는데, 원시데이터가 아닌 객체/배열/함수의

지난주부터 본격적인 리액트 공부가 시작되었다. 리액트 입문 주간에는 간단한 Todo List 만들기 개인프로젝트가 주어졌는데, 맨날 index.html에서 시작했던 사람이 처음으로 리액트로 프로젝트를 만들어 보려니 막막하기 그지없었다...!! 그런데 조금 긍정적인 막막

오늘 개인프로젝트 해설 강의가 있었는데, 강의 초반에 과제요구사항을 튜터님이 함께 짚어주실 때 아차!!!! 하는 생각이 들었다 :] 한가지 내가 잘못 해버렸구나 하고 깨달았다. 과제 요구사항에는 Todo 항목의 isDone 상태가 true인지 false인지에 따라 다르

npm install styled-componentsyarn add styled-components터미널 창에 명령어를 사용해서 styled-components 패키지를 설치하고, 문서에서 import하여 사용한다. 스타일 컴포넌트의 이름을 변수 선언하듯 선언하고, s

당분간은 숙련 강의를 통해 새로운 개념을 배우느라 정신 없는 시간이 될 것 같다😵‍💫불필요한 렌더링과 그로 인한 비용이 발생하지 않도록 최적화하는 것이 좋다.컴포넌트를 캐싱하는 최적화 방법. 컴포넌트를 메모리에 저장(캐싱)해 두고 필요할 때 사용하도록 한다. 이렇게

여기까지 오기 전에 가상DOM 이름만 몇 번 접했을 때는 너무 어렵고 복잡한 개념일 거라고 생각했는데, 강의를 듣고 공부해보고 나니 흥미로운 개념이라는 생각이 들었다. 이런 걸 처음 고안해 낸 사람은 그야말로 천재다🥹가상DOM은 실제 DOM과 구조가 동일한 형태의 복

TodoList를 디자인 요소 없이 처음부터 다시 만들어본다. 이번 목표는 지난 번에 과제 요구사항을 독자적으로 잘못 해석한 부분을 제대로 요구사항에 맞게 해결하고, 내가 할 수 있는 한 최대한 깔끔하고 간결한 코드를 만들어 보는 것이다. 그런데 그 때는 됐던 게 이번

강의는 일단 끝까지 다 들었고, 강의 내용 자체는 이해하는 데에 크게 어려운 부분은 없었다. 이제 배운 내용을 내가 실제로 활용할 수 있느냐 없느냐의 문제일 뿐!리액트 숙련주차 개인과제는 팬레터 사이트 만들기이다. 그리하여 오늘부터 다음주 제출일까지 열심히 달려야 하는

음.. 아직도 props-drilling 하는 중🥹🥹🥹 내 시간 다 어디로 가버린 걸까? 오늘 진짜 시간 가는 줄 모르고 하루종일 머리가 지끈거릴 정도로 집중해서 작업을 했는데 오늘 달성한 항목은 크게 3가지 정도인 것 같다. (1) 새로운 게시글을 등록하면 내용

useState처음 리액트를 배우며 접했을 때는 낯설기만 했는데 이제 퍽 익숙해진 개념이다. 리액트가 제공하는 Hooks 중 하나로, 리액트 프로젝트 내에서 변화하는 값인 State를 관리할 수 있는 기능이다. setState에 의해 state가 변화하면 변경된 내용을

리액트 프로젝트를 만들 때, 한 컴포넌트에서 선언 및 사용되는 state를 다른 컴포넌트에서 사용하기 위해 prop-drilling 방식을 활용할 수 있다. 그런데 이 방식은 부모 컴포넌트에서 자식 컴포넌트로 단방향으로만 state를 전달 가능하고, 그 역방향 혹은 동

안 될 것만 같았던 개인프로젝트😭 결론부터 말하면 나름 순항하다가 성공적으로 제출완료 가도에 올랐다! 지난주 초반에는 기한 내에 과제를 완성하지 못할 것만 같은 생각에 너무 스트레스를 받았는지 하루종일 두통으로 고생을 하기도 했는데🥹 어떻게든 다 되긴 되는구나...

팀명: E & I3참여자: 박지영, 나의찬, 박영욱, 양유진 총 4명꿈나무 개발자들의 코딩테스트 정보 공유 사이트코드카타 제출, 제출횟수에 따른 달성도, 질문과 답변을 공유하는 커뮤니티입니다.메인페이지최신순, 좋아요순, 정렬 메뉴게시글 리스트 출력상세 페이지단일 게시글

이번 주에는 자의 반 타의 반 블로그에 찾아와서 글을 쓸 기회가 영 없었다. 핑계라면 핑계겠지만... 🥹 프로젝트 초반에는 진짜 처음으로 뭘 해야할지 너무 막막하고 감이 안 와서 이래저래 다른 팀원분이 이렇게 하면 된다고 하자는대로 어어어 하고 따라가기 바빴다. 팀에

왠지 이제 점점 뒤쳐지는 것 같은 느낌이 들어서 마음이 슬퍼😭 매일 열심히 했다고 생각했는데 왜 그럴까...? 정말 속상하다... 그치만 다 울었으면 이제 할 일을 하자😵‍💫 😭Redux 기초 복습 진짜 엄청나게 간단한 카운터 앱을 만들어 보았다. 처음부터

json-server는 간단한 DB와 API 서버를 생성하여 개발 및 테스트하는데 활용할 수 있게 해주는 도구이다. 로컬 환경에서 가짜 백엔드 서버를 간단히 설정할 수 있다. 첨엔 제이슨이 누군가의 이름인가 했는데 그게 아니었다🤪 JavaScript Object N

환경 변수(Environment Variable) 어떤 시스템에서 동작하는 프로그램이나 프로세스가 실행될 때 참조하는 동적인 값. 운영 체제나 앱의 설정을 저장하고 조작하는 데 사용되는 값이다. 프로그램 외부에서 값이 설정되며, key/value pair로 구성되어 있

로컬스토리지와 세션스토리지는 모두 클라이언트 측 웹 스토리지 옵션으로, 브라우저에서 데이터를 임시 또는 영구적으로 저장하는 데 사용된다. 이 둘은 비슷한 듯 다른데, 오늘 한 번 정리해보려고 한다.key-value pair로 데이터를 저장해 두고, key를 사용하여 저

이미지 업로드 기능을 이전에 한 번도 해본 적이 없어서 여러 가지 구글링과 chatGPT 선생님의 도움을 받아 한번 해보게 되었다.파일 업로드 UI 기본 형태1\. 파일을 선택하는 inputtype="file"로 설정해주면, 파일을 선택할 수 있다. 이렇게 실행하면 아

이번에 새로운 팀플을 위해 CRA로 새로운 리액트 프로젝트를 생성했는데, 맨 처음 프로젝트 셋팅 시 필요 없는 파일을 모두 지워주는 과정에서 public 폴더 안에 들어있는 manifest 파일도 함께 지웠다. 그랬더니 처음 보는 에러가 콘솔창에 보이기 시작했다. 바로

이번 프로젝트는 카카오맵API를 활용하여 카페 추천 리스트를 관리하는 것이 골자이지만, 하는 김에 카페 이름으로 유튜브에 검색한 결과를 보여주는 것도 한 번 해보고 싶었다. 유튜브의 복잡한 기능까지 다 사용할 필요는 없고, 검색 결과 리스트를 받아와서 우리 프로젝트 U

지금 만들고 있는 팀프로젝트 '가배도'에 북마크 기능을 추가하고 싶다. 딱봐도 북마크처럼 생긴 이미지를 클릭하면, 현재 페이지의 파라미터 값을 유저의 북마크 배열에 추가하고 싶다.회원가입 하면서 users 컬렉션에 새로운 user 문서를 생성할 때 bookmark 필드

이번 팀프로젝트도 기한 내에 멋드러지게 완료하여 제출하기 성공:] ...한 기념으로 카카오맵 오픈API를 사용하는 방법에 대해 간략하게 작성해보려고 한다.1\. 카카오 디펠로퍼스에서 새로운 계정을 만든다. Kakao Developers2\. 애플리케이션을 추가한다.3\

생각해보니 첨으로 사용해본 React Query를 지난 팀플젝때 너무나 편리하게 잘 썼는데, 정작 글로 정리한 적이 없는 것 같아서... 이번 TypeScript 과제 주간을 맞아 React Query에 대해서 한 번 정리해보려고 한다. 👍🏻React Query