으로 트윗 작성한 사용자를 조회할 수 있는 드롭다운(Dropdown) 메뉴를 만드는 과정에 하나의 문제에 봉착했다. 트윗메세지(단일 메세지: 객체형태 데이터)가 나열이 된 그 배열데이터의 유저네임을 모두 드롭다운 메뉴에 끌어왔더니 트윗의 개수만큼 (중복상관없이) 유저
Reactjs를 사용하다보면, state 를 변경해야하는 일이 빈번하다. 왜냐하면, 리액트는 상태를 감시하고 있다가 변경된 상태에 따라 컴포넌트가 리 렌더링되기 때문!!! 트위터 스프린트에서 아래와 같은 중요한 문제에 부딪혔다. 랜더링되는 트위터 메세지(단일 메세지:
스프린트 과제를 진행하다가, 도저히 안 풀리는 문제에 봉착하였는데 그것은 바로...파일이 따로 분리된 자식 컴포넌트 파일에서 부모 컴포넌트의 함수를 어떻게 호출하는가였다.아래 사진처럼 트윗 '한개'를 나타내는 자식 컴포넌트에 delete버튼이 있고 이걸 클릭하면 이벤트
재귀를 이용해 메소드 JSON.stringify를 함수의 형태로 직접 구현해보았다. 인풋으로 여러 타입의 데이터가 들어오는데, 어떤 조건에서 재귀 호출하면 좋을지 고민해보았다.인풋이 boolean, number, null인 경우(null은 typeof를 씌웠을 때 'o
위의 class structure에 기반하여 간단한 객체지향 프로그래밍을 구현해본다.통과해야 할 테스트 내용은 위와 같다.먼저, 아래와 같이 class 문법을 이용하여 최상위 class인 Grub에서 속성과 메소드를 추가해주었다.그 다음 Bee라는 하위 class에서
브라우저 환경과는 다르게 Node.js 환경은 로컬 컴퓨터에서 직접 실행되므로, 파일을 불러오거나 저장하는 등의 액션이 가능합니다. Node.js 내장 모듈 목록을 확인해보니 정말 많은 모듈들이 있었다.그 중에서 파일 시스템 모듈은 파일을 읽거나 저장하는 기능을 구현할
어제와 다르게 오늘 스프린트 과제는 Node.js 환경을 떠나, 브라우저에서 진행합니다. (Node.js 환경에는 fetch API가 내장 모듈로 제공되지 않는다)이번에는 fetch를 이용해 HTTP 요청을 보내고, 응답을 받는 연습을 해보았다.터미널에서 npm run
지난번 스프린트를 진행하면서, React 자식 컴포넌트에서 부모 컴포넌트 함수 사용하기를 트위터 예제를 통해 구현해보았다.(이전 블로그 포스팅 참조)이 부분에 대하여 조금 더 자세히 설명하고자 한다.React에서는 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 표현한다.React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나간다. 여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작
클라이언트(브라우저)에는 서버에 요청을 보내기 위해 fetch와 같은 HTTP 요청을 보내는 도구가 기본적으로 내장되어 있다. 브라우저에서는 fetch API가 내장모듈로 제공된다는 뜻이고, fetch를 이용해 HTTP 요청을 보내고 응답 데이터를 받아보는 연습을 비동
이전포스팅에서 다뤘던 실습과 동일하다. 목록 내 필터링을 구현하기 위해서는 다음과 같은 두가지 접근이 있을 수 있다.컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할
이번 과제에서는 쇼핑몰 애플리케이션의 데이터베이스를 구축해보았다.클라이언트의 경우 이미 구축이 되어져 있고, MVC패턴에서 Model부분만 구현해보았다.일단 시작하기 전, 환경변수를 먼저 세팅해주었다.node.js 기반 프로젝트 개발을 하면서 외부에 알려지면 안될 민감
쿠키와 세션은 서로 어떤 관계이며, 각각이 인증에 있어서 어떤 목적으로 존재하는지 이해하기 위하여 스프린트를 진행해보았다.
토큰의 일종인 JSON Web Token 을 이용하여 토큰방식 인증을 구현해보았다. 이번 스프린트를 통해 토큰의 개념을 이해하고, 쿠키/세션 방식과의 차이를 알아보았다.스프린트 시작 전 아래와 같이 상황을 설명하고 있다.현재 서버에서는 세션을 이용한 인증방식을 사용하고
Server 1. server 첫 시작은... npm init npm install 온갖 모듈들 설치 npm run start시 nodemon index.js 실행되도록 start값 변경 2. server 환경변수 세팅 3. 인증서 발급하여 서버 최상단에 두기.