FE
-
1. 변수란 무엇인가? 왜 필요한가?변수하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수가 필요한 이유기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용할 수 있기 때문에 필요하다. 변수가 없다면, 이전에 실행한 연산 결과를 재사용하고 싶을 때, 메모리주소를 통해 연산 결과가 저장된 메모리공간에 직접 접근해야함 -> 매우 위험변수를 통해, 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. 2. 식별자어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.식별자는 어떤 값이 저장되어있는 메모리주소를 기억(저장)한다.값이 아니라, '메모리 주소'를 기억하고 있다.즉, 식별..
[Javascript] 변수1. 변수란 무엇인가? 왜 필요한가?변수하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 변수가 필요한 이유기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어들여 재사용할 수 있기 때문에 필요하다. 변수가 없다면, 이전에 실행한 연산 결과를 재사용하고 싶을 때, 메모리주소를 통해 연산 결과가 저장된 메모리공간에 직접 접근해야함 -> 매우 위험변수를 통해, 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. 2. 식별자어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.식별자는 어떤 값이 저장되어있는 메모리주소를 기억(저장)한다.값이 아니라, '메모리 주소'를 기억하고 있다.즉, 식별..
2024.07.05 -
0. 초창기초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적으로 사용됨웹 서버 -> 대부분의 로직 실행브라우저 -> 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준 1. Ajax 1996년 Ajax의 등장 Javascript를 이용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 교환하는 통신을 의미한다. 이전의 웹 페이지로 시작해 로 끝나는 완전한 html 코드를 서버로 부터 전송받아 웹페이지 전체를 렌더링함필요없는 부분까지 전부 렌더링 -> 불필요한 데이터 통신 발생성능 불리화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 -> 화면 깜빡임 현상 발생 Ajax 도입 후서버로부터 필요한 데이터만 전송받아 ..
[Javascript] 자바스크립트 성장의 역사0. 초창기초창기 자바스크립트는 웹페이지의 보조적인 기능을 수행하기 위해 한정적으로 사용됨웹 서버 -> 대부분의 로직 실행브라우저 -> 서버로부터 전달받은 HTML과 CSS를 단순히 렌더링하는 수준 1. Ajax 1996년 Ajax의 등장 Javascript를 이용해 서버와 브라우저가 비동기(asynchronous) 방식으로 데이터를 교환하는 통신을 의미한다. 이전의 웹 페이지로 시작해 로 끝나는 완전한 html 코드를 서버로 부터 전송받아 웹페이지 전체를 렌더링함필요없는 부분까지 전부 렌더링 -> 불필요한 데이터 통신 발생성능 불리화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링 -> 화면 깜빡임 현상 발생 Ajax 도입 후서버로부터 필요한 데이터만 전송받아 ..
2024.07.04 -
React Navigation React Native에서 네비게이션을 구현하는데 사용되는 많은 라이브러리들이 존재한다. 그 중 대표적인 것이 React Navigation이다. ( React에서 react-router-dom을 사용하여 라우팅을 구현한다면, React-Native에서는 React Navigation을 사용한다) React Navigation를 적용해보자 패키지 설치npm install @react-navigation/native npm install @react-navigation/stack 이제 이 네비게이션을 바탕으로 App.tsx를 수정해 보자import React from 'react'; import { NavigationContainer } from '@react-navigati..
[React Native] React NavigationReact Navigation React Native에서 네비게이션을 구현하는데 사용되는 많은 라이브러리들이 존재한다. 그 중 대표적인 것이 React Navigation이다. ( React에서 react-router-dom을 사용하여 라우팅을 구현한다면, React-Native에서는 React Navigation을 사용한다) React Navigation를 적용해보자 패키지 설치npm install @react-navigation/native npm install @react-navigation/stack 이제 이 네비게이션을 바탕으로 App.tsx를 수정해 보자import React from 'react'; import { NavigationContainer } from '@react-navigati..
2024.07.03 -
자바스크립트에서 하나의 배열 안에 여러개의 객체를 담아서 관리하는 경우가 종종 있다. 이 때, 배열 내부의 객체 요소들을 정렬하기 위해서는 어떻게 해야할까? 배열 내부의 객체 요소들을 정렬하는 기준은 객체의 특정 속성일 수 있다. user 객체배열 정렬하기const user = [ { name: '장원영', age: 21 }, { name: '안유진', age: 25 }, { name: '설윤', age: 34 }, { name: '민지', age: 88 },]; 위와 같이, user라는 객체 배열을 정렬한다고 가정하자. 각 원소의 속성들을 보면 age라는 숫자값과 name이라는 스트링값이 있다.이 age와 name속성을 기준으로 각각 나이순, 이름순으로 객체들을 정렬할 수 있다. 나이순..
[Javascript] 객체로 구성된 배열 정렬하기자바스크립트에서 하나의 배열 안에 여러개의 객체를 담아서 관리하는 경우가 종종 있다. 이 때, 배열 내부의 객체 요소들을 정렬하기 위해서는 어떻게 해야할까? 배열 내부의 객체 요소들을 정렬하는 기준은 객체의 특정 속성일 수 있다. user 객체배열 정렬하기const user = [ { name: '장원영', age: 21 }, { name: '안유진', age: 25 }, { name: '설윤', age: 34 }, { name: '민지', age: 88 },]; 위와 같이, user라는 객체 배열을 정렬한다고 가정하자. 각 원소의 속성들을 보면 age라는 숫자값과 name이라는 스트링값이 있다.이 age와 name속성을 기준으로 각각 나이순, 이름순으로 객체들을 정렬할 수 있다. 나이순..
2024.06.30 -
자바스크립트에서 랜덤으로 숫자를 추출하는 경우, Math.random() 매서드를 활용한다. Math.random() 매서드와 사용방법에 대해 알아보자. 1. Math.random()Math.random() 함수는 0이상 ~ 1미만의 난수를 생성한다 Math.random(); 2. Math.floor()Math.floor() 함수는 해당 숫자와 같거나, 해당 숫자보다 더 작은 정수를 반환한다.Math.floor(2.5); //결과 2Math.floor(-2.5); //결과 -3 3. 범위가 지정된 랜덤 숫자 추출하기 3.1 ) Math.random() 함수를 이용하여, 숫자의 범위 지정하기랜덤 숫자의 범위를 지정할 수 있다. Math.random()*(최대값 - 최소값 + 1) + 최소값 3.2)..
[Javascript] 난수 생성, 랜덤 숫자 추출하기자바스크립트에서 랜덤으로 숫자를 추출하는 경우, Math.random() 매서드를 활용한다. Math.random() 매서드와 사용방법에 대해 알아보자. 1. Math.random()Math.random() 함수는 0이상 ~ 1미만의 난수를 생성한다 Math.random(); 2. Math.floor()Math.floor() 함수는 해당 숫자와 같거나, 해당 숫자보다 더 작은 정수를 반환한다.Math.floor(2.5); //결과 2Math.floor(-2.5); //결과 -3 3. 범위가 지정된 랜덤 숫자 추출하기 3.1 ) Math.random() 함수를 이용하여, 숫자의 범위 지정하기랜덤 숫자의 범위를 지정할 수 있다. Math.random()*(최대값 - 최소값 + 1) + 최소값 3.2)..
2024.06.30 -
replace()와 replaceAll()replace()와 replaceAll() 함수는 모두 자바스크립트에서 문자열의 특정한 문자 또는 문자열을 치환하는 함수이다.replace()는 조건 대상이 되는 첫 번째 문자 하나만 변경되어서 반환한다.const message = "Hello Hello world!";// "Happy Hello world!"document.write(message.replace("Hello", "Happy")); * replace()함수는 전달받은 문자를 수정하는 것이 아니라, 새로운 값을 만들어 '반환'한다 (기존의 문자는 그대로 존재) replaceAll()은 조건 대상이 되는 모든 문자를 만들어 반환한다. const message = "Hello Hello world!"..
[Javascript] replace(), replaceAll() - 문자열의 일부 문자 치환하기replace()와 replaceAll()replace()와 replaceAll() 함수는 모두 자바스크립트에서 문자열의 특정한 문자 또는 문자열을 치환하는 함수이다.replace()는 조건 대상이 되는 첫 번째 문자 하나만 변경되어서 반환한다.const message = "Hello Hello world!";// "Happy Hello world!"document.write(message.replace("Hello", "Happy")); * replace()함수는 전달받은 문자를 수정하는 것이 아니라, 새로운 값을 만들어 '반환'한다 (기존의 문자는 그대로 존재) replaceAll()은 조건 대상이 되는 모든 문자를 만들어 반환한다. const message = "Hello Hello world!"..
2024.06.22 -
includes() 함수Include() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인한다.배열에서도 사용 가능하다string.includes(searchString [,position]) Include() 메서드는 문자열에서 searchString이 발견되면 true를 반환하고, 그렇지 않으면 true를 반환합니다. 그렇지 않으면 false를 반환한다.position 매개변수(optional)는 searchString 검색을 시작할 문자열 내의 위치를 지정한다. 위치의 기본값은 0입니다.include()는 대소문자를 구분하여 문자열과 일치한다. 배열 let arr = [1, 2, 3, 4, 5];if (arr.includes(3)) { console.log('배열에 숫자 3이 포함되..
[Javascript] includes() 함수 사용방법includes() 함수Include() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인한다.배열에서도 사용 가능하다string.includes(searchString [,position]) Include() 메서드는 문자열에서 searchString이 발견되면 true를 반환하고, 그렇지 않으면 true를 반환합니다. 그렇지 않으면 false를 반환한다.position 매개변수(optional)는 searchString 검색을 시작할 문자열 내의 위치를 지정한다. 위치의 기본값은 0입니다.include()는 대소문자를 구분하여 문자열과 일치한다. 배열 let arr = [1, 2, 3, 4, 5];if (arr.includes(3)) { console.log('배열에 숫자 3이 포함되..
2024.06.22 -
아래 코드를 작성하는데, 배열이 계속 변경되어서 애를 먹었다. 또한, 비교도 잘 되지 않았다.알고보니 forEach,비교 연산자, map()메서드 등 자바스크립트의 기본 원리를 숙지하지 못해서 발생한 문제인 것. 문제https://school.programmers.co.kr/learn/courses/30/lessons/181881 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 기존 코드function solution(arr) { function transfer_arr(lst){ lst.forEach((element,index)=>{ ..
[Javascript] forEach() vs map() / 배열의 비교 / 배열의 값 변경아래 코드를 작성하는데, 배열이 계속 변경되어서 애를 먹었다. 또한, 비교도 잘 되지 않았다.알고보니 forEach,비교 연산자, map()메서드 등 자바스크립트의 기본 원리를 숙지하지 못해서 발생한 문제인 것. 문제https://school.programmers.co.kr/learn/courses/30/lessons/181881 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 기존 코드function solution(arr) { function transfer_arr(lst){ lst.forEach((element,index)=>{ ..
2024.06.22