Ch.Covelope

Javascript call by value - reference. 평가 전략 (evaluation strategy) call by value.의미와 같이 값이 그대로 복사되는 것을 의미한다. 자바스크립트(JS)에서는 원시 데이터/원시 값의 경우 값의 복사 call by value가 발생하게 됩니다. call by value.var i = 1;function somefunc(a) { a = a + 1; return a;}somefunc(i); // i의 값을 파라미터로 값만 복사해서 넘긴다. 복사된 값을 넘기기 때문에 원본은 바뀌지 않는다.console.log(i) // 결과 1i의 값을 함수의 인자로 파라미터로 넘길때 값을 복사해서 넘기기 때문에 원본의 값은 변하지 않는다.  call by..

Javascript Map map은 배열을 순회하면서 실행되는 콜백함수의 결과값들을 새로운 배열로 반환한다. Array(배열) 에 map 메소드를 사용해서 배열 * 2 값을 만들기. let array = [1, 4, 9, 16]; let result = array.map(x => x * 2); // 배열에 map 메소드를 사용해서 리턴값으로 배열의 원소 *2값을 result 에 할당한다. //화살표함수( 전통적인 함수표현(function)의 간편한 대안) console.log(array) //map 은 원본값은 건드리지 않고 새로운 배열을 생성하여 리턴한다. [1, 4, 9, 16] console.log(result) // 새로운 배열을 생성하여 result의 할당한 결과값. [2, 8, 18, 32] ..

Javascript 재귀 함수, 즉시 실행 함수. 재귀 함수와 즉시 실행 함수. 재귀 함수는 말 그대로 자기가 자기 자신을 호출하고 특정 조건이 될 때까지 계속해서 호출하고 조건이 충족되면 함수를 빠져나온다. 재귀 함수를 사용할 때는 함수를 끝내는 종료 조건이 있어야 한다. 없으면 무한으로 계속해서 돌기 때문이다. 일부 함수는 반복문으로 구현 가능하지만 그렇지 않은 경우도 있는데 tree 구조의 노드 전체를 확인할 때 재귀를 사용하면 적은 코드로 확인 가능하고 직관적이다. 하지만 재귀 함수를 호출할 때마다 스택을 소비하기 때문에 반복문에 비해 메모리 소비 또는 시간이 더 걸리수 있다. (스택은 나중에 포스팅) 오늘은 재귀 함수중에서 팩토리얼 : 수학적 용어로 계승이란 뜻으로 1부터 n까지의 정수를 곱하는..

Javascript 반복문, while문 for 문에 이어서 반복 문중 하나인 while문을 실습하면서 이해 하기. while 문으로 짝수만 출력하기 let i = 0; // i 에 0 을 할당 해준다. while (i < 100){ // 0 부터 100 미만까지 조건문을 반목한다. console.log(i); // i 를 출력 해주고 i += 2; // i 의 2를 더해고 다시 위로 올라가서 출력해주고 98이 되면 마지막으로 한번더 돌고 100을 // 찍고 while 문을 종료한다. } while 은 ~~ 동안 반복하는 것으로 조건을 충족할 때까지 반복하고 종료한다. while 문으로 짝수값만 더하기 let i = 0; // i 에 0 을 할당해준다. let result =0; // 최종 결과값을 담을..

손 코딩 손 코딩은 에디터의 자동완성이나 도움없이 손으로 써내려가는 코드이며 처음부터 손으로 써보고 잘 구현되는지 확인해보거나 혹은 이미 에디터로 작성한 코드들을 이해하고 습득하기 위해서 클론(?) 손코딩 등 하는 사람의 용도와 목적에 따라서 응용하면서 하면 될꺼같다. 수업의 일환으로 중간중간 이해가 안 되는 부분들을 손 코딩을 하는 시간을 가졌는데 손으로 써보니 에디터에서 쓴걸 하나씩 보면서 이해하는 것보다 좀 더 이해가 잘되는 거 같아서 뭔가 막히거나 어려울 때 1시간 정도씩 써보고 있다. 수업 시간 때 배운 코드들 중에서 어렵거나 잘 이해가 안 되는 코드들은 3~6번씩 써보고 이번에 한건 이미 완성된 자바스크립트 코드인데 예전에 만들었던 페이지의 자바스크립트 부분이고 그때는 아직 배우지 않은 상태라..

Javascript for문 문제풀이(실습해보기) 저번 포스팅에 이어서 포문으로 풀어 볼 수 있는 문제(난이도 없음)를 풀어볼 건데 문제라기보다 그냥 for문을 이해하기 위한 실습 정도라고 생각하면 될 거 같다. 글씨 거꾸로 순차적으로 출력하기. let s = 'hello world' // s 라는 변수에 텍스트를 할당한다. for (let i = s.length; i >= 0; i--) { //1. 초기값 에 텍스트의 길이만큼을 할당하고 //2. i 가 0 보다 크거나 같으면 반복문을 마친다. //3. i-- 로 1씩 감소된다. //// 텍스트의 길이가 10이고 1씩 감소되면서 반복된다. console.log(s[i]) // 초기값의 할당된 텍스트의 길이가 10이고 할당된 텍스트를 인덱스로 봤을때는 9..

자바스크립트 js 반복문 반복문에는 여러가지 방법으로 방법 문들이 존재하다. 자바스크립트에서 지원하는 반복문 for 문 do...while 문 while 문 레이블 문 break 문 countinue 문 for..in 문 for...of 문 for 문을 활용해서 다양한 값 구해보기. 오늘은 많은 반복문들 중에서 for 문을 활용하여 몇 가지 기초적인 실습 예제를 해볼 예정 인다. for 문을 처음 이론으로 들었을 때는 그냥 원하는 걸 반복해서 결괏값을 얻는 아주 쉽게 정의된 느낌이었는데 역시나 실제로 코드로 뭔가 써보니 나한테는 모든 부분들이 생소하고 어려웠던 거 같다. 100까지의 3의 배수와 5의 배수를 더한 값을 구한다. let result = 0; for (let x = 0; x < 101; x+..

Javascript 변수 어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 식별자(identifier)라고 불리며 특정 규칙을 따릅니다. JavaScript 식별자는 문자, 밑줄(_) 혹은 달러 기호($)로 시작해야 하는 반면 이후는 숫자(0-9)일 수도 있습니다. JavaScript가 대소문자를 구분하기에, 문자는 "A"부터 "Z"(대문자)와 "a"부터 "z"(소문자)까지 모두 포함합니다. ISO 8859-1 혹은 Unicode 문자(가령 å 나 ü)도 식별자에 사용할 수 있습니다 또한 Unicode escape sequences 도 식별자에 문자로 사용할 수 있습니다. 자바스크립트에서의 변수와 값(데이터)은 각각의 메모리상의 저장되고 변수는 할당된 값(데이터)를 가르킨다(바라본다)...

오늘의 집 시니어 개발자 조은님의 특강. 오늘은 멋사에서 준비한 많은 특강들 중에서 오늘의 집에서 시니어로 계신 프론트엔드 개발자 조은님의 특강에 대해서 짧게 포스팅합니다. 일단 2016 년 조은님이 본인이 생각했을 때 프론트엔드(front-end)개발자 로써 알아야 하는 기초지식을 보면 이렇게 많다... 이게 기본지식이며 이외에도 많다는 걸 알 수 있는데 나는 지금 HTML , CSS 그리고 약간의 sass와 엊그제부터 시작된 Js (자바스크립트) 마지막으로 아주 얇은 지식들이다... 앞길이 멀어 보이지만 각설하고 특강에서 나온 내용들을 요약한 내용들은 소개하면 1. 개발만 잘하는 개발자는 좋은 개발자가 아니다. 문제를 인식하는 능력 (문제 정의 능력) 문제를 해결하는 능력 협업을 위한 그리고 대인관계..

IDE ? IDE (Integrated development environment) 통합 개발 환경 이란 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어다. 최근의 통합 개발 환경(IDE)은 그래픽 사용자 인터페이스(GUI) 응용 프로그램 개발용 고속 개발 도구가 많다. 자세한 내용은 아래 링크에 기재되어 있다. https://ko.wikipedia.org/wiki/%ED%86%B5%ED%95%A9_%EA%B0%9C%EB%B0%9C_%ED%99%98%EA%B2%BD 통합 개발 환경 - 위키백과, 우리 모두의 백과사전 통합 개발 환경 위키백과, 우리 모두의 백과사전. ko.wikipedia.org 이번 수업에서는 goorm 의..

셀렉트 박스 만들기. 기존의 셀렉트 박스는 태그와 태그로 함께 사용되며 디자인 자체가 없다? 고 볼 수 있을 정도로 심플하다. 근데 저 상태에서 디자인을 커스텀 하기에는 한계가 있어서 기존의 태그를 사용하는 게 아니라 button 태그와 ul, li 그리고 약간의 Javascript 를 사용하여 커스텀할 수 있다. 아래는 아무것도 하지 않고 기존 방식으로 만든 셀렉트 박스이다. ul , li에서 셀렉트 박스 같은 효과를 주려면 ul의 기본 스타일은 display:none으로 안 보이게끔 만들어 주고 on 이 되었을 때 아래처럼 나올 수 있게 만들어 줘야 한다. 그건 자바스크립트로 버튼을 클릭했을 때 ul 이 on이 될 수 있도록 짜면 되는데 아직 자바스크립은 배우지 않아서 강사님이 짜주신 코드를 사용하여..

tailwindcss? 테일윈드는 디자인이 정의된 부트스트랩(bootstrap)과 다르게 커스텀이 편하고 직관적이기 때문에 좀더 다양하게 스타일을 편하고 빠르게 구성 할수 있습니다. 테일윈드는 사용법 부트스트랩이나 다른 프레임 워크와 비슷하게 정해진 링크를 헤드에 정의하여 사용하면 된다. 테일윈드는 마크업 구조에 클래스 이름으로 미리 정해진 사이즈나 정의들을 사용할수있는데 예를들어 태그가 있고 폰트 사이즈를 변경하려면 이런식으로 써주면 테일윈드에서 xl 에 미리 정의해둔 사이즈가 적용된다. 사이트에 들어가면 컨트롤 + k 로 원하는 것들 검색하여 바로 적용할수 있으므로 빠르고 편하게 적용할수 있다. 테일윈드의 장점으로는 css를 잘 모르고 사용할지 몰라도 테일윈드의 사용법과 설명을 조금만 읽어봐도 금방 ..

css, html 로 자판기 만들기! 이번 과제는 다른 회사의 코딩 테스트로 나온 과제라고 알고 있는데 회사 코테에서는 자바스크립트 (Js)까지 함께 구현해야 하지만 아직 배우지 않은 부분이고 자바스크립트 코드를 봤는데 하나도 이해가 가지 않았다... 그래서 이번 과제는 html. css를 이용해서 ui를 만들어보는 과제였고 함께 코딩하는 방식으로 진행되었다. 작업은 화면 구성 요소들 중에 중복되는 부분들을 다 만든 게 아니고 모듈처럼 하나씩만 만들고 나중에 필요한 부분을 복사해서 사용하고 배치들은 flex와 float으로 하였고 약간의 미디어 쿼리를 사용해서 반응형으로 만들어 주었다. 딱히 어려운 부분은 없었는데 피그마에서 최소 폰트로 잡힌 게 9px 이였는데 크롬에서는 최소 폰트가 있어서 적용이 안되..

카드 호버 그리고 클릭 효과 만들기. 오늘은 수업시간에 코드펜에 있는 카드가 떠오르는 거 같은 UI를 클론 코딩하였다. 코드 펜에 있던 코드는 html, css , Js 세가지 중 우리는 html 과 css 로 js 가 없는 부분으로 클론 코딩하게 되었는데 원본 코드는 양이 엄청나게 많아서 힘들겠구나 생각했었다. 하지만 강사님께서 그러한 코드들이 노력하면 충분히 줄일 수 있는 내용들이고 그걸 하기 위해서 고민하는 것에 시간이 아깝다고 생각하지 말고 항상 더 나은 방법을 생각하라고 하셨다. 아래는 카드 하나의 마크업이다. 원하는 만큼 늘려서 카드의 배열을 해주고 (전체 코드는 github에) css 스타일을 주면 된다. 이번 시간에는 grid를 사용했는데 16개의 카드를 만들고 (위에 코드*16) grid..

미디어 쿼리 미디어쿼리는 사이트에 접속하는 디바이스에 따라 css 로 해당 디바이스에서 최적화된 화면으로 보이게끔 만들어주는 것으로 css 에서 원하는 디바이스의 화면에 맞게 레이아웃을 재구성한다. 1차로 강사님의 도움 없이 클론 코딩으로 미디어쿼리를 적용할 웹페이지를 피그마에 올라온 디자인을 보고 만들었고 2차로 강사님과 처음부터 끝까지 마크업 css 그리고 미디어쿼리 까지 다 같이 만들었다. 1차로 만들었던 코드와 2차로 강사님과 함께 새로 짠 마크업을 비교하면서 처음보다는 많이 나아졌지만 아직 만족할만한 구조를 짜기에는 멀었다는 걸 느꼈다. css 에서도 불필요한 코드들이 많이 있었고 정리하는 부분들도 느낄 수 있었던 수업이었다. 나는 처음에 미디어 쿼리의 개념을 듣고 나서 그럼 그냥 바디나 최상단..