완벽보다는 완료

사내어드민만 개발하다 오랜만에 사용자 사이트 개발이라 컴포넌트의 재사용성을 높이기 위해 사용하였다. 이전 프로젝트때 맛보기로 사용해본적은 있지만 처음부터 설치부터 내가 직접 세팅 하는건 처음이다!! 일단 스타일드컴포넌트 설치 방법 # with npm npm install --save styled-components # with yarn yarn add styled-components 설치가되었으면 In package.json 에 추가가 되었을 것이다. { "resolutions": { "styled-components": "^5" } } 그리고 페이지에 임포트 import 시켜서 사용하면 끝! 사실상 큰 어려움은 없다. import styled, { css } from "styled-components"..

아무리 프론트엔트 개발자이지만 네트워크 지식은 필수이다. 프로세스와 스레드의 차이를 알아보기 전에 프로그램이란, 파일이 저장 장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태 메모리에 올라가 있지 않은: 아직 운영체제가 프로그램에게 독립적인 메모리 공간을 할당해주지 않았다는 뜻이다. 모든 프로그램은 운영체제가 실행되기 위한 메모리 공간을 할당해 줘야 실행될 수 있다. 정적인 상태: 정적(靜的)이라는 단어 그대로, 움직이지 않는 상태라는 뜻이다. 한 마디로 아직 실행되지 않고 가만히 있다는 뜻이다. (ex 윈도우의 *.exe 파일이나 MacOS의 *.dmg) => 프로그램을 실행하는 순간 해당 파일은 컴퓨터 메모리에 올라가게 되고, 이 상태를 동적(動的)인 상태 '프로세스'라고 부른다. 프로..

vue만 사용하던 나로서는 hook이란는 개념 자체가 생소했다. 클래스형 컴포넌트를 접한지 얼마 안되기도 했는데 함수형 컴포넌트라니. 그래서 이번엔 hook에 대해 알아보겠다. React Hooks란? 리액트 컴포넌트는 클래스형 컴포넌트(Class Component)와 함수형 컴포넌트(Functional Component)로 나뉩니다. 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 클래스형 컴포넌트 단점 1. 계층이 너무 많아지는 단점. 2. Component가 복잡해진다. 3. Class를 Component로 쓰면 constructor, this, binding 등 지켜야 할 규칙이 많아서 코드가 복잡하고 길어집니다. 이 방식은 컴퓨터에게는 복잡한..

버튼 컴포넌트를 사이즈/색깔별로 나누면서 스타일링 하던중에 이런 오류가 발생 랜더링 할때마다 css 스타일이 적용이 안되는 오류가 발생하였다. 그래서 브라우저에서 개발자 페이지를 봐보니 Warning : Props 'className' did not match. Server : "dsdfsdf" Client: :"sdfssdf" 이런 문구가 나오는 오류여서 확인해 보니 babel을 설치하면 해결이 된다고 하여 구글링을 통해 원인과 해결방법을 알게 되었다. 원인 : Next.js는 SSR을 도와주는 프레임워크이며 SEO 등을 위해 처음 페이지를 로드할 때는 서버에서 렌더해 오지만, 페이지에서 링크를 클릭해 다른 페이지로 넘어갈 때는 CSR로 페이지를 렌더링하여 SEO와 속도를 해결해주는 프레임워크로 작동하..

styled-components 기존 css파일을 만들어서 불러오는 방법을 쓰면 불편한 점이 몇가지 있다. * 대표적인 클래스(class)의 중복 - css 파일을 분리하고, 컴포넌트 별로 따로 불러와도 결국 여러 파일이 번들링 되기 때문에 클래스는 전역으로 작동한다. 그래서 스타일이 겹쳐버릴 수 있어, 우리는 접두사를 만들거나, 부모클래스를 명시하는 등의 불편한 방식으로 해결해왔다. styled-components 우리가 어떤 컴포넌트를 만들었을때, 기존 CSS 방식의 스타일링의 불편함과 Styled components 가 어떤 방법으로 문제를 해결해 주는지 알아보자. Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS in JS 라이브러리 Javascript 코드 내에서 ..

Set() Set 객체는 JS의 표준 내장객체 Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다. →ES6에서 등장한 중복을 제거한 값들의 집합이다. //객체선언 //new Set([iterable]); let mySet = new Set(); //Set 객체 사용 //특정 요소 추가: add //Set 객체에 주어진 값을 갖는 새로운 요소를 추가 //Set.add(value) mySet.add(1);// Set { 1 } mySet.add(5);// Set { 1, 5 } mySet.add('hi');// Set { 1, 5, 'hi' } spread Operator 확산 연산자는 배열을 복제하는 데 매우 유용 let colors = ['red', 'green',..

vue에선 nuxt.js만 쓰다 리액트의 Next.js는 처음 접해본다. 포스팅하게 된 이유이다. 쉽게 말해 리액트를 기반으로 한 SPA를 빌드 할 수있록 도와주는 프레이무어크 입니다. 환경을 하나씩 잡아가지 않아도 Next.js를 이용하면 빠르게 빌드 가능합니다. Next.js의 가장 큰 장점 중 하나는 매우 간단하지만 커스터마이징이 매우 용이하다는 것입니다. Next.js특징 장점 기본적으로 SSR 제공함 - 서버사이드 렌더링의 장점 - 검색엔진 최적화 - 초기 로딩 성능 개선 - 검색엔진 최적화 - SEO (Search Engine Optimization) 더욱 빠른 페이지 로드를 위한 코드 스플리팅 자동화 HMR을 지원하는 웹팩 기반 환경 Express나 Node.js와 같은 http 서버와 함께..

ES2016 ~ ES2020 Exponentiation Operator 연산자 (**) es6 이전에는 지수 거듭 제곱에 대한 밑수 결과를 얻으려면 Math.power()를 사용했었다. //Math.power()를 사용한 제곱 구하기 var result = Math.pow(2,2); console.log(result); // 4 result = Math.pow(2,3); console.log(result); // 8 //** 연산자를 사용하여 제곱 구하기 var result = 3 ** 3; console.log(result);//9 var a = 2; a **= 4; console.log(a);//16 2 includes() includes()요소가 배열에 있는지 확인 하는 JavaScript Arra..

자바 스크립트 배열 reduce() 방법 소개 let numbers = [1, 2, 3]; let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } console.log(sum);//6 평소 for문으로 돌리면 이렇게 코드를 짜야 될것입니다. 하지만 reduce를 사용하면 이렇게 구현가능합니다. let sum = numbers.reduce(function (accumulator, current) { return accumulator + current; }); console.log(sum); // 6 reducer함수는 4 개의 인수를 사용합니다. function reducer(accumulator, currentValue, ..

최근 웹 개발 현장에서 주목을 받기 시작한 새로운 JavaScript 프레임 워크 인 Svelte에 대해 궁금증이 생겨 포스팅 하게 됐습니다. 흔히들 React , Vue , Angular를 대부분 사용하기 때문에 Svelte에 대해 생소하다. Svelte란? 간단하게 말하면 웹앱 프레임워크이다 React 또는 Vue와 같은 구성 요소 프레임 워크이지만 중요한 차이점이 있다. 작성한 컴포넌트를 컴파일러가 Javascript로 트랜스파일하는 방식으로 동작한다. 이 때문에 가상돔(VDOM)을 사용하는 다른 라이브러리(React , Vue , Angular)와는 다르게 순수 DOM을 사용한다. 특징으로는 기존 프레임워크에 비해 훨씬 적은 양의 코드 가상 DOM을 사용하지 않는다 변경된 값이 자동으로 DOM에 ..