목록언어
Step-by-Step
![](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/JEviH/btq6VjzCInN/4zHWUbwjqDiKva1aQDuamk/img.png)
백준 문제들은 거의 Scanner를 통해 사용자의 입력을 받아서 처리하는 문제들이다 StringBuffer를 공부하다가 연습삼아 한 문제를 골라 풀어봤다! 바로 백준 9093번 단어 뒤집기 ~ 마침 StringBuffer랑 StringTokenizer를 공부하고 있던 참이었으니 이용해보기로 했다 StringBuffer 두 개를 선언해서 하나는 최종 결과물로 내놓고 나머지는 그때그때 단어 순서를 바꾸는 용도로 쓰기로 결정했다 import java.util.Scanner; import java.util.StringTokenizer; public class Main { public static void main(String[] args) { Scanner sc = new Scanner(System.in); S..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bM4bxv/btq6V49lrlX/O313bu86c0b2ke4j3D2jbK/img.png)
Java를 이용하여 코드를 작성하다 보면 import 문을 사용하는 경우가 매우 많다 import로 무엇을 가져오는지 다시 한 번 복습하기 위해 글을 작성하였다 자바 API(Java API) Java를 설치하면 자바 개발 도구인 JDK가 설치된다 JDK에는 개발자들이 사용할 수 있는 많은 클래스들이 패키지에 담기고 다시 패키지들은 모듈에 담겨 제공된다 이 때 사용자의 편의를 위해 자바에서 제공하는 기본 클래스들을 Java API라고 한다 이 개념을 이해하기 위해 패키지와 모듈의 개념을 다시 짚어보았다 (JDK ; Java Development Kit : 썬 마이크로시스템즈에서 개발한 Java 환경에서 돌아가는 프로그램을 개발하는데 필요한 툴들을 모아놓은 소프트웨어 패키지) 패키지(Package) 서로 관..