본문 바로가기

분류 전체보기173

Code States 27일차 - StringifyJSON JSON은 Javascript Object Notation의 줄임말로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가장한다. 이 객체 내용을 일종의 메신저 혹은 채팅 프로그램에서 쓰는 하나의 메시지라고 한다면, 다음 객체를 어떻게 전송해야할까? const message = { sender: "김코딩", receiver: "박해커", message: "해커야 오늘 저녁 같이 먹을래?", createdAt: "2021-08-25 08:21:38" } 메시지 객체가 전송 가능하려면, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열 처럼 범용적으로 읽을 수 있는 형태여야 한다. 전송 가능한 조건 (tra.. 2021. 8. 25.
Code States 26일차 - 재귀 "재귀"란 무엇일까 동일한 구조의 더 작은 문제를 해결함으로써 주어진 문제를 해결하는 방법을 재귀(recursion)라고 한다. 설명을 추가하기 위해 JAVASCRIPT.INFO에서 가져온 재귀에 대한 설명이다. 재귀는 큰 목표 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴이다. 목표 작업을 간단한 동작 하나와 목표 작업을 변형한 작업으로 단순화시킬 수 있을 때도 재귀를 사용할 수 있다. 특정 자료구조를 다뤄야 할 때도 재귀가 사용된다. 문제 해결을 하다 보면 함수에서 다른 함수를 호출해야 할 때가 있다. 이때 함수가 자기 자신을 호출할 수도 있는데, 이를 재귀라고 부른다. 재귀와 스택 ko.javascript.info 결론은 모르겠다. 글을 쓴 곳마다 의미가 다.. 2021. 8. 24.
Code States - SEB Full 33 Section1 회고 Code States에서는 각 Section의 HA(Hiring Assessments)를 통해 테스트를 통과해야 다음 Section으로 넘어갈 수있다. 2021년 8월 20일 벌써 Section 1이 끝났다. 🥳 19일에 HA의 문제를 모두 풀고 20일 오전에 HA 결과 메일이 왔다. 결과는 당당하게 통과하고 Section 2로 넘어갈 수 있었다. 그럼 Section 1에서 어떤 일이 있었는지 살펴보자. Section 1의 전반적인 내용/느낀점 Learn how to run 학습방향 JS/Node 기초 HTML/CSS 기초 Linux 기초 Git 기초 JS/Node 배열, 객체 CSS 레이아웃, Selector JS/Node 핵심 개념과 주요 문법 JS/브라우저 DOM JS/Node 고차함수 React .. 2021. 8. 23.
Code States 25일차 - 객체 지향 JavaScript 클래스와 인스턴스 객체 지향 프로그래밍 객체 지향 프로그래밍은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍이다. 사실, 이미 자바스크립트에는 "객체"라는 개념이 객체 지향 프로그램과 무관하게 이미 존재한다. 따라서 여기서는 용어를 잘 구분하는 것이 중요하다. 앞으로, 그냥 객체가 아닌 "청사진"을 바탕으로 한 객체는 인스턴스 객체(instance object), 줄여서 인스턴스(instance)라고 부른다. 청사진은 클래스(class)라고 부른다. 객체를 어떤 식으로 만드는지 살펴보면, 그냥 일반적인 함수를 정의하듯 만든다. 이때, 함수를 이용하는 방법이 조금 다르다. 그냥 실행하는 것이 아니고 new 키워드를 써서 만든다. 이.. 2021. 8. 23.
Code States 20일차 - React State & Props Props Props의 특징 컴포넌트의 속성(property)을 의미한다. props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반한다. 따라서, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다. 객체 형태이다. props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다. props는 읽기 전용이다. props는.. 2021. 8. 13.
Code States 19일차 - React Router SPA & Routing SPA는 하나의 페이지를 갖고 있지만 사실 한 종류의 화면만 사용하지 않는다. 예를 들어 Twittler 와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 더 필요할 수 있다. 또한 이 화면에 따라 "주소"도 달라진다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다. 하지만 React 자체에는 이 기능이 내장되어 있지않아서 직접 주소마다 다른 뷰를 보여줘야 한다. React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다. React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다. 라우터 역할을 하는 Br.. 2021. 8. 12.

티스토리툴바