목록분류 전체보기
Step-by-Step
※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 CRUD 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능 4가지를 일컫는 말 CRUD : Create(생성), Read(읽기), Update(갱신), Delete(삭제) React Lifecycle React 컴포넌트는 생명주기(Lifecycle)을 가진다 Lifecycle : 컴포넌트가 생성되고 사용되고 소멸될 때까지의 일련의 과정 LifeCycle Event : 생명주기 안에서 특정 시점에 자동으로 호출되는 메소드 form 태그 속성 action : 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL 명시 method : 폼 데이터(form data)가 서버로 제출될 때..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/X1Hp0/btq7myxg6Uw/XyYKngKIC0ol67SzlEWSR0/img.png)
※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 Props와 State 컴포넌트 간에 데이터를 주고 받는 방식에는 props와 state 두 가지가 있다 둘 다 Render라는 함수를 호출하여 사용한다 1. props : 상위 컴포넌트 → 하위 컴포넌트 로 값 전달 / 수정 2. event : 하위 컴포넌트 → 상위 컴포넌트 로 값 전달 / 수정 debugger 스크립트 내에 debugger 명령어를 적어주면 중단점을 설정한 것과 같은 효과를 본다 크롬 개발자 도구를 사용할 때 debugger로 되어 있는 부분에서 실행을 멈추고 기다린다 아래 링크 설명을 보면 예제가 나와있으니 참고하면 된다 https://ko.javascript.info/debugging-c..
※ 이 게시물은 React만 설명하는 것이 아니라 강좌를 듣고 공부한 내용을 기록하는 글이다 React 컴포넌트 기능 1. 가독성 : 컴포넌트 사용 2. 재사용성 : 컴포넌트를 한 번 정의해놓으면 다른 곳에서도 사용 가능 3. 유지보수 : 컴포넌트를 바꾸면 해당 컴포넌트를 사용하는 모든 곳에서 변경 개발 순서 1. coding : 코딩 2. run : 실행 3. deploy : 서비스를 사용하는 소비자에게 전달 설치 방법 React 설치 방법에는 크게 두 가지가 있다 1. npm 이용 npm install -g create-react-app 이 방법은 한 번 다운로드를 받고 이후 추가적인 다운로드가 필요 없는 편리함이 있으나 최신 버전 갱신이 안 된다 2. npx 이용 npx create-react-ap..
React를 사용하기 위해 강의를 알아보던 도중에 생활코딩님께서 올리신 강의를 발견하였다 학교에서 웹 기술을 배우기 전에 생활코딩님이 올려주셨던 강의를 보았었는데, 그 당시 강의력도 너무 좋고 영상이 많지만 길이가 짧아서 집중이 잘 되었던 기억이 난다 정말정말 도움이 많이 되어서 이번에도 듣게 되었다! 이번에는 강의를 들으면서 배운 것을 메모장에 적어 놓았고, 여기에도 올리기로 하였다 강의는 밑으로 가면 볼 수 있다! 무료이다 https://opentutorials.org/module/4058 React 수업소개 리액트 입문 수업입니다. 이 수업에서는 아래와 같은 내용을 다루고 있습니다. 리액트를 사용하는 이유 리액트의 컴포넌트를 만드는 법 리액트와 불변(immutable)의 관계 아래 내용은 opent..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/beDveT/btq7iR9DW8T/t12wM1C3k0TKkKkHCzBDp1/img.png)
ReactJs React는 View, 즉 사용자 인터페이스(UI)를 효과적으로 구축하기 위해 사용하는 자바스크립트 기반 라이브러리 React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI로직과 연결됨 React는 페이스북에서 개발하였음 ReactJs 특징 1. 선언적 (Declarative) React는 선언형 성격에 맞게 컴포넌트를 얻기 위해 JSX(JavaScript XML) 문법을 통해 구현 ※ JSX는 아래에서 다시 설명 2. 컴포넌트 기반 (Component-Based) 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만들어 이를 조합하여 UI를 개발할 수 있음 컴포넌트 로직은 템플릿이 아닌 J..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/0Rvw3/btq69XpTHZr/uL7HOzma6KOhTGZ17415kk/img.png)
웹 브라우저 위에서 동작하는 요소는 크게 HTML, CSS, JavaScript가 있다 우선 개념 정리 전에 간단히 영상으로 개념을 확인해보았다!! 원래 구독 안했는데 이번에 했음! 자투리 시간에 보려고ㅋㅋ https://www.youtube.com/watch?v=ffENjt7aEdc 출처 : 얇팍한 코딩사전 정리하자면 HTML은 웹에 나타날 정보 및 구조이고, CSS는 정보를 웹에 어떤식으로 꾸미는지이며, JavaScript는 웹의 동작을 구현해주는 것이다 JavaScript 객체 기반의 스크립트 프로그래밍 언어 (Script 언어에 대한 설명은 아래) 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가짐 JavaScript 특징 1. 객체 기반의 스크립트..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bdXEas/btq61mhRp8I/qHFkSVdDJxXbEc4GTDos4K/img.png)
백준 사이트에서 프로그래밍 문제를 풀면 입력 값을 받기위해 Scanner를 꼭 이용한다 처음으로 배웠던 입력 방식이다 보니 가장 익숙하고 쓰기 간편해서 아직까지 쓰고 있었다 그동안 아무 문제 없이 사용했으나 점점 난이도가 높아질수록 Scanner를 사용하면 시간 초과가 발생하기 시작하였다 밑은 조금 전에 끝낸 따끈따끈한 실패작이다~! 하핫 이전에는 시간이나 메모리 제한도 여유로워서 출력만 제대로 되면 성공했는데, 더이상 그럴수 없게 됐다 코드에서 가장 중요한 것은 알고리즘! 알고리즘에서 가장 중요한 것은 효율성이다 ※ 알고리즘 정의 포스팅 : https://smile-development.tistory.com/8 이제 효율적인 코드를 작성하기 위해 Scanner에 대한 집착?고집?을 놓아줄 필요가 있다 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GCe99/btq61cziN1n/PSbNAsJ4QcIxJ9BLvNDpkK/img.png)
여러 알고리즘 유형들을 파악하기 앞서 알고리즘이라는 것에 대해 정리해보려고 한다 알고리즘 (Algorithm) 문제를 해결하기 위한 절차나 방법 어떠한 행동을 하기 위해서 만들어진 명령어들의 유한 집합(finite set) 반복되는 문제를 풀기 위한 작은 프로시저(procedure;진행절차) 알고리즘 조건 알고리즘은 아래의 조건을 만족해야 한다 입력 - 알고리즘은 0 도는 그 이상의 외부에서 제공된 자료가 존재한다 출력 - 알고리즘은 최소 1개 이상의 결과를 가진다 명확성 - 알고리즘의 각 단계는 명확하여 애매함이 없어야 한다 유한성 - 알고리즘은 단계들을 유한한 횟수로 거친 후 문제를 해결하고 종료해야 한다 효과성 - 알고리즘의 모든 연산들은 사람이 유한한 시간 내 정확하게 수행할 수 있을정도로 충분히..