25G.story

styled component : 서브 파트 라이브러리 (외부 라이브러리) react에서 주는 게 아니라 외부에서 가져오는 라이브러리이다 https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers..

nav바는 컴포넌트로 두면 편하기 때문에 nav바 컴포넌트를 만들어볼 것이다 구조화 할당 props안에 있는 post오브젝트를 선언해놓는 것이다. 그러면 {props.post.id}를 써줘야 하는데 위처럼 줄여줄 수 있다. 게시글 추가하기 컨포넌트는 디자인만 가지고 있는 것이지 배치까지 가지고 있으면 제사 용성이 떨어진다. 버튼을 컴포넌트화 했다. 이렇게 컨포넌트화를 잘하면 이 페이지가 아닌 다른 페이지에서도 이 컴포넌트를 사용할 수 있는 것이다. 컨포넌트를 동적으로 활용하는 방법 스타일 컴포넌트가 함수 안에 있다 그 이유는 이 컴포넌트를 동적으로 할당하는 경우에만 이렇게 함수 안에 스타일 컴포넌트를 배치하면 된다. "..."연산자 (전개 연산자) 꼭 공부할 것 데이터를 추가할 때 사용한다. 배열을 버리..

자세한 설명은 저번 react포스팅을 참고할 것. 위 콘솔을 보면 데이터는 잘 바뀌지만 그림은 바뀌지 않는 것을 확인할 수 있다. 그럼 어디를 수정하면 그림도 같이 바뀔까? 바로 return이 다시 제 시작돼야 한다. 그러려면 결국 App이 다시 실행돼야 한다 하지만 app이 제 실행되면 num값이 초기화되기 때문에 그림은 초기 상태와 그대로가 된다. 그럼 결국 세 가지 조건이 생긴다. 1. 데이터를 변경해야 한다. 2. 앱(return)이 제 실행되야한다 3.num은 내부에서 지역변수로 관리하면 답이 안 나온다. 실행시키면 즉각적으로 바로 그림과 바뀐 데이터를 일치시켜준다. 주석이 핵심 내용이다

자바스크립트를 브라우저 없이 실행하기 위해서 필요한 자바스크립트 런타임 환경 제공 프로그램인 node.js를 다운로드한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org IDE는 vscode를 사용합니다. 다운로드하여주세요 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud ..

어댑터 패턴 일상생활에서의 어댑터는 일반적으로 걸러내는 역할을 한다. 인터페이스가 너무 많은 행위의 제약을 가지고 있으면 경우에 따라서 걸러내기 위해서 추상 클래스로 걸러낼 메서드를 오버라이드 해서 해당 인터페이스를 상속받으면 경우에따라서 행위의 제약을 벗어 날 수 있다. 하지만! 자바는 다중상속을 재한 하기 때문에 어댑터 패턴의 단점은 분명하다. 그래서 나온것이 interface내부에서 default라는 문법이 생겨 난 것이다. default는 인터페이스도 몸체가 있는 메서드를 만들 수 있다. 왜 이 문법이 생겼냐?! (다중 상속이 안 되는 것이 많기 때문이다.) 그래서 최근의 자바버전에선 어댑터 패턴 대신에 default를 사용하는 것이 좋다

일대일로 소켓통신을 하는 것은 한 방향으로만 이루어진다. 쓰는 쪽(클라이언트)과 읽는 쪽(서버). 일대일 방식의 소켓통신을 그림으로 표현해 봤는데 여기서 먼저 개선해야 할 부분은 클라이언트가 메시지 한 개만 보내면 프로그램이 종료되는 것이다. 이럴 때 종료되지 않고 "반복"되게 하기 위해서 while을 사용해서 메시지를 보내더라도 프로그램이 계속 돌도록 해본다. 자 그럼 이제 하나의 문제점을 개선했는데 개선을 해놓고 보니 클라이언트만 일방적으로 메시지를 보내고 서버는 그 메시지를 읽기만 한다. 완전한 단방향 통신이다. 이를 어떻게 개선해야 할까? 이문제를 개선하기 위해서는 먼저 스레드에 대해서 생각을 해 봐야 한다. 지금 현제 위 프로그램에서 java는 main스레드 하나가 동기적으로 열심히 쓰고 읽고를..

소켓통신을 일대일 방식으로 하려면 두 개의 소캣이 필요하다 서버 소켓과 클라이언트소켓 그럼 이 두 개의 소켓을 ByteStream으로 연결하는데 ip주소로 서로 통신할 수 있도록 할 것입니다. 포트를 양 끝단에 달고 하는 통신(소켓통신) 다음과 같은 방식으로 통신이 이루어집니다. 위 그림에는 빠져있지만 클라이언트 소켓은 메시지를 쓰는 쪽이기 때문에 키보드와 연결하는 스트림이 하나 더 있어야 합니다.(클라이언트 파일 소스코드 참고) 서버 소켓 파일 import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.ServerSocket; import java.net.Socket; public class ServerFile { /..

소켓통신을 이해하기 위해선포트(port)를 이해하는 선수과정이 필요하다. 포트는 주차요원이 손님의 차키를 받아서 주차를 시킬 때 만약에 주차선을 지키지도 않고 그냥 넣어지는 대로 주차를 하면 어떻게 될까? 아마 차를 뺄 수도 없게 되고 한 곳에 차를 몰아서 주차시켰다면 꽉 차서 주차를 더 이상 할 수 없게 될 수도 있다. 차를 주차시키는 위치가 포트 주소가 된다. 컴퓨터통신에 왜 포트가 필요할까? 컴퓨터로 LOL도 하고 카카오톡 도하면서 스타크래프트도 동시에 할 수 있다. 그럼 각각 의 프로그램이 데이터를 주고받기 위해서 Byte Stream이 필요하게 되는데 LOL도 스타도 카톡도 다 각자의 ByteStream이 필요한 상황에서 컴퓨터로 연결된 렌선은 하나밖에 없다. 그럼 LOL 서버로부터 우리 집 컴..

java에서 문자열을 표현할 때는 String을 사용하는데 이 String이란 이름에서 얻을 수 있는 힌트는 첫 글자가 대문자라는 점에서 클래스라는 것을 유추해 낼 수 있다. String은 Char의 배열 형태 인데 그럼 지금 까지 배운 문법에서는 클래스를 사용하려고 메모리에 띄우기 위해선 new를 해야 한다. 왜 String은 그냥 사용해도 되는 것일까? 분명 같은 문자열을 s1과 s2에 저장을 했는데 왜 false가 나오냐면 java에서는 "=="을 사용해서 비교를 하게 되면 메모리 주소 번지를 비교한다. 즉 s1과 s2의 주소 번지가 다르기 때문에 false가 나온다. 처음에 java언어를 개발한 Sun이라는 회사에서 String클래스는 사용빈도가 굉장히 높을 것 같아서 String클래스만 특별히 ..

예외처리는 Exception이라고 한다. 예를 들어서 슈퍼마켓을 운영을 하는데에 위험 요소 및 준비해야 할 것 들을 생각해보자. 1. 도둑을 잡기 위해 cctv 설치 2. 잔돈 준비 2. 직원 채용 3. 장소 임대 등등 이 있다. 그렇게 준비할 것을 준비를 해 놓고 운영을 시작해서 장사를 하다 보면 생각지도 못한 문제점들이 생길 수 있다. 잔돈이 모자랄 수 있다. cctv 사각지대에 있는 물건이 도난당했다. 등등.. 그럼 위 상황을 크게 두 가지로 나눌 수 있는데 운영전/운영후 java에서 운영전(실행 전)에 일어나는 준비과정 및 위험요소 제거는 jvm이 알아채고 오류를 발생시켜 예외처리(try/catch)를 하도록 개발자에게 강제로 시켜버린다. 운영 후에 생기는 예외에 대한 처리는 런타임 시에 일어나기..