삐제제의 개발 노트

class App extends React.Component { constructor(props) { super(props); console.log("constructor"); } state = { count: 0, }; add = () => { this.setState((currnet) => ({ count: currnet.count + 1 })); }; minus = () => { this.setState((current) => ({ count: current.count - 1 })); }; componentDidMount() { console.log("component rendered"); } componentDidUpdate() { console.log("I just updated"); } com..

* 미디어 쿼리를 안해서, 모바일로 보면 화면이 깨져요 * * 2021.08.15 모바일 전용 화면 만들었습니다 이제 안깨져요 * https://pjj186.github.io/genshin_MBTI/ Genshin Impact MBTI! 안녕! 나야 페이몬! 다들 타바트대륙 모험은 어때? 잘 하고있어? 오늘은 너의 성격유형이 내친구들중에서 누구의 성격유형이랑 비슷한지 알아볼꺼야! 어쩌면 조금 길어서 지루할 수도 있지만! pjj186.github.io 어제 잠이 안와서 토이프로젝트로 뭘 할까 고민하다가, 내가 요즘 즐겨하는 게임인 원신의 캐릭터를 주제로 MBTI를 만들어 봤다. 이 맛에 토이프로젝트 하나 싶다! 만들면서 뭔가 실력 올라가는 느낌이 쭉쭉 들었다. 로직을 생각하는건 금방 했는데, 질문지가 60..

컴포넌트는 두 가지 종류로 나누어진다. Function 컴포넌트 / Class 컴포넌트 이 두 종류로 나뉘게 되는데, 생김새는 다음과 같다. // Fucntion Component function App() { return Hello i'm function component.> } // Class Component class App extends React.Component { render() { return Im a class component; } } 각각 차이점을 비교하면, Function 컴포넌트는 항상 무언가를 return 하여, screen에 표시한다. Class 컴포넌트는 React.Component 를 반드시 상속받아야 한다! = App Component는 React.Component를 확..

1. 먼저 해야할 것 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 이 곳에 들어가서, 애플리케이션 등록을 먼저 해줘야한다. 내 애플리케이션에 들어가면 아래와 같은 화면이 보일것이다. 여기서, 애플리케이션 추가하기를 누르면 앱 아이콘 / 앱 이름 / 사업자 명 세 개의 입력란이 나오는데, 앱이름은 현재 만드는 앱 이름, 사업자명은 본인 이름을 적어주면 되겠다. 만들고나서 클릭하게되면 이런 창이 뜰텐데, 여기서 REST API 키를 따로 저장해둔다! 그 다음 왼쪽을 보면 카카오 로그인이라는 탭..

이번 포스팅에서는 컴포넌트의 prop을 검사해주는 아주 똘똘한 라이브러리를 적어놓으려고한다. "왜 PropTypes를 사용하는건가요?" 그 이유는.. 우리는 사람이기때문에 코드를 작성하다가 실수 하는 경우가있다. (아래의 foodILike는 { name, image, rating } 의 정보를 각각 담고있는 배열이다.) function App() { return ( {foodILike.map((dish) => ( ))} ); } 예를들어 이런 코드가 있을때.. 실수로 rating에 숫자를 집어넣어야하는데 문자를 넣었다던지 하는 실수.. 컴파일 에러는 안되서 동작은 잘 되지만, 뭔가를 나도 모르게 실수했을때, 그 실수를 잘 찾도록 도와주는 라이브러리가 바로 PropTypes 이다. 기본적인 사용법은 아주 ..

자바스크립트 공부를 어느정도 이제 했고, 이제 슬슬 리액트라는것도 배워볼 때가 된것같아서 오늘 드디어 리액트라는 쎅시한 녀석과의 첫만남을했다. 우선 컴포넌트, JSX, props가 무엇인지 정말 입문 파트정도만 일단 배웠는데, 리액트 첫걸음 기념으로 간단하게 정리해보고 싶어서 글을 남긴다. 우선 컴포넌트라는건 부품의 의미로 해석할 수 있을것같다. npm install create-react-app (앱 이름) 으로 처음 리액트를 설치하면 src라는 폴더에 App.js 파일을 볼수있는데 기본적으로 있는데, import React from "react"; function App() { return Hello; } export default App; 여기선 function App() 이 녀석이 컴포넌트다. 분..

https://expressjs.com/en/guide/routing.html express.js 의 라우팅 관련 문서 링크이다. 라우터를 만들때, 파라미터를 URL에 넣어서 컨트롤러에서 이 파라미터를 이용 할 수 있었다. 그리고 파라미터값에 정규식을 사용하여 유연한 라우터를 만들 수 있다. ' 정규식(Regular Expression) 이란? 문자열로부터 특정 정보를 추출해내는 방법 정규식은 모든 프로그래밍 언어에 존재 https://www.regexpal.com/ 이곳에서 테스트 가능 정규식은 특정 정보를 추출해낼때 아주 유용하다. 잘 조합하면 원하는 문자, 숫자를 추출할 수 있다. 그래서 라우터를 만들때 정규식을 잘 이용하면 특정 패턴을 만들어 코드 순서에 구애 받지 않고 코드를 짤 수 있다. 정규..

videoRouter.get("/:id/edit", controller); 위 코드의 URL 의 /:id 이 부분을 파라미터라고한다. :id 대신 다른이름으로도 쓸 수 있다. 예를 들면 videoRouter.get("/:hello", controller); 이런식으로 쓸 수 있다. 이름은 중요하지않고, 포인트는 이걸 이용해서 url 안에 변수를 포함시킬 수 있다는것이다. 예를 들어 /videos/12/edit 이라는 URL에 접근하게되면, Express 는 :id 는 12가 되는것이다. 주의할 점이 있다면 videoRouter.get("/:id", watch); videoRouter.get("/upload", upload); videoRouter.get("/:id/edit", edit); videoRou..

난이도 : Easy 문제 : You are given an m x n integer grid accounts where accounts[i][j] is the amount of money the i​​​​​​​​​​​th​​​​ customer has in the j​​​​​​​​​​​th​​​​ bank. Return the wealth that the richest customer has. A customer's wealth is the amount of money they have in all their bank accounts. The richest customer is the customer that has the maximum wealth. 테스트 케이스: Example 1:Input: acc..

난이도 : Easy 문제 : Given the array candies and the integer extraCandies, where candies[i] represents the number of candies that the ith kid has. For each kid check if there is a way to distribute extraCandies among the kids such that he or she can have the greatest number of candies among them. Notice that multiple kids can have the greatest number of candies. 테스트 케이스 : Example 1:Input: candies = [..