식초의 지식보관소

마크다운(Markdown) 이란? 많은 개발자들이 일상 생활에서 쓰고 있는 언어. 갓성비 언어. 5분 안에 배울 수 있음 .md 확장자 파일 깃허브 리드미 파일 / PR (Pull Request) 설명 / 디지털 노트 /텍스트 에디터 에서 키보드 만으로 사용 가능하다! 마크다운 언어 잘 사용하면 -> 멋진 문서를 만들 수 있음! 마크다운 간단 문법 정리 -vs code 사용시, 이용해서 실시간 확인 가능. 제목 & 문장 : # 붙이기, #개수 많을 수록 작아짐, 그냥 쓰면 문장 줄긋기 : 언더라인 3개 글씨체 : ** | * | ~~ 을 앞뒤로 붙여준다 인용문 : >을 앞에 붙인다 목록 : * | - 을 앞에 붙인다 숫자 목록 : 1. 을 붙인다 클릭 링크 : [ 문구 ] ( 링크 ) 이미지 링크 : !..

※조코딩, 드림코딩 참고※ API란 무엇일까? 프론트엔드(보이는 화면) vs. 백엔드(화면에 보여줄 정보 처리) 프론트와 백 작동 과정 프론트엔드에서 1번 글 클릭 -> 프론트가 백한테 정보 요청 -> 백엔드는 DB에서 1번글에 대한 제목/내용 등 정보 가져옴 -> 백은 프론트한테 정보 전달 -> 프론트엔드는 정보를 화면에 표시함 프론트가 백한테 정보 요청할 때, 규칙에 맞게 해야한다! = API (Application Programming Interface) 백엔드에서 API를 만들고 주소, 사용규칙을 공개한 것 = Open API 공개된 백엔드를 이용하고 프론트엔드만 만들어 쓸 수 있다. = serverless ex. 지도(Naver Maps), 결재(I'mport API), 채팅(socket.io)..

react-router-dom 설치하고 프로젝트 폴더 정리하기 가장 처음 만들 기능은 네비게이션 기능이다. Home, About 메뉴를 추가한다. Home은 영화 앱 화면으로 이동시켜주고, About은 개발자 자기 소개 화면으로 이동시켜준다. '화면 이동을 시켜주는 장치'가 라우터이다. (URL에 맞게 이동시켜주는 장치) 라우터는 react-router-dom 패키지를 이용하면 쉽게 도입할 수 있다. react-router-dom 설치하기 패키지 설치하기. > npm install react-router-dom components 폴더에 Movie 컴포넌트 옮기기 컴포넌트를 역할에 맞게 분리해서 폴더에 담아 관리한다. src 폴더 안에 components 폴더 만든다. Movie.js 와 Movie.cs..

영화 앱 전체 모습 수정하기 만들 영화 앱은 다음과 비슷하다. 왼쪽 위에 살짝 튀어나온 느낌의 영화 포스터 이미지가 있고, 오른쪽에는 제목, 장르, 평점(별로 표시), 시놉시스 등이 있다. 색은 회색, 흰색을 많이 사용했다. 회원가입 기능이 없다. -영화 포스터 이미지 -제목 -개봉 연도 -장르 -등급 -시놉시스 (영화 줄거리) App.css 내용 모두 지우기 노마드 코더 영화 API에서 장르 키 살펴본다 아직 추가하지 않은 영화 데이터는 장르이다. genres 키를 영화 앱에 추가한다. Movie 컴포넌트에 genres props 넘겨주기 App 컴포넌트에서 Movie 컴포넌트에 genres props를 넘겨준다고 가정하고 Movie 컴포넌트를 수정해보자. Movie 컴포넌트 인자에 genres를 추가..

영화 API 사용해 보기 영화 데이터를 로딩하려면 자바스크립트의 fetch()함수가 필요하다. fetch()함수 대신 axios 도구 사용해서 영화 앱을 만든다. axios 설치하기 터미널에 입력한다. > npm install axios YTS 영화 데이터 API 살펴보기 주소창 yts.lt/api 입력 → YTS 영화 데이터 API 사이트 → 'List Movies API' 기능 사용 API는 특정 주소를 입력하면 그 주소에 맞는 결과 보내준다. 추가로 특정 주소에 조건을 붙여 입력하면 그 조건까지 고려한 결과 보내준다. Endpoint의 가장 위에 있는 주소 사용할 것이다. 이 주소는 최신 영화 20개에 대한 데이터를 기본으로 보내준다. 영화 목록 데이터 확인하기 주소창에 Endpoint의 주소 중 ..

state로 숫자 증감 기능 만들어 보기 state는 동적 데이터를 다룰 때 사용한다. 동적 데이터란 변경될 가능성이 있는 데이터이다. 예를 들어 객체의 구성 요소 중 일부가 있다가 없을 수도 있고, 구성 요소가 하나였다가 둘이 될 수도 있다. 클래스형 컴포넌트 작성하기 App.js에서 두 줄(맨 위, 맨 아래)만 남기고 모두 지운다. 클래스형 컴포넌트 코드 핵심은 App 클래스가 React.Component 클래스를 상속 받도록 extends React.Component를 붙인다. '리액트가 제공하는 Component 클래스를 상속받는다' 의 뜻은? 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. extends React.Component를 붙이면 (리액트가 제공하는 Component..

비슷한 컴포넌트 여러 개 만들기 앞에서 컴포넌트를 많이 만들때 ,,... 여러개 만들었다. 이것은 비효율적이다. 만약 음식이 1000개이면 반복 작성하고 fav props에도 다른 값을 입력해야 한다. 서버에서 데이터를 받아 출력하는 경우, 음식 데이터의 개수를 알 수 없다면 더 문제가 된다. 음식 데이터 만들기 서버에서 데이터를 받았다고 가정하고, 데이터를 출력하는 방법을 알아본다. foodILike라는 변수를 만들고, 빈 배열 할당한다. Food 컴포넌트는 모두 삭제한다. 서버에서 데이터 넘어온다 상상하며 배열에 코드를 넣는다. image 키값은 인터넷에서 찾은 이미지의 주소 복붙한다. 링크를 이용하면 이미지 손쉽게 출력 가능하다. name은 음식의 이름이다. 이제 foodILike에 있는 데이터를 ..

※모든 사진과 자료의 출처는 나동빈 [이것이 취업을 위한 코딩 테스트다] 입니다※ 다이나믹 프로그래밍 다이나믹 프로그래밍은 메모리를 적절히 사용하여 수행 시간 효율성을 비약적으로 향상시키는 방법이다. 이미 계산된 결과(작은 문제)는 별도의 메모리 영역에 저장하여 다시 계산하지 않도록 한다. 다이나믹 프로그래밍의 구현은 일반적으로 두 가지 방식(탑다운과 보텀업)으로 구성된다. 다이나믹 프로그래밍은 동적 계획법이라고도 부른다. 일반적인 프로그래밍 분야에서의 동적(Dynamic)이란 어떤 의미일까? 자료구조에서 동적 할당(Dynamic Allocation)은 '프로그램이 실행되는 도중에 실행에 필요한 메모리를 할당하는 기법'을 의미한다. 반면에 다이나믹 프로그래밍에서 '다이나믹'은 별다른 의미 없이 사용된 단..

리액트 앱 실행 리액트 앱 다시 실행하기 터미널 -> 리액트 앱의 루트 폴더 -> npm start 명령어 입력 -> 자동으로 리액트 앱 실행 이때 터미널을 종료하면 안 된다. 코드 수정하기 App.js 파일에서 App( )함수의 반환값이 많아지면 소괄호로 감싸야한다. ↓ 컴포넌트 컴포넌트 정의 (by. App.js ) App( ) 함수가 정의되어 있고, HTML을 반환한다. 컴포넌트 사용 (by. index.js ) 을 ReactDOM .render( ) 함수의 첫번째 인자로 전달한다. = App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. App 컴포넌트가 그려질 위치는 ReactDOM .render( ) 함수의 두번째 인자로 전달한다. -> App 컴포넌트는 아이디가 root인 엘리먼트에 그려..

※모든 사진과 자료의 출처는 나동빈 [이것이 취업을 위한 코딩 테스트다] 입니다※ 이진 탐색 알고리즘 순차 탐색 : 리스트 안에 있는 특정한 데이터를 찾기 위해 앞에서부터 데이터를 하나씩 확인하는 방법 이진 탐색 : 정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법 이진 탐색은 시작점, 끝점, 중간점을 이용하여 탐색 범위를 설정한다. 이진 탐색 동작 예시 이미 정렬된 10개의 데이터 중에서 값이 4인 원소를 찾는 예시를 살펴본다. [Step 1] 시작점: 0, 끝점: 9, 중간점: 4 (소수점 이하 제거) 중간점 값과 찾고자하는 값 비교하여 중간점 값이 더 크다면 중간점~오른쪽 끝은 확인할 필요가 없다. 끝점을 중간점 앞으로 옮긴다. [Step 2] 시작점: 0, 끝점: 3, ..