타코벨코딩

자바스크립트는 현재 웹 어플리케이션에서 가장 혁신적인 역할을 하고 있다 . 영역을 확장하여 서버 사이드는 물론 모바일 , 데스크톱 어플리케이션에도 적용이 가능하다. 이렇게 자바스크립트만으로 규모가 큰 애플리케이션을 만들기위해 여러 프레임워크 들이 등장하게 되웠다. 주로 MVC, MVVM 아키텍처를 사용한다. 페이스북 개발 팀은 이를 해결하기 위해 어떤 데이터가 변화 할 때마다 어떤 변화를 줄지 고민하는것이 아니라 기본 뷰를 버리고 처음부터 새로 렌더링하고자 하였다 그런데 변화에 따라 렌더링을 계속하면 cpu 점유율도 크게 증가하고 메모리도 많이 사용하게 된다. 그래서 성능을 최대한 아끼면서 사용할 수 있도록 개발한 것이 리액트 이다. 리액트 이해 리액트는 MVC MVW 등인 프레임워크와 달리 오직 Vie..

배열에서 height 보다 큰 숫자의 개수를 반환 하는 함수 filter 배열의 filter() 메소드를 사용하여 주어진 조건(a > height)을 만족하는 숫자만을 필터링하고, 필터링 된 배열의 길이(length)를 반환합니다. 즉, 이 함수는 주어진 배열에서 height보다 큰 숫자의 개수를 세는 것입니다. 예를 들어, 다음과 같은 배열이 주어졌다고 가정해 봅시다. 머쓱이보다 키 큰 사람 function solution(array, height) { return array.filter(a => a > height).length } 함수는 4개의 매개변수를 받는다 매개 변수는 각 2개의 분수를 나타내며, 첫번째 분수는 분자가 num1이고 분모가 denom1이며 두번째 분수는 분자가 num2 이고 분모..

어떤 세균은 1시간에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n 과 경과한 시간 t 가 매개변수로 주어질 때 t 시간 후 세균의 수를 return하도록 solution 함수를 완성해주세요. 👇🏻내가 풀고 싶었던 방식 function solution(n, t) { for (let i = 0; i < t; i++) { result *= 2; } return result; } 해당 문제는 각 시간마다 2배 씩 증가하는 지수 함수의 값을 계산하는 것으로 이해하면 된다 따라서 주어진 시간에 따라 2를 몇 번 곱해야하는지를 계산하여 최종 값을 도출 할 수 있다. 입력값 (n,t) 2개의 위 코드는 주어진 입력값 n 과 t 에 대하여 해당 문제의 해답을 반환하는 함수 **solution**을 구현한 것입니다..

로컬 스토리지, 세션스토리지 ,쿠키 ✅web storage ? 웹 스토리지 는 데이터를 서버가 아닌 클라이언트에 저장 할 수 있도록 지원해주는 기능이다. 쿠키와 비슷하지만 쿠키는 4kb까지 저장공간을 가지지 못하는 반면 웹 스토리지는 약 5mb정도의 저장공간을 가질 수 있다는 부분에서 다르다고 본다. 웹 스토리지 데이터 구조는 key value 로 이루어져 있으며 데이터는 문자열로만 저장 반환한다. sesstionStorage를 활용해서 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구용 웹서버에 필수적으로 접근해야 하는 캐쉬용(캐쉬로 먼저 서비스 제공, 차후에 업데이트) 웹페이지의 개인화 설정들에 대한 저장과 제공..

✅문자열 에서 알파벳을 제외한 숫자만 추출해서 오름차순으로 정렬한 배열 을 반환하는 함수 const solution = (my_string) => { return my_string .replace(/[a-z]/gi, "") .split("") .sort((a, b) => a - b) .map((el) => Number(el)); }; 📌my_string 문자열에 특정한 패턴을 찾아 새로운 문자열로 치환한다. replace 메소드 | 문자열에서 특정한 패턴을 찾아 새로운 문자열로 치환하는 메서드이다. my_string.replace(/[a-z]/gi,””) 문자열에서 대소문자 구분없이 알파벳을 제외한 모든 문자 제거하기 (/[a-z]/,’’) 알파벳 소문자- 대문자 모두 대상으로 하고 g와i 플래그를 사용..

✅기간 :1월 5일 - 현재까지 첫 회사 면접을 보고 기술면접이 너무 부족해서 스스로 부끄러웠다. 어떻게 하면 부족해서 못 하는 사람이 아닌 부족한것을 노력해서 잘 하는 사람이 될 수 있는 방법을 스스로 찾았다. ✅리더 :기술 스터디 운영을 하는 것 내가 절실해서 그런가 내가 필요한 분야인 자바스크립트, 리액트 컴퓨터 이해 바탕과 지식을 같이 공부할 수 있는 팀원들이 필요했다. 구하려고 하니 막상 내가 원하는 시간 과 날짜가 맞질 않았다. 내가 운영하는 방장이 되어서 시작해보자 해서 바로 올렸는데 감사하게도 나를 포함한 6명이 참석해주었다. 이날은 4명 참석 스터디를 운영하면서 멘탈적으로 힘든일도 많았는데 의무적으로 스터디를 해야한다는 책임감 때문에 늘 참석하고 , 기술면접 학습에 귀 기울이며 집중했다...

문자열안에 문자열 구하기 문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. includes 메서드는 배열이 특정 요소를 포함하고 있는지 판별하는 메서드 ✅ 포함되어있는지확인하는메서드 = includes function solution(str1, str2) { return str1.includes(str2) ? 1 : 2; } 삼항 연산자를 사용해 includes 메소드를 사용하였다. function solution (str1, str2) { if(str1.includes(str2)) { return 1; } else{ return 2; } } 배열의 길이를 체크하기 할떈 Array 인스턴스의 len..

코드 나누기 crud 최종코드 import React, { useRef, useState } from "react"; import CreateUser1 from "./CreateUser1"; import UserListT from "./UserListT"; export default function APP1() { const [inputs, setInputs] = useState({ username: "", email: "", }); const { username, email } = inputs; const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }; const [users..

렌더링? 👩🏻 Html css 자바스크립트 등 개발자가 작성한 문서를 브라우저에서 출력되는 과정을 말한다. SPA 란? 단일 페이지로 구성된 웹 어플리케이션을 말한다. SPA는 화면이동 시에 필요한 데이터를 서버사이드에서 HTML으로 전달받지 않고(서버사이드 렌더링 X), 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링한다 기존 어플리케이션과 SPA의 차이 기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸린다. 반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 어플리케이션에 비해 화면을 구성하는 속도가 빠르다.

CSR Client Side Renderin ✅ 서버에서 전체 페이지(빈 페이지)를 최초 렌더링하고 사용자가 요청 할 때마다 클라이언트 내(브라우저)에서 렌더링 하는 것 💡CSR의 동작 과정 → 초기 화면수행 사용자가 홈페이지 접속하면 (최초 접속) - 클라이언트는 이걸 확인하고 서버로 → 요청해준다 서버는 빈페이지 (Html cssjs) 를 클라이언트에게 전달한다 전달 받은 클라이언트에서 해당 화면을 그려주고 스크립트를 수행하여 최종적인 화면을→ 사용자에게 보여준다. 사용자가 다음 액션을 수행할 경우 클라이언트 내에서 페이지를 요청하고 수행한다 💡페이지 이동 / 동작이 발생한 경우 브라우저🖥에서 클라이언트로 요청한다. 클라이언트에서 해당정보를 처리하고 브라우저🖥로 전달한다. (페이지를 이동한 경우 클라..