홍장군의 기록

0. 오늘의 배울 것. 서버에게 리퀘스트를 보낼 때, '데이터를 보고 싶어요' 라든가, '이 데이터를 저장해주세요', '이 데이터를 수정해주세요' 등의 요청을 할 수 있다. 즉, 서버에게 request를 보낼 때 내가 원하는 동작을 하도록 method를 지정해서 같이 보내면 되는데, 어떻게 하는지 알아보자. 참고로 fetch 함수를 쓰면 json데이터를 js 객체로 변환하는 과정이 따로 필요하지만, axios 객체를 쓰면 그런 과정이 필요하지 않다. 실무에선 보통 axios를 많이 쓴다고는 하지만, 간단한 웹 통신에서는 fetch도 쓰이긴 하니 fetch 기준으로 알아보자. 1. JSON 데이터를 객체로 변환하기. (axios 에서는 JSON 데이터를 따로 변환..

0. 오늘의 배울 것 RESTful API, REST API는 REST를 기반으로 만들어진 API이다!! API란 application programming interface의 줄임말로, 프로그램들 간의 상호 소통을 돕는 인터페이스, 매개체이다. 쉽게 말하자면 한 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 의사소통 방법이다. (여기서 프로그램이란 운영체제, 데이터베이스, 응용 프로그램 등등을 일컫는다.) 비유를 하자면, 손님이 음식을 주문하는데 종업원이 주문을 받아 요리사에게 요청을 전달하는 과정이 있다고 하자. 그리고 요리사가 만든 음식을, 종업원이 손님에게 전달하는 과정도 있다. 손님: 프로그램 A 손님이 음식을 주문: 손님(프로그램 A)가 원하는 데이터를 request 함. 종업원: A..

0. 오늘의 배울 것. 우리가 서버에게 보내는 요청을 request, 서버가 우리에게 보내는 응답을 response라고 한다. 웹에서 로그인도 하고, 지금처럼 블로그 글을 포스팅하기도 하고, 서로 댓글 달면서 다른 유저들과 대화도 해보는 이 모든 것들은 서버와의 통신이 가능하니까 이루어지는 것이다. 즉, 웹 개발에 있어서 웹을 아는 건 당연히, 너무나도 필수!! 이번에는 간단하게 웹과 api 기초 상식을 알아보자. 1. 웹이란? www 웹이란 world wide web 의 줄임말로, 전세계 연결망을 뜻한다. 이 웹페이지 않에 적혀있는 텍스트를 하이퍼 텍스트라 한다. 하이퍼 텍스트: 다른 텍스트에 대한 참조를 가지고 있는 텍스트. html은 이 하이퍼텍스트를 마크업하는 언어이다! 2. url 이란? url..

0. 오늘의 배울 것 Map은 key-value 쌍으로 이루어진 자료구조이다!! 배열은 각 원소에 고유의 인덱스 값을 붙여 순서대로 저장하는 자료 구조이다. 그런데 순서가 중요하지 않은 경우 굳이 배열을 쓰기보단, map을 쓰는 게 더 효율적이다. List형태의 자료구조들은 순서대로 값을 차곡차곡 저장하는 하나의 줄과 같은 형태지만(ordered), Map 자료구조는 각각의 Key와 매칭 되는 Value을 저장하기 때문에(unordered) 즉 순서보다는 정의된 이름(Key)과 상응하는 데이터들을 묶기 위한 자료 구조로서 효과적이다. 보통 map 자료구조는 hash 함수를 써서 linked list를 활용해 구현되는데, 이 특성 때문에 value 값을 찾거나 삽입, 삭제하는 연산이 빠르다! 1. Map ..

0. 오늘의 배울 것 reduce 메소드를 처음 보고, 뭐... 원소를 찾아서 빼주나? 싶었는데 응~ 아니~ 여기서 reduce란, 배열 안에 있는 여러 개의 값을 하나의 값으로 축소 해준다는 의미로 쓰인 것이다. 이게 무슨 뜻이냐면!! 예를 들어 배열 전체 원소의 값을 더하는 sum 은 배열의 모든 원소들을 하나의 값으로 축약시켜둔 것이다. 이렇게 배열 내부를 순회하면서, 배열의 원소를 가지고 코드 동작을 하여 하나의 값을 리턴해준다는 것이다. reduce 함수는 다른 배열 메소드 (find, filter, some, every, forEach, map..) 과는 조금 다르게 생겼으니 이번 기회에 잘 알아보자. 1. 배열 메소드 reduce reduce 메소드는 인자로 콜백 함수를 받고, 콜백함수는 파..

0. 오늘의 배울 것 배열 메소드의 some과 every를 알아보자! 이름 그대로 some은 배열 내에 조건을 만족하는 요소가 1개 이상 있는지, every는 배열 내에 요소가 모두 조건을 만족하는지 알려는 메소드이다. 사실 필자는 filter, find 메소드만 잘 활용하면 되지 않을까 싶긴 하다. every 메소드는 몰라도 특히 some 메소드는, find 메소드와 거의 비슷하기 때문에... 시간 복잡도 면에서도 큰 차이가 없어보인다. 이번 포스팅에서는 some과 every 메소드를 간단하게 알아보고 넘어가자. 1. 배열 메소드 some 다른 배열 메소드와 마찬가지로 some 메소드의 인자로 콜백 함수를 받고, 콜백 함수에는 최대 3개의 인자를 받을 수 있다. const nums = [1, 2, 3,..

0. 오늘의 배울 것 js의 배열 메소드 중에는 filter과 find가 있다. 이름에서 알 수 있듯이, 배열의 요소들을 하나씩 살펴보면서 요소를 찾는 동작을 하는 메소드이다. 가끔 프로그래머스나 백준에서 배열 내 어떠한 조건에 맞는 값들을 찾으라는 문제가 주어지는데, 그 때 사용하면 좋을 메소드들이다! 1. 배열 메소드 filter filter 메소드는 map 메소드와 비슷하게 새로운 배열을 만들어 리턴해준다. 때문에 인자로 넣어줄 콜백함수에 리턴문을 써줘야 한다. 주의할 점은 콜백함수의 리턴문에는 어떠한 값이 아니라 true false를 도출하는 조건문을 적어야 한다는 것이다. const foods = [ {name: "apple", brand: "fruit"}, {name: "banana", bra..

0. 오늘의 배울 점 배열의 원소를 가지고 반복적인 동작을 수행할 때 보통 for of문을 자주 썼었다. (배열에 for in 문을 쓰지 않는 이유는 아래 링크 참고..) JavaScript로 배열 다루기 : for in 문은 배열에서 쓰지 마라? 그런데 for 문 말고, 배열 자체 메소드를 통해 반복적인 작업을 수행할 수 있다. 바로 forEach와 map 메소드 이다!! js에서 배열을 다루는 메소드, forEach와 map을 알아보고 어떻게 활용할지 생각해보자. 참고로 배열 메소드니까 당연하게도 유사배열에서는 사용하지 못한다. 1. 배열 메소드forEach 배열의 메소드로 forEach를 호출하는데, 인자로는 콜백함수를 전달해준다. 이 때 콜백함수의 첫 번째 파라미터로 배열 요소를 하나씩 순서대로 ..

(프로그래머스 2레벨, 최솟값 만들기.)