개발 블로깅/오늘의 TIL
-
[2019.09.05] 오늘의 TIL - MacOS의 $path 값을 되돌리는 법개발 블로깅/오늘의 TIL 2019. 9. 5. 23:52
개발자들이 흔히 쓰는 터미널. 오늘 오전에 터미널에서 괜히 이상한 실험을 해보다가 path 설정 값을 날려버렸다... # path 설정 값이 망가지면 벌어지는 일... (*소름 주의) 명령어 실행 directory 경로를 잊어버려서 shell script 명령어를 모두 쓸 수 없다... 이때 당황하지 않고 아래와 같이 고치면 된다. (저 때는 path 값이 원인이었을 줄 몰라서 맥북 초기화를 해야 하나 싶었다...) # 해결 방법 우선 현재 path 경로를 확인한다. (터미널에서 cd, ls, vi, nano 등 shell 스크립트는 먹히지 않지만, 기본 출력 명령어 등은 사용 가능하다.) 터미널에서 path 환경변수 값을 출력시켜본다. 위처럼 경로가 잡혀 있어야 정상이다. 다른 경로가 잡혀 있다면, 위..
-
[2019.09.03] 오늘의 TIL - 여러 항목을 나열하는 방식에 대해.개발 블로깅/오늘의 TIL 2019. 9. 3. 22:29
하나의 폼이 있다고 가정해보자. 해당 폼에는 아래와 같은 입력 항목이 있다. # 기본 정보 카테고리 이름 (필수입력*) 나이 성별 주소 메일주소 # 관심사 카테고리 취미 특기 관심 키워드 (필수입력*) # 직장 카테고리 회사명 (필수입력*) 입사날짜 퇴사날짜 위 항목을 가지고 레이아웃 배치를 할 경우 3가지 방법이 있다. 카테고리 별로 묶어서 배치 필수입력 항목끼리 묶어서 배치 막무가내로 배치 오늘 이 문제에 대해서 어떻게 하면 사용자가 보기에 더 편리할지 생각을 하다가, 옆에 디자이너 분께서 UX 관점으로 설명해주셨다. '필수 항목끼리 묶으면, 이 외의 항목은 작성을 잘 하지 않게 될 수도 있다.' 감탄~!
-
[2019.09.03] 오늘의 TIL - Type '{fontWeight}' is not assignable to type 'CSSProperties' 해결 방법개발 블로깅/오늘의 TIL 2019. 9. 3. 22:12
기본적으로 React 안에서, Tag 또는 Component에 Style을 적용하는 방법이 여러가지가 있다. 아래는 Style 적용 방법 중 하나이다. # 글씨를 굵게 하는 style // 첫 번째 방법 return ( Hello inyong~ ); // 두 번째 방법 const fontStyle = {fontWeight: 'bold'}; return ( Hello inyong~ ); 위 코드에 적힌 두 방법은 TypeScript를 사용할 때에도 거의 무방하다. 그러나 두 번째 방법에서는, TypeScript에서는 적용되지 않는 Style property가 있다. 바로 위 코드의 'font-weight' property가 그 중 하나이다. 즉, TypeScript에선 두 번째 방법은 에러메세지가 발생한다..
-
[2019.09.01] 오늘의 TIL - npm install 중, permission denied 에러 해결방법개발 블로깅/오늘의 TIL 2019. 9. 1. 12:16
npm install 설치 중에 아래와 같은 에러메세지가 떴다. Unhandled rejection Error: EACCES: permission denied, mkdir '~/.npm/_cacache/content-v2/...' # 원인 현재 접속 중인 local 계정이, npm 설치 경로에 대한 권한을 가지고 있지 않아서 발생하는 문제이다. macOS 경우, npm, homebrew 혹은 node를 'sudo'로 설치 했을 때 발생할 가능성이 크다. # 해결 방법 방법은 우선 여러가지가 있다. 1. root로 되어있는 디렉토리 권한을 모든 User 그룹의 권한으로 변경. 2. npm install -g 로 설치되는 디렉토리 경로를 자신의 home directory로 변경. 3. 기타 등등... 나는 ..
-
[2019.09.01] 오늘의 TIL - node 버전에 변경하는 방법개발 블로깅/오늘의 TIL 2019. 9. 1. 11:46
프로젝트를 git clone 후 npm install을 실행하며 발생한 오류를 처리 중 배운 내용 정리. # node 버전 환경 project의 node 버전은 8.x.x. (버전 확인은 project최상위 디렉토리의 '.node-version'파일에서 확인 가능) 나의 node 버전은 12.x의 최신 버전. $ node -v // 로컬 node 버전 확인 # install 실행 결과 엄청나게 이상한 모듈 로그가 계속 올라오며 설치과정이 끝나지 않음. # 해결 방법 내 로컬 노드 버전을 project 버전에 맞게 다운그레이 함. 1. npm Cache 삭제 $ npm cache clean --force 2. node 버전 관리 플러그인 'n' 설치 npm install -g n 3. n 최신버전 설치 n..
-
[2019.08.23] 오늘의 TIL - [Next.js] global Style의 이해개발 블로깅/오늘의 TIL 2019. 8. 23. 01:10
next.js에서 여러 페이지 및 컴포넌트에 global 방식으로 스타일을 적용할 수 있다. 아래 예시를 봐보자. components/nav.js import React from 'react' const Nav = () => ( 첫번째 컴포넌트 입니다. ) export default Nav; a 태그 하나가 들어있는 간단한 컴포넌트이다. pages/index.js import React from 'react' import Nav from '../components/nav' const Home = () => ( index 페에지 입니다. ) export default Home; index.js 페이지에서도 a 태그를 가지고 있다. 그리고 바로 a태그 바로 밑에 nav 컴포넌트를 가져와서 사용하였다. nav..
-
[2019.08.21] 오늘의 TIL - [Next.js] Style 주의할 점개발 블로깅/오늘의 TIL 2019. 8. 21. 22:36
Next.js에서 스타일을 추가할 때, 일반적으로 태그에 클래스 명을 지정해주고, style jsx라는 태그 사이에 스타일을 작성한다. 그리고 React 특성 상, style jsx 태그를 포함하여 다른 컴포넌트로 전체를 한번 감싸준다. (1번 줄, 맨 마지막 줄의 div) 그러나 이러한 일반적인 스타일 방식이 먹히지 않을 때가 있다. 바로 아래와 같다. const component = () => { const arr = ['하나', '둘', '셋']; const Temp = arr.map(element => ({element})); return ( {Temp} ); } 위 코드를 보면, View 단에 쓸 Temp 컴포넌트를 return 전에 미리 정의해서 사용했다. 저렇게 미리 만들어 놓은 컴포넌트에는..
-
[2019.08.10] 오늘의 TIL - CRA eject란?개발 블로깅/오늘의 TIL 2019. 8. 10. 21:10
CRA(Create React App)을 생성하면, 기본 스크립트 명령어가 4개가 존재한다. # CRA 기본 스크립트 명령어 4가지 // package.json "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } 그 중, 마지막 eject라는 명령어에 대해서 알아보자. # eject란? eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다. $ yarn eject or ..