챔's coding 챔's coding

- Git Git bash에는 간단한 리눅스 명령어들이 포함되어 있음 Linux 디렉토리 구조 ‘will’이라는 ID로 로그인하면 will의 ‘home directory’로 이동 → 이곳이 현재의 working directory will의 홈 디렉토리에는 ‘work’와 ‘play’라는 디렉토리 존재 리눅스에서 바로 위 디렉토리는 ‘..’라는 점 두개로 표시 현재 디렉토리는 ‘.’ 점 하나로 표시 홈 디렉토리는 ‘~’로 표시 Git bash의 간단 Linux 명령어 - 디렉토리 내용 보기 pwd : 현재 working directory 출력 ls : 현재 working directory의 파일 이름 출력 ls -a : 모든 파일 표시 ls -l : 파일 이름뿐만 아니라 사이즈, 생성 및 수정일자, 권한 등..

6회차 계획 1. Git 활용법 학습 2. Git 협업 프로세스 학습 및 실습

1. OPEN API란? API는 응용프로그램이나 서비스를 개발하는데 필요한 운영체제(OS)나 라이브러리 등의 특정 기능을 추상화하여 사용하기 쉽도록 만든 인터페이스로 Single UNIX Specification, Windows API 등을 말한다. Open API는 Web 2.0 API, 통신망 서비스 API 등 주로 인터넷이나 통신망과 관련된 자원의 API를 의미하는 것으로, 여러 사람들이 공동으로 사용할 필요가 있는 자원에 대하여 이 자원의 사용을 개방하고, 사용자들이 자원에 대한 전문적인 지식이 없어도 쉽게 사용할 수 있도록 기능을 추상화하여 표준화한 인터페이스를 말한다. 이러한 Open API 서비스는 아마존, 구글 등 글로벌 회사들이 자사의 서비스를 일반 개발자, 타사 등에 개방하여 다양한 ..

5회차 활동에서는 OPEN API를 활용하여 자유로운 웹서비스를 제작해볼 예정이다. API를 사용하여 어떻게 페이지에 데이터를 불러오고 데이터를 보여줄 수 있는지 실습을 진행할 것이다. OPEN API를 활용하여 해당 데이터를 가지고 자유롭게 웹서비스를 설계함으로써 네트워크 통신을 잘 할 수 있게끔 공부할 것이다. 공공 데이터 포털이나 Apple Music, 네이버 및 카카오 등 다양한 사이트의 데이터들을 사용하여 서비스 제공 웹사이트를 설계하고 구현까지 목표로 한다. ** 리액트에서 바로 API를 호출하기보다는 postman과 같은 서버 통신 툴을 사용하여 API가 정상작동하는지를 확인하면서 프로젝트를 진행할 예정이다.

1. Recoil Recoil은 Facebook에서 만든 React를 위한 상태 관리 라이브러리이다. Redux와 비슷하게 상태 관리가 가능한 라이브러리이지만 redux와 차이점이 있다. Redux의 상태 관리는 기본적으로 상용구 코드(boilerplate code)가 많이 발생하는데다 combineReducer를 통한 reducer 분할이 가능하다 하더라도 Recoil의 atom과 같은 유연함은 결코 제공할 수 없다. 컴포넌트의 useMemo처럼 파생 데이터를 생성할 수 있는 기능은 자체적으로 가지고 있지 않아서 reselect같은 외부 라이브러리의 힘을 빌려야 한다. 그리고 atomEffect처럼 특정 상태가 업데이트 되었을 때 실행할 사이드 이펙트는 자체적으로 정의할 수 없으며 컴포넌트에서 상태를 ..

1. recoil을 사용하여 여러 컴포넌트에서 공통적으로 사용하는 state값을 만들고 사용해볼 예정이다. 리코일이 언제 쓰이는지, 왜 쓰이는지, 그리고 redux와 어떤 차이점을 갖고 있는지 등 recoil의 특징을 중점적으로 공부해볼 것이다. 2. 리액트의 특징 중 하나인 styled-components에 대해 탐구해볼 예정이다. 3. 반응형 웹을 구현할 때 필요한 기본 개념들을 학습할 예정이다. 미디어 쿼리를 사용하는 방법, 레이아웃 구조나 내용물의 size가 달라질 때 어떠한 방식으로 처리해줄 것인지에 대해 공부할 것이다.

오늘은 리액트 훅에 전반적인 이론을 살펴보고 실습을 진행하였다. 회원가입 페이지에서 input으로 입력받는 아이디, 비밀번호, 이메일 기능을 useState와 useEffect를 사용하여 상태값 변화에 따른 결과를 가시화하는 것에 집중하였다. 1. 상태값 변화를 줄 변수 선언 const [id, setId] = useState(""); const [pwd, setPwd] = useState(""); const [pwdconfig, setPwdConfig] = useState(""); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [phonenum, setPhoneNum] = useState(""); 2..

Virtual DOM : DOM을 추상화한 가상의 객체 기존의 DOM의 문제점 ? ⇒ 비효율적인 DOM 조작에 의한 랜더링 ⇒ SPA(Single Page Application)의 특징으로 DOM 복잡도 증가에 따른 최적화 및 유지 보수가 더 어려워지는 문제 ⇒ DOM이 변경될 때마다 브라우저는 CSS를 다시 계산한다는 문제점 리액트의 Virtual DOM ⇒ 변경 사항을 DOM에 직접 수정하는 게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 한다. Virtual DOM은 생성되기 전, 이전 상태 값과 수정사항을 비교하여 달라진 부분만 DOM에게 한번에 전달하여 딱 한 번만 랜더링을 진행한다. → 직접 DOM에 접근하는 것을 막아주는 역할 DOM이 ..