개발새발개발66

• 

  JavaScript - 스코프(Scope) 스코프(Scope)- 변수나 함수에 접근하거나 호출할 수 있는 범위   - 스코프 밖에서 호출하면 a 를 찾을 수 없다고 Error 가 발생함   - 아는 내용이지만.. 코드가 복잡해지면 스코프 때문에 실수하는 경우가 많기 때문에(경험담 ㅠㅠ) 한번 더 정리   전역 스코프와 지역 스코프 - 중괄호 안에 선언된 모든 변수들은 지역 스코프를 갖는다- if문 for문 모두 { } 안에 c,d가 선언되어 있기 때문에 전역 스코프 영역에서 이를 출력하려고 하면 에러가 발생한다- 즉 위의 코드에서 a만 전역스코프 / b, c, d는 모두 지역 스코프이다.   - 함수도 변수처럼 지역스코프를 갖는다- 그러므로 위에서 funcB를 외부에서 호출하면 "funcB is no defined" 오류가 발생한다   예외- 하.. 개발새발개발/JavaScript 2025. 1. 15.

• 

  JavaScript - 콜백함수(Callback Function) 콜백함수- 자신이 아닌 다른 함수에 인수로써 전달된 함수  - main의 인수로 sub 함수가 전달됨- 그렇기 때문에 main 내에서 매개변수를 호출하면 인수로 전달된 sub 함수가 호출됨  - 실행 결과 console.log("sub") 이 실행되어 콘솔 창에 sub이 출력된 것을 확인할 수 있음   - 이렇게 다른 함수에 인수로써 전달된 함수를 콜백함수라고 함 - 이전 함수에서 살펴봤던 것과 같이 호출이 아닌 매개변수 자체를 출력하면- 매개 변수 안에 담겨있는 함수가 그대로 출력되는 것을 확인할 수 있음   - 호출하면 sub 함수가 실행되어 콘솔에 "i am sub"이 출력됨  - 콜백함수는 메인함수가 원하는 언제든지 실행시킬 수 있다는 장점이 있어 많이 활용됨  - 이렇게 함수 표현식으로 쓰는 것.. 개발새발개발/JavaScript 2025. 1. 14.

• 

  JavaScript - 함수 선언식과 표현식, 화살표 함수 지난번에 이어 인프런 - 한입 크기로 잘라먹는 리액트 강의 공부 내용이다강의를 통해 알려주는 것 외에도 헷갈리는게 많아서이것저것 직접 시도해보면서 정리해보았다   1. 함수 선언식 - 함수 자체를 변수에 담을 수 있음    - ( ) 를 열면 함수가 실행되기 때문에 콘솔에 "funcA 실행"이 출력됨   - varA에 변수를 담으면서 funcA( )가 실행되기 때문에 console에 "funcA 실행" 문구가 출력됨- funcA의 반환값이 없기 때문에 varA에는 값이 저장되지 않고 undefined가 출력됨   - 실행 안한 funcA 함수 자체를 varA에 담았고, varA를 호출'( )' 하면서 console에 "funcA 실행" 문구가 출력됨   - ( ) 즉, 실행하지 않으면 어떤것도 콘솔에 출.. 개발새발개발/JavaScript 2025. 1. 13.

• 

  JavaScript - 형변환, 연산자, 조건문, 반복문 책을 보고 공부하다가 속도도 너무 느리고 최신 업데이트가 반영 안된 것도 많아짧은 시간 효율적으로 공부하기 위해 결국 인프런 강의를 결제했다 강의는 이정환 선생님의 한 입 크기로 잘라먹는 리액트! 자바스크립트는 이미 많이 봐서 잘 알고있기 때문에 빠르게 보고 있는데,중요한 것들과 처음 보는 것들, 알아두면 좋을 만한 것들 위주로 정리해보았다  형변환number+string인 경우 parseInt 를 이용해 숫자로 형변환을 할 수 있음문자+숫자+문자인 경우엔 안되고 숫자가 먼저 나올 때만 가능함  연산자1. null 연산자null이 아닌 값을 출력함맨 아래 예제의 경우 userName이 undefined인 경우 userNickName이 출력됨앞의 값이 참이면 앞의 값이, 앞의 값이 null이나 undefi.. 개발새발개발/JavaScript 2025. 1. 12.

• 

  JavaScript - 연산자, 조건문, 반복문 연산자할당 연산자오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자단축 연산자 지원 let a = 0 a+= 10 console.log(a) //10 a -= 3 console.log(a) // 7 a *= 10 console.log(a) // 70 a %= 7 console.log(a) // 0    증가 & 감소 연산자' +=' 또는 '-='와 같이 더 명시적인 표현으로 작성하는 것을 권장 증가 연산자 ('++')피연산자를 증가시키고 연산자의 위치에 따라 증가하기 전이나 후의 값을 반환 감소 연산자('--')피연산자를 감소시키고 연산자의 위치에 따라 감소하기 전이나 후의 값을 반환  let x = 3 const y = x++ console.log(x,y) // .. 개발새발개발/JavaScript 2025. 1. 6.

• JavaScript - 데이터 타입(원시 자료형) 데이터 타입 1. 원시 자료형(Primitive type)  Number, String, Boolean, null, undefined  변수에 값이 직접 저장되는 자료형  변수에 할당될 때 값이 복사됨  변수간에 서로 영향을 미치지 않음  const a = 'bar' console.log(a) // bar a.toUpperCase() console.log(a) // bar let a = 10 let b = a b = 20 console.log(a) // 10 console.log(b) // 20   2. 참조 자료형 (Reference type)    Objects(object,Array,Function)  객체의 주소가 저장되는 자료형(가변, 주소가 복.. 개발새발개발/JavaScript 2025. 1. 5.

• 

  React - 라이프사이클 메서드 사용 실습 순서1. LifeCycleSample 컴포넌트 만들기2. App에 렌더링하기3. 버튼 누르고 콘솔 창 관리하기  1. LifeCycleSample 컴포넌트 만들기// LifeCycleSample.jsimport React, { Component } from 'react';class LifeCycleSample extends Component { state = { number: 0, color: null, }; myRef = null; //ref를 설정할 부분 // 초기 state 설정 constructor(props) { super(props); console.log('constructor'); } // props로 받아온 값을 state에 동기화 // 부모에게서.. 개발새발개발/React 2025. 1. 2.

• React - 라이프사이클 메서드 카테고리와 종류 라이프사이클 메서드 컴포넌트의 수명페이지에 렌더링 되기 전인 준비과정부터 페이지가 사라질 때까지 라이프사이클 메서드클래스 컴포넌트에서만 사용 가능총 9가지 종류, 3가지 카테고리(마운트, 업데이트, 언마운트)접두사 Will : 어떤 작업이 작동하기 전 실행접두사 Did : 어떤 작업이 작동된 후 실행  라이플사이클 메서드 카테고리마운트(Mount)DOM이 생성되고 웹 브라우저 상에 나타나는 것마운트 될 때 호출하는 메서드constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용되는 메서드render : 우리가 준비한 UI를 렌더링하는 메서드componentDidMount : 컴포넌트가.. 개발새발개발/React 2025. 1. 1.

• 백준 1181 단어정렬 실버5 (sort) 문제 설명알파벳 소문자로 이루어진 N개의 단어가 들어오면 아래와 같은 조건에 따라 정렬하는 프로그램중복된 단어는 하나만 남기고 제거길이가 짧은 것부터길이가 같으면 사전 순으로 입력값단어의 개수 N~N : 단어(길이 13butiwonthesitatenomorenomoreitcannotwaitimyours 출력값조건에 따라 단어들 출력iimitnobutmorewaitwontyourscannothesitate  정답 코드# 114312KB, 152ms(PyPy3)N = int(input())sentence = set() # set으로 중복 제거for _ in range(N) : word = input() sentence.add(word)sentence = sorted(senten.. 개발새발개발 2024. 12. 31.

• 

  React - 컴포넌트 반복(map, callback, key, list, 값 추가 삭제) 자바스크립트 배열의 map() 함수map() : 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])arr.map(name, index, array, [thisArg])callback : 새로운 배열의 요소를 생성하는 함수. 3가지의 파라미터를 받음currentValue : 현재 처리하고 있는 요소index : 현재 처리하고 있는 요소의 index 값array : 현재 처리하고 있는 원본 배열thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스const numbers = [1, 2, 3, 4, 5];const processed = numbers.map(functi.. 개발새발개발/React 2024. 12. 30.

• 

  React - ref PreviewHTML에서 id 를 사용해 이름을 다는 것처럼 React에서는 ref(reference)를 이용해 DOM 에 이름을 붙여준다id를 사용할 경우 컴포넌트가 반복될 때, 고유해야할 id 값이 여러번 사용될 수 있으므로 ref를 사용하는 걸 권장한다ref는 컴포넌트 내부에서만 작동한다 refDOM을 직접적으로 건드려야 할 때 사용한다비밀번호 검증 페이지 만들기 실습ValidationSample 컴포넌트 만들기input에 ref 달기버튼을 누를 때마다 input에 포커스 주기 1. 예제 컴포넌트 생성input에서 onChange 이벤트가 발생하면 handleChange 호출하여 state의 password 값을 업데이트button에서 onClick 이벤트가 발생하면 handleButtonClick.. 개발새발개발/React 2024. 12. 29.

• 

  React 이벤트 핸들링 이벤트 핸들링사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것onmouseover, onclick, onchange 등 이벤트를 사용할 때 주의사항1. 이벤트 이름은 카멜 표기법으로 작성한다onclick (X) onClick(O)onkeyup(X) onKeyUp(O) 2. 이벤트에는 함수 형태의 값을 전달한다실행할 자바스크립트 코드를 직접 전달하지 않고, 함수 형태의 객체를 전달한다화살표 함수를 바로 만들어 전달해도 되고, 렌더링 부분 외부에 미리 만들어서 전달해도 된다 3. DOM 요소에만 이벤트를 설정할 수 있다div, button, input, form, span 등의 요소에는 DOM 이벤트를 설정할 수 있다하지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다ex) MyComp.. 개발새발개발/React 2024. 12. 28.