본문 바로가기

전체 글182

[Node JS] 간단한 기본정리 Part 1 [html 동사,라우터,미들웨어] 1. 기본 원리 1. const app: express.Express = express() app은 Express 서버를 의미하고 express로 운영할 서버를 의미 2. const port:number = 8000 TS 문법 (: type 저장) 포트 번호 8000에서 열겠다 3. get, send '/' 경로로 접근하면 get 할건데 (요청, 응답) 을 인자로 해서 send해줌 2. 미들 웨어 app. http 동사 (GET, POST,PUT,PATCH,DELETE....) 를 라우터라고 부른다 라우터는 프론트로부터 request를 받으면 db에서 꺼내, 이에 맞는 JSON이든 뭐든 보내준다(대부분 JSON) 서버로 Reqeust가 오면 라우터 처음부터 끝까지 쭉 훑게 되는데, 코드가 많아지고 방대해.. 2022. 7. 28.
React 오류Uncaught TypeError: Cannot read properties of undefined (reading 'filter') 리스트를 수정하고 왜 반영이 안되고 자꾸 오류만 뜨고 이상한 파일에서 오류가 난다 했더니 state는 비동기적이고 정의를 해두지 않으면 undefined 값으로 나오게 된다 근데 자꾸 그 undefined 된 값을 가지고 filter 니 length 니 하려고 하니까 오류가 났다 그래서 reducer dispatch 함수를 살펴봤더니 action 조건에 따른 switch 문에서 newState로 state를 바꿔놨는데 맨 밑에서 return 을 안했다 -> return 을 안하니까 값이 반환이 안되고, 이 변환 값이 없으니까 자꾸 undefined 에러가 떴다 2022. 7. 22.
[React]Command "create-react-app" not found , Couldn't find a package.json file in ~ create-react-app 오류 해결법 1. 만들고자 하는 폴더에서 yarn 으로 yarn 설치 -> yarn 패키지를 사용할 것 이라는 점 .2. yarn init (만들고자 하는 폴더 가서) -> node_modules와 package.json 파일 생성 3.yarn add global create-react-app create-react-app 이라는 모듈 설치해주고 4. yarn create-react-app 앱이름 시작 2022. 7. 13.
[React 개발 기록장][7번째 이야기] sass로 CSS 적용하기 ▶ 리액트에서 CSS를 적용할 수 있는 방법은 다양하나 - 별도 css 파일 저장 + link로 포함하는 방법보다, --> Component 단위로 css를 적용하는 방법을 react에서는 이용해보자 ◈ sass 사용하는 법 1. add 하기 yarn add --dev node-sass 2. shared.scss 파일 만들기 3. 각각의 모듈에 따른 scss 파일 만들기 각각의 컴포넌트에 해당하는 별도의 scss 파일 만들기 4. js 파일에 적용시키기 styles 라는 이름으로 import 해서 사용하기 2022. 7. 2.
[React 개발 기록장][6번째 이야기] 이벤트 처리하기 1. 이벤트 처리하기 console.log("Clicked")}/> # 함수로 넘겨주기 # {} 사용하기 #DOM 요소에만 가능(컴포넌트 요소는 X) 2. 예시 2022. 7. 2.
[React 개발 기록장][5번째 이야기] 속성값 type + default 정의하기 ▶각 속성값의 타입을 지정해주는 것이 생산성을 높여준다는 관점에서 각광 받음 (스크립트 언어는 원래 사용을 잘 X) prop-type 패키지 사용법 1. 설치 ☞ yarn add prop-types 2. 사용법 -- Button.js 라는 파일을 하나 만들고, -- theme, label 인자들을 받아서, defaultProps => default 값 propTypes => 속성값의 type/ (isRequired를 통해서 입력이 없을 때 에러 메시지) 2022. 7. 2.
[React 개발 기록장][4번째 이야기] 속성값 1. 속성값 ● 속성값이란? 부모 컴포넌트에서 데이터/함수를 자식 컴포넌트로 넘겨준다 변경 X {} 로 다양한 타입의 값, 함수 지정 가능 2. 속성값으로부터 상탯값 정의하기 this.props or this.state 이후에 지정해둔 이름을 호출할 수 있다 -> this.state.postId this의 state에서 postId를 불러옴 3. 예시 ☞ componenetDidMount, Update 로 클래스 컴포넌트에 생명을 줄 수 있다(차후에 따로 다룰 예정) 2022. 6. 29.
[React 개발 기록장][3번째 이야기] 상탯값(state) 1. 상탯값 ● 상탯값이란? - props 처럼 렌더링에 영향을 주는 데이터를 가지고 있는 객체 - UI(Element) 반영을 위해 유지해야할 데이터들의 묶음 - getter, setter 함수를 제공/ 상탯값 직접 변경 X 2. 상탯값 사용하기 ▶ Class형 Component this.state로 상탯값에 접근하고 this.setState로 상탯값을 변경 onClick 함수 내부에서 value라는 변수에 this.state로 값을 받아서 1을 더해주고, 이를 setState로 값을 변경해줌 {} 안에 넣어서 UI에 반영시켜줌 3.상탯값 저장 - 컴포넌트 내부 컴포넌트 객체 단위로 상탯값을 유지, 하위 컴포넌트로 전달 setter 함수로 상탯값 변경( this.setState/ useState 훅) .. 2022. 6. 29.
[React 개발 기록장][2번째 이야기] 엘리먼트와 컴포넌트, antd 적용시키기 1. antd 적용시키기 ● antd란? 쉽게 react식 부트스트랩이라고 생각하자. admin과 같은 부수적인 관리 페이지에서 사용할 용도로 적용 ● antd 적용법 1. yarn add antd ▶ 꼭 package.json 이 있는 경로에서 추가해줘야함!!! 2. app.css 파일에 @import '~antd/dist/antd.css' 추가 or app.js 상단에 import'./antd/dist/antd.css' import하기 2. 엘리먼트/ 컴포넌트 ▶Component란? props(속성값), state(상탯값),element, logic 으로 이루어진 재사용이 가능한 독립된 모듈 -> 레고블록처럼 여러 컴포넌트들을 조합해서 하나의 오브젝트를 만들 수 있다 ▶Element 란? Compon.. 2022. 6. 29.
[React 개발 기록장][1번째 이야기] 프로젝트 시작하기 1. nodeJs 설치 ▶node -v 로 설치되어있는지 확인 가능! 2. 패키지 관리자 ▶npm: Node Packaged Manager, 기본 패키지 관리자(python pip과 유사) ▶npx: 새로 추가된 도구(잘 안 쓰이는듯?) ▶yarn: 안정적인 지원이 있어서(facebook), 자주 사용한다고 함 => 프로젝트에서 yarn 사용 예정 3. yarn 설치하기 ▶ npm install --global yarn 설치 후 yarn --version 으로 확인가능 ▶ yarn.lock => yarn install 할때마다 생성되고, 모듈의 버전을 저장해서 같은 버전을 사용하게 해준다 4. yarn create-react-app 앱이름 프로젝트 start 하고 ▶yarn start 로 프로젝트 구동가.. 2022. 6. 29.
[알고리즘 챌린지 31일 정리] 31일동안 100문제가량 풀었고, 새로운 bfs, dfs,dp , 탐색 등 다양한 유형들을 접할 수 있었다. cs 기초 지식도 적게나마 습득했고, 앞으로의 공부 방향에 대해 더 확고하게 할 수 있는 경험이었다. 앞으로 알고리즘 문제들을 더 다양하고 어려운 문제들로 문제를 풀어나가야겠다 외에도 프로젝트를 django, react, react native => 프레임워크 공부를 9월 복학 전까지 해보자 2022. 6. 27.
[백준 2606- 바이러스][파이썬]-31일차 https://www.acmicpc.net/problem/2606 문제 신종 바이러스인 웜 바이러스는 네트워크를 통해 전파된다. 한 컴퓨터가 웜 바이러스에 걸리면 그 컴퓨터와 네트워크 상에서 연결되어 있는 모든 컴퓨터는 웜 바이러스에 걸리게 된다. 예를 들어 7대의 컴퓨터가 과 같이 네트워크 상에서 연결되어 있다고 하자. 1번 컴퓨터가 웜 바이러스에 걸리면 웜 바이러스는 2번과 5번 컴퓨터를 거쳐 3번과 6번 컴퓨터까지 전파되어 2, 3, 5, 6 네 대의 컴퓨터는 웜 바이러스에 걸리게 된다. 하지만 4번과 7번 컴퓨터는 1번 컴퓨터와 네트워크상에서 연결되어 있지 않기 때문에 영향을 받지 않는다. 어느 날 1번 컴퓨터가 웜 바이러스에 걸렸다. 컴퓨터의 수와 네트워크 상에서 서로 연결되어 있는 정보가 주어.. 2022. 6. 26.

티스토리툴바