본문 바로가기
반응형

분류 전체보기202

[Side PJ] 야구게임 - 삽질과 배운점🛠 복잡한 상태관리를 통해 간단한 야구게임을 만들어 보는 미니 프로젝트를 진행했다. 백엔드에서 API를 제공해 주었고, 간단한 로직같은 경우는 FE단에서 관리하기로 결정했다. 프로젝트를 진행하며 겪었던 크고 작은 error들과 배웠던 점을 정리해보겠습니다-! VS Code 사소한 문법 맞추기 [ Setting -> quote 검색 -> 수정 ] 오톰과 함께 프로그래밍 하면서 발견한 사소한 번거로움은 바로 VS Code 저장 시 자동 적용되는 문법 설정이 다르다는 것 JS에서 문자열이 auto로 되어있고 Prettier 상 JSX 도 체크가 안되있었지만 single, check 로 맞추었다. merge할때 이런 사소한 부분이 변경사항으로 기록되었기 때문에 고쳐주었는데 협업할 때 이런 사소한 문제도 발생하는구.. 2021. 5. 20.
[npm & yarn 오류 ]Command failed with exit code 127 / react-scripts: command not found 현재 나는 create-react-app으로 react 프로젝트를 진행하고 있었고, npm start yarn start 하면 local에서 렌더링이 정상 동작 되고 있었다. 오류발생 함께 프로젝트를 하며 오톰과 merge를 하는 과정에서 yarn.lock을 건드렸고 (자동으로 update되기 때문에 놔두는게 좋다) 그러면서 파일이 꼬여 start가 안되는 상황 발생!! ❖ yarn start yarn run v1.22.10 $ react-scripts start /bin/sh: react-scripts: command not found ❖ npm start sh: react-scripts: command not found npm ERR! code 127 해결과정 저렇게 동일한 에러코드 127 이 떴고,.. 2021. 5. 11.
iterm 팝업 " a control sequence attempted to clear scrollback history" 뜻 vscode 말고 iterm 에서 react 프로젝트를 npm start 했더니 이런 팝업 메세지가 떴다. 예전 같았으면 아무거나 눌렀었는데, 당시 오류로 머리가 아픈 상황이라 아무거나 누르기 두려워 서치한 결과 " a control sequence attempted to clear scrollback history" 원래 vim에서 과거 3-4 가지 동작들을 볼 수 있게 default 설정되어 있는데, 이 hitory를 항상 지우려 한다. 허용할것인가거부할것인가 ? 이뜻이었다. Accept 하고 넘겼다.! 참고링크 :gitlab.com/gnachman/iterm2/-/issues/9275 Unexplained, new "control sequence" message when exiting Vim whi.. 2021. 5. 11.
[React] ReactHooks & Context API 를 이용한 state 관리 ( VS Redux) 📌 React의 상태관리는 어떻게 진행되고 있었나? React 에서 서로 다른 component를 연결하는 방법은 props drilling 이다 . top레벨의 components에서 bottom레벨의 components 에겟 속성을 전달해야 한다. < 실제 TodoList 프로젝트 당시 props drilling 상황 Atomic design 패턴을 고려하여 만든 프로젝트를 진행할 당시 * TodoList Column을 누르면 popup이 나오고 * 그 안 (의안의안)의 Buton을 누르면 popup이 닫히는 동작을 작동시킬때 popup state를 끌고끌고 들어가야 했다... 이걸 해결하기 위해서는⭐️ global state가 모든 components에게 존재해야 한다. 그 깊이가 깊든 관계가 복잡.. 2021. 5. 4.
[백준] node.js 정렬 / 1181 단어정렬 📌1181 단어 정렬 www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net 어제 풀었던 다중 조건 정렬을 이용하는게 떠올라 바로 도전! 내 풀이 const fs = require("fs"); const input = fs.readFileSync("./test").toString().trim().split("\n"); input.shift(); sorted_lst = new Set(input); sorted_lst = [...sorted_lst]; sor.. 2021. 5. 2.
[백준] 문자열 / node.js 1427 소트인사이드 📌1427 소트 인사이드 www.acmicpc.net/problem/1427 1427번: 소트인사이드 첫째 줄에 정렬하고자하는 수 N이 주어진다. N은 1,000,000,000보다 작거나 같은 자연수이다. www.acmicpc.net 내 풀이 const fs = require("fs"); const input = fs.readFileSync('/dev/stdin').toString().trim(); for (let i = 0; i b - a) .join("") .trim() ); 2143 => "2143" 하나의 문자로 입력받음 for 문을 돌며 배열에 넣.. 2021. 5. 1.
[React 오류] React Hook useEffect has a missing dependency: ' '. Either include it or remove the dependency array react-hooks/exhaustive-deps ⚠️ React Hook useEffect has a missing dependency: ' '. Either include it or remove the dependency array react-hooks/exhaustive-deps 상황 const MainDish = (props) => { const [data, setData] = useState([]); useEffect(() => { loadData(setData, props._dishType); }, []); return data.map((dish,i)=>{ } ); } React Hook인 useEffect를 이용해 data를 뿌려주는 상황 useEffect 내부에 loadData라는 함수를 사용하고 있음 const loadData = asy.. 2021. 4. 29.
[백준] node.js / 정렬 2750 숫자 정렬하기 🥲 JS로 알고리즘을 풀기로 결심했다. 파이썬은 정말 좋다 . 쉽고 간편한고 한줄로 끝나고 .. 장점은 끝도 없지만 프론트엔드 개발자가 목표인 이상 자스로 알고리즘을 풀 수 있어야 한다 ..(흑흑 고로 다시 기억을 살려 입출력 받는 법을 알아내었다. 백준은 입출력이 까다롭기 때문에... 📌2750 숫자 정렬하기 www.acmicpc.net/problem/2750 2750번: 수 정렬하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 숫자가 주어진다. 이 수는 절댓값이 1,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net 내 풀이 const fs = require("fs"); const input = fs.readFileSyn.. 2021. 4. 29.
[react 에러 ]Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. react 로 Component를 새로 만들면서 styled Component를 사용해야 하는데 난 에러! Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. 해결 과정 styled component 를 사용해 input 을 만든 후에 자식 tag를 넣어줘서 발생한 에러. input은 자식 tag(children)을 가질 수 없기 때문에 감싸주는 것은 div로 바꿔줘야 함 수정 전 //styled Component 생성 const IconWrapper = styled.input` display: flex; flex-direction: column; `; //return 수정.. 2021. 4. 28.
반응형

티스토리툴바