전체 글134 [프로그래머스 Lv.1] x만큼 간격이 있는 n개의 숫자/짝수와 홀수/자릿수 더하기 풀이 x만큼 간격이 있는 n개의 숫자function solution(x, n) { let arr = []; for(let i=1; i 처음에 for문 마지막에 return newArr = arr.push(x * i)를 했었는데 for문처럼 반복문 안에서는 return을 넣으면 반복이 중단되어 쓰면 안된다! 또 push()는 새로운 배열이 아닌 기존 배열에 요소를 추가만 하기 때문에 newArr에 다시 배열을 저장하는 것은 맞지 않다. *map()에서 쓰는 return : 콜백 함수 안에서 return은 단순히 새로운 배열을 만들기 위해 각 요소를 변환하는 역할을 하며, 반복이 끝날 때까지 배열이 자동으로 생성됨. 짝수와 홀수function solution(num) { if(num % 2 ===.. 2024. 10. 7. [TIL] REST API와 데이터 가져오기 REST API는 클라이언트(웹 애플리케이션)와 서버 간의 통신을 가능하게 하는 규칙과 구조를 제공하는 방법이다.REST는 Representational State Transfer의 약자로,웹 애플리케이션이 서버에서 데이터를 가져오거나 서버에 데이터를 전송할 때 사용하는 일련의 원칙이다.쉽게 말해, REST API는 웹 애플리케이션이 서버와 데이터를 주고받기 위해 사용하는 일종의 "규칙서"라고 할 수 있다.이 규칙에 따라 웹 애플리케이션은 서버와 소통하면서 필요한 데이터를 가져오거나 업데이트할 수 있다.REST API의 핵심 개념HTTP 메서드: REST API는 주로 HTTP 메서드를 사용한다.GET : 서버에서 데이터를 가져올 때 POST : 서버에 새로운 데이터를 보낼 때PUT : 서버의 기존 데이.. 2024. 9. 9. [발표5회차] 클래스 01 자바스크립트의 클래스 개념자바스크립트와 클래스자바스크립트는 프로토타입 기반 언어로 '상속' 개념이 원래 존재하지 않음.ES6에서 클래스 문법이 추가되어 클래스와 유사한 기능을 구현 가능.프로토타입을 활용해 클래스를 흉내내는 방식 이해 필요.02 클래스와 인스턴스클래스 (Class)클래스는 객체의 구조와 동작을 정의한 설계도 역할.클래스는 추상적 개념이며, 개체의 공통 속성을 정의함.인스턴스 (Instance)인스턴스는 클래스를 기반으로 생성된 구체적인 개체.클래스의 속성을 모두 만족하는 구체적인 예시가 인스턴스.예시: 음식 → 과일 → 귤류음식: 과일의 슈퍼클래스, 귤류의 슈퍼 슈퍼클래스과일: 음식의 서브클래스, 귤류의 슈퍼클래스귤류: 과일의 서브클래스, 음식의 서브 서브클래스인스턴스 예시: 귤류의.. 2024. 9. 3. [TIL] 로딩 상태 구현이 안될 때 (async/await의 중요성) 🚨문제: 로그인이 되어 있고 구독한 인플루언서가 있는데 렌더링 시 "로그인 정보가 없습니다."와 "구독한 인플루언서 정보가 없습니다." 안내문 모두 렌더링이 되고 마지막에 실제 정보가 뜸 ❓고민1. 데이터를 fetch로 가져올 때 useQuery를 쓰면 데이터를 더 빨리 가져오지 않을까 싶어 바꿔봤으나 안됨.2. return문의 삼항연산자 로직 순서를 바꾸면 렌더링 순서도 바뀔까 싶었지만 안됨. ✔️해결먼저 오류 코드를 보면 useEffect(() => { const fetchData = async () => { if (user) { await getSubscribeData(); } setIsLoading(false); }; fetchData().. 2024. 8. 27. [DIL] 07 클래스 01 클래스와 인스턴스의 개념 이해그림처럼 음식과 과일은 모두 집단, 즉 클래스이다. 음식은 과일보다 상위의 개념이고, 과일은 음식보다 하위의 개념이다. super-, sub-를 접목해서 상위클래스, 하위클래스라고 표현한다.그렇다면 과일 분류 하위에 또 다른 분류가 있을 경우 클래스 간의 관계는 어떻게 될까?음식은 과일의 superclass이다. 과일은 음식의 subclass이면서 귤류의 superclass이다. 귤류는 과일의 subclass이다. 한편 음식은 귤류의 super-superclass이다. 귤류는 음식의 sub-subclass이다. 하위 개념은 상위 개념을 포함하면서 더 구체적인 개념이 추가된다. 예를 들어, 최상위 분류인 음식 클래스는 '먹을 수 있다' 정도라면, 하위의 과일 클래스는 '먹.. 2024. 8. 26. [TIL] Hydration 이란? 웹사이트는 두가지 방식으로 작동한다. 하나는 서버이고 하나는 클라이언트이다.서버 : 웹사이트의 데이터를 저장하고, 웹사이트의 페이지를 제공해주는 역할클라이언트 : 웹사이트를 보기 위해 사용하는 브라우저(크롬, 사파리 등)로 클라이언트는 서버에서 받은 데이터를 화면에 보여주는 역할 Hydration이란리액트같은 프레임워크를 사용할 때, 서버에서 먼저 웹페이지를 만들고, 그 페이지를 클라이언트에 보낸다. 그러면 클라이언트는 그 페이지를 받아서 화면에 보여주고, 리액트가 그 페이지에 기능을 추가하여 클릭이나 스크롤 같은 인터랙션을 할 수 있게 해준다. 이 과정을 hydration이라고 한다. Hydration Error하이드레이션 오류는 서버에서 보낸 웹페이지와 클라이언트에서 그 페이지를 처리할 때 서로 다르.. 2024. 8. 20. [TIL] next.js Image 태그로 배경 이미지 적용하기 최종프로젝트를 진행하며 UI/UX 디자이너님이 피그마로 디자인을 해주셨다.css로 구현하기 어려운 디자인을 png 파일로 저장하여 해당 이미지를 불러와 배경 이미지로 적용해보자!next.js는 Image 태그를 제공하는데 이미지를 최적화해주는 장점이 있다. 의 파란 영역에 이미지를 넣어야 하는데 영상에 보는 것과 같이 모바일 환경에는 하단에 메뉴바가 고정 되어있어 메뉴바를 가리지 않게 신경 써야 했다. 변경 전 코드"use client";import Image from "next/image";import defaultImg from "../../../public/images/default.png";import Icon from "../../../public/icon/rightArrow.svg";i.. 2024. 7. 31. [발표4회차] 프로토타입 객체와 생성자 함수자바스크립트에서 객체를 많이 쓰이는데 객체는 이름과 값을 가지는 속성들의 모음이다. let person = { name: 'John', age: 30, greet: function() { console.log('Hello, my name is ' + this.name); }}; 여기서 person 객체는 name, agem, greet을 가지고 있다. 이러한 형태로 여러 개를 만들고 싶다면 아래처럼 생성자 함수를 사용할 수 있다. function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log('Hello, m.. 2024. 7. 24. [TIL] React에서 key가 필요한 이유가 뭘까? DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. first second first second third Duke Villanova Connecticut Duke Villanova 위처럼 단순하게 구현하면 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않다.React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경한다. 이러한 비효율은 문제가 될 수 있다. 이를 해결하기 위해 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 예를 들어, 위 비효율적인 예시에 key를 .. 2024. 7. 24. [DIL] 06 프로토타입 자바스크립트는 프로토타입 기반 언어이다. 클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있다. 01 프로토타입의 개념 이해 6-1-1 constructor, prototype, instance위 그래프를 코드로 작성하면 다음과 같다.var instance = new Constructor(); 더 구체적으로 바꾸면 다음과 같다.윗변(실선)의 왼쪽 꼭짓점에는 Conjstructor(생성자 함수)를, 오른쪽 꼭짓점에는 Constructor . prototype이라는 프로퍼티를 위치시켰다. 왼쪽 꼭짓점으.. 2024. 7. 22. swiper 캐러셀 라이브러리 https://swiperjs.com/demos Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 2024. 7. 22. [발표3회차] 클로저 개념정리클로저는 자바스크립트에서 중요한 개념 중 하나이다. 이 개념을 이해하려면 함수와 변수가 어떻게 동작하는 지 알아야 한다. 우선, 함수는 특별한 종류의 '작업'을 수행하는 코드 뭉치이다. 예를들어 우리가 만든 함수를 호출하면 그 안에 있는 코드들이 실행된다.클로저는 이 함수와 그 함수가 만들어진 환경(변수들의 집합)을 함께 기억하는 것이다. 이 말은 함수 안에서 정의된 함수가 외부 함수의 변수들에 접근할 수 있는 것이다.function outerFunction() { let outerVariable = '안녕'; // 바깥 함수에서 선언된 변수 function innerFunction() { console.log(outerVariable); // 바깥 함수의 변수를 사용 } return.. 2024. 7. 18. 이전 1 ··· 3 4 5 6 7 8 9 ··· 12 다음
