choijming21 님의 블로그

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..

팀프로젝트를 하면서 브랜치 생성, 브랜치  목록 확인 및 원격 브랜치 로컬로 가져오기를 매번 검색해서 하였다. 그래서 팀프로젝트를 하면서 매번 검색해보지 않아도 내 블로그를 보거나 기억할 수 있게 이 내용을 블로그에 간단하게 포스팅 하겠다.      branch 생성 (local repository)git branch (브랜치명) 을 통해 브랜치 생성이 가능하다. 새로운 브랜치(new branch)를 생성 후 체크아웃 해보도록 하겠다.(master)$ git branch newbranch(master)$ git chechout newbranchSwitched to branch 'newbranch'      branch 생성 후 이동 (local repository)git checkout -b (브랜치명)..

오늘은 총 4 + 1(챌린지 문제) = 5 개를 풀어보았다.문제1. 논리연산자 활용하기문제2. 배열 메서드 활용하기: sort()문제3. 배열 메서드 활용하기: find()   ----------> 이 문제에서 챌린지 문제 하나 더!문제4. 배열 메서드 활용하기(심화): find()     문제 1. 논리 연산자 활용하기const grade = { 국어: 90, 영어: 80, 수학: 100,};// 논리 연산자(&& 또는 ||)를 활용하여 아래의 조건을 만족하는 코드를 작성해주세요.// 출력: true// 국어, 영어, 수학 점수가 모두 80점 이상이면 true, 아니면 false를 반환해주세요.function checkGrade(grade) { // 여기에 코드를 작성해주세요! ...}cons..

오늘은 논리곱 연산자(&&), 논리합 연산자(||), find 메서드, sort 메서드 이렇게 4가지에 대해서 배웠다.논리곱 연산자와 논리합 연산자는 javascript 문법 강의에서 나왔어서 익숙하지만 find와 sort 메서드는 처음 보기에 논리 연산자보다 메서드에 더 집중을 했던것 같다.(물론 둘 다 집중했지만...^^)    1. 논리곱 연산자 ( && ) 논리곱 연산자는 모든 조건이 참(true)이여야 참(true)이다.true && true // turetrue && false // falsefalse && true // falsefalse && false // false    2. 논리합 연산자 ( | | )논리합 연산자는 둘 중 하나가 참(true)이면 참(true)이다.true || tr..

오늘은 어제 강의를 바탕으로 실습문제 총 4개를 풀어보았다.난이도 '하' 2문제와 '중' 2문제로 이루어져 있었다!그래서 실습하기 전에 한 20분 정도 어제 배웠던 내용을 복습하고 실습에 참여하였다.    문제 1. 쇼핑 목록 수정하기*1.js 파일을 만들어 변수* shoppingList 의 요소를 수정해주세요.let shoppingList = ['우유', '계란', '아이스크림', '목살'];// 여기에 코드를 작성하세요....console.log(shoppingList);// 출력 : [ '우유', '계란', '아이스크림', '삼겹살' ] 배열의 마지막 요소인 '목살' 을 제거한 후, '삼겹살' 을 추가해주세요.출력 결과   나의 답let shoppingList = ["우유", "계란", "아이스크림..

오늘은 배열메서드 총 5가지에 대해서 배워보았다..push().pop().forEach().map().filter()    1. push 메서드: 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열을 반환 2. pop 메서드: 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환 하거나 변경된 배열을 반환const fruits = [30, 1, 2, 5, 40];fruits.push(100); // 100을 끝에 넣기 -> [30, 1, 2, 5, 40, 100]const pop = fruits.pop(); // 100을 빼내서(pop) 변수에 할당하기console.log(pop); // 할당한 100을 console.log();에 찍어보기 -> 100      3. forEach 메서드- 배열의 메..

오늘은 어제 걷기반 수업에서 들었던 함수, 조건문, 반복문에 대해 문제를 풀어보겠다.    문제1. 함수호출하기해당 함수를 실행시켜 "제가 좋아하는 과일은 사과, 오렌지입니다."를 출력하는 코드를 작성해보세요.function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console.log(printFruits(...)); printFruits 함수가 사과, 오렌지를 매개 변수로 받아 “제가 좋아하는 과일은 사과, 오렌지입니다.”의 문장을 콘솔에 출력할 수 있도록 해주세요.  나의 답function printFruits(a, b) { return "제가 좋아하는 과일은 " + a + "," + b + "입니다.";}console..