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

error An unexpected error occurred:

패키지 설치 중위와 같은 에러 발생ssl이슈라고 함yarnnpm

2022년 6월 14일
·
0개의 댓글
·

java openjdk 1.8 버전 설치

java1.8 버전이 설치되어 있지 않아서 바로 설치!환경변수 설정

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

java 사용중인 포트 찾아서 kill하기

ex.

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

React 초기화 시 에러 해결

리액트 모듈 설치 후 프로젝트를 실행했더니 에러 발생설명해주는대로 1번부터 순서대로 실행.gitignore에서 node_modules를 추가해준 후로 에러가 난 것 같은데..?yarn.lock 파일 삭제⚙️ 참고 npm => package-lock.jsonyarn =>

2021년 9월 6일
·
0개의 댓글
·

Storybook 설치 및 실행

React에서 Storybook 설치 및 실행하는 방법React를 위한 Storybook 튜토리얼

2021년 9월 6일
·
0개의 댓글
·

java 설치 이슈

처음 정품 자바 설치했음backend $ ./gradlew clean build 시 빌드 실패 문제자바 버전 문제로 인한 이슈로 예상 다운그레이드 환경변수 설정을 해줘야한다. (?)또한 자바 정품 같은 경우는 라이센스 문제로 기업에서 사용시 문제가 있을 수 있다고함op

2021년 8월 23일
·
0개의 댓글
·

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일
·
1개의 댓글
·

반응형과 적응형

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

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개의 댓글
·