코로 넘어져도 헤딩만 하면 그만

이번 주에 학습한 것: ajax, fetch, promise, 리액트 비동기 처리 방법과 리액트에 관해 배워보는 한 주였습니다. 비동기 개념부터 시작해서 리액트를 적용하려니 정말 만만치 않더군요. 그렇게 수업하던 중 자연히 생겨난 몇몇 의문을 스터디 발표를 준비하며 알아보는 시간을 가졌습니다. 🎈1. Ajax, Axios, fetch. 그래서... 뭐가 다릅니까? Ajax, Axios, fetch 이 셋은 클라이언트와 서버간의 데이터를 주고 받기 위한 비동기 통신 기술로 자주 비교됩니다. 유사점이 있는 만큼 차이점에 주목해야겠죠. 비동기를 격파하기 위해 이 셋에 관해 조금 더 살펴보기로 했습니다. (1) Ajax? Ajax(Asynchronous JavaScript And XML)는 JavaScript를..

앞에서 웹 어플리케이션이 HTTP 메서드를 사용해서 서버와 통신한다는 사실을 알아보았습니다! 이러한 소통을 위해서 간단하고, 일관적이며, 사용이 간편하게 해주는 규칙이 존재합니다. 요청과 응답을 할 때 바람직하게 보내고 받을 수 있도록 규약이 존재하는 것입니다. 안그러면 각자 양식이 달라 몹시 혼란스러워질 테니까요. 🎈REST API? REST (Representational State Transfer) API 는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 의미합니다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 '잘' 주고받기 위해서는 알아보기 쉽게 작성된 규약이 필요한데, 바로 이 역할을 하는 것이..

페어 프로그래밍이 없는 날에는 당일 학습한 걸 블로깅 하기로 다짐했습니다. 복습 겸 집중력 하락 방지를 위해서죠. 특히 오늘은 네트워크에 대한 학습을 했는데, CS 지식이 깊지 않다보니 생소한 개념들이 많아 따로 포스팅을 해야겠다는 생각이 들었어요. 어렴풋하게만 알던 네트워크 지식들을 조금 더 깊이 파보려 합니다. 🎈클라이언트 서버 아키텍처 인터넷 연결 없이 쇼핑몰 앱은 정상적으로 동작할 수 없는 것, 다들 잘 알고 계시죠? 인터넷에 존재하는 서버(server)로부터 상품 정보를 받아오기 때문인데요. 정보를 주고 받을 수 있게 리소스를 제공(serve)해주는 곳을 서버라고 부르고, 이 리소스를 사용하는 앱을 클라이언트라고 부릅니다. 이처럼 리소스가 존재하는 장소와 사용하는 곳을 분리시킨 구조를 2-Tie..

본격 리액트에 들어온지도 사흘이 지났습니다. 그리고.....리액트 쉽다고 생각했던 과거의 나를 묻어버리고 싶네요. '애걔걔~리액트 그거 뭐 변수 좀 만지고 컴포넌트 넣고 props로 내려보내면 되는 거 아니냐?' 무슨 깡으로 그렇게 생각했던 건지... ...? 좀 물어보고 싶습니다. 물론 알고 있습니다. 낯설어서 그런거지 적응하면 어떻게든 할 것 같아요. 근데 적응이 잘 안 된다는 게 문제죠. 얄팍하게 올라 앉아 삐걱거리던 지식들이 props와 state와 함께 몰락했습니다. 하산은 멀었다... 가서 개념 더 잡고 와라..... 리액트 문법들을 익힌다고 익혔는데도 실습과 마주하니 머리가 하얗게 손이 덜덜 떨리는 경험을 할 수 있었습니다. 한번에 문제들이 몰아쳐서 그럴까요. 어쨌든. 마냥 울면서 손을 놓고..

09. ABCheck 문자열을 입력받아 문자열 내에 아래 중 하나가 존재하는지 여부를 리턴해야 합니다. 'a'로 시작해서 'b'로 끝나는 길이 5의 문자열 'b'로 시작해서 'a'로 끝나는 길이 5의 문자열 대소문자를 구분하지 않습니다. 공백도 한 글자로 취급합니다. 'a'와 'b'는 중복해서 등장할 수 있습니다. function ABCheck(str) { // 문자열을 입력받아 문자열 내에 아래 중 하나가 존재하는지 여부를 리턴해야 합니다. // 'a'로 시작해서 'b'로 끝나는 길이 5의 문자열 // 'b'로 시작해서 'a'로 끝나는 길이 5의 문자열 //'a'와 'b'는 중복해서 등장할 수 있습니다. //대소문자를 구분하지 않습니다. //대소문자를 구분하지 않으므로 .toUpperCase 를 써서 ..

06_letterCapitalize 문자열을 입력받아 문자열을 구성하는 각 단어의 첫 글자가 대문자인 문자열을 리턴해야 합니다. 단어는 공백으로 구분합니다. 연속된 공백이 존재할 수 있습니다. 빈 문자열을 입력받은 경우, 빈 문자열을 리턴해야 합니다. function letterCapitalize(str) { let words = str.split(' '); for (let i = 0; i 0) { words[i] = words[i][0].toUpperCase() + words[i].substr(1); } } str = words.join(' '); return str; } 주어진 문자열을 우선 공백을 기준으로 두고 나누었고..

아침 내내 React와 씨름을 하고 왔습니다. WSL2와 우분투로 리액트를 까는 건 처음이었거든요. 이전부터 여러 테스트를 돌리기 위해 우분투 터미널을 쓰고 있었고, 과제 진행하면서도 /mnt/c 로 윈도우 바탕화면까지 경로를 이동하여 거기서 작업을 하곤 했습니다. 보통 우분투를 처음 깔면 주어지는 경로가 home인데, 그곳이 아니라 윈도우 desktop까지 경로를 지정해가며 옮겨간 거죠. 그쪽이 아무래도 윈도우 유저는 시각적으로 편하니까(...) 하여튼 경로 이동에 자신감이 붙은 저는 이번에도 윈도우 폴더에 react 폴더를 생성해준 뒤 접속했습니다. (이 과정에서 nodejs가 14이전 버전이라 깔리지 않는다는 에러가 떠서 기겁하며 다시 업데이트 하고, npm도 지우고 다시 깔긴 했지만 생략하겠습니다..

자바 스크립트에서 fetch API는 무엇일까요? 요놈은 네트워크를 통해 이루어지는 요청이 가능하게 해주는 API입니다. 네트워크 요청은 대개 비동기 요청으로 이루어집니다. 따라서 URL로 데이터 요청하도록 도와주는 fetch API를 사용하면서, promise에 대해 좀더 알아보았습니다. fetch API는 특정 URL로부터 정보를 받아오는 역할을 해줍니다. let url = "https://koreanjson.com/posts/1"; fetch(url) .then((response) => response.json()) .then((json) => console.log(json)) .catch((error) => console.log(error)); 주로 이런 식으로 사용하는데, url을 fetch("..