choijming21 님의 블로그

먼저 React의 CRUD에 대해 알아보겠다.  CRUD 란?CRUD는 리액트를 사용하여 기본적인 데이터 운영 기능을 구현하는 것을 말한다. 다음 네 가지 기본 데이터베이스 운영을 나타낸다.Create(생성): 새로운 데이터를 만들고 추가하는 기능Read(읽기): 기존 데이터를 조회하고 표시하는 기능Update(갱신): 기존 데이터를 수정하는 기능Delete(삭제): 기존 데이터를 제거하는 기능           오늘은 TodoList에 Update를 추가해보겠다!업데이트에 필요한 요소는 Read(현재 값을 가져와야 함)와 Create(현재 값 위에 덮어 씌어야 함)이다.   forEach와 map의 차이 forEach :forEach는 배열을 순회하면서 각 요소를 처리하지만, 새로운 배열은 반환하지 않..

useEffectuseEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.컴포넌트가 마운트 됐을 때, 컴포넌트가 언마운트 됐을 때, 컴포넌트가 업데이트 됐을 때 특정 작업을 처리할 수 있다.즉, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용해야한다.     useEffect() 사용법 기본형태useEffect(function, deps) - function: 수행하고자 하는 작업- deps: 배열 형태이며 의존성 배열이라고 한다. 배열 안에는 검사하고자 하는 특정 값 or 빈 배열     활용해보기! import를 사용해 useEffect..

오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.    시연 영상이다.     이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!      이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다.  if (existingCountry) { existingCountry.gold = gold || existingCountry.gold; existingCountry.silver = silver || existingCountry.silver; existingCountry.bronze = bronze || existingCountry..

오늘은 나만의 TodoList를 만들어 볼 것이다. 간단한듯 보이지만 초보인 나에게는 조금 어려웠다!    일단 나만의 투두리스트 완성본이다. 기능구현에 집중하느라 디자인은 간단하게 만들어 주었다. 시연 영상이다.     이제 만드는 과정을 이야기 해보겠다! 복습하는 마인드로 쭉 이야기해보겠다!      먼저, 크게 구조를 잡아주었다. 크게 구조를 잡은 다음 중복되는 부분은 나중에 컴포넌트로 분리해줘도 되니깐 크게 세개의 컴포넌트 구조를 생각했다.  1. App.jsx : 부모 컴포넌트로, input창과 '추가' 버튼이 있는 부분이다.2. TodoBoard: 투두리스트가 보여질 공간이다.3. TodoItem: 투두리스트 중 하나의 투두가 차지하는 공간이다. 이렇게 세개의 컴포넌트로 분리했다.      이..

나는 아직 코딩의 '코'자도 잘모르는 햇병아리이기 때문에, 베이직 / 스탠다드 / 챌린지 반 중 베이직반을 선택하였다!    시멘틱 html  접근성 향상: 의미론적 태그는 시각 장애인을 위한 스크린 리더와 같은 보조 기술에 의미 있는 정보를 제공한다.검색 엔진 최적화(SEO): 검색 엔진은 콘텐츠의 의미를 더 잘 이해할 수 있도록 돕는 의미론적 태그를 사용하여 페이지를 더 효과적으로 인덱싱하여 검색 엔진 결과 순위를 높인다.유지보수 용이성: 의미론적 태그는 코드의 가독성을 높여, 개발자들이 웹사이트를 더 쉽게 이해하고 유지보수할 수 있게 한다.      목표: 샘플 todos를 읽어와 화면에 뿌려주기!const todos = [ { id: 1, text: "Buy milk" }, { id: 2, t..

Q. 문제: 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5, 4, 3, 2, 1]을 리턴합니다.  제한 조건: n은 10,000,000,000이하인 자연수입니다.   입출력 예nreturn12345[5, 4, 3, 2, 1]    내가 푼 답function solution(n) { return String(n) .split('') .reverse() .map(arr => parseInt(arr));}문제를 일단 나누어 생각해본다. (숫자를 문자열로 변환 -> 문자열을 배열로 만들기 -> 배열을 뒤집기 -> 각 문자를 숫자로 변환)1. 숫자를 문자열로 변환: String(n)을 사용하여 입력 받은 숫자를 문자열로 변환2..

React란?Facebook에서 개발한 오픈 소스 프론트엔드 라이브러리이다. 웹 및 모바일 에플리케이션의 사용자 인터페이스를 구축하는데 사용된다.예를 들어, React는 레고블럭과 같다. 작은 블록(컴포넌트)들을 조합하여 복잡한 구조물(애플리케이션)을 만든다.  주로 React는 SPA를 만드는데 사용됨으로 현대 웹개발에서 매우 인기 있는 도구이다. 동적이고 반응적인 사용자 인터페이스를 만드는데 특히 유용해서 많은 기업들이 사용중이다!  주요 특징- 컴포넌트 기반: UI를 재사용 가능한 작은 조각(컴포넌트)으로 나눈다.- 가상 DOM: 실제 DOM 변경을 최소화 하여 성능을 개선한다.- 단방향 데이터 흐름: 데이터의 흐름을 예측 가능하게 만든다. 사용 이유- 효율적인 UI 업데이트: 변경된 부분만 업데이..

스파르타 내일배움캠프 6기 5조 “너는 이미 코딩하고 있다” 팀원 소개 김도현이준엄지훈조현준최지민 프로젝트 소개이번 프로젝트는 영화 목록 API를 활용하여 넷플릭스나 왓챠와 같은 영화 추천 및 검색 웹사이트를 구현하는 것을 목표로 합니다. 이를 통해 저희 팀원들은 웹 기술을 익히고, 실무에서의 협업 경험을 쌓을 수 있는 소중한 기회를 갖게 될 것입니다. 구현 기능TMDB API 영화 정보 불러오기반응형 웹영화 리뷰 작성, 수정 및 삭제 (Firebase 사용, Firestore)영화 이름으로 검색, 이벤트 처리캐러셀반응형 웹, 모바일, 데스크톱 팀 규칙스크럼, 출석 잘 하기!TIL 잘 제출하기 깃 코드 컨벤션변수const MAX_SIZE = 10; // 상수 일때만 변수명 대문자로let $num = 5;..

내가 일주일 동안 맡았던 업무는프로젝트 소개 작성카드 불러오기 중복 오류 해결영화 검색 기능 고도화로컬스토리지 사용하여 영화 검색 시 영화제목 및 작성시간 저장 기능 구현최고평점 API 불러와서 카드 붙이기최고평점, 너이영추천 카드 캐러셀로 만들어서 메인화면에 나타내기네비게이션바 클릭시 캐러셀은 숨기고 해당 카드만 보여주기16:9 반응형 CSS 이렇게 총 8가지 정도 작업을 했다. 팀프로젝트를 하면서 어떤 어려움이나 오류가 있었고 그에 대한 해결방법을 블로그에 정리해보려고 한다.   ★ api로 카드를 불러올때 카드가 무한으로 화면에 출력되는 문제점 : 중첩된 반복문으로 인한 오류중첩된 forEach문을 먼저 제거했다. 이전 코드에서 movies.forEach 안에 또 다른 movies.forEach가 ..

CSS: Cascading Style sheet(CSS)는 HTML에 스타일을 추가하여 웹페이지의 레이아웃, 색상, 폰트 등을 제어하는 언어이다.    외부 CSS 파일 사용법      반응형 웹사이트란?반응형 웹사이트는 다양한 디스플레이 크기와 해상도에 대응하여 콘텐츠나 레이아웃이 동적으로 변화하는 웹사이트를 말한다.사용자가 접속하는 기기에 따라서 사이트의 레이아웃과 디자인을 최적화하여, 최상의 사용자 경험을 제공하려는 웹 디자인 방식이다.    CSS를 활용한 반응형 웹디자인 예시: CSS의 Media Quary를 사용하여 특정 장치나 화면 크기에 따른 스타일을 적용할 수 있다.@media only screen and (max-width: 768px) { body { backgrou..