전체 글 (52) 썸네일형 리스트형 zsh: command not found: brew 에러 homebrew 설치 후 'zsh: command not found: brew'가 나온다면, path 설정이 안되어서 brew 명령어를 찾지 못하는 것이다. 터미널에서 아래 명령어로 zsh 설정 파일을 연다. vi ~/.zshrc zsh shell이 brew의 경로를 알 수 있도록 아래의 코드를 넣어준다. export PATH=/opt/homebrew/bin:$PATH 터미널을 껐다 켜준다. Netlify 배포방법 1. 설치하기 npm install netlify-cli -g netlify deploy 2. 회원가입 후 승인 3. Create & configure a new site 4. Team & Site name 설정 5. publish directory = build로 클라이언트 측 라우팅 지원 public/_redirects 파일을 생성하고 /* /index.html 200 6. draft url 로 최종 결과물을 확인하고, 프로덕션 모드로 배포 netlify deploy --prod https://create-react-app.dev/docs/deployment#netlify Deployment | Create React App npm run build creates a build directory wi.. Git hub page 배포 방법 1. package.json에 homepage를 추가 "homepage": "https://myusername.github.io/my-app", "homepage": "https://myusername.github.io", "homepage": "https://mywebsite.com", homepage 필드를 사용하여 빌드된 HTML 파일의 루트 URL을 결정 2. gh-pages 설치 및 scirpt 추가 npm install --save gh-pages yarn add gh-pages 3. package.json 에 스크립트 추가 "scripts": { + "predeploy": "npm run build", + "deploy": "gh-pages -d build", "start": "react-s.. 뷰 프로젝트 세팅 가이드 https://msko.tistory.com/65 Vue CLI 없이 Wepack으로 프로젝트 구성(+ ESLint) 1. Vue package 설치 npm i vue@next npm i vue 로 설치 시, Vue2 버전이 설치됨 기본적은 Vue의 문법을 사용하는 용도 2. .Vue 파일을 관리하기 위한 Package 설치 npm i -D vue-loader@next vue-style-loader @v.. msko.tistory.com { "name": "vue-setting", "version": "1.0.0", "description": "bolier settings for vue", "main": "index.js", "scripts": { "start": "SET NODE_ENV=developm.. 리액트 프로젝트 세팅 가이드 1. 프로젝트 폴더 생성 및 초기화 mkdir my-project cd ./my-project npm init 결과 : 프로젝트 루트에 package.json 파일 생성 2. 리액트 설치 npm install react react-dom yarn add react react-dom react : 리액트 라이브러리 react-dom : 리액트 엘리멘트 렌더링 라이브러리 3. 바벨 설치 npm install -D @babel/core@7 @babel/preset-env@7 @babel/preset-react@7 @babel-core : babel의 core 코드 @babel-preset-react : jsx를 javascript로 트랜스파일링 @babel-preset-env : es6+ 문법을 구브라우저에서.. 프론트 개발자 면접 질문 리스트 보호되어 있는 글입니다. 몰입의 조건 몰입이란, 자의식이 사라질 만큼 어느 것에 심취한 상태를 뜻한다. 몰입을 하는 순간 자신의 한계를 뛰어 넘는 능력을 이끌어내 희열을 느낄 수 있다. 몰입의 조건 세 가지는 다음과 같다. 1. 목적 의식, 왜 이것을 해야 하는 가? 2. 즉각적인 피드백 3. 도전 의식이 생길만한 난이도의 목표 출처 : [몰입의 즐거움] - 미하이 칙센트미하이 react 프로젝트 구성하기 보호되어 있는 글입니다. 두꺼비세상 면접 준비 보호되어 있는 글입니다. 웹팩 정리 기준 : v4.41 강의 노트 : Introduction | 웹팩 핸드북 (joshua1988.github.io) npm((Node Package Manager)) : js 라이브러리를 관리할 수 있는 공개 저장소 npm을 사용하는 이유 1. 프로젝트에서 사용하는 라이브러리 버전과 의존성 관리 2. 라이브러리 설치 용이 npm init -y : package.json 생성 npm 설치 npm install something --global 로 하면, node_modules 폴더가 아닌 %USERPROFILE%\AppData\Roaming\npm\node_modules 에 설치됨. dependencies(배포용 라이브러리)와 devDependencies(개발용 라이브러리) 전자는 애플리케이션의 로직과 연관.. 왜 그 기술을 쓰는가? 실수 일기의 목적 실수한 나를 자책하기 보다, 실수로부터 배우는 사람이 되자. 오늘의 실수 제목 vuex를 왜 쓰는가? 날짜 2021/04/26 상황 알람기능 개발중, 알람데이터를 브라우저 스토리지에 쌓고, 알람 목록 화면을 열면 브라우저의 데이터를 긁어와 vuex에 업데이트 한 후 사용하였다. 그러다 보니, 데이터를 업데이트 할 때, vuex에도 브라우저에도 이중으로 관리를 해줘야했다. vuex를 왜 사용했는 지 선임님이 나에게 되물었고, 내가 왜 이걸 썼는지 고민해보게 됐다. 그 결과 이 상황에서 꼭 vuex에 모든 데이터를 받아올 필요는 없고, 데이터가 단지 업데이트 되었음을 알려주기 위한 어떤 플래그 값만 vuex에서 관리하면 된다는 것을 깨달았다. 배울점 왜 vuex를 써야만 하는가를 고민해보고.. React 문서 주요개념 요약 jsx란? react 엘리먼트를 생성하는 javascript를 확장한 문법 const name = 'Josh Perez'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); 바벨이 JSX를 React.createElement() 호출로 컴파일 const element = ( Hello, world! ); const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); 엘레멘트 렌더링 react element는 react의 가장 작은 구성 요소이며, 브라우저 DOM 과는 다르게 순수 오브젝트이다. 따라서.. 블로그에 codepen 코드 가져오기 1. codepen.io 회원가입을 합니다. 회원가입 후 코드를 작성해 주세요. 2. Save 버튼을 누르면 우측 하단에 Embed 버튼이 생성됩니다. Save 버튼을 누른 후 Embed 버튼을 눌러주세요. 3. 테마를 선택하고 우측 하단 iframe을 선택합니다. iframe 안의 코드를 복사해 주세요. 4. 블로그 텍스트 편집기를 HTML로 바꾼 후 코드를 붙여 넣으세요. 완성! See the Pen gOgjWwa by leepro (@leepro225) on CodePen. block 레벨과 inline block 레벨 요소 HTML태그는 블록 레벨 요소와 인라인 요소로 나눌 수 있습니다. 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 따라서, 블록 레벨 요소는 언제나 새로운 줄에서 시작합니다. 블록 레벨 요소는 또다른 블록 레벨 요소와 인라인 요소를 포함할 수 있습니다. 이러한 특징으로 인해 인라인 요소보다 큰 구조를 생성할 수 있습니다. block 레벨 요소 리스트 문서의 분할 페이지나 구역의 푸터 입력 폼 ~ 제목 페이지나 구역의 헤더 구분선 목록 탐색 링크를 포함 문단 웹페이지의 구역 표 연락처 정보 단락 콘텐츠 부가 콘텐츠 긴 인용구 상세 정보 위젯 대화상자 inline 요소 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소가 필요한 공간만 차지합니다. 인라인 요소는 새로운.. 실무에서 자주 쓰는 필수 CSS 선택자 정리 실무에서 자주 쓰는 필수 CSS 선택자 아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다. 종류 선택자 예시 설명 클래스선택자 .class .intro intro를 클래스로 가진 모든 요소 Both .class1.class2 .name1.name2 name1과 name2를 둘 다 가진 모든 요소 자손선택자 .class1 .class2 .name1 .name2 name1의 자식 중 name2를 클래스로 가진 모든 요소 아이디선택자 #id #firstname firstname을 아이디로 가진 모든 요소 전체선택자 * * 모든 요소를 선택, 렌더링 성능 저하 가능 요소선택자 element p 모든 p 요소 And element,element div, p 모든 div 요소와 모든 p 요소 자손선택자 elem.. 이전 1 2 3 4 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
