일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 웹접근성
- 재귀함수
- 코딩테스트
- GUI
- 자바스크립트
- html5
- API
- 페어프로그래밍
- target="_blank"
- node.js
- javascript
- React
- 리액트
- 생활패턴
- cli
- 숙면기원
- 와이어프레임
- jsx
- 네트워크
- display:flex
- a태그
- 시멘틱
- DOM
- 반복문
- 야행성
- 조건문
- CSS
- Semantic
- HTTP
- 공부
- Today
- Total
목록프론트엔드 과거의 흔적 (28)
뉴비 개발자의 학습일기

클라이언트와 서버의 통신을 담당하는 API는 요청과 응답을 통해 통신하는 과정에서 각각의 메시지를 '잘 보낼 수 있는 방법'이 존재합니다.REST API에서 REST는 Representational State Transfer의 약자로 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다.이런 REST API를 작성하기 위해 지켜야 할 몇 가지 규칙이 존재합니다.REST 성숙도 모델은 위 그림에서 볼 수 있는 것처럼 0~3단계로 이루어져 있지만, 실제로는 3단계까지 엄격하게 적용하기 어렵기 때문에 2단계까지만 적용해도 좋은 API 디자인이라고 할 수 있고, 이런 API를 HTTP API라고도 부릅니다.0단계에서는 요청과 응답에 단순히 ..

1. 클라이언트-서버 아키텍처사람들이 사용하는 어떤 앱이든 앱의 기능을 수행하는 과정에서 필수적으로 데이터를 다뤄야 하는 것이 일반적입니다.이 때 필요한 데이터는 리소스(Resource)라는 개념에 포함됩니다. 리소스는 컴퓨터나 네트워크에서 사용되는 데이터나 하드웨어 자원, 소프트웨어 자원 등을 의미합니다. 이는 프로그램이 실행되는 환경에서 사용할 수 있는 모든 것을 포함합니다. 메모리나 디스크 공간, cpu등은 하드웨어 리소스이고 웹 서버나 파일 서버, 데이터베이스 등이 소프트웨어 리소스에 해당합니다. 프로그램을 실행하는 동안 이러한 리소스를 효율적으로 관리하고 활용하는 것은 성능 향상이나 보안, 안정성 측면에서도 중요한 부분입니다. 리소스를 효율적으로 관리하기 위한 방법 중 하나가 바로 클라이언트-서..

오늘은 리액트의 기본 문법인 props와 state를 활용해 트위터와 유사하게 만들어진 웹페이지가 실제로 작동하도록 코드를 작성해보고구체적인 작동 원리에 대해 고민해보고 리액트를 사용해 작성된 코드에 익숙해지는 시간을 가졌다.Footer.js 파일의 코드, process.env 참 자세하게 설명해주지만 배경 지식이 부족한 나는 얼른 이해하기 어려웠기 때문에 계속해서 질문했다.마치 사람과 대화를 나누는 것처럼 내가 이해한 부분이 맞는지 두루뭉술하게 적어서 질문했지만, 찰떡같이 알아듣고 설명해주는 지피티..굉장히 도움이 되지만 한편으로는 너무 똑똑한게 아닌가 하는 생각을 자연스레 하게된다. 아무튼 이 답변으로 어느 정도 이해가 되었지만 환경 변수라는 생소한 개념이 또 등장한다.그래서 환경 변수가 무엇인지도 ..

"처음 접하는 개념이라서 아직 정확하게 이해하지 못 한 개념들이지만 현재 알고 있는 것을 글로 작성해보는 1차 정리 노트 정도로 생각해 주시면 좋겠습니다!" 클래스와 인스턴스는 객체 지향 프로그래밍에서 중요한 개념입니다. 객체 지향 프로그래밍은 실제 세계에 존재하는 것을 모델링하여 프로그래밍하는 방법이라고 할 수 있습니다. 그래서 객체 지향 프로그래밍에서는 데이터와 절차를 하나의 덩어리로 묶어서 생각합니다.칼집과 칼을 만들 때 서로 다른 곳에서 만들어지는 것이 아니라, 한 군데에 모여 있는 것이죠. 왜냐하면 칼과 칼집은 기능적으로 연관이 있기 때문입니다. 클래스와 인스턴스는 대량 생산을 위한 틀을 만드는 과정이라고 생각하시면 좋습니다.쉽게 비유하자면, 객체 지향 프로그래밍의 핵심은 철로 된 검을 여러 개..

이번 과제는 테스트 케이스를 활용해 주어진 문제들의 빈칸에 적절한 답을 입력하고, 그 결과를 테스트해보면서 지금까지 배워온 여러 가지 개념들을 체크해보는 시간이었다. 이 과제를 통해 점검해 볼 수 있었던 개념은 크게 8가지였다.타입변수스코프와 클로저화살표 함수원시 자료형과 참조 자료형배열과 객체전개연산자구조 분해 할당위 이미지에 쓰여있는 코드처럼 아주 기초적인 개념부터 다시 차근차근 되새겨봄과 동시에, 이해하기 어렵고 어떻게 작동하는지 알아채기 쉽지 않은 부분들까지 공부하면서 지금까지 배운 내용을 머릿속에 정립해가는 과정이었다.// *함수 선언문으로 작성된 코드는 변수 호이스팅이 발생한다*//함수 표현식으로 사용하는것이 바람직하다!(회사별 코드 컨벤션에 따라 조금씩 다르지만) 3. 스코프와 클로저클로저..
JS에서 자료형(type)은 값(value)의 종류를 가리킵니다.자료형에 따라서 고유한 속성과 메서드를 가지고 있으며, 자료형은 크게 원시자료형(primitive type)과 참조 자료형(reference type)으로 나눌 수 있습니다. 1. 원시 자료형(primitive type)자바스크립트에서 원시 자료형에 해당하는 타입은 6개입니다.-number-string-boolean-undefined-null-symbol 원시 자료형의 특징원시 자료형을 변수에 할당하면 메모리 공간에 값 자체가 저장됩니다.원시 값을 갖는 변수를 다른 변수에 할당하면 해당 값 자체가 복사되어 전달됩니다.원시 자료형은 변경 불가능한 (immutable value)이며, 한 번 생성된 원시 자료형은 읽기 전용 값입니다.let a ..
[ 객체 정의 ]객체는 배열과 마찬가지로 다량의 데이터를 한 번에 다룰 수 있는 참조자료형 데이터이며, 0개 이상의 프로퍼티의 조합으로 이루어져 있습니다. 또한 프로퍼티는 키와 값의 조합으로 이루어져 있습니다. 예시) let person = { name: "객체", } //key: ( name ) value: ( "객체" ) //프로퍼티(속성) => 키 + 값 [ 객체와 배열의 비교 ]배열이 데이터의 순서정보(index)를 가지고 있는 자료형이었다면, 객체는 데이터에 이름(key)을 부여할 수 있는 것이 특징인 자료형입니다. key를 이용해 데이터에 의미를 부여할 수 있고, key를 사용해 데이터에 접근할 수 있습니다. 1. JavaScript에서 사용할 수 있는 ..

CLI(Command Line Interface)는 터미널을 통한 텍스트 명령어로 컴퓨터와 상호 작용하는 방식을 가리키고, GUI(Graphical User Interface)는 사용자가 편리하게 사용할 수 있도록 입력이나 출력과 같은 기능을 아이콘 등을 활용한 시각적 요소를 사용해 컴퓨터의 기능을 간편하게 이용할 수 있도록 하는 방식이다. 컴퓨터를 조작하기 위해서는 반드시 입력(input)이 필요하다. 키보드와 마우스처럼 컴퓨터에 입력을 할 수 있도록 만들어주는 도구를 입력 소스(input source)라고 한다. 일반적인 사용자가 PC를 사용함에 있어서는 이러한 입력 소스를 사용하는 GUI가 CLI에 비해 압도적으로 편리한 것이 사실이지만, 개발자의 경우 원격으로 서버 컴퓨터에 접속하거나 소통해야 하..