Today I Learned

필자는 mac m1으로 개발공부를 하고있는 매우 public한 개발자다. 최근에 react 공부를 깊게 공부하면서 자연스럽게 terminal을 자주 사용하는데, 망할 권한에러때문에 진도를 못빼서 매일 1시간이상 날려먹어서 굉장히 스트레스를 받아 다음번엔 검색하기 짜증나서 글로 정리한다. 에러이름은 대부분 permission denied 와 유사하다. m1 이외의 mac은 어떤지 모르겠지만 m1에서는 sudo 명령어를 사용해야만 npm install이 되고있다. 이 현상은 에러는 아닌것같지만 아마 파일의 사용자가 자동으로 root로 설정되어 있는것 같다. 해결법은 파일의 소유자를 root에서 mac의 사용자로 변경해주면 끝이다. 하위 폴더들도 모두 적용시키는 것이 정신건강에 이롭다. terminal에서 명..

1. VSCode 설정창 오픈 macOS : ⌘ + , Windows : Ctrl + , Linux : Ctrl + 2. 설정 값 변경 quickSuggestions 키워드로 검색 후 다음과 같이 설정을 변경한다. editor.quickSuggestions By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience: "editor.quickSuggestions": { "strings": on }

import React, { useState } from "react"; import { useForm } from "react-hook-form"; /* function ToDoList() { const [toDo, setToDo] = useState(""); const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event; setToDo(value); }; const onSubmit = (event: React.FormEvent) => { event.preventDefault(); console.log(toDo); }; return ( Add ); } */ interface IForm { email: s..

NextJs npx create-next-app@latest ReactJs npx create-react-app APP_NAME --template typescript npm i --save-dev @types/styled-components npm i styled-components@latest npm i recoil npm i react-router-dom npm i @types/react-router-dom npm i @types/react-helmet npm i react-helmet npm i react-hook-form npm i framer-motion npm i react-query

노마드코더 유튜브 클론코딩 #8.14 Bugfix 공부내용 정리 비디오 업로드시 유저비밀번호를 해시하던 현상 수정 유저가 비밀번호 변경시에만 해시되도록 수정 == isModified("password") userSchema.pre("save", async function () { if (this.isModified("password")) { this.password = await bcrypt.hash(this.password, 5); } }) 비디오 수정,삭제시 비디오 소유권자만 작업할 수 있도록 기능추가 story.owner의 타입은 object이고 _id의 타입은 String이므로 ' !== ' 연산자로 비교가 불가능하기 때문에 String으로 형변환을 해줘야한다. const { user: { _id..

1. css 에러를 확인할 수 있다. scss를 사용하게되면 scss -> css 변환 작업 중 에러 발생시 콘솔에 에러를 출력해준다. 2. variables / nesting css를 javascript처럼 전역변수,부모 자식 개념을 활용할 수 있다.

https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com CSS Grid 공부하는 사이트. 총 28문제까지 있는데 초보자가 기본기 익히기에 정말 괜찮은 사이트인 것 같다. 문제를 풀고 다음문제로 넘어갈 때의 성취감이 상당히 짜릿하다. 초반 문제는 대부분 비슷한 해답을 가지고 있지만 후반부로 갈수록 여러방식의 정답이 있는 것 같다. 공부중인 css를 실제 업무에서도 능수능란하게 쓸 수 있도록 깊게 파고 들어야겠다.

/* CSS Grid를 배우는 이유 : element를 Flex를 활용하여 좌우배치, 중앙배치는 용이하지만 grid형태로구현하는 것은 어려움이 있기 때문 grid-template-columns : 한 열의 너비를 결정하는 property grid-template-row : 한 행의 높이를 결정하는 property gap (gap-row, gap-column) : grid의 행 또는 열의 간격을 결정하는 property grid-template-areas : header, content, nav, footer 4가지 영역으로 위치를 할당해줌 (tiles와 유사) repeat : 반복함수 grid-column-start, grid-column-end, grid-row-start, grid-row-end 를 ..

align-items : flex line을 기준으로 아이템을 정렬한다. align-content : flex line 자체를 정렬한다. flex-wrap : wrap 으로 인해 line이 2줄 이상 되었을 때 의미가 있다.

justify-content : main axis 방향 item 제어 start end center space-between space-around space-evenly align-items : cross axis 방향 item 제어 flex-start flex-end center 아래의 사이트에서 게임을 통해 Flex에 대해 감을 익힐 수 있다. Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com