☁️

타입스크립트를 공부하면서 node를 최신 버전으로 업데이트를 해야했다. 그치만 계속 안되는 오류가 발생했다. 원래는 노드버전이 v17.08.5 인지 아무튼 이랬는데 아무리 최신버전을 설치해도 되지 않았다. Node 터미널을 열고 Node.js 버전을 확인해준다. node -v v x.x.x n 모듈이 설치되지 않았을 경우 n 모듈을 설치해준다. sudo npm install -g n 이경우 나는 권한? 때문에 앞에 sudo를 붙이니까 설치가 잘 되었다. Node.js를 원하는 버전으로 업데이트 한다. Stable 버전 설치 $ sudo n stable 최신 버전 설치 $ sudo n latest LTS 버전 설치 $ sudo n lts 특정 버전 설치 $ sudo n 원하는 방식을 붙여넣고 설치해준 후 ..

어느덧 내일배움카드를 통해 듣고 있는 리액트 & 리덕스 강의 7주차째다! 새삼 시간이 빠르고 많은 일이 있었지만 앞으로 나아갈 일만 남은 것 같다. 이번주에는 저번에 만들었던 것에 이어서 상태관리를 app 컴포넌트로 옮겼다. 처음에는 square 컴포넌트였다가 두번째는 board 컴포넌트로 옮겼었는데 아예 제일 최상위 컴포넌트로 상태를 옮겨서 board컴포넌트에 props를 통해 받아줄 수 있도록 변경했다. 코드는 이런식으로 다시 짰다. 좀 많이 길어지긴 했는데 앱 컴포넌트에 squres안에 들어갈 내용과 눌렀을 때 변경되는 부분등을 관리하도록 넣어준 부분이다. 처음에 똑같이 작성했는데 홈페이지에 나오지 않아서 당황했다. 나는 calculateWinner라는 함수를 계속 사용했는데 위에서 사용되지 않는다..

드디어 국비지원 교육을 통해 들을 수 있는 리액트 강의에 접어들었다. 선생님이 바뀌셔서 그런지 수업 스타일도 약간? 바뀐 것 같았다! 초반에는 클래스를 이용해 컴포넌트를 짰다. 일단.. 리액트를 함수 컴포넌트로만 자주 짜봐서 클래스 컴포넌트로 짜는법이 어색했다. 리액트로 조그마한 어플리케이션 하나를 만들었다. 원래는 완성본을 올리고 싶었지만 아직 진행중이라 완성본은 추후에 넣을 예정이다. 하지만 클래스로 컴포넌트를 짜면서 constructor, super, props의 개념을 다시 잡을 수 있었던 것 같다. 일단 이런식으로 클래스로 기본틀을 짜줬다. constructor안에 super와 state가 바뀔 대상을 지정해준다. 이때 9칸의 네모칸을 만들건데 이 안을 클릭할 때마다 변해야 하는 구조이다. 칸 ..

오늘도 내일배움카드를 통해 수강한 리액트 & 리덕스 강의 5주차 후기를 써보려고 한다. 기간이 얼마 남지 않아서.. 후딱 듣고 빨리 후기를 남겨야하는데 이것저것 할게 너무 많아서 계속 미뤄졌다. 그래서 그냥 자바스크립트 부분을 다 듣고 쓰는게 좋을 것 같아서 자바스크립트 까지 모두 들었다! 이번 강의를 들으면서 좋았던 점은 npm에 익숙하지 않은 사람들에게 좋은 강의가 되었을 것 같다. 개발을 처음 시작할 때 환경설정하는게 어찌보면 제일 힘들고.. 영어가 많아서 어지럽다. 그냥 어찌저찌 npm을 깔고 개발환경을 구축했었는데 이번 강의를 통해서 npm과 nvm의 차이점에 대해서도 정확히 알 수 있었다. 그리고 npm버전에 대해서 자세히 알 수 있었다. 그냥 숫자면 버전인가보다~ 하고있었는데 프로젝트를 배포..

문제링크 https://school.programmers.co.kr/learn/courses/30/lessons/1844 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 간만에 올리는 코테 풀이다.. 최근에 bfs, dfs 개념을 공부하고 정리할 겸 내가 푼 풀이를 다 풀어서 기록해보려고 한다. 이번 문제는 bfs(너비우선 탐색) 방법으로 문제를 풀었다. 이렇게 캐릭터가 위치해 있으면 빨간색 오각형이 있는 위치까지 최단거리로 이동하면 된다. 검은색 부분은 막혀있는 곳이므로 지나갈 수 없고 흰색 부분을 지나되 가장 짧은 거리로 이동하면 승리한다. 여기서 제한..

요즘 할게 많아서 강의를 조금 미뤘더니 너무 쌓여서 css 부분 끝까지 후딱 들어버렸다! 나름 css는 좀 할 수 있다고 생각했는데 많이 써보지 않은 속성까지 배울 수 있어서 좋은 기회였던 것 같다. css 강의가 끝나고 마지막에 예제를 만들어보는 수업을 했다. 오직 HTML과 CSS로만 이루어진 예제라서 약간의 노가다(?)가 필요했다. 오버워치 예제를 만들었는데 원래 이미지를 그냥 자바스크립트로 반복되게 굴려주면 쉬울 것 같은데 자바스크립트를 사용하지 않아서 배경이미지를 32개나 일일이 다 넣어주었다..... 그래도 따라하기 쉬운 예제라서 재미있었던 것 같다. (머리에 휴식을 주는 예제였음) 또 transform 속성을 많이 사용하긴 했는데 skew나 이런 속성은 자주 사용하지 않았어서 더 유용했던 것..

ESLint 설정을 마쳤으니 마지막으로 Prettier를 설정해보자!! 일단 Prettier 및 ESLint + Prettier 구성 패키지를 설치해주자. npm i -D prettier eslint-config-prettier 그리고 .eslintrc.cjs 파일을 열어서 extends 배열 맨 마지막에 추가해준다. extends: [ // ... 'prettier', ], 그리고 .prettierrc.json 파일을 생성해준다. 그 안에 설정하고 싶은 내용을 작성해주면 된다. { // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a) arrowParens: 'always', // 닫는 괄호(>) 위치 설정 // ex: htmlWhitespaceSensitivity: 'css', br..

초기 환경설정에이어 이제 ESlint 설정을 해보려고 한다. 1. ESLint 구성 파일 ESlint 구성 파일을 npm 초기화 명령을 사용해 생성한다. npm init @eslint/config 그러면 파일구조에 .eslintrc.cjs 라는 파일이 생성된다. 2. ESLint 린팅 제외 파일 특정 파일 또는 디렉토리의 경우 린팅을 수행하지 않도록 ESlint에 지시할 수 있다. .eslintignore 파일을 생성하고 린팅(linting) 검사에서 제외할 디렉토리를 작성하자. .eslintignore build coverage dist 3. ESLint 플러그인 구성 ESLint가 제공하는 다양한 플러그인 중 React 개발과 관련된 항목 구성에 대해 살펴보자. 1) eslint-plugin-reac..

이것 저것 하느라 강의 듣고 글 쓰는게 미뤄졌다..🥲 이번엔 CSS 속성에 관한 글을 작성하려고 한다! 나름.. CSS는 못하지 않는다고 생각하지만 flex나 grid 같은게 아직 익숙치 않은 것 같다. flex는 그래도 예전에 예제 만들며 직접 해봐서 많이 늘은 것 같다! 처음에는 가상선택자니.. 선택자 개념이 좀 헷갈렸는데 확실히 하면서 많이 익숙해지는 것 같다. 개발은.. 하면 할수록 느는(?) 과정인 것 같다. 그리고 이 강의를 들으면서 처음으로 :not 에 대해서 알 수 있었다. 개발하면서 써보지 않아서 있는지도 몰랐던.. 개념강의라 세세하게 다 알려주시는 것 같았다. 예를들어 이런 코드가 있다. p:not(.classy) { color: red; } body :not(p) { color: gr..

이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다. Vite로 환경설정 시작하기 먼저 터미널창을 열어서 Vite를 설치해보자. npm create vite@latest 그다음 순서대로 눌러줘야하는데 1. React 2. JavaScript (원하는 걸로 고르면 된다.) 그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다. 이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다. 위에서 나온 명령어 그대로 따라치면 된다! 만약 npm run dev 까지 잘 진행했다면 이런 새창이 뜨게된다! 만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다. 나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나..