profile
프론트엔드 주니어 개발자 🚀

npm ERR! code ELIFECYCLE 에러 해결하기

github 레퍼지토리를 로컬로 clone 받을 경우 자꾸 아래와 같은 에러가 발생함까먹을까봐 해결방법 적어놓음$ npm cache clean --force$ rm -rf node_modulespackage-lock.json 파일 삭제npm inpm start or n

2021년 3월 31일
·
0개의 댓글

css 방법론 - BEM 방식

css 방법론이란 쉽게 풀어쓰면 css 클래스네임을 어떻게 지으면 좋을지를 고민해보는 것.BEM은 block, Element, Modifier를 뜻한다.이 세가지로 구성된 이름을 짓는 것. 그리고 각각 \_\_와 --로 구분한다.위 코드에서 header는 Block,

2021년 3월 26일
·
0개의 댓글

반응형과 적응형

가로 크기에 변화를 줄 때, 콘텐츠들이 웹 브라우저의 가로 사이즈에 맞춰 유동적으로 재배치되는 형태일반적으로 반응형 웹은 % 단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 콘텐츠의 크기가 줄거나 커지고 오브젝트 배열도 변경된다. 웹브라우저의 가로 넓이에 따라 유

2021년 3월 26일
·
0개의 댓글
post-thumbnail

nuxt에 scss설치

nuxt.js에서 scss파일을 사용하려면 다음과 같은 방법을 통해서 사용할 수 있다.npm을 이용해서 설치 node-sass와 sass-loader를 설치nuxt.config.js파일에서 css에 추가할 scss를 입력하고 해당 경로에 scss파일을 추가하여 스타일을

2021년 3월 26일
·
0개의 댓글

React hooks

리액트에서 일반적인 값을 자손에게 전달하는 방법은 하향식으로 전달해야한다.전달 받은 값을 자손에서 부모에게 변경하고 싶다고 알려주려면, 하향식으로 전달받은 함수를 이용해야 한다.Level이 깊어질수록 불편함을 야기한다.이를 해결하기 위한 방법으로 flux, reflux

2021년 3월 19일
·
0개의 댓글

TypeScript with React

age?: number에 optional value 값을 준 것.age는 number이거나 undefined이다.cra와 typescript 설치typescript로 설치하면 jsx, js파일 확장자는 tsx, ts로 선언된다.🧨 but 타입스크립트 확장자가 아닌 기

2021년 3월 10일
·
0개의 댓글

Presenters

array: 배열 arrayOf: 특정 propType으로 이루어진 배열 bool: true or false 값 func: 함수 number: 숫자 object: 객체 string: 문자열 symbol: ES6의 Symbol node: 렌더링할 수 있는

2021년 3월 10일
·
0개의 댓글

Containers

container-presenter 패턴데이터처리와 데이터출력을 분리하는 패턴Container에서는 API Request, Exception Error, redux, dispatch...Presenter에서는 Props, UI...를 관리하는 것이다.Container에

2021년 3월 10일
·
0개의 댓글

Networking

Axios 설치사용자가 검색어를 입력할때 오타 혹은 특수문자를 입력했을 경우에 처리해주는 부분이 필요하다.만약에 @를 입력했을때 URL에서 인코딩을 해줘야한다. string만 인식하기 때문에어떠한 값을 이 함수에 넘기든지 값을 인코딩하고 문자열로 검색하게 해준다.

2021년 3월 10일
·
0개의 댓글

styled-components

설치사용방법원하는 태그의 스타일을 변수와 함께 선언해주고스타일을 선언해준 변수로 태그를 지정해준다.Link태그를 이용하면 자바스크립트 방식으로 이동하게 해준다.styled-components를 지정할때 a태그가 아닌 Link태그로 지정하고 싶다면 아래와 같이 해주도록

2021년 2월 17일
·
0개의 댓글

React Router

create-react-app 생성한뒤 src의 바깥 폴더에 .env 파일 생성본 이유는 나중에,, 항상 이렇게 프로젝트를 셋업한뒤 시작한다고 한다.Prop type 설치npm startcomponents 폴더를 생성해서 App.js 파일을 components폴더로 옮

2021년 2월 17일
·
0개의 댓글

Redux의 적용

npm 설치cdn 설치리덕스를 이용한다는 것은 결국 store를 만들어서 상태(state)를 바꾸는 것이 리덕스의 핵심이다.적용순서store가 생성되면 자동으로 state가 생긴다.다음과 같이 콘솔로 출력해본 결과 초기화해준 컬러가 출력되는 것이 확인된다.type은 반

2021년 2월 17일
·
0개의 댓글

Redux 기본

리덕스의 핵심 ex.은행정보가 저장되는 곳store에 접근할때는 직접 접근할 수 없고 누군가를 통해서만 접근할 수 있다.state : 실제 정보가 저장되는 곳reducer : store를 사용하려면 가장 먼저 reducer라는 함수를 만들어서 공급해줘야 한다. (red

2021년 2월 17일
·
0개의 댓글

실행컨텍스트

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념쉽게 말하자면 코드들이 실행되기 위한 환경코드가 실행된다면 Execution Context 내부에서 실행되고 있는 것이다.자바스크립트 엔진에서 코드를 실행하기 위해서는 실행에 필요한 정보를 알고있어야한다.변수 : 전역

2021년 2월 10일
·
0개의 댓글

SSR vs SPA

웹페이지 접속시 페이지를 화면에 그려주는 것Server side Rendering (서버사이드렌더링)요청시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식이다.서버에서 사용자에게 보여줄 페이지를 모두 구성하여 페이지를 보여주는 방식기술의 발전으로

2021년 1월 28일
·
0개의 댓글

require vs import

두 키워드 모두 외부 라이브러리를 불러오는 코드require는 NodeJS에서 사용되고 있는 CommonJS 키워드import는 ES6에서 새롭게 도입된 키워드웹팩에서 Import와 Require을 사용시 발생하는 차이점아래처럼 file1.js를 불러왔을때, 특정 실제

2021년 1월 28일
·
0개의 댓글

프레임워크

러닝커브 낮음 but 다른 프레임워크에 뒤지지 않는 성능을 자랑함 \- html, 자바스크립트 문법 지식으로 충분 \- 단순한 구성요소 \- 컴포넌트 단위의 관리역사가 짧음에도 불구하고 github에서 확인했을때 엄청난 성장력을 자랑component-based

2021년 1월 28일
·
0개의 댓글

HTML렌더링 중 자바스크립트를 만난다면?

렌더링 과정 중에 <script> 태그를 만나게 되면 진행중인 HTML파싱을 중지하고 js엔진으로 제어 권한을 넘긴다. JS파싱과 실행이 종료되면 렌더링 엔진으로 다시 돌아가 파싱이 중단된 시점부터 다시 파싱을 시작한다.이러한 원리 때문에 스크립트 소스는 body

2021년 1월 28일
·
0개의 댓글
post-thumbnail

동기방식, 비동기방식

처리해야할 작업들을 어떠한 흐름으로 처리할 것인가에 대한 관점동기는 말그대로 동시에 일어난다는 뜻요청과 그 결과가 동시에 일어난다는 약속요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다.✔ 요청 결과가 한자리에서 동시에 일어남✔ A노드와 B노드

2021년 1월 28일
·
0개의 댓글
post-thumbnail

타입스크립트란?

타입스크립트는 MS에서 개발하고 관리하는 오픈 소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작한다. 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 충분히 지원한다. 타입이라는 특징을 가지고 ES7이하의 표준을 포함하고 있다. 타

2021년 1월 21일
·
0개의 댓글