innn

리액트의 특징인 SPA 페이지를 하나로 묶어서 렌더링을 해준다. 그래서 HTML 파일 로 하나로 묶어서 여러가지 페이지를 보여줄거다. APP.JS에 컴포넌트를 만든다, 내가 보여주고 싶은 화면을 만든다. 이 app컴포넌트가 index.js에 의해서 렌더링된다 그 결과가 index.html에 의해 화면에 표시된다. 내가 만들고 싶은 화면을 app.js에서 만들고 변수들은 return 밖에 작성하면 됨. 자바스크립트 표현을 할 때는 중괄호로 감싸주어야 한다. if문 대신에 조건문 연산자를 사용한다. 변수를 설정할 땐 state와 props 컴포넌트 안에서 이루어지는 변수를 설정할땐 state state를 사용할땐 우리는 useState라는 훅을 사용할 것이므로 useState를 위에 임포트 해줘야한다. co..

JSX 문법 몇 가지 규칙을 준수해야한다. 1. 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다. 예를 들어 아래와 같은 코드는 오류가 나타난다. function App() { return ( 리액트 안녕! 잘 작동하니? ) } export default App; 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생한 것이다. 이 오류는 와 같이 부모 요소 하나로 감싼다면 해결 가능하다. function App() { return ( 리액트 안녕! 잘 작동하니? ); } export default App; 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸줘야할까? 그것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 ..

JSX 란? JSX는 JavaScript를 확장한 문법이다. React 요소(element)를 만들 수 있게 해주는데, HTML에서 사용한 문법과 흡사한 문법을 사용한다. 생긴 게 HTML이랑 비슷해서, JSX로 React 요소를 편하게 만들 수 있다. const element = Hello, world 브라우저가 JSX를 이해할 수 있으려면 바벨을 설치해야한다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다. const element = ( Hello, world! ); 위와 같이 쉽게 쓴..

CLI로 작업해봤지만 유튜브를 보니까 데스크톱 사용해서 gui로도 쓰길래 도전해본다... 노트북도 바뀐 기념으로... 새로 시작하는 마음으로... git과 github 필요성 git은 코드들의 모든 수정사항, 히스토리를 알 수 있다. 코드 파일의 변경 내역을 전부 보여주기 때문이다. git은 파일을 계속 추적Tracking하는것이다. 필수적으로 사용해야지 나중에 협업을 위해서도 쓸 수 있다. git 파일의 변경내역을 계속해서 추적해주는 version control system github 파일 내역과 파일들을 올려주는 공간 git 사용법 git은 무료 1. git-scm.com 으로 들어가서 버전에 맞게 git을 다운로드 한다. 2. git을 깔 땐 사용하는 에디터에 맞춰서 설치. (나는 비주얼 스튜디오..

이론 1주차 : HTML, CSS - Babel 1. 문제를 해결하는데 그치지 말고 어떻게 동작하는 지 파악하라 2. 브라우저의 변화를 예측할 수 있게 학습하라 3. 명세Spec을 읽어라 프로그래밍의 유지 보수가 가능하도록 프로그램의 구조와 기능을 상세하게 기술한 문서 명세서 - 내가 어떤 버전으로 하는지, 보안 강화 히스토리 읽기 4. 다른 사람의 코드를 읽어라 - 서로 코드 리뷰 30분 (강조) 5. 나보다 똑똑한 사람과 일하라 6. 있는 걸 다시 만들어라 - 리팩토링 7. 배운 것을 기록하라 - 열심히 하는 걸 보여주는 태도 - 정리해서 남들에게 나타낼 수 있는가 (블로그로 개발일지 데일리 스크럼 옮겨 적기) 웹 1.0 : 단방향 소통 WEB 1.0 READ ONLY Keyword : HTML, F..

https://www.acmicpc.net/problem/3052 3052번: 나머지 각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다. 서로 다른 값은 6개가 있다. www.acmicpc.net 문제는 10개의 숫자를 입력값으로 받아 각각의 숫자를 42로 나눈 나머지 값의 모음에서 서로 다른 나머지값(숫자)의 개수를 구하는 문제이다. 이때 고정된 값은 입력할 숫자의 개수 (10), 나누는 숫자 (42)이다. 먼저 나는 set() 함수를 모르는 상태에서 for문으로 문제를 풀어보았다. 10개의 숫자를 리스트에 넣어서, 또 이 각각을 42로 나눈 값들을 또다른 리스트에 저장했다. 그리고 그 저장된 나머지값 리스트들의 개수를 세서 2이상이면 1로 변환한다는 for..

https://www.acmicpc.net/problem/2577 2577번: 숫자의 개수 첫째 줄에 A, 둘째 줄에 B, 셋째 줄에 C가 주어진다. A, B, C는 모두 100보다 크거나 같고, 1,000보다 작은 자연수이다. www.acmicpc.net 처음에 내가 쓴 오답 코드 전에 문제에서 3개의 숫자를 입력받을 때 리스트에 넣고 for문으로 3개를 받아서 동일하게 했는데 괜히 복잡해짐. 코드 a, b, c 값 그냥 따로 int(input())으로 받아 주면 되는 것이었음. result 변수 하나를 선언해서 a,b,c 의 값을 곱한 값을 저장해주는데 이때 중복된 요소의 개수를 구해야하므로 숫자를 한글자씩 떼내어야 한다. 이땐 str() 함수를 사용한다. 가령 숫자 100 을 문자열 "100"으로 ..

연습문제 1 에서 못 푼 문제 2개 https://www.acmicpc.net/problem/1712 1712번: 손익분기점 월드전자는 노트북을 제조하고 판매하는 회사이다. 노트북 판매 대수에 상관없이 매년 임대료, 재산세, 보험료, 급여 등 A만원의 고정 비용이 들며, 한 대의 노트북을 생산하는 데에는 재료비와 www.acmicpc.net https://www.acmicpc.net/problem/2444