choijming21 님의 블로그

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

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

오늘은 총 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..

기본형태if (표현식1){ 실행문1;}else if (표현식2){ 실행문2;}else{ 실행문3;} 표현식1이 참이면 -> 실행문1 실행표현식1이 거짓이면 -> 표현식2로 넘어감 -> 표현식2가 참이면 -> 실행문2 실행표현식1, 2가 모두 거짓이면 -> 실행문3 실행이때 else if 는 여러번 써도 무관하다!   문제1. 나이를 매개변수로 받아, 나이가 18이상이면 "Access granted"를, 그렇지 않으면 "Access denied"를 콘솔에 출력하는 함수 checkAge를 작성해 보세요. function checkAge(age) { if (age >= 18) { console.log("Access granted"); } else { console.log("Acces..

총 4문제를 풀어보겠습니다. 목차는 다음과 같습니다 :) 1. 문자열 합치기2. 객체 만들기3. 문자열 조작하기4. 함수 사용하기       문제 1. 문자열 합치기문자열  'Hello World' 를 출력하는 코드를 작성해보세요.const greeting = "Hello";const name = "World";console.log( ... ) // "Hello World" 출럭  1. 문자열 변수 greeting 과 name 을 합쳐 ‘Hello World’를 출력해보세요.2. 중간에 공백(띄어쓰기)도 구현을 해보세요!   내가 푼 답const greeting = "Hello";const name = "World";const no = " "; // 단어 사이에 띄어쓰기를 포함하기 위해 추가함const ..

1. 문자열 연습하기  문제대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.  제한 사항- 문자열 s의 길이 : 50 이하의 자연수- 문자열 s는 알파벳으로만 이루어져 있습니다.  입출력 예sanswer"pPoooyY"true"Pyy"false   풀이function solution(s) { var answer = true; // 1...