본문 바로가기

분류 전체보기

 (39)
프로그래머스 문자열 앞의 n글자 프로그래머스 코딩 기초 트레이닝문자열 앞의 n글자문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string의 앞의 n글자로 이루어진 문자열을 return 하는 solution 함수를 작성해 주세요.문자열과 정수 n이 주어졌을 떄 그 길이 만큼 요소를 출력하기 떄문에루프문을 사용하고 조건문을 통해 i 여기서 i≤n 조건으로 한다면 예를 들어 “He110W0r1d” 이면 “He110W”까지 출력이 된다이유는 인덱스가 0번 부터 시작하기 때문이다. 그래서 조건문을 i function solution(my_string, n) { var answer = ''; for (let i = 0; i
왜 웹 개발은 Javascript로만 해야할까? JS의 탄생자바스크립트의 탄생95년, 약 90%의 시장 점유율로 웹 브라우저 시장을 지배하고 있던 넷스케이프 커뮤니케이션즈는 웹페이지의 보조적인 기능을 수행하기 위해 브라우저에서 동작하는 경량 프로그래밍 언어를 도입하기로 결장하였다. 그렇게 탄생한 것이 브렌던 아이크가 개발한 JS다.96년 3월에 넷스케이프 내비게이터2에 탑재되었고 모카로 명명되었다.그러다 9월 라이브스크립트로, 12월에는 오늘날의 우리가 아는 자바스크립트라는 이름으로 최종 명명되었다.현재 모든 브라우저의 표준 프로그래밍 언어로 자리 잡았다. 그러나 JS가 탄생하고 얼마 뒤 파생버전인 Jscript가 출시되어 위기를 맞는다자바스크립트의 표준화96년 8월, MS는 JS 파생 버전인 JScript를 인터넷 익스플로러 3.0에 탑재했다. 하지..
Next.js Next.jsNext.js프레임워크다. 주도권은 Next.js가 가지고 있다. 자유도가 React에 비해 낮다.React 렌더링React 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있다. (초기 접속 이후에 빠르다 치명적인 단점)처음 컨텍츠가 나타나는데 걸리는 시간 (FCP) 웹 브라우저의 성능을 지향한다.3초 이상 : 이탈률 32% 증가,5초 이상: 이탈률 90% 증가,6초 이상: 이탈률 106%증가,10초 이상: 이탈률 123% 증가 ⇒ 리액트에 치명적인 단점 ⇒ 리액트에 이러한 단점을 상쇄한게 Next.js 사전 렌더링 인다.리액트 렌더링 할 떄 JS 번들을 할 떄에 모든 코드(모든 페이지에 컴포넌트)가 들어 있다.Next.js 사전 렌더링브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하..
자바스크립트에서의 메모리란? 원시 값과, 참조 값이 있다.원시 값이란let a = 1;let b = a;라고 변수를 선언하고 할당을 하면은 메모리에서는 두 개의 주소가 생성이 된다.같은 주소를 참조 할꺼 같지만 사실은 두 개의 주소가 만들어 진다.원시 값은 불변해야 하기 떄문에 이렇게 만들어진다.참조값객체를 생성하고 새로운 변수를 만들어 객체를 할당해 주면은 원시 값과 마찬가지로 새로운 주소를 참조 할꺼같지만참조 값은 주소를 바라보고 그 안에 프로퍼티 값을 참조 하고 있다.여기서 하나의 객체를 변경을 한다면 2개의 객체의 프로퍼티 값이 변경이 된다. 이를 가변성이라고 한다. // 참조 값 예시let obj1 = { name: "Alice" }; // 객체 생성let obj2 = obj1; // obj2는 obj1이 참조하는 동일한 ..
React React라이브러리와 프레임워크 차이점프레임워크는 모든 것들이 들어 있는 주머니이다. 대신 틀이 있기 떄문에 그 틀에 맞춰어 사용해야 한다.라이브러리는 단 한 가지 문제를 해결하기 위해서 있는 것이다.내가 원하는 것을 골라 쓸 수 있다. 페이스북 에서 UI를 해결하기 위해서 만들었다.리액트가 가지고 있는 철학UI를 표기하고 이벤트에 반응하는 라이브러리다.UI들을 컴포넌트 단위로 보여주고 이벤트로 반응하는 거라고 볼 수 있다.독립적이다.CSR(클라이언트 사이드 렌더링)웹팩이 내가 작성한 코드와 리액트가 동작하기 위한 코드를 압축해서 보여준다.UI를 표기 해준다.리액트 이벤트이벤트 전파 시 함수를 연결해야 해줘야하고 리액트가 한 단계 감싸서 이벤트를 한다.함수는 메모리 셀에 참조 값이기 때문에 함수를 연결을..
프론트엔드 아키텍쳐 아키텍쳐아키텍쳐란?많은 옷을 정리 할 떄에 옷장에다가 색깔별 또는 그에 맞게 정리하는 것 같은 느낌이다.아키텍처라는 것은 좋은 구조를 만드는 것이다.인터페이스는 서버가 어떤 데이터를 요청받고, 어떤 형식으로 응답할지를 정하고, 클라(프론트엔드)는 그 규격에 맞춰 데이터를 요청하고 응답을 처리한다.MVC란?View(화면): 웹 프론트에서는 대개 최종적으로 HTML과 CSS로 만들어지는 결과물을 의미한다.Model(데이터): 어딘가에는 실제의 데이터가 반영이 되어 나타나야 한다. 이러한 데이터를 주관하는 영역을 Model이라고 한다.JS의 Object일 수도 있고, 서버의 API로 받는 데이터일수도 있고, 서버에 있는 DB일 수도 있다."Model"에서 말하는 객체 형식이란, 자바스크립트의 객체(Object..
쿠키란 쿠키쿠키란?쿠키는 웹 서버가 생성하고, 이를 웹 브라우저로 전송하는 작은 정보 파일, 쿠키는 브라우저가 수신하여 사용자 세션을 추적하거나, 사용자 경험을 개선하는 데 사용 웹 사이트가 쿠키를 사용하면, 사용자의 다음 방문 때 더 맞춤화된 콘텐츠나 서비스를 제공할 수 있다.쿠키의 주요 기능사용자 정보 제공: 쿠키는 사용자의 기본 정보를 저장하여 사이트가 사용자의 요구에 맞게 개인화된 서비스를 제공하는 데 도움을 준다.장바구니 추적: 전자상거래 사이트에서는 사용자가 장바구니에 담은 상품을 기억하는 데 쿠키를 사용보안: 쿠키는 로그인 정보를 저장하거나 사용자의 인증을 처리하는 데도 사용쿠키의 저장 위치브라우저 내 저장: 쿠키는 웹 브라우저에 저장되며, 예를 들어 크롬에서는 **"쿠키스"**라는 파일에 저장, ..
XML, XHTML XML, XHTML, HTML이란HTML(하이퍼텍스트 마크업 언어) HTML은 하이퍼텍스트 마크업 언어 이는 웹 페이지를 구조화하고 웹 브라우저에서 표시할 수 있도록 돕는 마크업 언어 프로그래밍 언어가 아니다는 점에서 중요한 차이점 HTML은 여러 엘리먼트(요소)로 이루어져 있다. 예를 들어 p, div, a 등이 있다. 태그는 웹 페이지 내에서 하이퍼링크를 생성하거나, 텍스트를 강조하거나, 다른 콘텐츠를 정의하는 역할 HTML의 구조 여는 태그와 닫는 태그: HTML 태그는 여는 태그와 닫는 태그로 구성 여는 태그가 있으면 반드시 닫는 태그도 있어야 한다. 주석: HTML에서 주석은 형식으로 작성되며, 주석은 브라우저에 표시(x) XML (확장 가능한 마크업 언어) ..

티스토리툴바