CS Study (64) 썸네일형 리스트형 Project 2 : Heap Implementation #코드 설명 # HEAP createHeap() 1. HEAP h라는 포인터 변수에 메모리를 할당한다. 2. h의 ADT value 중에 integer value인 size는 0으로, integer array pointer인 heapData는 100의 사이즈를 갖도록 초기화한다. 3. HEAP h를 return 한다. # void makeHeap(int arr[], int i, int size) 1. arr[i]의 left child는 arr의 2*i + 1번째 index, right child는 arr의2*i + 2번째 index로 선언한다. 2. arr[i]와 arr[i]의 left child, right child 중 가장 큰 값의 index를 largest라고 선언한다. 3. arr[i]가 가장 .. Project 1 : LinkedList / Stack Implementation #코드 설명 # struct linked_list* create_list(int number_of_nodes, int list_type) 1-1. input value인 number_of_nodes가 1보다 작으면 에러 메시지를 출력한다. 1-2. 전역 변수 list_exist가 1이라면 이미 리스트가 존재한다는 뜻이기 때문에, 에러 메시지를 출력한다. 1-3. input value인 list_type이 0 또는 1이 아니라면, list의 type을 정할 수 없기 때문에, 에러 메시지를 출력한다. 2. new_list라는 포인터 변수에 메모리를 할당하고 new_list의 ADT value들을 초기화한다. 3. new_list에 list_type value에 따라서 1부터 number_of_nodes까지의.. Project 14. Movie Application # 요약 우선, React JS 기반으로 코드는 작성되었습니다. 영화 정보 사이트의 json 파일(https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year)로 부터 평점 8.8이상의 영화들 20개를 첫 페이지에 나열합니다. 각각의 블록 마다 영화에 대한 요약 정보(제목, 개봉년도, 장르, 내용 요약)를 담고 있습니다. 제목을 클릭하면 영화에 대한 세부 정보들도 확인할 수 있습니다. # 프레임 설명 index.html --> index.js --> MovieApp.js --> Detail.js --> Home.js --> Movie.js --> : Rendering 1. index.html에 id가 'root'인 'div' element.. 5. Effects 이제는 create-react-app을 사용한다. #index.html #useEffect 사용 경우에 따라 호출되는 함수를 지정할 수 있다! 아래 코드의 경우, runOnce라는 함수가 다른 컴포넌트이 변화와 상관없이 한 번만 호출됨(dependency가 없기 때문) import {useState, useEffect} from "react"; function App() { const [counter, setValue] = useState(0);//state가 변경될 때 마다 re-render const onClick = () => setValue((prev)=>prev + 1); console.log("I run all time"); const runOnce = () =>{//한번만 render될 함수.. 4. Props #Props를 사용하지 않았을 때 두 가지 버튼 컴포넌트를 만들고 각각의 css 프로퍼티를 형성함 #Props를 사용할 때 하나의 버튼 컴포넌트만 만들어주고 App컴포넌트의 두 가지 버튼에 각각 다른 Props를 부여함. 이때 Props는 객체이다. 아래 코드 경우, Btn은 {text : value, onClick : revertValue} 라는 Props 객체를 받고 있음. #PropTypes 사용 Prop들의 자료형(type)을 미리 정해줌으로써 개발자의 실수를 방지함. 또한 isRequired를 통해 컴포넌트에게 필요한 Props들이 넘어갔는지 console창에서 확인할 수 있다. #React.Memo() 사용 컴포넌트의 state가 변화할 때마다 모든 컴포넌트가 항상 re-render됨. -> .. 3. State #state를 적용 안했을 때 #State를 활용한 일반단위변환기 flip 버튼을 클릭하기 전엔 시간을 분으로 바꿔주고, flip 버튼을 클릭하면 분을 시간으로 바꿔준다. reset 버튼을 클릭하면 모든 값이 0이 된다. #State를 활용한 복합단위변환기 선택된 option에 따라 MinutesToHours / KmToMiiles 컴포넌트 호출 각각의 컴포넌트 동작원리는 일반단위변환기와 같습니다. 2. JSX 1. 브라우저가 JSX를 babel로 번역해서 JS로 알아듣게 하기 //JSX로 작성 1. 왜 React 인가? 혼자 HTML, CSS, Javascript를 공부해보면서 어느정도 기본적인 기능들을 공부해왔었습니다. 이 3가지 도구만 이용하여 웹 프로그래밍을 했었기 때문에, 딱히 불편함(?)을 느끼지 못했었습니다...(깊게 공부를 안해서 그랫나.. 쨋든) 그러다가 Javascript를 공부한지 얼마 안되었을 때, 유튜브나 주변 매체에서 react라는 것을 접하게 되서 나무위키나 이런 데서 조금 찾아봣었습니다 ㅋㅋㅋㅋ. 그 때는, 웹 개발자가 좀 더 쉽고 빠르게 프로그래밍할 수 있게 하는 Javascript 라이브러리? 정도로 이해했었습니다. 그래서 일단 웹의 3신기(HTML, CSS, Javascript) 다 공부해보고, React도 공부해봐야겠다는 생각을 했었는데, 이제 슬슬 시작할 때가 된 것 같네요.. #Wh.. 이전 1 2 3 4 ··· 8 다음
