choijming21 님의 블로그

나는 아직 코딩의 '코'자도 잘모르는 햇병아리이기 때문에, 베이직 / 스탠다드 / 챌린지 반 중 베이직반을 선택하였다!    시멘틱 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..

팀프로젝트를 하면서 브랜치 생성, 브랜치  목록 확인 및 원격 브랜치 로컬로 가져오기를 매번 검색해서 하였다. 그래서 팀프로젝트를 하면서 매번 검색해보지 않아도 내 블로그를 보거나 기억할 수 있게 이 내용을 블로그에 간단하게 포스팅 하겠다.      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 = ["우유", "계란", "아이스크림..