course

방법 1 방법 2 작업 디렉토리 내에 저장공간을 만들어 깃헙의 저장소와 연결 commit: 로컬 pc의 저장소에 변경된 내용 반영 (github 저장소에는 아직 반영 안됨) push: 원격 저장소(Github)에 변경된 내용 반영 이 부분에서 인증 오류로 구글링 한 결과 https://joytk.tistory.com/58 이 링크의 방법대로 토큰 생성해 github과 연결함 Git Staging 탭에서 커밋과 푸쉬 모두 가능 git 관련 탭 보기: Window -> Show view -> Other -> git 검색 깃헙을 활용해 코드 저장, 버전 관리, 협업 등 다양한 작업 가능 출처: https://www.inflearn.com/course/java-codesquad/unit/7195?tab=curr..

깃헙에 새 레포를 생성하고, Wiki 탭에서 온라인 문서 제작하여 프로젝트 관련한 설명 가능 마크다운 문법이 매우 유용함 마크다운 문법을 익혀 학습한 내용을 정리하는 습관 만들기 출처: https://www.inflearn.com/course/java-codesquad/unit/7194?tab=curriculum

src에 작성한 자바 소스코드 위치함 ctrl + n 으로 자바 파일(java project) 생성, 파일 내에 클래스(class) 생성 등 모든 작업 가능 생성한 자바 파일의 src 클릭 후 class 생성 public class HelloWorld { public static void main(String[] args) { } } 클래스 내에 미리 예약된 메인 메소드를 선언해주어야 프로그램 작동 run 단축키: ctrl + f11 저장 후 run 하기 public class HelloWorld { public static void main(String[] args) { System.out.println("Hello World"); } } Hello World 출력 자바는 파이썬과 다르게 ''는 에러나..

jdk 설치 jdk에 jre가 포함되어있음 eclipse 설치 본 강의는 웹 개발을 다루지 않으므로 위에 있는 파일 다운로드 압축 파일을 압축 해제하기만 하면 됨 jre보다 더 많은 기능을 제공하는 jdk를 디폴트로 사용하기 위한 설정 한글 깨지는 것을 방지하기 위한 인코딩 작업: UTF-8로 바꾸기 출처: https://www.inflearn.com/course/java-codesquad/unit/7191?tab=curriculum

reactjs는 state가 바뀔 때마다 해당 component 전체가 다시 렌더링 됨 import { useState } from "react"; function App() { const [counter, setValue] = useState(0); const onClick = () => setValue((prev) => prev + 1); console.log("call an api"); return ( {counter} click me ); } console.log("call an api")는 한번만 실행하고 싶어도 state 변화할 때마다 다시 실행 component 내의 특정 부분(코드)을 state 변화할 때마다 렌더링되지 않게하기 -> useEffect 함수 사용 import { useSta..

이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름) 이미 존재하는 폴더 명과 같게 짓지 않도록 유의 npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구 npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함 movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료) react-app..

super converter에서 부모 컴포넌트(App)에서 자식 컴포넌트, 시간 변환기와 길이 변환기로 데이터 전송 x 여러 버튼에 같은 스타일을 주려면 다 복사 붙여넣기를 해야함 props 사용하면 같은 스타일을 가진 컴포넌트 재사용 가능 App(부모)에서 내가 만든 컴포넌트(Btn)에 임의의 변수명으로 property를 부여하면 Btn(자식)이 모든 property를 object형태의 인자로 받아 자식 컴포넌트 안에서 configure 가능 property 부여 시, {}안에 숫자, 문자, bool 입력. 문자는 생략가능 Btn(props)로 받으면 설정할때 props.text 처럼 사용 자식에게 함수도 prop 인자로 보내줄 수 있음 // memorization을 사용해 props 변화가 없는 컴포..

클릭마다 화면에 반영하는 기능 추가 (순서: render() -> Container() -> 클릭버튼 누르면 countUp() -> render()) JSX 환경에서 {}안에 JS코드 삽입 가능 react는 모든 것을 다시 render하는 것임에도 오직 바뀐 부분만 업데이트 -> interactive 하게 만들 수 있음 더 간단한 방법 const onClick = () => { // setCounter가 counter 데이터를 업데이트하고 렌더링까지 해줌 (component rerender) // setCounter(counter + 1); counter 값이 코드의 다른 부분에서 바뀌어 버그 발생 가능 // 확실하게 현재 값을 바탕으로 modify하는 코드 setCounter((current) => c..

react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다 reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다 vanillajs 로 버튼 클릭 수 화면에 띄우기 Total clicks: 0 click me react로 같은 기능 만들기 react에서는 script 안에서 element를 만들어 interactive하게 함 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능 property에 ad..

파이썬으로 코딩을 시작해서 스파르타 코딩클럽 내일배움단에 들어와 웹개발 종합반을 수강하기 전까지 정말 간단한 프론트엔드 정도만 다뤄봤었다. html, css, js, python을 어느정도 기초는 있는 상황에서 풀스택으로 웹개발의 한 사이클이 어떻게 돌아가는지 궁금했었는데, 나와 같은 초보자에게 딱맞는 컴팩트한 강의었다고 생각한다. 많은 사람들이 만들면서 배우라고 강조를 하는데, 역시나 내가 프로그래밍 하는 것이 바로바로 눈으로 결과가 보이고, 비슷한 과정을 반복하며, 최종적으로 내가 구입한 서버와 도메인이 연결된 첫 웹사이트를 만들게 되어 뿌듯했다. 튜터이신 이범규 대표님은 프로그래밍을 어떤 태도로 접근하고, 본인을 포함한 개발자들이 어떻게 개발하는지도 간간히 소개하시면서 초보자들에게 올바른 공부 방향..