제인의 블로그

Q. ## **Day 2: 메달 집계 리스트 출력 및 CRUD 기능 구현** ### 1. **메달 집계 리스트 출력** - App.jsx에 국가별 메달 집계를 표시하는 리스트를 추가합니다. - 국가 리스트 데이터를 저장할 useState를 추가하고, map 메서드를 사용해 리스트에 데이터를 반복 출력합니다. - 금메달 수를 기준으로 내림차순 정렬하여 상위 국가부터 표시되도록 합니다. ### 2. **CRUD 기능 - Create 및 Read** - **Create** 기능 구현: - 제출 버튼 클릭 시 새로운 국가와 메달 정보를 리스트에 추가하고 화면에 표시됩니다. - **Read** 기능 구현: - 리스트에 표시된 국가별 메달 집계를 확인할 수 있도록 UI에 반영합니다. ### 3. **컴포넌트 구조 ..

" ## **Day 1: 기본 레이아웃 설정 및 입력 폼 구현** ### 1. **프로젝트 셋업** - Vite로 리액트 프로젝트를 셋업하고, 리액트 어플리케이션을 한번 켜보세요! - Vite 셋업에 어려움이 있다면 공식 문서를 참고하세요: [Vite 공식문서](https://ko.vitejs.dev/guide/). ### 2. **기본 레이아웃 구성** - App.jsx에 기본 레이아웃을 설정하여 UI의 뼈대를 만듭니다. - 정렬을 좀 연습해 볼게요. 어플리케이션이 항상 가로 기준으로 화면 중앙에 배치되게 합니다. - 이후, 백그라운드 컬러, 상단 여백 등등 기본적인 레이아웃을 더 넣어줍니다.. ### 3. **입력 폼 UI 구현** - 나라 이름, 금메달, 은메달, 동메달 입력 필드를 추가하고 제출 ..

StrictMode 1. Strict Mode란? - 정의 : 엄격 모드는 자바스크립트의 일부 문법과 동작을 제한하여, 코드의 오류를 사전에 감지하고 예측 가능하게 실행되도록 하는 모드입니다. - 활성화 방법 : `"use strict";` 지시어를 코드 맨 위나 함수 내에 추가하여 활성화합니다."use strict";// 또는 함수 내부에서function strictFunction() { "use strict"; // strict mode 활성화됨} 2. Strict Mode의 특징과 효과 Strict Mode를 활성화하면 일반 모드에서는 허용되던 몇 가지 잘못된 코드와 위험한 패턴에 대해 오류를 발생시킵니다. 주요 특징들은 다음과 같습니다.  (1) 암묵적 전역 변수 생성 금지 - 설명 :..

생성자 함수에 의한 객체 생성 1. 생성자 함수란? - 정의 : 생성자 함수는 특정 객체 형태를 생성하는 데 사용되는 함수입니다. 생성자 함수는 일반 함수와 문법적으로 차이가 없지만, 관례적으로 함수 이름의 첫 글자를 대문자로 시작합니다. - 사용 방법 : `new` 키워드와 함께 호출하여 새로운 객체를 생성합니다.     2. 생성자 함수의 동작 원리 `new` 키워드로 생성자 함수를 호출할 때 다음과 같은 일이 발생합니다.    1.  새로운 객체 가 생성됩니다.    2.  this 는 생성된 새로운 객체를 참조하게 됩니다.    3. 생성자 함수 내에서 `this`에 프로퍼티나 메서드를 추가하면, 새로운 객체에 해당 프로퍼티와 메서드가 정의됩니다.    4. 명시적으로 `return` 값을 지정하..

스코프? 1. 전역 스코프 (Global Scope) -  정의 : 전역 스코프에 선언된 변수는 프로그램의 모든 영역에서 접근할 수 있습니다. -  특징 : 전역 객체 `window`의 속성으로 저장되며, 전역 변수는 다른 스크립트나 함수에서도 접근할 수 있기 때문에 남용할 경우 예측하기 어려운 결과를 초래할 수 있습니다.    2. 지역 스코프 (Local Scope) -  정의 : 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하며, 함수가 호출될 때마다 새로운 스코프가 생성됩니다. -  특징 : 함수 스코프라고도 하며, 함수가 종료되면 해당 스코프 내의 변수들은 메모리에서 해제됩니다. 3. 블록 스코프 (Block Scope) -  정의 : 중괄호 `{}`로 감싸진 블록 내에서만 유효한 스코프..

함수란?함수는 자바스크립트에서 가장 중요한 핵심 개념이다. ( C나 자바도 비슷한거같은데.. 함수없이는 쓸수있는 코드가 너무나 제한적이며 한정적이다..)핵심개념인 스코프 , 실행 컨텍스트,클로저 ,생성자 함수에 의한 객체 생성, 메서드,this,프로토타입,모듈화등이 관련이 있다.프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행 단위로 정의한것이다.프로그래밍의 언어도 함수도 입력을 받아서 출력을 내보낸다. 함수내부로 입력을 전달받는 변수를 매개변수, 입력을 인수,출력을 반환값이라 한다. 또한 함수는 값이며 여러개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다.함수는 함수 정의를 통해 생성한다. 자바스크립트의 함수는 다양한 방법으로 ..

01. 변수 선언 매커니즘 (1) 왜 변수가 필요할까요?(1)-1. 데이터 저장 및 관리의 필요성변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수 있도록 해줍니다. 예를 들어, 사용자로부터 받은 입력을 처리하거나 계산 결과를 다시 사용해야 할 때 변수 없이는 각 단계마다 데이터를 반복적으로 처리해야 해요. 효율적인 데이터 관리를 위해선 변수 선언 매커니즘은 필수라고 할 수 있습니다.let numberOfUsers = 50; // 사용자 수를 저장numberOfUsers = numberOfUsers + 5; // 새로운 사용자 추가// numberOfUsers += 5;console.log("Total users: " + numberOfUsers); // 출력: Total use..

2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요.제한 조건2016년은 윤년입니다.2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다)  function solution(a, b) { // 요일을 배열로 정의 (0: 일요일부터 시작) const days = ["SUN", "MON", "TUE", "WED", "THU"..

Q.과제를 받은 루는 다음과 같은 순서대로 과제를 하려고 계획을 세웠습니다. 과제는 시작하기로 한 시각이 되면 시작합니다. 새로운 과제를 시작할 시각이 되었을 때, 기존에 진행 중이던 과제가 있다면 진행 중이던 과제를 멈추고 새로운 과제를 시작합니다. 진행중이던 과제를 끝냈을 때, 잠시 멈춘 과제가 있다면, 멈춰둔 과제를 이어서 진행합니다. 만약, 과제를 끝낸 시각에 새로 시작해야 되는 과제와 잠시 멈춰둔 과제가 모두 있다면, 새로 시작해야 하는 과제부터 진행합니다. 멈춰둔 과제가 여러 개일 경우, 가장 최근에 멈춘 과제부터 시작합니다. 과제 계획을 담은 이차원 문자열 배열 plans가 매개변수로 주어질 때, 과제를 끝낸 순서대로 이름을 배열에 담아 return 하는 solution 함수를 완성해주세요...

오늘한일- 코드카타풀기 속상한일-개인과제 코드 날라가면서 꼬여서 아예 첨부터 하다가 완성못한거..- 몸이 너무 아픈거.. 다짐- 일단 내일은 안아프길- crt+s 는 국룰.