Persistence

Redux - BookList 예제 - 1. 컨테이너 만들기 Why Redux? 리액트에서는 스테이트에 접근하기 위해서 부모 컴포넌트로부터 자식 컴포넌트로 계속 props를 전달해야만 했다. 이 관계가 복잡해지고 멀어질 수록 스테이트가 어디서 어떻게 변화하고 있는지 파악하기 어려워지며 비효율적이다. 그러나 리덕스를 사용하면 스테이트에 접근하고자 하는 컴포넌트가 부모 컴포넌트를 통하지 않고도 직접 스테이트에 접근할 수 있게 해준다. 따라서 리액트에 스테이트 관리자인 리덕스를 추가하여 사용하면, 다음과 같은 장점을 누릴 수 있다. Predictable state updates - 데이터 플로우를 이해하기 쉽게 해준다 순수 함수인 리듀서를 사용함으로써 로직을 테스트하기 쉽다. (스토어라는 하나의 객체에 모든 ..

Today I Learned MVC 패턴 실습(servlet, jsp, js, ajax 활용) redux 조금! connect, mapStateToProps, mapDispatchToProps 도큐멘테이션 읽기

Today I Learned Servlet, JSP, html을 이용한 mvc 패턴 실습 Git 개념 정리

깃 개념 이해하기 - 2 커맨드 라인이 아닌 깃의 개념 위주 정리입니다 Merging test 브랜치에서 new.txt파일을 수정한 뒤 이를 마스터 브랜치에 반영하고자 한다. ** Fast-Forward merging ** git checkout master git merge test 머지를 하려면 머지하고자 하는 곳으로 스위치 한 다음(마스터 브랜치의 경우 git checkout master) 머지를 해야 한다. (git merge test) new.txt의 수정에 대해 다른 컨플릭트가 없고 마스터 브랜치에서 수정된 사항이 없을 때에는 디폴트로 fast-forward merge가 가능하다. fast-forward merge는 선형적으로 머지하는 것인데, 구글링으로 이해한 바에 따르면 test 브랜치를 ..

깃 개념 이해하기 - 1 커맨드 라인이 아닌 깃의 개념 위주의 정리입니다 4개의 박스가 있는 것을 상상하자. 3개의 박스는 한 그룹으로 묶여있고 나머지 한 박스는 따로 있다. 그 박스들은 각각 다음을 의미한다. 원격 저장소(Remote Repository) -- 혼자 있는 박스 작업 디렉토리(Working directory) -- 함께 있는 박스 1 스테이징 영역(Staging Area) -- 함께 있는 박스 2 로컬 저장소(Local Repository) -- 함께 있는 박스 3 함께 있는 3 박스를 통틀어 나의 개발 환경(Development Environment)이라고 할 수 있다. 원격 저장소는 다른 사람과 코드를 공유하고자 할 때 변경 사항을 보내거나, 그 변경 사항을 얻어올 수 있는 곳이다. ..

Servlet에서 Session 객체 사용하기 구현 기능 html 파일에서 클릭 이벤트 발생시 id를 쿼리스트링으로 보내고, 서블릿에서 이를 받아서 세션 객체에 저장함 장바구니 기능에 응용될 수 있는 것으로, 사용자가 어떤 이미지를 클릭할 때마다 클라이언트 쪽에서 id 쿼리스트링을 보내서 이를 세션 객체로 생성한 배열에 저장하여 상품 id당 클릭이벤트의 누적 값을 보여주도록 함. 코드 javascript click event - a 태그로 // productlog2.html // image append는 이미 되어 있다고 가정한다. 아래는 이미지 로드 시 실행될 이벤트 함수 function getA() { var anchor = document.createElement('a'); $(&#3..

Today I Learned 깃 개념 정리 jsp 문법 쬐금 리덕스 예제 개념 정리 중... Today was 깃을 잘 사용해야 하는데 개념이 안 잡혀있어서 공부하면서 정리글을 썼다. 뭔가 대충 커밋, 푸시, 풀만 하다가 보니 에러 나도 이게 무슨 말이야 싶고 에러를 검색해봐도 개념을 잘 모르니 설명을 이해를 못하는 일이 생겨서! 지금 갖고 있는 프로젝트를 좀 커스터마이징해서 타노스 이펙트 적용해보면 괜찮을 것 같은데...? 리덕스도 사용하고 서버도 바꾸고?! 좀 괴랄한 것 같지만 할 수만 있으면 ㅎㅎ 하나를 하면 하나를 못하고. 시간과 머리는 한정되어 있는데 배울 건 많고. 그래도 이번에 스타트업 지원하려고 맘먹으니까 정말 프로젝트가 너무 빈약한게 뼈저리게 느껴져서, 프로젝트 만드는 데 우선순위를 두려..

Today I Learned Servlet/JSP Session Redux 리덕스 예제 container, action, reducer 연결 완료 Today was 하루 종일 에러에러에러에러에러에러에러 리덕스도 에러, 서블릿도 에러, 깃 에러...하여튼 리덕스는 module당 하나만 export할 수 있었는데 두 개를 export한다고 해서 에러가 난 것이었고 서블릿은 결국 요청과 응답을 주고 받을 때 형식과 파싱 문제였다. 특히 아직 jQuery문법이 익지 않아서 더 헷갈렸던 것 같다. 결국 원인은 형식을 제대로 보내지 않아 파싱할 때 에러가 난 것인데 콘솔에 jQuery 에러가 나서, 내가 jQuery 문법을 틀린건가 하고 또 한참 고민했는데 그게 아니었던...:) 깃은... 컴퓨터를 2개 쓰고 이걸..

Today I Learned Redux core concepts, tutorials 포트폴리오 만듦 Today was 포트폴리오를 만드려고 보니까 진짜 쓸게 부족한게 느껴졌다. 쓸 재료가 부족한데 당연한 일이었다. 역시 프로젝트를 시작해야 한다!

Why Redux? 리덕스는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다. 간단한 앱이라면 별도로 스테이트를 관리할 필요가 없을 수 있다. 하지만 컴포넌트가 많아지면 어떨까? A, B, C, D, E, F, G … 등 많은 컴포넌트가 있고, 이 중 G 컴포넌트에 있는 함수가 A 컴포넌트에 있는 상태 값에 영향을 준다고 하자. 컴포넌트가 어떻게 연결되어 있느냐에 따라 다르겠지만, 복잡한 경우 G 컴포넌트의 함수가 호출된 결과 값이 A에게 전달되기까지 많은 컴포넌트들을 불필요하게 거쳐야될 수 도 있다.그러나 리덕스가 있다면 앱이 지니고 있는 상태와, 상태 변화 로직이 들어있는 스토어를 통하여 컴포넌트 A에 직접 상태값과 함수를 주입해줄 수 있다. 즉 상태와 직접 관련이 없는 컴포넌트들을 거치게 되면..

Today I Learned JSP Redux 예제 하다가 이해가 안돼서 도큐멘테이션 참조 중...

Today I Learned 서블릿, JSP 쬐금(form 이용해서 요청과 응답 주고 받기) 제이쿼리 ajax api 리덕스 액션 생성

jQuery의 Ajax API 참고 - Ajax란?(MDN 문서) 지원 API $.ajax() $.get() $.post() $.getJSON() $(응답받은 내용을 추가할 부모태그).load() $.ajax로 xml 파일 요청하기 // jQuery $(document).ready( function() { $.ajax('content/sample.xml', { success : function(data) { $(data).find('testxml').each(function() { $('body').append(""+$(this).find('name').text() + ''); $('body').append(""+$(this).find('age').text() + ''); $('body').append(..

Today I Learned Redux 액션생성자 Java practice 해커랭크 문제 몇 문제 JQuery 쬐금

Today I Learned HTML5 DOM exercise jQuery 쬐끔 Today was 결국 preventDefault 함수 때문이었다. 간단한 한 줄 코드인데, 눈에 계속 안 보여서...ㅠㅠ 게다가 에디터를 옮겨다녔더니 일부를 빠뜨리기도 하는 바람에 더 디버깅에 애먹었다. 나중에 큰 프로젝트하고 다른 사람들이랑 코드를 같이 짜면 훨~씬 더 힘들겠지. 내일은 자바 연습이랑 리덕스 공부해야지!!!