JavaScript 6

[JavaScript] 함수와 메서드 차이 ?!

1. 함수 함수는 독립적으로 호출할 수 있는 코드 블록으로, 일련의 작업을 수행하고 값을 반환할 수 있습니다. 함수는 객체가 아니므로 this 키워드를 사용할 수 없습니다. function add(a, b) { return a + b; } let result = add(2, 3); console.log(result); // 5 2. 메서드 메서드는 객체의 프로퍼티로서, 해당 객체에 속한 함수를 의미합니다. 메서드는 객체의 상태를 변경하거나 객체에 대한 작업을 수행할 수 있으며, this 키워드를 사용하여 객체 내부의 값에 접근할 수 있습니다. const person = { firstName: "John", lastName: "Doe", fullName: function() { return this.fir..

Coding/JavaScript 2023.02.27

[JavaScript] reduce 메서드

Array.reduce() reduce 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환 구문 arr.reduce(callback[, initialValue]) 인수로 함수를 받음 (누적 계산값, 현재값) => {return 계산값} 배열의 합 구하기 let arr = [1,2,3,4,5]; const result = arr.reduce((prev, cur)=>{ return prev + cur; }, 0) // 풀이 // prev 0, cur 1 => prev 1 (prev가 처음에 0 , 초기값이 0, cur 현재값 1 더함) // prev 1, cur 2 => prev 3 // prev 3, cur 3 => prev 6 // prev 6, cur 4 => ..

Coding/JavaScript 2023.02.11

[React] 로그인 페이지 만들기

작업환경 Date 2023-01-29 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 구현 목표 : 로그인 페이지 만들기 구현 항목 여러 state를 하나로 관리하여 코드를 간소화 (loginInfo) 로그인하여 토큰을 받으면 로그인 진행하여 메인페이지로 이동 구현 로그인하여 토큰을 받지 못하면 메세지 출력 구현 1. 로그인 레이아웃 로그인에 대한 값을 input 태그로 받고 해당 값들을 useState로 관리했습니다. 우선 return문에 레이아웃을 위한 코드를 작성합니다. // login.js 로그인 아이디 저장 로그인 회원가..

Coding/React 2023.02.03

[알고리즘] 프로그래머스 스쿨 - 코테 입문 (나이 출력)

문제 설명 머쓱이는 40살인 선생님이 몇 년도에 태어났는지 궁금해졌습니다. 나이 age가 주어질 때, 2022년을 기준 출생 연도를 return 하는 solution 함수를 완성해주세요. 제한사항 0 < age ≤ 120 나이는 태어난 연도에 1살이며 1년마다 1씩 증가합니다. 입출력 예 age result 40 1983 23 2000 입출력 예 #1 2022년 기준 40살이므로 1983년생입니다. 입출력 예 #2 2022년 기준 23살이므로 2000년생입니다. 나의 풀이 function solution(age) { var year = 2023 - age return year; } 다른 사람의 풀이 function solution(age) { return new Date().getFullYear() - ..

Coding/Algorithm 2023.01.27

[React] 중복 가능한 checkbox 구현

작업환경 Date 2023-01-16 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 구현목표 : 중복 가능한 checkbox 구현 (회원가입 이용약관 페이지) 1. How to 1) 중복되는 항목들을 상수데이터에 넣어 출력하기 위해 상수데이터를 만들었습니다. // SignupData.js export const AGREE_LIST = [ { id: 1, title: '[필수] 이용약관 동의', }, { id: 2, title: '[필수] 개인정보 수집 및 이용 동의', }, { id: 3, title: '[선택] SMS (문자,..

Coding/React 2023.01.16

[React] position sticky 로 반응형 네브바 만들기

작업환경 Date 2023-01-13 PC macOS Monterey 버전 12.6.1 zsh zsh 5.8.1 (x86_64-apple-darwin21.0) vscode version 1.74.2 (Universal) node.js version 18.12.1 구현목표 : position sticky로 반응형 네브바 만들기 하나의 네브바가 스크롤 되면서 네브바가 줄어들는 반응형 nav바를 구현했습니다. 크기만 줄어드는 것이 아니라 스크롤을 내렸을 때 장바구니 버튼이 출력되며 장바구니 페이지로 이동합니다. 1. Position : sticky position : sticky css 속성 중 sticky를 사용해서 네브바를 페이지 상단에 고정시킬 수 있습니다. sticky 속성을 사용할 때는 몇가지 주의사..

Coding/React 2023.01.13