전체 글 88

JS | arr.sort 정렬 메소드 사용하기 오름차순 내림차순 | 프로그래머스 중앙값 구하기

정렬 하기 위해서는 sort 메소드를 사용한다. → arr.sort () 배열을 재 정렬해 주는메소드 이다. 그럼 → arr.sort () 로 숫자로 오름차순 정렬하기 풀이 A,b 두 요소를 전달하고 a-b로 크기를 비교해서 양수인지, 음수인지 0인지 만 본다. A가> b 보다 크면 양수로 리턴 , 같으면 0 으로 , a가 a-b) : sort() 메소드를 사용하여 배열을 오름차순으로 정렬합니다. arr.sort((a,b) => b-a) : sort() 내림차순 예제로 보겠다 아래는 프로그래머스 중앙값 구하기 function solution(arr) { return arr.sort((a, b) => a - b)[Math.floor(arr.length / 2)]; } 풀이 이 함수는 배열 arr 을 인자로..

Next.js | 리액트 프레임워크 |구조 | 왜 사용하는지?

React 프레임워크 이다. https://nextjs.org/learn/foundations/from-javascript-to-react 공식문서 📌 리액트? React는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리 이다. 사용자 인터페이스란 ? 사용자가 화면에서 보고 상호작용하는 요소 를 말한다. 라이브러리란? React가 UI 를 빌드하는데 유용한 기능을 제공하지만 애플리케이션에서 해당 기능들을 사용할 위치는 개발자들에게 맡기는 의미이다. 서론이였고 그래서 Next.js 뭔데? Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된오픈 소스 웹 개발 프레임워크이다. 리액트 문서는 Next..

카테고리 없음 2023.03.09

JS | 특정문자열 바꾸기 replaceAll

- replaceAll 정규식 표현 특정 문자를 모두 바꾸기 위한 자바스크립트 문자열 객체 replaceAll 매소드와 정규식 표현이다. const AB = "ice, ice ,cream, choco, chip'; AB.replaceAll("ice", "iceTea") 해석 const AB에는 특정한 ice이라는 문자열을 iceTea라고 변경해주었다. 그래서 AB는 "iceTea, iceTac, cream, choco, chip" 으로 값이 변환된다 프로그래머스 레벨 0 코딩테스트 | 특정 문자 제거하기 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_st..

React 에서 불변성을 지켜야 하는 이유?

자바스크립트에서 불변성은 : 메모리 값을 변경할수 없는 것 의미다. 얕은 복사 와 깊은 복사가 있다 얕은 복사는 객체 a.b 가 있으면 데이터의 주소를 똑같이 참조 하고 있음 a객체에 접근헸음에도 b객체의 값이 달라지는 것 (참조타입 객체 예시를 생각하면 쉽다) 생략... 깊은 복사는 아예 새로운 객체 안 속성 (property) 만 복사해서 사용하는 것 이다. spread 연산자를 사용하여 { ... x} 불변성을 유지시킨다. React에서 state 의 변화값을 비교하는 데에서는, 불변성을 지켜주어야 변경됨을 인지한다 React의 함수형 프로그래밍에서 사용되는 순수함수는, 동일한 값을 인풋하였을 때 동일한 값을 아웃풋하는 함수를 뜻하며, 외부의 값을 변경하는 것과 같은 사이드 이펙트를 막는 함수이다 ..

JS | 자바스크립트 불변성이란? 원시타입 vs 참조타입

불변성을 지켜야 한다 무슨 말일까.. 모르기 때문에 찾아보는 공부! 불변성이란 ? 사전 적으로 불변성이란 값이나 상태를 변경 할 수 없는 것 이다. 자바스크립트에서 객체가 생성된 이후 그 상태가 변경 할 수 없는 것을 의미한다. 여기에서 상태를 변경할 수 있는 것과 값을 재할당하는 것은 다르다는 것 을 알아야한다. let a = 10 ; let b = a ; a = 20; console.log(a,b); // 20 10 위의 코드는 a에 10을 할당하고 b -> a 가 가르키는 주소 를 가리킵니다. 이때 a의 값을 20으로 변경시켜준다. 만약 값을 직접 변경하는 것이면 a,b 둘다 20을 출력해야한다. 하지만 자바스크립트에서 number 값은 불변성을 유지 해서 새로운 a =20이라는 값을 가지는 주소를..

JS |var let const 차이 , TDZ 설명

변수의 선언 3단계 설명 변수의 선언 개념부터 이해 자바스크립트는 변수는 선언 초기화 할당 이 3가지 의 단계를 거쳐 생성이 됩니다. 선언→ 변수를 실행 컨텍스트의 변수 객체를 등록함 | 쉽게 즉 변수를 등록 초기화는 실행 컨텍스트에 존재하는 변수 객체에 아까 선언된 변수를 위한 메모리 만드는 단계 할당: 사용자가 undefined 로 초기화 된 메모리 에 다른 값을 할당 주는 단계임 var let const 각 변수의 선언 설명과 TDZ 발생하는 변수 var : 변수 선언전에 선언단계와 초기화 단계를 동시에 진행한다. 그래서 실행 컨텍스트 변수 객체의 → 변수를 등록하고 , 메모리 를 undefined 로 만든다. 그래서 선언하기전에 호출을 해도 undefined 로 호출이 되는 호이스팅이 발생함 EC..

cs 2023.02.28

git init 초기화 되돌리기 - 에러발생

에러가 생긴 이유? push 안된 이유가 아마도 로컬과 원격이 동기화 되지 않았었던 것 같다. 그래서 당황한 나머지 문제점에 파악하지 않고 기억이 나는 대로 명령어들을 치기 시작하였다. pull 당기고 rebase도 하고 이건 뭐 멍청한 순간들이였다. 다음달 천천히 문제점에 대해 살펴본 다음에 stash 확인하면서 구글링하기 시작하였다! 정말 어제의 절망과 다르게 10분 이내 빠르게 해결을 하였다. 작년에 나였으면 이틀이상 하루이상 걸렸을 텐데 뿌듯했다. I solved Error Github 3things stuff errors git init 초기화 로 인해 다시 되돌리는 깃 고치기 1. git reflog 이전 커밋 내역 출력 2. git reset —merge 로 돌린다. 3. git checko..

todo 투두앱 만들기 react app

https://todo-3db52--preview-name-28y1dpy1.web.app/ https://todo-3db52.web.app/ React App todo-3db52.web.app 리액트 면접기술을 학습하면서 코딩 연습사마 todo app 프로젝트를 구현하여 리액트를 학습하였습니다. 입력창에 입력 값을 생성, 저장 추가, 그리고 삭제 기능을 구현하였습니다. firebase 를 사용하여 배포를 하였습니다. issue 1. firebase 현재 17 버전이 매우 불안정해서 지우고 16버전으로 다시 다운받았습니다. 구글링을통해 몇 개 없는 정보를 통하여 빠르게 수정하였다. 2. npm install -g firebase Error 무한 에러가 뜨면서 설치가 되지 않아 당황스러웠지만 빠르게 구글링 ..

프론트엔드 면접 질문 1

웹팩 (Webpack)? 코드는 재사용성을 높이고 유지보수를 편리하게 하기위해 모듈화 된다. 웹팩 은 자바스크립틍 어플리케이션 을 위한 정적 모듈 번들러이다. 여러 의존 관계에 있는 모듈들을 하나의 js 파일로 번들링하는 역할을 수행한다. 웹 팩은 4가지로 구성된다. 1. 엔트리 : 모듈의 시작점을 의미한다. 2. 아웃풋 : 엔트리를 시작으로 모든 모듈을 하나로 묶어 범들링 을 한 결과물을 내보낼 위치를 선정한다. 3. 로더 : 로더는 비 자바스크립틑 파일을 웹펙이 이해하게끔 변경하는 역할을 함 4. 플러그인 : 번들된 결과물을 처리한다. ESlLint , Prettier ESLint 는 ecma Script 를 lint 는 에러가 있는 코드에 표시를 달아 놓은 것 을 의미한다. ESLint => 자바스..

Coding 🖐🏻 2023.01.20