개발자 지망생의 블로그

[React] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (3) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. pure HTML, pure HTML+JavaScript로 짠 내용은 이전 포스팅을 참고하시면 ..

[JS] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (2) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. pure HTML로 짠 내용은 이전 포스팅을 참고하시면 된다. [HTML] 파일과 데이터를 모두 bo..

[HTML] 파일과 데이터를 모두 body에 넣어 API 요청하기 | form 태그 활용기 (1) React로 쇼핑몰 프로젝트를 짜다가 파일(이미지)과 데이터(문자열, 숫자)를 모두 body에 넣어 API를 요청해야 하는 경우가 생겼다. 상품 판매자가 상품을 등록할 때 위와 같은 기능이 필요했다. React에서 바로 하려니 어려워서, (1) pure HTML로 먼저 짜보고 (2) pure HTML+JavaScript로 짜보고 (3) React에 적용하는 과정을 거쳤다. HTML form 태그에 대해 잘 몰랐는데, pure HTML로 먼저 짜보면서 HTML form을 구성하는 방법에 대해서 공부할 수 있었다. image product_name price shipping_method 택배 직접 shippin..

백준 실버2 문제인 '트리의 부모 찾기'를 C++로 BFS를 사용해 풀어보았다. [문제] 루트 없는 트리가 주어진다. 이때, 트리의 루트를 1이라고 정했을 때, 각 노드의 부모를 구하는 프로그램을 작성하시오. [입력] 첫째 줄에 노드의 개수 N (2 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N-1개의 줄에 트리 상에서 연결된 두 정점이 주어진다. [출력] 첫째 줄부터 N-1개의 줄에 각 노드의 부모 노드 번호를 2번 노드부터 순서대로 출력한다. 트리의 루트는 무조건 1이므로, 1번 예제의 트리를 그림으로 그려보면 다음과 같다. 코드는 다음과 같다. #include #include #include using namespace std; int main() { int N; cin >> N; vect..

[네트워크] 클라이언트-서버, 프로세스, 소켓, 전송계층, HTTP Client-Server Architecture 서버(Server) 항상 on 상태이다. 고정 IP를 가진다. ex) 데이터센터 클라이언트(Client) 서버와 통신한다. 동적 IP를 가질 수 있다. 클라이언트끼리는 직접 통신할 수 없다. Processes communicating 프로세스(Process) : 호스트 내에서 실행되고 있는 프로그램 같은 호스트라면 OS를 통해 inter-process communication으로 통신한다. 다른 호스트라면 메시지를 교환함으로써 통신한다. Client process : 커뮤니케이션을 시작하는 프로세스 Server process : 연결되기를 기다리는 프로세스 Socket 프로세스는 소켓을 통..

Template Method Pattern 템플릿 메소드 패턴을 사용하면 프로세스를 표준화할 수 있다. 이 패턴은 프로세스는 고정되어 있는데 프로세스 내의 단계는 다를 때 적용하기 좋다. 예를 들어 온라인 쇼핑몰을 생각해보면, 사용자가 물건을 구매하는 큰 프로세스는 표준화되어있다. (항상 동일하다.) 그러나 상품의 종류에 따라 다른 물류 시스템을 통해 보내지는 등, 상황에 따라 프로세스 내의 단계는 달라질 수 있다. 템플릿 메소드 패턴을 사용하면 중간 단계를 너무 많은 boilerplate code*를 더하지 않고도 바꿀 수 있다. * boilerplate code : 거의 또는 전혀 변형 없이 여러 위치에서 반복되는 코드 Example 트레이딩 봇 코드를 예시로 살펴보자. 트레이딩 봇에서는 트레이딩 ..

Observer Pattern Observer Pattern(옵저버 패턴)이란 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 이 패턴의 핵심은 옵저버 또는 리스너라 불리는 하나 이상의 객체를 관찰 대상이 되는 객체에 등록시킨다. 그리고 각각의 옵저버들은 관찰 대상인 객체가 발생시키는 이벤트를 받아 처리한다. 옵저버 패턴에는 2가지 역할이 있다. 하나는 subject, 다른 하나는 observer이다. subject는 이벤트를 발생시키는 주체로, 일을 수행하고(ex. 회원 가입한 유저를 DB에 등록) 일어난 변화를 observer들에게 알린다. observer는 발생..

React 프로젝트를 하다가 다음과 같은 오류가 있었다. 동영상을 재생해보면 사이드바(왼쪽)와 내용(오른쪽)의 연결이 이상한 것을 확인할 수 있다. 페이지 구조는 위와 같다. chosenIndex는 DashBoard 컴포넌트의 state이다. SideBar의 메뉴를 클릭하면 setChosenIndex가 작동하도록 되어 있어, 그 메뉴에 해당하는 내용을 보여주는 getSideBarContent(chosenIndex)의 리턴값이 적절히 바뀌어야 하는데, 적절히 바뀌지 않았다. 맨 처음에만 상품 목록이 제대로 표시되었고, 메뉴 버튼을 누르면 각각에 맞는 내용이 표시되어야 했는데 흰 화면만 떴다. 수정 전 코드를 살펴보자. (관련 있는 코드만 남겨두었다.) // DashBoard.js export const D..

프로그래머스 1단계 문제인 '숫자 문자열과 영단어'를 자바스크립트로 풀어보았다. [문제 설명] 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. function solution(s) { const NUM_MAP = { ..

Strategy Pattern 전략(strategy)은 특정한 목표를 수행하기 위한 행동 계획이다. 전략 패턴(strategy pattern)은 디자인 패턴 중 하나로, 객체가 할 수 있는 행위들 각각을 전략으로 만들어 놓고 사용하며, 동적으로 전략 수정이 가능한 패턴을 일컫는다. 코드에서 뭔가를 하는 데 있어서 여러가지 방법이 존재할 때가 있다. 또한 상황에 따라 그 방법을 변경하고 싶을 수 있다. 예를 들어 고객 지원 소프트웨어를 사용할 때, 사용자가 얼마나 붐비는지 등에 따라 지원 고객 처리 순서를 다르게 처리하고 싶을 수 있다. 또는 VR 애플리케이션을 만들 때, VR 장비에 따라 다른 렌더링 알고리즘을 적용하도록 개발하고 싶을 수 있다. 이럴 때 이 '전략 패턴'을 사용할 수 있다. Exampl..