https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스의 좋은 점은 입력값을 어렵게 받아오지 않아도 자동으로 입력이 된다는 것이다. 그래서 어떻게 출력할 것인지만 신경 쓰면 된다! 완주하지 못한 선수 문제 요약 : 참여한 선수 이름이 담긴 배열과 완주한 선수 이름이 담긴 배열을 비교해서 완주하지 못한 선수의 이름이 return 되게 해라. 입출력 예 participant completion return ["leo", "kiki", "eden"] ["eden", "kiki"] "leo" ["marina", "josipa", "nikola", "vinko", "filipa"] ["josipa", "filipa", "marina",..
props, state, event 3개가 서로 상호작용하며 애플리케이션의 역동성을 만든다. !목표! WEB을 누르면 welcome 메시지가, 각 목차를 누르면 그에 해당하는 내용이 뜨도록 만들 것이다. 그래서 우리는 각 링크에 이벤트를 만들 것이다. 그 이벤트를 클릭하면 App 컴포넌트의 state가 바뀌고 그 바뀐 state가 Content 컴포넌트에 동적으로 전달되도록 하는 것이 목표! 코드 변경 전 전체 코드↓ 더보기 https://github.com/YJZero/React/tree/main/components state 설정하기 지금 보고 있는 페이지가 welcome 페이지인지 read(읽기) 페이지인지 구분하기 위해 mode를 추가한다. 그리고 mode가 welcome일 때 content 영역..
컴포넌트 만들기 WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이러한 순수 html 코드가 있다. 이 부분들을 컴포넌트를 만들어서 리액트로 구현해보자. WEB world wide web! 먼저 이 헤더 부분을 리액트를 통해 subject라는 이름의 컴포넌트로 바꿀 것이다. =Subject라는 컴포넌트를 만들겠다. 컴포넌트의 이름의 첫글자는 무조건 대문자! 그게 룰임!! 그 다음 render 함수를 만들고 (class 안에서 함수를 만들 땐 function을 안 붙여도 된다.) return(); 을 쓴 후 이 괄호 안에 원하는 내용을 넣는다. 이때! 컴포넌트는 무조건 하나의 최상위 태그만 있어야 한다. ..
샘플 애플리케이션을 수정하는 것으로 시작해보자. 수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다. JS 코딩하기 public 파일은 샘플 애플리케이션이 나타나는 index.html이 있는 파일이다. 이 index.html을 살펴보면, 이렇게 id root가 있다. 리액트를 사용하면서 만들어지는 component는 모두 이곳에 넣기로 creat-react-app은 약속되어 있다. 실제로 개발자 도구를 통해 살펴보면 이렇게 root 안에 리액트로 만들어진 태그들이 들어있는 것을 볼 수 있다. 그렇다면 이러한 component들은 어떤 파일에서 만들 수 있는가? 그것은 바로 src 디렉토리 안에 있는 파일을 수정해서 만들 수 있다. 그래서..
생활코딩 이고잉 님의 리액트 강의를 부스트코스를 통해서 수강하고 있다. 웹 프론트엔드 시작하기 (리액트&리덕스) > 오리엔테이션 : 부스트코스 (boostcourse.org) component란 리액트에서 사용자 정의 태그를 작성하는 것을 component 라고 한다. 이렇게 component를 사용할 경우 가독성이 좋아진다. 재사용성이 좋아진다. 유지보수하기 좋다. 가독성의 경우, 복잡한 코드를 따로 component로 저장하고 실제 코드에선 component만 작성하면 되기 때문에 훨씬 좋다. 재사용성의 경우, component를 한번 정의해두면 다른 사이트에서도 사용할 수 있기 때문에 좋다. 유지보수의 경우, 만약 component에 오류가 있어서 변경할 경우 그 component..
https://www.acmicpc.net/problem/10430 문제 (A+B)%C는 ((A%C) + (B%C))%C 와 같을까? (A×B)%C는 ((A%C) × (B%C))%C 와 같을까? 세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 A, B, C가 순서대로 주어진다. (2 ≤ A, B, C ≤ 10000) 출력 첫째 줄에 (A+B)%C, 둘째 줄에 ((A%C) + (B%C))%C, 셋째 줄에 (A×B)%C, 넷째 줄에 ((A%C) × (B%C))%C를 출력한다. 전체코드 const fs = require('fs'); let input = fs.readFileSync("./input.txt").toString().trim().split(" ..
약 한 달만에 알고리즘 풀기에 다시 도전! 단계별 풀기 -입출력과 사칙연산 1000번 https://www.acmicpc.net/problem/1000 백준에서 다른 언어가 아닌 JavaScript로 알고리즘을 풀기에는 조금 까다롭다. 일단 JavaScript로 풀려면 node.js를 선택해야 하고, node.js로 입력값을 불러와서 출력할 수 있도록 정리해야 하기 때문이다. 내가 이전에 막혔던 단계가 이 단계이다. 모듈은 뭐고, 갑자기 split는 왜하고.. 이런 걸 이해하지 못했었는데 JavaScript에 대해 어느 정도 공부하고 나서 유튜버 라매게발자의 가이드를 보니까 유레카! 를 외치는 심정으로 이해가 됐다 알고리즘을 풀면서 중간 과정을 콘솔에 출력하면서 확인하는 것이 좋은데 그럴려면 ..
실습해볼 내용 1. 구글과 나는 어떻게 연결되어 있는지 확인해보기 -구글의 서버와 나의 컴퓨터는 어떻게 연결되어 있는가?(LAN이 몇 개... 등등) 2. Wireshark 설치 - 프로토콜이 어떻게 생겼는지 직접 보기 위해 사용할 프로그램 설치 3. 프로토콜 직접 확인해보기 - 설치한 wireshark를 이용해서 현재 컴퓨터에서 인터넷을 통해 주고받고 잇는 모든 내용을 직접 확인해보기 구글과 어떻게 연결되어 있는지 확인해보기 -cmd를 실행한다. -tracert 8.8.8.8 을 입력한다. →8.8.8.8 이란 구글 dns 서버의 ip 주소이다. →tracert 는 네트워크 길목을 쫓아가 주는 프로그램이다. -실행을 하면 약간의 시간이 소요되면서 어떻게 구글 서버와 연결되어 있는지를 보여준다. ..
https://www.youtube.com/watch?v=Av9UFzl_wis&list=PL0d8NnikouEWcF1jJueLdjRIC4HsUlULi&index=1 해당 유튜브 강의 내용을 쭉 따라가면서 네트워크에 대해 알아볼 것이다. 해당 강의 내용과 추가로 찾은 내용을 포함하여 정리할 예정! 네트워크란? :노드들이 데이터를 공유할 수 있게 하는 디지털 전기통신망의 하나이다. 즉, 분산되어 있는 컴퓨터를 통신망으로 연결한 것이다. 인터넷이란? :문서, 그림 영상과 같은 여러가지 데이터를 공유하도록 구성된 세상에서 가장 큰 전세계를 연결하는 네트워크 네트워크 안에 인터넷이 포함되어있는 것이다. 네트워크는 통신망이고 인터넷은 그 수많은 통신망 중 가장 큰 네트워크를 가리킨다. -www는 인터넷이..
