본문 바로가기

분류 전체보기

 (40)
[알고리즘 문제/C++]백준 10448번 : 유레카 이론 문제 링크: https://www.acmicpc.net/problem/10448 10448번: 유레카 이론 프로그램은 표준입력을 사용한다. 테스트케이스의 개수는 입력의 첫 번째 줄에 주어진다. 각 테스트케이스는 한 줄에 자연수 K (3 ≤ K ≤ 1,000)가 하나씩 포함되어있는 T개의 라인으로 구성되어 www.acmicpc.net 브루트포스(완전탐색)으로 풀었습니다. 코드입니다. #include using namespace std; int Tnum(int n) { return (n * n + n)/2; } int check(int count, int arr_num) { for(int a = 1; a > arr[i]; for(int i = 0; i < num; i++) { int val = 0; int ..
[React] 컨텍스트 개념 이해하기 컴포넌트 간 데이터 흐름 기본적으로 컴포넌트는 서로(자식, 부모) 간에 연결이 되어 있어야 데이터를 주고받을 수 있습니다. 예를 들어 컴포넌트의 프로퍼티(props) 값은 데이터가 위에서 아래로 흐르는 트리 구조의 형태를 띠고 있습니다. 따라서 props나 state는 부모와 자식 컴포넌트가 연결된 상태에서 공유가 가능한 데이터입니다. 그림을 참고해 보면 root가 최상위 컴포넌트입니다. 만약에 data라는 데이터를 root에서부터 A3로 전달한다고 하면 그 과정은 Root -> A -> A1 -> A3가 됩니다. 그런데 이 경우에 중간에 껴있는 컴포넌트인 A1이나 A의 경우 data라는 프로퍼티가 필요 없을 수도 있고, 전달 과정에서 이 때문에 누락 될 수도 있습니다. 이렇게 되면 리액트에서 오류를 발..
[React]컴포넌트 생명주기(Component LifeCycle)파악하기 컴포넌트 생명주기 컴포넌트가 생성되고 소멸하기까지의 과정을 컴포넌트의 생명주기(LifeCycle)이라고 합니다. 예를 들어, 컴포넌트는 생성이 되고나서부터 생성이 완료되고, 어떤 데이터가 갱신되고 소멸되는 과정을 거치게 됩니다. 이러한 과정을 컴포넌트의 생명주기라고 합니다. 그리고 생명주기 함수를 활용하면 생명주기의 특정 시점에 원하는 함수를 실행시켜서 원하는 동작을 하게 할 수 있게 됩니다. 생명주기 함수 생명주기는 도식화하면 다음과 같습니다. 생명주기 함수는 총 8종의 함수가 있습니다. 생명주기 함수는 컴포넌트의 생명주기 간에 리액트에서 자동으로 호출합니다. constructor getDerivedStateFromProps render componentDidMount shouldComponentUpd..
[React/Component형 클래스] PureComponent와 Component의 차이 이번 포스트에서는 PureComponenet와 Componenet의 차이에 대해 알아보려 합니다. 클래스형 컴포넌트 - Component Class 클래스현 컴포넌트에는 두 종류가 있는데 이 두 종류가 바로 Component 클래스와 PureComponent 클래스입니다. 일반적으로 알고있는 Component 클래스의 졍우 props와 state, 생명주기함수가 들어있는 구조의 컴포넌트를 제작할 때 사용합니다. 다음과 같은 구조를 띄고 있습니다. import React from &#39;react&#39;; class ExampleComponent extends React.Component { constructor(props) { super(props); console.lod(&#39;생성자&#39;);..
[Vanilla/JavaScript]캘린더 만들기 Calender 만들기 JS연습 겸 간단한 캘린더를 만들어볼까 합니다. 파일들은제 github홈페이지에 저장해 놓을테니 참고해주세요. 이 코드가 꼭 정답이 아닙니다. 더 좋은 코드가 있을 수 있습니다. 기능 구상 달력을 출력합니다. 년도제한은 없습니다. 달력은 6줄로 나오게 합니다.(총 7*6일이 나올 수 있게 합니다.) 토, 일은 다른 색상을 주어서 표시합니다. 현재날짜에는 테두리를 주어서 현재 날짜를 알 수 있게 합니다. 기본적으로 오늘 날짜가 있는 달력이 나오게 하고 이전, 이후 달력을 볼 수 있는 기능을 만듭니다. 이에따라 그 달력의 년도와 월을 표시해줍니다. 이 정도 기능을 염두해 두고 캘린더를 본격적으로 만들어보겠습니다. html과 css를 바탕으로 만든 캘린더 디자인은 다음과 같습니다. 캘린..
[React/Component]React 컴포넌트란? 리액트의 컴포넌트 개념은 리액트의 꽃이라 불릴 정도로 매우 중요한 요소 입니다. 리액트로 작성된 화면은 컴포넌트만으로 구성이 됩니다. 기존 웹 프레임워크의 구조 기존의 웹 프레임워크는 MVC방식으로 관리 되었습니다. 각각 정보, 화면, 구동 코드를 의미 하며 정보를 모델(Model), 화면을 뷰(View), 구동을 컨트롤러(Conroller)라고 해서 MVC라고 이름이 붙여졌습니다. 장점으로 코드 관리가 효율적이라는 점을 꼽을 수 있지만 MVC 각 요소의 의존성이 높아서 재활용하기 어렵다는 점이 단점으로 꼽혔습니다. 컴포넌트란? 현재 많은 웹사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한 경우가 많습니다. 예를 들어 youtube에 들어가 보면 동영상을 볼 수 있게 컨텐츠를 나열해 놓는데 이 각각을..
[Json/JavaScript]JSON 파싱 및 출력하는 법 JSON을 처음 접하게 되면 이 JSON으로 뭐 정보를 저장해놓고 사용한다는 것은 알겠는데 정확히 JSON 정보를 어떻게 불러오고 쓰는지 알지 못하기 마련이다. 그래서 이번에는 JSON에 정보를 담고 index.html파일을 만들어 JSON에 있는 정보를 index.html상에 표현해보려 한다. 이를 JSON 파싱 이라고 한다. 파싱(parsing)?? 컴퓨터 과학에서는 파싱을 일련의 문자열을 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정을 말한다. 즉, 컴퓨터의 JSON, XML, HTML 등으로 구성된 데이터를 분석하여 내가 원하는 부분만 추출하고자 하는 것을 말한다. 이번 포스트에서는 JSON의 데이터를 파싱하여 JSON 파일 안의 'data'..
[JavaScript]투두 리스트 만들기 ToDoList 만들기 JS를 배우고 좀더 이해하고 친숙해지고자 투두 리스트를 만들어 보려고 합니다. 작업은 VSC(Visual Studio Code)로 했습니다. 파일들은 제 github홈페이지 에 저장해 놓을테니 참고해주세요. 이 코드가 꼭 정답이 아닙니다. 더 좋은 코드가 있을 수 있습니다. 앱 디자인 구상 일단 투두 리스트 디자인을 구상해보았습니다. 심플한 디자인을 선호하는 편이라서 깔끔해보이게 디자인을 만들었습니다. active는 "끝나지 않은 일" 이고 done은 "한 일" 입니다. 입력란에 해야 할 일을 입력하면 active라고 적혀있는 곳 밑에 리스트(active리스트라고 부르겠습니다.)를 출력해줍니다. active항목의 done 버튼을 누르게 되면 active리스트에서 그 항목이 없어집니..

티스토리툴바