프론트 엔드

[Javascript] 자바스크립트: '==' 와 '==='는 다르다!

무엇이 다른가? "=="와 "==="의 차이점은 무엇일까, 예를 들어, 숫자를 숫자 리터럴과 피교하면 '=='는 그것을 허용하지만 '==='는 두 변수의 형식이 동일하지 않는 경우, 값뿐만 아닌 두 변수의 유형도 확인하므로, 허용하지 않는것, 즉 '==='는 'false'으로 반환하고 '=='는 'true'로 반환한다. '==' 와 '===' 의 차이점 자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하므로, 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. 위에서 말했듯, ===는 변수유형을 고려하는 반면, ==는 변수 값을 기반으로 유형을 수정한다. 다음은 자바스크립트 프로그래밍 언어에서 "==" 연산자와 "===" 연산자 사이의 두 가지 차이점들이다. '==' 연산자를 이용해 서로 다른 유..

[JS] JS와 TS의 차이점

Javascript vs Typescript TypeScript는 Javascript의 기반의 언어 Javascript는 클라이언트 측 스크립트 언어 Typescript는 객체 지향 컴파일 언어 객체 지향 프로그래밍 패러다임은 데이터 추상화에 중심 - 객체와 클래스라는 두 주요 개념을 기반으로 한다. Javascript 웹 개발에 주로 사용되는 언어 웹 페이지를 대화식으로 만드는 프로그래밍 언어 폼 유효성 검사, 애니메이션 적용 및 이벤트 생성을 수행하는 역할 클라이언트 측 스크립트 언어 - 사용자가 웹 브라우저를 열고 웹페이지를 요청할 시 해당 요청이 웹 서버로 이동한다. 멀티 스레딩, 멀티 프로세싱 기능이 없음 Typescript Javascript의 상위 집합으로 Javascript의 모든 기능이 ..

[프로그래머스 코딩테스트] 문자열 다루기 기본

[프로그래머스] 문자열 다루기 기본 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인 해주는 함수, solution을 완성하세요, 예를 들어 s가 "a1234" 이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다. 제한 사항 s의 길이는 1이상, 길이 8 이하인 문자열입니다. 입출력 예 s return "a234" false "1234" true 정규표현식을 이용한 풀이법 function solution(s) { return (s.length === 4 || s.length === 6) && /^[0-9]+$/.test(s); } test() 메서드는 주어진 문자열이 정규 표현식에 만족하는지 판별하고, 그 여부를 true 또는 false로 반환한다. 1. ^ : 시..

[TS] 제네릭 (Generic)

제네릭이란 무엇인가? 제네릭 타입은 타입에 유연성을 제공하여 컴포넌트 등에서 재사용을 가능케 해주는 타입이다. 타입의 유연성이란 :string :number 등과 같이 고정된 타입이 아닌 사용에 따라 여러 타입을 사용하게 해준다는 것 이는 any 타입과 매우 흡사하지만 차이점이 있다. 제네릭은 타입 정보가 동적으로 결정되는 타입이다. 제네릭 타입은 다양한 타입을 받을 수 있다는 유연성이란 점에서 any 타입과 흡사하지만 타입의 정보가 동적으로 결정된다는 차이가 있다. any 타입과 제너릭 any 타입 사용 코드 다음 any type을 사용한 코드이다. // identityy의 인자 타입은 any // 이 함수에 반환되는 타입과 any function identity(arg: any): any { retu..

[React] Atomic 패턴에 대하여

아토믹 패턴 디자인은 시스템을 만드는 하나의 방법론으로 총 5가지의 구분 단계가 있다. Atoms(원자) Molecules(분자) Organisms(유기체) Templates Pages 뷰를 Atoms(원자) -> Molecules(분자) -> Organisms(유기체) -> Templates -> Pages 순으로 작은것들을 만들고, 결합해 좀 더 큰 단위의 뷰를 만들어 나가는 디자인 시스템이다. 웹앱은 여러 페이지 단위 이루이지고 페이지는 Input, button, form 등의 태그들로 이루어져 있다. 이를 원자, 분자, 유기체같은 생물학적인 개념으로 접근한 것이다. 장점 1. 재사용 가능한 설계 시스템을 제공합니다. 컴포넌트들을 혼합해 일관성 있고 재사용의 효율을 높이는 디자인을 할 수 있다. 2..

[React] Component와 props, state

🚀 Component, props, state Component 컴포넌트를 통해 UI를 재새용 가능한 개별적인 여러 조각으로 나눈다. 컴포넌트는 개념적으로 Javascript의 함수와 유사한 방식이다. 'props' 라는 입력을 받은후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 엘리먼트는 일반 객체(plain object)로 React 앱의 가장 작은 단위이다. 엘리먼트는 컴포넌트의 '구성요소' 이다. 컴포넌트를 선언하는 방식에는 함수형 컴포넌트 와 클래스형 컴포넌트가 있다. Class Component class HelloWorld extends React.Component { render() { return Hello!; } } 클래스형 컴포넌트는 React.Componen..

[javascript] map,filter,every 함수

❗️map과 filter함수의 공통점은 기존배열을 건드리지 않으면서 요소들을 순회한 후 새로운 배열을 리턴한다는 뜻이고, 차이점을 map은 콜백함수가 적용된 새 요소, filter는 조건문을 만족한 요소들을 반환한다는 점이다. map() Array.prototype.map() 배열을 순회하며 요소마다 callback 함수 적용 후 새로운 배열로 리턴한다. let newArray = arr.map(callback(currentValue[, index[, array]]) { // return element for newArray, after executing something } 안티패턴이지만 parameters(파라미터)를 확인하기 위해 코드를 적어보면 예시 let numbers = [1, 4, 9] le..

[React] Container-Presenter 패턴

개요 React의 가장 기본적인 디자인 패턴으로는 Container Presenter 패턴이 있다. container + presenter 패턴은 데이터처리와 데이터출력을 분리 하는 것이다. 즉 Container에서는 API Request, Exception Error, state 변경, redux, dispatch... Presenter에는 props, UI..을 관리하는 것이다. Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 Props로 넘긴다. 예시 // src/components/blog/Blog.js import React, {Component} from 'react'; class Blog extends Component { state = { loading: tr..

[React] React - Next Router vs React Router

먼저 모든 코드에 의미를 담고서 이야기 해보면 Next 프레임워크와 React 프레임워크를 사용하면서 두 가지 차이점에 대해 궁금증이 생길것이다. React.js는 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 Next.js는 사실상 React.js와 많이 다르면서 취업하는데 있어 다른 개발자들에 비해 이점을 가져가지 못할 수 있다. 결론은 Next.js는 React.js를 감싸고 있는 프레임워크로 보면된다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 존재해 오히려 React보다 좀 더 배울만한 것이 많다고 볼 수 있다. 그런데, Next.js와 React에서 차이가 유일하게 크게 보이는 것은 바로 Router부분이다. 라우팅을 구..

[React] React Immutable

Immutable 이란? immutable은 react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리다. 불편함(Immutablity)를 지키며 상태관리하는 것을 편리하게 해준다. 설치법 npm install immutable Immutable의 필요성 Immutable은 이름에서도 알 수 있듯 객체의 불변성을 제공하는 라이브러리이다. react의 컴포넌트는 state 또는 상위 컴포넌트에서 전달받은 props(상태값)이 변할 때 리렌더링된다. 만약 직접 객체안에 내부 값을 직접 수정한다면 레퍼런스가 가리키는 곳은 같기 때문에 똑같은 값으로 인식한다. 따라서, 전개 연산자나 assgin함수를 이용하여 새로운 객체나 배열을 만들었지만 구조가 복잡할 경우에는 그 코드 또한 복잡한 방식으로 구성되었다...

[프로그래머스 알고리즘] 같은 숫자는 싫어

문제설명 배열에 arr이 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이떄, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려 합니다. 단, 제거가 된후에는 남은 수들을 반환할때 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면 arr = [1,1,3,3,0,1,1,] 이면 [1,3,0,1]을 return 해야합니다. arr = [4,4,4,3,3] 이면 [4,3]을 return 해야합니다. 배열 arr에서 연속적으로 나타나는 숫자를 제거하고 남은 수들을 return 하는 solution 함수를 완성해주세요. 제한 사항 배열 arr의 크기: 1,000,000 이하의 자연수 배열 arr의 원소 크기: 0보다 크거나 같고 9보다 작거나 같은 정..

[React] Virtual DOM 이란?

Virtual DOM이란? Virtual DOM은 말 그대로 가상 돔이다. 그런데, 가상 돔이 필요한 이유는 무엇일까? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있다. 브라우저 작동 방식 "브라우저 엔진" 과 "렌더링 엔진"은 무었일까? 그림에서 알 수 있듯이 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진이다. 렌더링 엔진은 HTML documents와 웹 페이지의 리소스들을 브라우저에 시각적으로 출력해준다. 브라우저가 화면에 그리는 과정 요청과 응답 만약 브라우저에서 어떠한 링크를 누르거나 URL에 주소를 입력하고 엔터를 누르면 그 페이지 안에서 HTML요청이 이루어지고 해당 서버에서 HTML document를 응답으로 준다. HTML 파싱과 D..