일단 시작해보는 블로그

Create-React-App Facebook에서 제공하는 React 프로젝트의 개발 환경 Initializer 입니다. 기본적인 개발 환경이 다 구축되어있고 그 위에서 개발을 위한 코드 수정만 하면 됩니다. 개발에만 집중할 수 있도록 하는 아주 좋은 오픈소스입니다. 또한, 잘 구축된 개발환경이기 때문에 React에 대하여 공부하는 용도로 사용되어도 좋을 것 같습니다. 따라서 Create-React-App 으로 만들어진 프로젝트로 React의 구조 및 작동 원리를 알아보겠습니다. Create-React-App의 공식 페이지 Create-React-App을 홈페이지를 참조하여 만들면 다음과 같은 폴더구조를 갖는 리엑트 프로젝트가 생기게 됩니다. my-app ├── README.md ├── node_modu..

React 란? 프론트엔드 프레임워크/라이브러리로, 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화 하고, 오직 기능 개발 그리고 사용자 인터페이스를 구현하는 것에 집중할 수 있도록 하기 위해서 사용됩니다. 알려진 React의 장점은 다음과 같습니다. component 기반의 개발방식 Virtual DOM 을 통한 성능 이점 서버와 클라이언트가 같은 코드로 렌더링하는 유니버설 렌더링(universal rendering) 사용 가능 1. component 기반 개발 방식 React를 배우려고 하시는 분들은 대부분 html/css/js 로 뭔가 만들어 보신 경험이 있을 것입니다. 저의 경우 html/css/js 는 진입장벽이 낮았던 이유로 쉽게 입문하게 되었었지만, 졸작 프로젝트..

React를 처음 접하게 된 계기는 급하게 혼자서 공부한 후 프로젝트를 진행하는 것이었다. 일단 `프로젝트 완수` 가 목표였기 때문에 "돌아가게만 만들자" 라는 목표를 두고 진행을 했었다. 리액트의 관련한 코드를 많이 읽어보고, redux 공부도 해보고 한 현재로서, 이때의 코드들을 보면 정말(..ㅎㅎ.. )얼른 고치고 싶은 마음이 든다. 그래서 Code refactoring을 결정했고 더 나아가 깊이 있는 react, javascript 공부를 병행하며 하기로 결심했다. 방향 공부 내용을 정리 프로젝트에 적용된 코드가 어떻게 돌아가는지 자세히 설명 적용 react : 기존의 프로젝트의 구조 및 코드 개선 react+redux : redux 적용한 구조 및 코드 개선

목차 Sass CSS Module styled-components 반응형 디자인 (styled-components) 1. Sass Syntactically Awesome Style Sheets CSS pre-processor로서, 복잡한 작업을 쉽게 해주고 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주므로써 유지보수를 쉽게 해줍니다. Sass에서는 두가지의 확장자를 지원합니다. .sass $font-stack : Noto-sans, sans-serif $primary-color : #333 body font: 100% $font-stack color : $primary-color .scss $font-stack : Noto-sans, sans-serif $primary-color : #3..

잘 되던 mysql에 접속했는데 갑자기 다음과 같은 오류가 생겨서 실행이 안됐다.... parkjinsun:~ jinsun$ mysql -uroot -p Enter password: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 왜 생겼을까 이런 오류.. mysql.sock? unix/linux 의 디렉토리 구조상 임시 저장 directory인 /tmp에서 mysqld가 start 상태일 때 생성되었다가 stop상태일 때는 지워지는, mysqld(mysql의 서버 프로그램) 과 mysql(mysql 클라이언트 프로그램)이 같은 컴퓨터에서 통신할 때 파일을 사용하여 통신하는데 이때 사용되..

요약 Comparable : 기본적인 정렬 기준으로 정렬. default = 오름차순이지만 내림차순도 있으며, 사전순으로 숫자크기순 등등이 이에 해당된다. @Override compareTo(Object o) -> this, o 비교 -> 오름차순이면 뒤에있는 o가 더 커야하므로 this > o 일 때 맞는거니까 양수 return! Comparator : 기본적인 정렬 기준 이외의 기준으로 정렬하고자 할 때 사용. 그러니까 사전순이 아닌, 여러 조건이 있을 경우라던지, 문자열의 길이 순, 객체내에 접근해서 값을 비교해야한다던지 등등 일 때 사용한다. @Override compare(Object o1, Object o2) -> o1, o2비교 -> 오름차순이면 뒤에있는 o2가 더 커야하므로 o1 < o2 ..

Set Interface 1. 데이터 중복 No! 데이터를 중복해서 저장할 수 없다. 2. 저장 순서가 보장되지 않음. index로 관리하는 것이 아니기 때문 . 3. Iterator의 객체(반복자)를 통해 반복문을 돌릴 수 있다. 이것도 인덱스로 관리하는 것이 아니기 때문. 대표적으로 HashSet, TreeSet, LinkedHashSet 등이 있다. HashSet 전형적인 Set 인터페이스의 특성을 갖추고 있다. 데이터 중복x, 입력한 순서대로 저장되지 않는다. package hash; import java.util.HashSet; import java.util.Set; // HashSet은 순서가 따로 없고 중복되지 않는다. if 중복 -> false를 반환한다. public class HashS..

Iterator는 자바의 Collection framework에서 Collection에 저장되어 있는 요소들을 읽어오는 방법을 표준화한 것이다. List나 Set인터페이스를 구현하는 컬렉션은 iterator()가 컬렉션의 특징에 맞게 설계되어있다. Iterator는 인터페이스이다. public interface Iterator{ boolean hasNext(); Object next(); void remove(); } 1. boolean hasNext() : 읽어 올 요소가 남아있는지 확인하는 메소드 2. Object next() : 읽어 올 요소가 남아있는지 확인하는 메소드 3. void remove() : next()로 읽어 온 요소를 삭제한다. next()호출 후, remove()를 사용한다.