코딩연습장

자바스크립트를 사용하여 페이지를 만들어 볼 것이다.페이지에 진입하면 게임 시작이 되지 않은 페이지만 아래와 같이 보이며, 숫자를 입력하는 칸, 게임 시작버튼, 게임 중 숫자를 제출하는 버튼 세가지가 있다. 숫자 기억 게임 숫자 자리 --> 시작 제출 시작 버튼을 누르면 화면에 1000~9999 범위의 숫자가 무작위로 하나 나타나며, 3초 뒤에 숫자가 사라진다.사용자가 숫자를 입력하고 제출 버튼을 누르면 정답의 유무를 출력한다.  숫자 기억 게임 ..

PostgreSQL이란?PostgreSQL은 뛰어난 안정성, 유연성, 개방형 기술 표준지원으로 알려져있는 오픈소스 데이터베이스이다.다른 관계형 데이터베이스 관리 시스템과 달리 비관계형 및 관계형 데이터 모두를 지원한다. PostgreSQL의 장점성능 및 확장성데이터 인증 및 읽기/쓰기 속도가 필수적인 대규모 데이터베이스 시스템에서 PostgreSQL은 지형 공간 지원 및 무제한 동시성과 같은 다양한 성능 최적화를 지원한다. 따라서 심층적이고 광범위한 데이터 분석을 실행할 때 효율적이다.동시성 지원여러 사용자가 동시에 데이터에 접근하는 경우 충돌을 방지하기위해 접근을 차단한다. 하지만 PostgreSQL은 다중버전 동시성 제어(Multiversion Concurrency Control)를 사용하여 동시성을..

https://school.programmers.co.kr/learn/courses/30/lessons/68644 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr해당 알고리즘 문제를 풀고 다른 사람의 답을 확인했을때 생긴 궁금증이었다. 내가 작성한 코드는 다음과 같다.function solution(numbers) { var answer = []; for (let i = 0; i a-b);}중첩 반복문을 사용하여 answer 배열에 특정 숫자의 합이 있는지 판단하고 있다면 넣지않고, 없다면 추가하여최종적으로 오름차순 정렬을 return하는 함수를 작..

콘솔이란?웹 개발에서 네트워크 요청, 메모리 사용, DOM 변경사항 등 실시간으로 확인할 수 있는 다양한 기능을 개발자 도구에서 확인가능하다.그 중 무슨일이 일어나는지 파악할 수 있는 콘솔이 있다. 이를 사용하여 자바스크립트 코드의 동작과 흐름을 이해하고 버그를 해결할 수 있다. 콘솔은 주로 어떤 이유로 사용하는가?코드에서 발생한 에러의 종류와 원인을 파악하는데 사용한다.코드의 특정부분을 수정하고 실행하여 결과를 파악할 수 있다.변수의 특정 위치에 따른 값을 출력하여 어떻게 동작하는지 파악할 수 있다.조건문, 반복문의 논리가 예상대로 작동하는지 확인할 수 있다.코드를 한 줄씩 실행하여 흐름을 추적할 수 있다. 과제 이상하게도 백슬래시를 표현하기 위한 '\\'가 원화로 콘솔창에 표시되었는데, 이는 크롬의 ..

자바스크립트란?자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 모든 주요 브라우저에서 지원하며, 기본 언어로 사용된다. 또한 브라우저에서만 쓸 목적으로 고안된 언어이지만, 다양한 환경에서 사용가능하다. 리액트란? 장점 / 단점React란 Facebook에서 만든 JavaScript UI 라이브러리이다. 프론트엔드 DOM조작을 쉽게 해주는 jQuery를 많이 사용했으나 방식에 한계를 느껴 효율적으로 코드를 관리하고 컴포넌트 기반 UI개발을 지원하는 Angular, Vue, React가 등장하였다. 리액트의 장점리액트는 자바스크립트 기반 문법을 사용하여 자바스크립트에 익숙하다면 쉽게 사용이 가능하다.가볍고 유연한 라이브러리고 필요한 부분에만 적용할 수 있고, 타 프레임워크나 라..

배열이란?배열이란 여러 연관된 데이터를 모아 관리하기 위한 데이터 타입이다. 배열은 크기를 미리 정해놓아야 하여 정적 자료구조로 분류된다. 내부 요소들은 메모리 상에 연속적으로 저장되며 연속된 메모리 주소를 할당 받게 된다.. 이러한 특성때문에 배열의 요소에 빠르게 접근할 수 있다. 연속된 메모리 주소를 할당 받기 때문에 우리가 이미 알고있는 인덱스(index)를 갖게 된다. 배열의 특정 위치 값을 찾기 위해 array[0]으로 접근할 때 대괄호 안의 숫자가 인덱스이다. 또한 인덱스를 갖기 때문에 임의 접근이 가능하여 접근과 탐색에 용이하다. 하지만 배열의 크기가 고정되어 있어, 배열의 크기보다 더 많은 데이터를 저장할 수 없다.  연결리스트란?연결리스트(Linked List)란 데이터를 효과적으로 저장..

스코프란?스코프란 변수에 접근할 수 있는 범위를 의미하며, 자바스크립트에서는 전역과 지역스코프가 존재한다.전역스코프란 어느 곳에서나 변수가 선언되어있어 제한없이 접근 할 수 있는 것이고,지역스코프란 특정한 공간에 변수가 선언되어있어 변수의 접근이 제한되어 있는 것이다.var a = 1;function test() { var a = 'hi'; console.log(a);}test();console.log(a);이러한 코드가 있다고 하자. 결과가 어떻게 출력될까?hi가 먼저 출력되고, 1이 출력될 것이다.test()함수의 선언 에서 a라는 변수가 'hi'로 선언 및 초기화가 되었으므로 hi를 먼저 출력한다.그리고 console.log(a)가 실행되는데, 이때 a는 전역변수로 선언 된 1이 출력된다..

먼저, 이전에 설명했던 메인축 방향의 정렬은 "justify" 수직축(교차축)방향의 정렬은 "align"임을 기억하자.justify-contentjustify-content에는 flex-start(기본값) / flex-end / center / space-betweeen / space-around / space-evenly가 있다. 가나다라 마바사아 자차카 타파하 flex-start는 기본으로 설정된 값으로 row일 때는 왼쪽, column일 때는 위를 시작점으로 정렬한다.flex-end는 끝점으로 정렬한다. row일 때는 오른쪽, column일 때는 아래가 기준이다.center는 가운데로 내용물을 정리한다.space-between은 ..

오랜만에 새로워진 웹개발종합반 강의를 들었다.이전에 들었던 것과 비슷하게 html의 태그들을 알려주고, css를 사용하는 법을 알려주었다.결국엔 display: flex를 마주했다.한창 코딩을 할 때에도 이건가? 이건가? 하면서 헤맸던 속성이지만 이젠 떨쳐내려한다. display : flex; 가나다라 마바사아 자차카 타파하 이렇게 코드를 작성했다고 쳐보자. 그렇다면 화면은 아래와 같을 것이다.wrap 내부의 div의 height는 틀의 최대값을 가지게 되고, width는 미리 지정해준 값이나 내부에 들어있는 요소에 딱 맞게 적용된다.flex-direction: ~~;flex-d..

내가 React 트랙에 참여한 계기는 무엇인가요?제일먼저, 공부하는 것에 재미가 있었다. 의무교육과 전공, 전공심화까지 16년의 교육을 받았지만 암기형식으로 배우고 시험을 위해 공부했던 때는 좋은 성적을 받을 때만 공부에 대한 보상감을 느꼈지만, 이전에 웹 프로그래밍을 배우며 공부에 흥미를 느꼈던 것이 가장 큰 이유이다. 이전 과정을 마치고 졸업하기위해 학교로 돌아갔을 때에도 지루하고 그냥 시간을 죽이며 살아왔던 것 같다. 하지만 코딩을 배울 때 만큼은 배움에서의 재미를 느껴 React 트랙에 참여하게 되었다.내가 이해한 개발자는 어떤 역할을 하는 사람인가요? 내가 이해한 개발자의 역할은 소통창구이다. 특히나 프론트엔드의 경우 더욱이 그렇다고 생각한다. 백엔드와 데이터의 흐름을 조율하고, 디자이너와 뷰를..