코딩 일지

App.jsx class App extends Component{ state = { value:'hello world!!!!', list:[] } // 생명주기 함수 componentDidMount(){ // 최초실행 후(화면 랜더 후) 실행되는 함수. this.setState({ // 불변성... 데이터가 화면이바뀐다. ...this.state, list:[ {userid:'web7722',content:'안녕하세요2',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요3',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요4',date:"2022-04-21..

componentDidMount() 이 함수는 컴포넌트가 처음 화면에 그려지면 실행되는 함수이다. (render()가 실행되고 나서 실행되는 함수라고 생각하면 된다.) componentDidUpdated() 리액트에서 업데이트로 분류한 생명주기 함수이다. 화면이 업데이트되면 실행된다. componentWillUnmount() 리액트에서 컴포넌트가 죽을 때(unmount) 호출되는 함수 Reference: https://blog.naver.com/melon940925/222027028412 리액트:: 생명주기 함수 아마 리액트가 편한 이유는 state와 render()와 같은 리액트가 미리 구현해 놓은 함수나 클래스 등을 사용... blog.naver.com

문제 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어지면, 이들 중 최댓값은 85이고, 이 값은 8번째 수이다. 입력 첫째 줄부터 아홉 번째 줄까지 한 줄에 하나의 자연수가 주어진다. 주어지는 자연수는 100 보다 작다. 출력 첫째 줄에 최댓값을 출력하고, 둘째 줄에 최댓값이 몇 번째 수인지를 출력한다. 예제 입력 1 3 29 38 12 57 74 40 85 61 예제 출력 1 85 8 문제 풀이 num_list = [] for i in range(9) : num_list.append(int(input())) ## 9번 숫자..

문제 N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다. 출력 첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. 예제 입력 1 5 20 10 35 30 7 예제 출력 1 7 35 문제 풀이 cnt = int(input()) #총 몇개의 숫자를 받을 것인지 numbers = list(map(int, input().split())) #받은 숫자들을 space 기준으로 분리해 배열에 넣기 max = numbers[0] # 배열의 ..

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

기본 세팅 코드

기본 설정 세팅 코드 구현 css body { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; } ol, ul { padding-left: 30px; } .board-row:after { clear: both; content: ""; display: table; } .status { margin-bottom: 10px; } .square { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; padding:..

기본세팅