본문 바로가기
반응형

분류 전체보기123

Redux (리덕스)의 개념 리덕스를 쓰면 좋은 이유 - 중앙 집중적인 데이터 스토어를 이용하여 관리한다. state는 읽기전용이다. - 리액트에서 state 를 업데이트 해야 할 때, setState 를 사용하고, 배열을 업데이트 해야 할 때는 배열 자체에 push 를 직접 하지 않고, concat 같은 함수를 사용하여 기존의 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트를 한다. - 리덕스에서도 마찬가지로 기존의 상태는 건들이지 않고, 새로운 상태를 생성하여 업데이트 해주는 방식으로 해준다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality 검사를 하기 때문이다. 리듀서는 순수한 함수 순수한 함수, 라는 개념이 익숙하지 않으시죠. .. 2022. 1. 28.
React 개념 및 TIC TAC TOE 만들기 React 기초 React란? 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaSrcript 라이브러리 "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 개별 컴포넌트는 props라는 매개변수를 받아오고 render 함수를 통해 표시할 뷰 계층 구조를 반환 render 함수란? 화면에서 보고자 하는 내용을 반환하는 함수. 다수의 React 개발자는 "JSX"라는 특수한 문법을 사용하여 React의 구조를 보다 쉽게 작성 JSX란? JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 카멜표기법을 사용. 카멜표기법이란? class -> className / tabindex -> tabIndex 컴포넌트(Component.. 2021. 12. 27.
알고리즘 디자인 설계 : Flowchart와 Psuedo-code 알고리즘 디자인 설계란? '무엇을 어떻게 개발해?' 라는 의문에 답을 하는 작업 제일 먼저 무엇을 원하고 필요한지를 잘 파악해야함. 그 후 그것들을 잘 정리하여 기능들로 추려낼 수 있음 이 작업이 잘 되야지 나중에 필요하지 않은 기능을 개발하는 불상사를 예방할 수 있음 Flowchart란? 일의 진행 순서도를 이해하기 쉽게 그림으로 나타낸 것 Pesudo-code란? 개념적 또는 알고리즘 적으로 구조적인 규칙을 이용해서 작성하여 사람이 읽기 위한 것. 개발자가 아닌 지식이 전혀 없는 일반적인 사람이 봐도 이해 할 수 있도록 가독성 좋게 작성해야함 Pesudo-code Reference 1. Variables letter grade 2021. 12. 27.
Git 디렉토리 올리는 법, Git 디렉토리 안에 파일 올리는 법(vscode 이용) 1. git 디렉토리 올리는 법 올리고자 하는 디렉토리가 아래처럼 한 폴더 내에 있어야 한다. 상위 디렉토리에서 마우스 오른쪽 클릭 후 git bash here를 선택한다. - git init 처음 깃 등록할 때 초기설정 - git remote add origin [repository 주소] - git add . .은 폴더 내에 있는 파일을 전부 올리겠다는 뜻 - git status git status를 통해 올리고자 하는 backend, frontend, ppt 파일이 잘 들어있는지 확인할 수 있음 - git commit -m "작성하고자 하는 내용" - git push origit master or - git push origin +master 2. vscode를 이용하여 git 디렉토리 안에 파일,.. 2021. 12. 21.
[코딩테스트 연습] 연습문제 / 짝수와 홀수, Javascript가 false로 보는 경우 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다. 입출력 예 3 "Odd" 4 "Even" 내가 첫번째로 생각한 풀이 한 줄로 요약한 풀이 - num%2 를 하였을 때 짝수는 0이 나오는 것을 이용하여 문제를 풀었다. (자바스크립트는 0을 false로 봄) - 참고로 음수의 경우 -2%2 를 하면 -0이 나오는데. -0은 자바스크립트가 false하게 보는 7가지 (-0, 0, Null, NaN, undefined, false, '') 값 중에 하나이므로 한 줄로 요약해서 문제를 풀 수 있다. * 자바스크립트가 false로 보는 경우 (-0, 0, Null, .. 2021. 12. 14.
Javascript 객체 및 객체의 종류 객체의 종류 - 내장 객체 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있음 기본형 : 참조 변수(인스턴스 이름) = new 생성 함수(); * 날짜 정보 객체 var t = new Date(); 특정 날짜 정보 객체 생성 방법 var t = new Date("2002/5/31"); var t = new Date(2002,4,31); 날짜 정보를 가져올 때(GET) 날짜 정보를 수정할 때(SET) getFullYear() 연도 정보를 가져옴 setFullYear() 연도 정보만 수정함 getMonth() 월 정보를 가져옴(현재 월 -1) setMonth() 월 정보만 수정함(월-1) getDate() 일 정보를 가져옴 setDate() 일 정보만 수정함 getDay() 요일 정보를.. 2021. 12. 13.
CSS3 선택자 기본 CSS3 선택자란? - 특정한 HTML 태그를 선택할 때 사용하는 기능 - 해당 태그에 원하는 스타일 또는 기능을 적용하기 위해 사용 ex) h1{ color : red; } = 선택자 { 스타일 속성 : 스타일 값; } 이러한 코드를 CSS 블록이라고 부르고 style 태그 내부에 입력해 사용. 전체 선택자 선택자 형태 설명 * HTML 페이지 내부의 모든 태그 선택 - 모든 웹 페이지에서 빠지지 않고 사용하는 선택자. - body 태그 뿐만 아니라 html, head, title, style 태그까지 전부 선택하여 적용 함. 태그 선택자 선택자 형태 설명 태그 특정한 태그를 선택 - 특정 종류의 태그를 모두 선택할 때 사용하는 선택자. ex) h1 { color : red; } , p { color .. 2021. 12. 13.
HTML5 개요 및 기본 태그 태그와 속성 - 태그 : HTML 페이지에서 객체를 만들 때 사용하는 것. 단독으로 사용하는 태그는 처럼 XHTML5 표기법을 사용한다. - 속성 : 태그에 추가 정보를 부여할 때 사용하는 것. HELLO HTML5 (title : 속성 이름, header : 속성 값) (src : 속성 이름, image.png : 속성 값) HTML5 페이지 구조 : 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 함. : HTML페이지의 루트 요소, 모든 HTML 태그는 html 태그 내부에 작성한다. - lang 속성 국가 속성값 국가 속성값 한국 ko 미국 en 일본 ja 러시아 ru 중국 zh 독일 de lang속성은 구글과 같은 검색 엔진이 웹 페이지를 탐색할 때 해당 웹페이지가 어떤 언어로 만들.. 2021. 12. 10.
[기초 코딩용어 해설] 01. 컴퓨터와 인터넷 01. 컴퓨터란? 기본적으로 기계를 모아둔 것 (본체 내부에) 기계의 종류 메인보드 : 꽂아두기 (CPU,RAM,하드디스크 등을 꽂아서 이용할 때 사용) CPU : 계산하기 (컴퓨터에서 수행하는 연산들을 계산할 때 사용) RAM : 기억하기 (사용자가 작성한 프로그램이나 데이터를 기억시킬 때 사용) 하드디스크 : 적어두기 (프로그램이나 데이터를 저장할 때 사용 / 하드디스크 용량이 크면 저장을 더 많이 할 수 있다.) 02. OS (운영체제) - 컴퓨터를 동작하도록 하는 것 컴퓨터를 동작시키기 위해서는 인간이 기계와 소통할 수 있도록 하는 프로그램이 있어야 한다. 이를 OS라고 한다. OS의 종류 Window, Android, ios, Linux ... 03. 코딩 - OS에 명령을 내리는 것 인간은 O.. 2021. 12. 3.

티스토리툴바