깃에서 리액트 프로젝트를 다운받고 npm start를 했을때 자주본 에러이다.
npm/node의 버전이 package.json에 설치된 버전과 안맞아서 그런줄알고 다시 설치해보고 삭제해보고 업데이트 해보고 이걸로 엄청 뻘짓 했는데 의외로 간단한 방법이 있었다.
npm cache clean -f
방법1. 명령어로 삭제
rm -rf node_modules -> 이거슨 window에서 작동하지 않은듯 하다.
아래 명령어중 하나를 사용하면 된다.
rm -r node_modules
rm node_modules
rmdir node_modules /s /q
방법2. 폴더에서 -> 휴지통으로
npm install
Git 사용의 미숙으로 인한 로컬에 강제로 프로젝트를 덮어 써야 하는 상황이 오기도 한다.
작업한 내용을 다 날리기 싫어서 이거저거 명령어 써봤다가
돌아올수 없는 강을 건너면.....
내가 쓰는.. 치트키 같은것이다... 최근버전으로 강제 덮어쓰기...
git fetch --all
git reset --hard origin/master
git checkout -b <새 브랜치 명>
git fetch --all
git reset --hard origin/master
You have not concluded your merge (MERGE_HEAD exists)
Please, commit your changes before you can merge
pull을 했는데 위와 같은 오류가 떠서 처음엔 head에 이력이 남아서 머지가 충돌 났다고 생각하여 캐시를 지우고 head를 리셋 했다.
git clean -d -f . / git clean -d -f ""
git reset --hard HEAD
그리고 다시 pull을 진행했는데도 에러..
git merge --abort
--충돌 수정 --
git pull
git status
git commit -am "커밋 내용"
[출처::책] 함수형 자바스크립트
http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=272822398&gclid=EAIaIQobChMIi739ieqR7wIVOcEWBR2CgwMxEAQYASABEgLcrvD_BwE
좋은 프로그램의 척도는 사용성, 성능, 확장성,
기획 변경에 대한 대응력, 효율적이고 생산적으로 성공적인 프로그래밍.
책에서 설명하고 있는 좋은 프로그램의 척도 이다.
프런트단을 코딩하다 보면 내가 과연 코드를 잘 짜고 있는지, 이게 유지보수에 쉬울지 가독성은 어떨지 고민하게 된다.
코딩을 가르쳐주셨던 선생님은 현재 문제에 급급한 코딩을 할게 아니라, 후에 유동적으로 덧붙이거나 재사용하거나, 변경하기 쉽게 라이브러리를 만든다 생각하며 구조를 짜는 게 기본적인 이해나 여러 예외처리를 접할 수 있어 경험적으로 굉장히 도움이 된다 하셨다. 이를 항상 생각하면서 코딩을 짜는데 이게 여간 어려운 것이 아니다.
높은 모듈화 수준은 생산성을 높이고
오류가 없는 함수들의 조합은 프로그램의 안정성을 만드는
성공적인 프로그래밍의 핵심.
책에서는 filter, map, find 등 메서드 사용 전, 하드코딩으로 함수로 사용하는 방식으로 구조 파악용으로 진행하고 있다.
/**********************
* 함수와 클로저를 이용한
* 함수형 자바스크립트 스타일
**********************/
function addMaker(a){
return function(b){
return a + b;
}
}
addMaker(10) //function(b){return a + b;}
addMaker(10)(5); //15
var add5 = addMaker(5);
add5(3) //8
add5(6) //11
var add7 = addMaker(7);
add7(3) //10
add7(10) //17
/*******
* 실무적인 코드
*******/
var users = [
{id:1,name:"ID",age:32},
{id:2,name:"HA",age:25},
{id:3,name:"BJ",age:28},
{id:4,name:"PF",age:32},
]
var temp_users = [];
for(var i=0, len=users.length; i<len; i++){
if(users[i].age<30) temp_users.push(users[i])
}
console.log(temp_users) //(2)[{...},{...}] , temp_users.length = 2;
// 위코드를 함수형으로 변경
/*
* filter
*/
function filter(list, predicate){
var new_list = [];
for(var i=0,len=list.length; i<len; i++){
if(predicate(list[i])) new_list.push(list[i]);
}
return new_list;
}
var users_under_30 = filter(users,function(user){return user.age < 30});
console.log(users_under_30.length) //2
var ages = [];
for(var i=0,len = users_under_30.length;i<len;i++){
ages.push(users_under_30[i].age);
}
console.log(ages) //(2) [25, 28]
- 절차 지향 프로그래밍은 위에서 아래로 내려가면서 특정 변수의 값을 변경해 나가는 식으로 로직을 만들고,
- 객체지향 프로그래밍은 객체들을 만들어 놓고 객체들 간의 협업을 통해 로직을 만든다.
- 함수형 프로그래밍에서는 항상 동일하게 동작하는 함수들을 만들고 보조 함수를 조합하는 식으로 로직을 완성한다.
/*
* map
*/
function map(list, iteratee){
var new_list = [];
for(var i =0,len=list.length;i<len;i++){
new_list.push(iteratee(list[i]));
}
return new_list;
}
var users_under_30 = filter(users,function(user){return user.age > 30});
console.log(users_under_30) //(2) [{…}, {…}]
var ages = map(
filter(users,function(user){return user.age > 30}),
function(user){return user.age;}
)
console.log(ages) //(2) [32, 32]
function log_length(val){
console.log(val.length);
return val;
}
console.log(log_length(
map(
filter(users,function(user){return user.age < 30}),
function(user){return user.age;}
)
))
// 2 -->log_length함수안 콘솔값
// (2) [25, 28] -->맨마지막 콘솔값/*
* 함수를 리턴하는 함수 bvalue
*/
function bvalue(key){
return function(obj){
return obj[key];
}
}
console.log(log_length(
map(
filter(users,function(user){return user.age < 30}),
bvalue('age')
)
)) // (2) [25, 28]
console.log(log_length(
map(
filter(users,function(user){return user.age < 30}),
bvalue('name')
)
)) // (2) ["HA", "BJ"]
>> 위 코드 통합본
See the Pen eYBojQa by JNoony (@jnoony) on CodePen.
| [javascript] Vanilla JS를 이용한 리스트 more처리 (0) | 2021.04.26 |
|---|---|
| [Javascript] 논리연산자를 이용한 동적 셀렉트박스 (0) | 2021.04.06 |
| [javascript] alert, prompt, confirm을 이용한 상호작용 (0) | 2021.03.31 |
| [javascript]함수형 자바스크립트 실용성-2 (0) | 2021.03.08 |
이직을 준비하다 보니 마크업(퍼블리셔) 부문도 필기, 라이브테스트 형식으로 코딩테스트를 많이들 했다.
어느정도 개념이 있는지 확인 해볼필요가 있는거 같아 찾게 된 질문지.
아래 마크업 개발자 테스트 질문지를 만들어낸 글쓴이는 2015년도에 막내레벨을 확인 하기 위해 작성했고,
면접관으로 들어갔을때에 질문과 비슷하다고 했다.
[ 질문지를 작성자 (원본) ] https://tobyyun.tumblr.com/post/115282929482/%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%9C%EB%B0%9C-%EB%A0%88%EB%B2%A8-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A7%88%EB%AC%B8
마크업 개발 레벨 테스트 질문
팀의 막내 개발자의 마크업 개발 역량 확인을 위해, 마크업 개발 레벨 테스트용 질문을 만들어 보았습니다. 제가 마크업 개발자를 뽑는 면접관 역할을 하게 될 때에 사용하는 질문들과도 유사한
tobyyun.tumblr.com
※ 보라색은 답 또는 추가 설명
1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?
me) 독타입으로 작성된 코딩의 유형을 선언하게 되는데 이를 사용하지 않으면 각 브라우저별로 깨지는 현상이 발생
DOCTYPE 선언은 HTML 작성된 버전을 브라우저에게 알려주는 것으로 웹브라우저가 내용을 올바르게 출력하도록 도와줍니다.
DOCTYPE 선언을 하면 표준 모드로 작동되고 선언하지 않으면 호환 모드(Quricks Mode)로 작동되서 의도와 다르게 표시
2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
me) b => strong , i => em
b & strong : 글자 굵게, i & em : 기울기
3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
me) block요소 = header,section,artcle,footer,main,nav,div,ul 등
inline요소 = span,img,strong,em,a,br,small,label 등
block: address, article, aside, blockquote, canvas, div, dd/dl/dt , fieldset, figcaption/figure, footer, form, h1-h6, header, hr, ul/ol/li, main, nav, noscript, p, pre, section, table/tr/th/td, video....
inline: a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, output, q, samp, script, select, small, span, strong, sub, sup, textarea, time, tt, var...
4. blockquote 태그는 어떤 용도로 사용해야 할까요?
me) 인용문구에 사용
인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보
5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
me) 인라인 스타일은 가독성도 떨어트릴 뿐더러 유지보수 하는데도 어렵다
6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
me) <img src="해당파일주소/myPhoto.jpg" alt="사진이미지">
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
me) id는 중복해서 사용할수 없기 때문에 유니크하게 활용시 사용
8. ‘TopArea'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
me) 낙타형태의 네임은 상관 없으나 대문자로 시작하면 안됨
네이밍은 - (하이폰) 사용을 기본으로 한다.
시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.
[참조] http://dev.paik.ac.kr/guide/guide/index.html
9. 'blue-box'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
me) 클래스명의 해당 태그의 내용이 직관적으로 보여지지 않아서 협업이나 유지보수 일때 접근성이 비효율적이라 생각
10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
me) 사이드 메뉴나, 본문에 추가되는 요소들을 적용
주요한 주제가 아닌 부차적인 요소 적용
11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?
me) label
12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?
me) midea query="max-width:600px"
1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
me) visibility:hidden, display:none
이 질문은 개인적으로 크로스브라우징 처리시 중요한 사항인거 같다.
display: none 은 당연히 화면에도 코드구성에도 숨김처리라서 리더가 당연히 몬읽을줄 알았지만,
visibility: hidden은 보이지는 않지만 너비를 차지하고 있기 때문에 당연히 스크린 리더에서도 읽힐줄 알았는데..
스크린 리더에서도 읽히지 않는다.
그래서 찾아본 방법은 아래내용과 같다
1. position:absolute;top:-9999px;left:-9999px;
2. text-indent:-9999px;
3. clip속성
ex)block tag{ overflow:hidden;
position:absolute;
boder:0;
margin:-1px;
width:1px; height:1px;
clip: rect(1px 1px 1px 1px);
clip-path: inset(50%); }
inline tag{ overflow:hidden;
display:inline-block;
boder:0;
margin:-1px;
width:1px; height:1px;
clip: rect(1px 1px 1px 1px);
clip-path: inset(50%); }
※ screen out 기법으로 black hat을 피하기 위해 고안된 접근성 방법
[참조] https://developer.mozilla.org/ko/docs/Web/CSS/clip-path
2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?
me) 부모에 overflow:hidden;값 주거나, float을 가진 자식에 가상요소로 clear:both주기
3. border-box와 content-box의 차이점은 무엇일까요?
me) box-sizing의 속성이며 border-box는 해당 태그의 콘텐츠 영역 padding,border값까지 전부 포함,
content-box는 해당 콘텐츠 영역
4. position: relative는 어떤 경우에 사용 하나요?
me) 자식에게 기준이 될 부모태그에게 사용
5. CSS Reset은 무엇이며 왜 사용할까요?
me) 스타일로 적용한 웹폰트라던지 마진이나 패딩 등 오류가 생길시 reset으로 가장 기본값으로 적용
6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
me) sass/scss를 사용해봤음.
7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
me) !important > inline style > id > class
8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
me) color, font
visibility, opacity, font, color, line-height, text-align, white-space
9. Sprite image 기법을 사용하는 이유는 무엇일까요?
me) 이미지를 불러오는 횟수를 줄여 로딩속도를 빠르게 처리
서버 요청 수가 감소되고 대역폭이 절약됨
10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
me) background-position, background-size
11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
me) 시간은 오래걸리지만 순차적으로 디벨롭 하는것
12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?
me) woff, woff2
TTF/OTF, WOFF, WOFF2, SVG, EOT
13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.
me) -webkit-, -moz-
-webkit- : 구글 , 사파리 브라우저에 적용
-moz- : 파이어폭스 브라우저에 적용
-ms- : 익스플로러에 적용 , 보통 생략합니다.
-0- : 오페라 브라우저에 적용
14. 반응형웹디자인의 3가지 요소를 꼽아보세요.
1. Fluid Grid : 가변성이 있는 그리드(레이아웃)이용
2. Flexible Images : 고정값이 아닌 퍼센트개념
3. Media Query : 디바이스에 따라 스타일 다르게 적용
15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?
me) 기준 해상도 360px(xmpi),
[4개의 반응형 분기점]
1. 낮은 해상도의 PC, 테블릿 가로 : ~1024px
2. 테블릿 가로 : 768px ~ 1023px
3. 모바일 가로, 테블릿 : 480px ~ 767px
4. 모바일 : 320px ~ 480px
[3개의 반응형 분기점]
1. pc : 1024px ~
2. 테블릿 가로, 테블릿 세로 : 768px ~ 1023px
3. 모바일 가로, 모바일 세로 : ~ 768px
16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.
me) ie7, ie9
17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
me) slice(c), select(m,l), ctrl+a
marquee tool, lasso tool, slice tool, Select
18. jpg, gif, png의 차이점을 설명해보세요.
me) jpg: 고해상도 이미지
gif : 움직이는 이미지, 용량이 작음
png: bmp또는 투명도 드러간 이미지, 용량이 작음
19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
me) 작성된 html에 추가, 수정 없이 콘텐츠 삽입을 원할때나, float를 사용햇을때
가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때
20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?
me) 1. 부모: 높이값,text-align:center; line-height:높이값;
2. 부모: 너비값,높이값,position:relative;
자식: position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:너비;heigth:높이;
3. 부모:display:flex;justis-content:center;align-item:center
4. position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
1. IR기법 : 이미지 대체 텍스트 제공을 위한 css 기법
- Phark Method : 배경이미지, 텍스트 넣고 텍스트만 숨김처리
display:block;
overflow:hidden;
font-size:0;
lien-height:0;
text-indent:-9999px;
- WA IR : 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때
display:block;
overflow:hidden;
position:relative;
z-index:-1;
width:100%; height:100%;
The following untracked working tree files would be overwritten by merge...
대부분 현재 수정중인 파일을 다른 작업자가 이미 커밋한 상태일때 git pull을 하면 발생하는 에러코드이다.
git add .
git stash
git pull 또는 git pull upstream master
git stash apply 또는 git stash pop
git stash는 동기화 먼저 진행하고 add 로 내가 수정한 파일은 head로 임시 저장된 상태
git pull을 진행해 최근버전으로 프로젝트 가져오고,
git stash apply를 해서 내가수정한 파일과 합치거나, git stash pop로 머지를 강제 진행하고 삭제