코드사냥꾼의 전리품

배열과 오브젝트 두 가지를 나눠서 ES6에 새로운 문법인 비구조화 할당에 대해 알아보자 비구조화 할당 정의 우선, 비구조화 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 간단하게 말하자면 배열([ ])이나 객체({ }) 안의 값을 편하게 꺼내 사용할 수 있는 문법이다. 배열 비구조화 할당 비구조화 할당 시 다음과 같이 기본값을 지정할 수 있다. const [cat, dog, tiger, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER console.log(animal)..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 예전에는 각종 프레임워크의 라이프 사이클(=생명주기)의 개념만 이해하기 급했고, 실제 코딩하면서 사용할 생각은 하지 않았었다. 아마 나의 무지함 때문에 적절하게 사용하지 못했을 수도 있었을 것이고, 유용하고 좋은 기능이 있어도 그동안 진행했던 프로젝트에서는 필요 없었기 때문일 수도 있다. 라이프사이클 API에 대해 정확히 배운 것을 정리해서 이후 개인 프로젝트 진행 시 참고해야겠다. 우선, 전체적인 리액트의 라이프사이클은 다음과 같이 크게 Mount, Updating, Unmount 3가지로 나뉜다. 컴포넌트가 처음 실행될 때 관여하는 Mount api constructor(props) 컴포넌트가 새..

Data 속성 기술문서에 따르면, HTML5 버전부터 추가된 개념으로, HTML 요소의 'data-'로 시작하는 속성이다. 이러한 데이터 속성은 특정 데이터를 DOM 요소에 저장하기 위함이 목적이다. 브라우저는 해당 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자 스스로 어떠한 요소에 특정 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다. 여기서 속성명은 data-value이지만 HTML의 표준 속성인 value와 전혀 관계가 없다. 임의로 만들어진 사용자 지정 데이터이기 때문이다. JavaScript에서 Data 속성 접근하는 방법 dataset 속성을 통해 접근할 수 있다. 이때, 'data-' 속성의 뒷부분을 사용한다. // ES6 let article = document.getEl..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 본문에 들어가기 앞서, 리액트를 사용하지 않는다면 우리는 아래와 같은 코드를 작성한다. 나쁘지 않지만 코드가 100줄, 1000줄이 넘어가면 한눈에 들어오지 않는다. 이를 해결하기 위해 리액트를 사용한다. [목표] 위의 코드를 리액트를 사용하여 전환해보자 첫 번째, 태그를 이름의 사용자 정의 태그로 변경해볼 것이다. 이때, 왼쪽과 같이 return 안에 Subject 이름의 태그로 사용할 html 코드를 넣어주면 된다. 이후, 적용 시 App 컴포넌트에 생성한 Subject 컴포넌트를 넣으면 된다. * 컴포넌트를 생성할 때 해당 컴포넌트는 와 처럼 하나의 최상위 태그로 시작해야 한다. 위의 코드를 간단하게 설명하자..

카페24 코딩 테스트 관련해서 누군가에게 조금이나마 도움이 되거나 스스로 기록하고 다짐할 겸 정리해보려 한다. 예전부터 가고 싶었던 회사 중의 한 곳이었는데 좋은 기회로 서류 합격하게 되었다. 첫 관문은 넘었지만 코딩 테스트라는 아주 높은 벽(나에게😂)이 있었다. 사실 이력서 쓰랴 포트폴리오 준비하랴 다른 언어 공부하랴 코딩 테스트 준비는 뒷전으로 미뤘었다. 서류 제출 후 정확히 7일이 지나서 유선 상으로 전화가 오고, 메일로 코딩테스트 안내 메일이 날아왔다. 그동안 준비 안했던 것을 정말 뼈저리게 후회하며 연락받은 날 2일 후인 14일 코딩 테스트를 보게 되었다. 제한 시간은 5문제의 30분 그때까지 목표는 구름LEVEL 홈페이지의 정답률 높은 1,2단계 문제를 완벽하게 푸는 것이었다. 역시나 준비를 ..

리팩토링이란? 비효율적인 코드를 가독성이 높고, 유지보수가 편리하며, 중복된 코드의 수가 낮은 효율적인 코드로 개선하는 작업이다. 틈틈이 리팩토링 작업을 하는 것이 좋은 프로그래머의 자세이자 좋은 프로그램을 만들 수 있다. [목표] 비효율적인 코드를 제거하는 리팩토링 작업 학습 우선, Night 버튼 기능을 웹 페이지 하단에서도 동작하도록 해보자 이때, 하단 버튼을 클릭하면 버튼의 값이 바뀌는 대상은 상단에 위치한 버튼이다. 그 이유는 input 태그의 id의 값이 동일하기 때문이다. 이 경우 하단 버튼의 id 값을 'night_day2'로 수정하면 정상 작동한다. 그러나, 버튼이 여러 개라면 수많은 버튼을 일일이 변경해줘야 하는 불편함이 발생한다. 이 불편함을 해결하기 위해 this 키워드를 사용한다...

[ Connection ] 자바프로그램과 데이터베이스를 연결하여 사용하기 위해서는 무조건 Connection 객체가 필요하다. 특정 SQL 문장을 정의하고 실행시킬 수 있는 Statement 객체를 생성할 때 Connection 객체를 이용한다. public static void main(String[] args) throws SQLException { // 0. 객체생성 Connection con = null; Statement stmt = null; ResultSet rs = null; // 1. 드라이버 등록 try { Class.forName("oracle.jdbc.driver.OracleDriver"); System.out.println("[드라이버 등록 성공]"); // 2. db 연결 = c..

1. 문제 2. 풀이 ** 단 , 입력받은 세 개의 숫자를 비교하여 큰 수를 빗변으로 설정해 풀어야 하는 조건을 새로 추가하여 풀었다. ** -- MINE🔥 public static void main(String args[]) { Scanner sc = new Scanner(System.in); while (true) { int max = 0; System.out.print("숫자 입력 :"); int a = sc.nextInt(); int b = sc.nextInt(); int c = sc.nextInt(); if ((a > 0 && a 0 && b 0 && c b && a > c) { max = a; if ((b * b) + (c * c) == max * max) { System.out.println..

1. 문제 2. 풀이 -- MINE🔥

1. 문제 2. 풀이 -- MINE 🔥