공부하는 개발자 핑구 🐧 공부하는 개발자 핑구 🐧

# SPA(Single Page Application) SPA 가 아닌 Application 은 Client인 Browser 에서 서버에 지속적으로 요청하여 새로운 리소스들을 불러옴 SPA 는 필요한 리소스들을 초기에 한번에 불러오고 난 후, 라우팅등이 발생하면 Client(Browser) 단에서 동적으로 페이지를 작성하여 서버의 부하를 줄여주며, 서버로 부터 리소스를 받는 작업들을 줄이기 때문에 페이지의 반응도 빨라짐. SPA 에서는 Form 태그를 지양 # 라우팅 (Routing) • react-router-dom 을 이용하여 라우팅을 한다. (create-react-app 에 내장된 패키지가 아님, 따라서 설치 필요) • Facebook 공식 패키지는 아니나, 가장 대표적인 리액트 라우팅 패키지. ..

1. React Developer Tools (Chrom Extension) - 크롬 개발자 도구 수준에서 react-component 제어 가능 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 20ca9b565 on 10/8/2021. chrome.google.com 2. ESLint - create-react-app 에 설치된 내장기능 - 사용자가 정의한 규칙대로 js파일이 작성되었는지 확인해줌 - VScode 또는 node.js 로 따로 설치가능 ESLint - Pluggable JavaScript linter Customize Preprocess code, use ..

# 1로 만들기 (문제 1463번) 1. 주석친 코드가 DP 사용 (본래 코드는 분기한정사용) 2. DP사용한게 조건이 하나 더걸리니까 속도는 빨라졌다. (당연히 메모리는 늘었지만) 3. 문제를 풀기 위한 코드지, 1로 만들때 사용한 경로는 저장하지 않았기에, 경로출력문제라면 큐를 쓰자 import java.util.*; public class Main { static int temp = 100_000; static int[] visited = new int[100_000_1]; public static int method1(int n){ if(n%3==0) return n/3; return 0; } public static int method2(int n){ if(n%2==0) return n/2; r..

# 문자열 압축 * test input case 가 최소일 때와 최대일 때를 항상 고려하자! - 작성한 코드가 최소일 경우에 동일하게 돌아가는 것인가를 항상 체크하자! - 작성한 코드가 최대일 경우에 메모리 문제를 일으키지 않는지 항상 생각하자! * 코딩테스트는 결과물을 만드는 것이 아니다. 리턴값만 맞으면 된다. - 불필요한 값을 저장하지말자! 모든 것을 로그로 남기는 게 목적이 아니다! - 임시저장을 위한 용도라면, List 객체보단 Stack 객체를 사용하자. * 프로그래머스에서 제공하는 스켈톤코드의 answer 를 항상 다시 초기화하자! - 뼈대코드를 건들지 말라는 법은 없다. 1. Long to Int - int num = Long.valueOf(Long_Value).intValue(); imp..

1. 원시타입의 1차원배열 # clone() 메서드 - 배열안의 값을 복사함 - 따라서, 1차원배열은 deepcopy 가능하나 2차원배열이나 객체배열은 사용 불가능 (2차원배열은 사실상 1차원배열이고, element는 각 1차원배열의 주소값이니, 배열안의 값을 복사하면 주소값을 복사하는 셈) (1차원 객체배열도 같은원리) 2. 원시타입 -> 오브젝트 타입 # Stream을 이용한 복사 - Java 8 이후 버전 - Arrays.stream(원시타입배열).boxed().collect(Colletors.to구현된원하는 자료형()); # for 문을 이용한 복사 - 그냥 for 문으로 복사... 3. 오브젝트 타입 -> 오브젝트 타입 # 생성자를 이용한 deepcopy - ArrayList copiedArrL..

* 리액트 해보겠다고 JS 랑 JSX 를 주구장창 사용하다보니 헷갈리는 자바문법을 개인적으로 다시 정리하기 위한 글입니다. * 네이버코테는 구글링이나 IDLE 금지라던데.... 헝헝엏엏ㅇㄹㄱ. * 다 포기하고 C++이나 파이썬으로 코테를 보고싶지만.... 현업을 위한 자바숙련도 기르기 가즈아ㅏㅏㅏㅏㅏㅏㅏ # x만큼 간격이 있는 n개의 숫자 1. 가변배열 선언 - new 자료형[갯수] 2. 형변환 - 작은 타입의 데이터를 큰 타입의 변수에 할당할때는 자동변환된다 ex) int a = 5; long b= a; - 다른 타입간의 연산은 큰 타입으로 변환된 후 연산된다. ex) int a=5, i=0; (long)a*(i+1) int 2. Wrapper 클래스의 length - 멤버변수 length가 아닌 메소..

# React Hooks 배포 이전 Component 내부에 state가 있다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 을 사용해야 한다? => Class 로 구현 Component 내부에 state가 없다? + Life-cycle 과 관계 없다? => function 으로 구현 * Hooks 이전에는 function component 를 stateless functional component 라 명명했었음. # Hooks 이후 function 으로도 state를 사용할 수 있게 됨. => 코드생산성 증가 # Reference - https://ko.reactjs.org/docs/hooks-intro.html#gatsby-focus-wrapper Ho..

# JSX 란 ? - React에서 사용하는 자바스크립트 확장문법이다. - 각종 컴파일도구(Babel compiler)들로 인해 브라우저에서 실행되기전에 JSX는 자바스크립트로 변환된다. - 컴파일도구의 힘을 빌리기 때문에, 문법적오류를 잡아내기도 쉬우며, 가독성도 좋아지는 장점이 있다. # 그렇다면 JSX를 사용하지않고, 순수 자바스크립트로만 React를 사용 가능할까? - 그렇다. JSX는 자바스크립트로 구현이 되어있기 때문에 가능하다. # React 를 사용하는 이유? - Virtual DOM 을 이용한 컴퓨터 자원 사용효율에 대한 우위 (실제 HTML과 변경된 HTML의 차이점만 반영) - Virtual DOM 을 이용하기 위해서는, React를 사용해야하고 그에 맞게 요구되는 React-Elem..