본문 바로가기

programming study/항해99 커리큘럼

 (82)
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (5) (2021.3.22) 1. State관리 1.1 단방향 데이터 흐름 데이터는 위에서 아래로, 부모에서 자식으로 넘겨야 한다. 라이플 사이클을 고려하면 부모 컴포넌트가 자식 컴포넌트의 props를 받으면 무한 렌더링을 하게 될 것이다. 1.2 setState() 클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수 state가 변경되면 컴포넌트는 리렌더링된다. this.state: 렌더링된 값 예시 import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { count: 3, // state }; } componentDidMount() {} addNemo = () => { // t..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (4) (2021.3.22) 1. SCSS 공식문서 SCSS와 CSS를 비교할 수 있는 사이트 SASS의 3번째 버전 SASS와 CSS에 호환이 잘 된다. 기본적인 문법은 CSS와 동일 사용하기 위해 패키지들을 설치 yarn add node-sass@4.14.1 open-color sass-loader classnames 1.1 Nesting 부모 태그와 자식 태그에 스타일을 줄 때 다른 블럭을 만들지 않아도 된다. 프로퍼티를 축약형으로 묶을 수 있다 font-size와 font-family를 font 아래에 묶을 수 있다. /* div태그 안에 p태그와 img태그가 있을 때 */ div{ p{ color: white; /* font-size와 font-family를 아래처럼 묶을 수 있다. */ font: { family: sna..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (3) (2021.3.21) 1. Component 리액트가 레고라면 컴포넌트는 블록이다. 웹 사이트의 조각이라고 할 수 있다. 클래스형과 함수형이 있다. 1.1 State와 Props Component에서의 데이터 관리 State Component가 가지고 있는 데이터 한 Component에서만 사용하는 정보를 주로 넣고 생성, 수정하는 데이터 생성, 수정은 오직 해당 Component에서만 이뤄진다. Props Component가 부모 Component로부터 받아온 데이터 부모로부터 받아온 것이므로 수정할 수 없다. 1.2 함수형 Component 리액트에서 폴더는 소문자로 시작하는 카멜케이스, JS파일, 컴포넌트 이름은 대문자로 시작하는 카멜케이스를 사용한다. 함수형 컴포넌트 예시 // 리액트 패키지 불러오기 import Re..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (2) (2021.3.20) 1. React 프로젝트 만들기 1.1 NVM Node Version Manager Node.js의 버전 관리자 node를 설치하는 툴 CLI 명령어 # nvm 버전 확인 nvm --version # node.js 설치 nvm install [설치할 버전] # nvm 으로 설치한 노드 버전 리스트 확인 nvm ls # 노드 버전 확인 명령어 node -v # 노드 버전 바꾸기 nvm use [사용할 노드 버전] 1.2 npm, yarn NPM(Node Package Manager : third-party 패키지를 활용할 수 있다. yarn 또한 패키지 매니저 프론트엔드 의존성을 관리하기 위한 패키지 매니저들 패키지 : 누가 만들어 놓은 코드 npm으로 yarn 설치하기 # 옵션은 필요한 경우에 적기 # ..
[항해99 1기] [Chapter3-1] 주특기 기본 - 프론트의 꽃 리액트 (1) (2021.3.19) 1. 웹과 DOM 1.1 웹의 동작 개념 브라우저가 하는 일 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청 받은 파일을 그려주기 서버가 하는 일 데이터를 클라이언트에게 전달 JSON형식으로 전달 1.2 서버리스 미리 설정이 된 서버를 빌려다 쓰는 것 ex. aws의 EC2 서버의 사양, 네트워크 설정이 미리 되어있으므로 인프라 작업을 하지 않아도 된다. 백엔드 리스가 아니다. 1.3 DOM html 단위 하나 하나를 객체로 생각하는 모델 div, p, h1, h2, span 트리구조 2. JavaScript 문법(ES6) ES6: 자바스크립트 표준 문법 중 하나로 가장 보편화된 것 2.1 Class 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀 객..
[항해99 1기] [Chapter2-2] 자료구조, 알고리즘 (17) (2021.3.19) Baekjoon Online Judge 백준 온라인 저지 사이트의 문제로 알고리즘 테스트 1920 문제 링크 import sys # 자연수 N 입력 받기 N = int(input()) # 정수 N개 입력 받기 arr1 = list(map(int, sys.stdin.readline().split())) # 자연수 M입력 받기 M = int(input()) # 정수 M개 입력 받기 arr2 = list(map(int, sys.stdin.readline().split())) # arr1 오름차순 정렬 arr1.sort() # arr2의 정수가 arr1에 존재하는지 출력하기 # 존재할 경우 1, 존재하지 않을 경우 0 출력 # 이분 탐색 for i in range(M): # 시작점 start = 0 # 끝점 e..
[항해99 1기] [Chapter2-2] 자료구조, 알고리즘 (16) (2021.3.18) 풀었던 문제들을 복습 01. 재귀함수 정의할 때 자기 자신을 참조하는 함수 Recursion 오류를 방지하기 위해서 빠져나가는 지점을 만들어야 한다. if문을 사용해서 특정 지점을 정해 return을 시켜준다. 호출될 때마다 메모리에 스택이 쌓인다. 예제: 하노이의 탑 # 디스크의 수 N = int(input()) # 디스크를 옮기는 재귀함수 # N: 디스크, s: 시작 장대, m: 중간 장대, e: 도착 장대 def moveDisk(N, s, m, e): # 옮길 디스크가 없을 때 if N == 0: return else: # N - 1 개의 디스크를 중간 장대로 옮긴다. moveDisk(N - 1, s, e, m) # 옮긴 디스크와 시작 장대, 도착 장대를 출력 print(N, s, e) # 중간 장..
[항해99 1기] [Chapter2-2] 자료구조, 알고리즘 (15) (2021.3.17) 알고리즘 문제를 풀면서 알게된 팁들 01. 시간초과가 발생할 때 코드 자체의 시간 복잡도 반복문을 너무 많이 사용한 것이 아닌지 체크 적절하지 않은 자료구조를 사용한 것이 아닌지 체크 예를 들어, pop(0)보다 popleft()가 더 빠르다. 빠르게 입력 받기를 시도해본다 # sys 라이브러리 import sys data = sys.stdin.readline().rstrip() 02. 오류가 발생할 때 디버깅 모드로 분석한다. 코드를 작성했을 때 나의 의도와 다른 변수의 변화 등을 체크 인덱스 오류 보통 for문에서 발생한다. 입력이 아주 짧은 경우 발생할 수도 있다. 메모이제이션으로 리스트의 일정 인덱스의 값을 선언해놓았을 때 발생 가능 자료형 오류 입력을 받았을 때 map 함수 처리를 안 했을 가능..

티스토리툴바