티스토리

맨땅에 코딩 : 맨코

검색하기

블로그 홈

맨땅에 코딩 : 맨코

kimbangg.tistory.com/m

KimBangg 님의 블로그입니다.

구독자: 8

방명록 방문하기

주요 글 목록

[MAC] BackTick( ` ) 으로 고정시키기 1. Why? 개발을 하다보면, 분명 백틱(backtick) 자리가 "1" 왼쪽에 있는걸 알고 있다. 하지만, 간혹 가다가는 원화 모양이 입력 될 때가 있는데 원인을 알지 못하고 내가 잘못 기억했는지? 아니면 위치가 특정 조건에만 가능한지 답답함을 가지고 사용을 했었는데 "한글"로 전환 될 때 이러한 문제가 발생 한다는 사실을 알게 되었다. 이를 통해, 한/영 모든 값에서도 원화가 아닌 backtick이 고정적으로 입력이 되는 방법을 공유 하고자 글을 쓰게 되었습니다 ^^7 2. 설정 방법 // 라이브러리 폴더로 이동합니다. cd ~/Library // 폴더로 이동 후, KeyBindings 이라는 폴더를 만듭니다. mkdir KeyBindings // KeyBindings 폴더로 이동합니다. cd Ke.. 공감수 5 댓글수 1 2021. 9. 10.
[ JavaScript ] 변수란? 1. 식별자 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 아래의 코드에서 보이는 것처럼 myNumber 는 23이라는 값을 식별할 수 있다. var myNumber = 23; 이 때, 23 이라는 값을 직접 저장하는 것이 아닌, 이 값을 참조 하고 있는 메모리 주소를 기억해야 한다. 즉, 식별자는 메모리 주소에 붙여진 "이름" 이라고 생각을 해주면 좋을 것 같다. 2. 변수 선언 자바스크립트는 메모리 직접 제어를 통해 발생할 수 있는 에러를 방지 하기 위해서 개발자의 접근을 허용하지 않습니다 . 그렇기 때문에, 10 + 20과 같은 값을 재사용 하기 위해서는 이를 변수에 저장해서 사용을 합니다. 이러한 변수를 사용 하기 위해서는 우선적으로 선언이 이루어지는데, 선언을 한다는 것은 값을 저장.. 공감수 0 댓글수 0 2021. 8. 17.
이터레이터 & 제네레이터 ( iterator & generator ) 1. ES5의 리스트 순회 일반적인 프로그래밍 언어와 같이 숫자라는 "키"로 순회 하였습니다. const list = [1,2,3]; for ( var i = 0; i < list.length; i++ ) { console.log(list[i]); } 2. ES6의 리스트 순회 ES6 에서는 가독성을 위해 for of의 사용을 권고합니다. 하지만 일반적인 경우와는 달리 "키"가 없는데, 어떤 방식으로 순회를 하는걸까요? // 훨씬 간결하고, 선언적인 순회 방법 const ( const val of list ) { console.log(val); } 3. [ Array, Set, Map ] 을 통해 알아보는 이터러블 & 이터레이터 3-1 이터러블 & 이터레이터 이란? - 자바스크립트의 [ 배열, 객체, 맵.. 공감수 0 댓글수 0 2021. 8. 9.
[ JavaScript ] 정규식 ( Regular Expression) 들어가기전에 정규식은 특정 문자열을 찾고, 이를 특정한 내용을 바꿀 때 "매우 매우" 유용하게 사용됩니다. 실제로 정규식을 사용 하고는 싶었으나 ! 이해가 어려워서 미루고 있던 도중 강의를 만나게 되어 ! 정리를 하게 되었습니다. 1. 정규식 생성하기 정규식의 생성은 아래와 같이 "//" 로 감싼 뒤, 변수에 담아두는 방식과 const regExp = /abc/; 다음과 같이 생성자를 이용하여 만들 수 있습니다. const regExp = new RegExp("abc"); 2. 정규식 사용법 특수 문자 특수문자는 \(백슬래쉬)를 앞에 붙여 줌으로써, 특수문자가 그대로 사용 될 수 있도록 해야합니다. const regExp1 = /\*/; const regExp2 = /\?/; 플래그 조금 더 섬세한 패턴.. 공감수 0 댓글수 0 2021. 8. 3.
[ JavaScript ] 실행 컨텍스트 (Execution Context) 실행 문맥(Execution Context)란? 소스코드를 실행하는데 필요한 환경과 결과를 관리하는 영역입니다. 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로 컨텍스트를 실행 및 관리합니다. 식별자와 스코프는 렉시컬 환경으로 관리하고, 코드 실행 순서는 실행 컨택스트 스택으로 관리합니다. 소스 코드의 타입 ECMAScript는 소스코드를 4가지 타입으로 구분합니다. 1) 전역 코드 - 전역에 존재하는 소스코드를 말합니다. 전역에 정의된 함수, 클래스 등의 내부코드는 포함 X - 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성합니다. 2) 함수 코드 - 함수 내부에 존재하는 소스코드를 말합니다. 함수 내부에 중첩된 코드는 포함 X - 지역 스코프를 생성하.. 공감수 1 댓글수 0 2021. 7. 19.
[ JavaScript ] let vs var 머릿말 "let과 var의 차이는 스코프에 있다" 정도는 알고 있었지만, 어떠한 원리로 다르게 작동하는지 알지 못했습니다. 그러던 도중, "코드종" 님의 영상과 최근 보고 있는 "모던 자바스크립트 Deep Dive" 의 내용을 합쳐 보다 깊게 설명 해보고자 글을 작성하게 되었습니다. 스코프 1-1. var var의 스코프는 "함수" 로 정의가 됩니다. function print_t() { { var t = "안녕 나는 t"; } console.log(t) // 안녕 나는 "t" } 그렇기 때문에, 함수 -> "중괄호" 내부에서 t를 선언 하더라도, "t" 의 값이 출력이 됩니다. 1-2. let 반면에 let은 블록 레벨 스코프로 정의가 되어있습니다. function print_t() { { var t .. 공감수 1 댓글수 0 2021. 7. 14.
[ JavaScript ] This 란 ? This 란? This의 값은 함수를 "호출하는 방법"에 의해 결정된다. 호출 방법과 무관하게 This 를 고정 시키려면 "bind" 를 사용하면 된다. 여기서 꼭 기억 해야 하는 것은 "누가 호출을 했는지?" 이다. 예시 및 설명 someone.whoAmI() someone.whoAmI() 를 출력하면, 그 결과는 donghyeon이 출력된다. 그 이유는 someone이라는 함수가 "whoami"를 출력 했기 때문이다. myWhoAmI 이번에는 someone.whoAmI() 를 전역 변수인 myWhoAmI에 담아서 출력을 했다. 이 것을 브라우저에서 작동 시키면, window 객체가 출력이 되는데 그 이유는 글로벌은 윈도우에 의해 호출 되기 때문이다. btn btn의 이벤트로 호출을 하면? 역시 버튼에.. 공감수 0 댓글수 0 2021. 7. 14.
[ JavaScript ] 스코프 & 클로저 ( Scope & Closer ) 스코프란? 스코프는 코드가 유효한 범위를 의미합니다. 우리는 스코프를 크게 "지역" 과 "전역" 으로 나누죠 :D 이를 조금 더 자세히 이야기 해보자면, 식별자(=변수이름, 함수 이름, 클래스 이름) 가 본인이 선언된 위치에 따라 다른 코드에서 참조될 수 있는지 없는지를 결정하는 것을 의미합니다. 이를 아래의 코드를 통해 설명 해보겠습니다. function add(x,y) { console.log(x, y); // 2, 3 return x + y; } add(2,3); // 5 console.log(x,y) // Reference Error : x is not defined 2,3 은 함수로 전달이 되어 x, y라는 지역 변수에 저장이 된다. 그렇기 때문에 함수 내에서는 자유롭게 사용이 가능합니다. 반면.. 공감수 0 댓글수 0 2021. 7. 13.
[ Design Patterns ] MVC 패턴이란 ? 탄생 배경 웹 초기에는 적은 양의 코드와 페이지를 통해 구축이 가능 했습니다. 저를 포함한 초보자 분들이 공감 할 수 있는 시점에서 말씀을 드리자면, "개발을 완성 했던 것"만으로도 기쁘고 즐거웠던 것이죠. 그만큼 현재와 비교해 그 당시의 개발은 영/유아기가 아니였을까요? :D ( 물론 저도 그 때는 청소년..? ) 그렇기 때문에, 작성한 코드에 문제가 발생하거나 보수/유지를 해야 할 때는 "모든 코드를 갈아 엎는" 방식을 사용 했다고 합니다. 우리가 만든 도미노만 부셔도 ^^.. 화가 나는데 저걸 처음부터 다시 할 생각에 다시 개발자 분들이 많이 힘드셨겠죠. 그래서 보수/유지가 가능한 코드를 만들고자, 다양한 방법을 적용 하였고 그 중 화면, 로직, 데이터를 분리 하는 방법인 MVC 패턴이 인기를 끌어.. 공감수 0 댓글수 0 2021. 7. 13.
CSS-in-Js 에 대해서 ARABOJA 탄생 👶🏻 기존의 CSS 파일은 .css 파일에 작성하여 사용하죠. 그렇기 때문에, 프로젝트의 규모가 커지면 이를 관리하기가 매우 어려워 졌는데 이를 해결 하기 위해 CSS를 JS 파일 내부에 배치하는 개념인 CSS-in-JS가 탄생 하였습니다 대표적인 라이브러리는 "Styled-Component" 가 있습니다. Inline vs Css-in-Js 🥊 인라인과 Css-in-Js 모두 코드 내부에 작성한다는 공통점이 있습니다. 하지만, 그 둘은 약간의 차이를 보입니다. 아래의 코드는 Inline이 css를 적용 시키는 방법입니다. const styles = { backgroundColor: 'palevioletred', color: 'papayawhip', }; 다음 코드는 CSS-in-JS가 적용 시키는.. 공감수 0 댓글수 0 2021. 7. 13.
CORS 란? 1. 들어 가기 전에 🗒 - 자동 로그인은 어떻게 이루어지나요? 브라우저에는 토큰 등의 정보가 쿠키로 저장이 되있기에, 그 값을 로그인 하는 사이트에 접속 할 때 요청에 실어서 보냅니다. 그러면 사이트에서는 쿠키를 확인 한 후에, 로그인이 되어있다고 판단을 하기에 로그인이 유지 됩니다. 위의 상황을 통해, 우리가 알아야 하는 사실은 "우리의 개인정보가 웹사이트에 있다는 것" 입니다. - 악의적인 접근이 있다면? 만약 누군가 악의적으로 이러한 데이터에 접근 하기 위해서, 자신의 웹사이트를 유도 한다고 가정을 해봅시다 ! 어떤 사이트에 들어 간다는 것은, 그 사이트의 HTML, CSS, JS 파일을 브라우저에 받아진다는 것이므로. 이 때 받아진 JS 코드 내부에 개인 정보를 탈취 할 수 있는 기능을 세팅 해.. 공감수 2 댓글수 0 2021. 7. 8.
브라우저에 google.com을 검색하면 무슨 일이 생기나요? [2] 머릿말 하단의 글에서 이미 같은 글을 작성 했었습니다. 하지만, 번역을 하면서도 그 이후에도 명확히 이해가 가지 않아서 다시 정리하고자 글을 올리게 되었습니다. 요새 느끼는거지만, 애매하게 아는건 아예 모르는 것보다 못하다는 것을 느낍니다. 뭔가를 배울 때는, 누군가를 앉혀놓고 설명 할 수 있는 수준까지 깊게 학습 하는 것이 중요하다고 생각합니다 ! 본문 자 그럼 이제부터 브라우저에 URL를 입력하고, Enter를 눌렀을 때 일어 나는 일에 대해 이야기 해보겠습니다. 1. 브라우저의 URL 파싱 최초에 브라우저는 사용자가 "단순 검색을 한 것인지", "URL" 을 입력 했는지 확인합니다. URL인 경우에는 https:(protocol) google.com (URL) : 443(Port) 다음과 같이 [ .. 공감수 1 댓글수 0 2021. 7. 5.
JWT란? 1. JWT란? JWT는 일반적으로 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이다. URL에대해 안전한 문자열로 구성되어 있기 때문에 HTTP 어디든(URL, Header, ...) 위치할 수 있다. 2. JWT의 구조 JWT는 "." 을 기준으로 HEADER / PAYLOAD / SIGNATURE 로 나뉩니다. HEADER.PAYLOAD.SIGNATURE Header JWT를 검증하는데 필요한 정보를 가진 JSON 객체는 Base64 URL-Safe 인코딩된 문자열이다. 헤더(Header)는 JWT를 어떻게 검증(Verify)하는가에 대한 내용을 담고 있다. 즉 alg는 3번째 값인 서명 값을 어떤 알고리즘으로 만들지 적혀 있습니다. {.. 공감수 2 댓글수 0 2021. 7. 4.
서버 vs 토큰 기반의 인증 방식 머릿말 사용에 목적을 두어 JWT를 사용해서, 기술면접에서 이에 대해 올바르게 대답 하지 못했다. 이를 계기로 사용하는 기술에 대해서는 "이유와 목적"을 명확히 해야겠다는 생각이 들었다. 그리하여, 서버 - 토큰 기반 인증과 JWT에 대해서 자세히 알아 보고자 합니다. 시작 하기 전에 HTTP는 다음 특징을 가지고 있습니다. Connenctionless: 클라이언트가 요청을 서버에게 보내면 서버는 이에 대한 적절한 응답을 한 후에 연결을 종료합니다. Stateless: 서버와 클라이언트와의 연결이 종료된다면 상태 정보는 저장하지 않고 사라집니다. 따라서 위의 특징으로 인해 이벤트를 발생 시킨 유저를 확인 할 수 있는 수단이 필요합니다. 이에따라, 하단의 서버 및 토큰을 기반으로 한 인증 방식이 등장합니다.. 공감수 0 댓글수 1 2021. 7. 4.
[JavaScript] This 란? ( 우아한 Tech ) [1] 자바스크립트의 This 자바스크립트의 함수는 일급 객체 이기 때문에 "This"를 자기 자신이라 부르기에 모호하다. 그래서 어떤 객체에 호출 되는지에 따라서, This의 의미가 달라진다. 이렇게 This는 동적으로 결정 되기 때문에 우리는 이것을 Binding 된다고 말할 수 있다. [2] 자바스크립트의 구동 자바스크립트는 다음과 같은 방식으로 작동이 되는데, 실행 문맥 단계에서 바인딩을 한다. [3] This Binding Rules [1] 기본 바인딩 가장 기본적인 방법은 단독 실행 하는 것이다. 함수를 단독 실행 할 때는 기본적으로 전역객체에 바인딩이 된다. 따라서, 브라우저 환경 속에서는 window 객체에 바인딩 된다. 노드의 전역 객체는 Global 이므로, Global 객체에 바인딩이.. 공감수 2 댓글수 0 2021. 7. 2.
브라우저의 렌더링 [1] 브라우저의 공통구조 User InterFace : 주소 표시줄, 이전 / 다음/ 새로고침 버튼 등 웹페이지를 제외하고 사용자와 상호작용 Browser Engine : UI와 Rendering Engine을 연결 Rendering Engine : HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진 [2] 렌더링의 목표 1) HTML, CSS, JS, 이미지 등 웹페이지에 포함된 모든 요소들을 화면에 보여준다. 2) 업데이트가 필요할 때, 효율적으로 렌더링 할 수 있도록 자료구조를 생성한다. [3] Critical Rendeing Path 3-1 DOM Tree 와 CSSOM Tree 생성 최초에 HTML은 어휘 분석에 따라 토큰화가 이루어지고, 이후에 Node 객체로 변환 됩니다... 공감수 0 댓글수 0 2021. 7. 2.
JavaScript의 동작원리와 비동기처리 자바스크립트 엔진 자바스크립트 엔진을 대표하는 것은 구글의 V8이 있다. Memory Heap : 메모리 할당이 일어나는 곳 Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳 콜스택 자바스크립트는 싱글 스레드로 작업을 처리한다. 즉, 1개의 콜스택만을 가지고 작업을 처리 한다는 것이다. 콜스택은 이름에서 볼 수 있듯이, 스택의 구조를 가져 먼저 들어간 작업이 늦게 처리 되는 구조를 가지고 있다. 그리하여, 아래의 코드의 결과는 세번째 -> 두번째 -> 첫번째 순서로 출력 될 것이다. function first(){ second(); console.log("첫번째"); } function second(){ third(); console.log("두번째"); } function third(){.. 공감수 1 댓글수 0 2021. 6. 27.
[FrontEnd] SPA와 MPA ( 재 정리 ) [1] MPA ( Multi Page Application ) MPA는 과거 웹서비스의 대부분을 차지했습니다. 그 증거로, 우리는 어린 시절 웹 페이지를 새로고침하거나 또는 페이지를 이동할 때 ‘깜빡거리는 현상’을 보았거나 아니면 페이지가 위에서부터 아래로 새로 그려지는 모습을 볼 수 있었다는 것이죠. 그렇다면 왜 MPA는 이러한 현상이 발생 하는 걸까요? 정답은 이미 “MPA” 라는 용어 속에서도 숨어 있는 것처럼, 여러 개의 페이지를 바탕으로 운영이 되기 때문입니다. 여기서 말하는 페이지란, HTML 파일을 의미하며 즉 여러 개의 HTML로 구성되어 있다는 건 페이지가 이동하거나 새로 고침과 같이 변화가 일어날 때마다 새로운 HTML을 받아와서 처리한다는 것을 의미합니다. 이러한 HTML은 서버에서 .. 공감수 1 댓글수 0 2021. 6. 17.
[JavaScript] 객체 객체란? 현실의 사물을 프로그래밍으로 반영한 것을 의미한다. let introduction = { firstName : "Donghyeon", lastName : "Kim", }; 속성 ( Property ) 콤마로 구분되는 것들을 객체의 속성이라고 부른다. introduction이라는 객체 안에는 라는 두 개의 속성이 존재한다. 키(key)와 값(Value) 속성에서는 first, lastName과 같은 것들을 키(key)라고 부르고, Donghyeon, Kim과 같은 것들을 값(Value)라고 부릅니다. 키는 문자열만 가능하고, 속성명은 따옴표가 없어도 상관 없습니다. 다만, 띄어쓰기를 하는 경우에는 반드시 사용 해야 합니다. 객체 다루기 출력 console.log(introduction.firstN.. 공감수 1 댓글수 0 2021. 5. 27.
[JavaScript] 자바스크립트의 메모리 모델 ( 부제 : let vs Const ) 1. 머릿말 이번에 올리는 포스팅은 아래의 글을 번역 하여서 올린 것임을 알립니다 ! 자바스크립트로 알고리즘을 공부하며, 단순 변수를 선언 했을 때와, 배열을 선언 하였을 때 어떤 차이를 가지는지 궁금하여 검색을 하던 도중 너무너무 유용한 글이라고 느껴서 공유 하게 되었습니다. https://medium.com/@ethannam/javascripts-memory-model-7c972cd2c239 JavaScript’s Memory Model As programmers, declaring variables, initializing them (or not), and assigning them new values later on is something we do on a daily… medium.com 2. .. 공감수 3 댓글수 0 2021. 5. 20.
[JavaScript] Splice & Slice 1. 머릿말 알고리즘 문제들을 풀면서, Splice와 Slice에 대해서 항상 헷갈리면서 사용을 하다가 이번 기회로 제대로 정리하고자 글을 작성하게 되었습니다 ! 본 내용은 MDN 의 내용을 기반으로 작성되어, 조금 더 이해가 쉬운 방식으로 글을 쓰기 위해 노력을 하였습니다 :) 2. Splice() arr.Splice ( 시작점, 몇 개, 무엇을 ) Splice가 받아서 처리 할 수 있는 Parameter는 위에 적어 놓은 것처럼 크게 3가지라고 생각하시면 좋습니다. 시작점 => 어디서 Splice를 시작하는지 ? 어디까지 => 시작점 + Parameter Value 까지 Splice 무엇을 => 값이 있으면 ? Splice된 곳에 삽입 || 값을 변경 : 삽입 예시 코드 const months = [.. 공감수 1 댓글수 0 2021. 5. 20.
[ JavaScript ] 자바스크립트 reduce function 1. 머릿말 알고리즘을 짜다보면, 자바스크립트가 가진 내장 함수들의 파워풀함을 느낄 수 있는 것 같다. 자바스크립트가 제공하는 함수가 아닌 일반적인 코드를 짜는 것도 능력이지만, JS로만 알고리즘을 풀기 원하는 기업들의 입장에서는 1) "내장함수를 잘 이용하는 것이 좋지 않을까?" 라는 생각이 들기도 하고, 아무래도 함수를 잘 이용한다면 2) 코드가 깔끔해지면서, 가독성이 올라감을 느낀다. 2. Reduce Function 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 다음 정의는 MDN 에서 얻어올 수 있는 정의인데, 더욱 편리한 이해를 위해 예시를 사용해 접근 해보고자 한다. let arr = [ [1,2,3], [2,3,4] ] ]; for (l.. 공감수 1 댓글수 0 2021. 5. 11.
[JavaScript] 자바스크립트 배열의 최대값 구하는 방법 // 1 let max = Math.max.apply(null, arr); // 2 let max = Math.max(...arr); // 3 let max = arr.reduce(function(a,b) { return Math.max(a,b); }) 공감수 1 댓글수 0 2021. 5. 11.
[NEXTSTEP BLACK COFFEE ] 자동차 경주 미션 미션 코드 : github.com/Kimbangg/js-racingcar 느낀점 다른 사람들은 모르겠지만, 이번 미션은 나에게 정말 힘이 들었다. 단순한 기능들만 놓고 봤을 때는 어쩌면 간단 해보일 수도 있는 요소들이 많지만 아래의 4가지 요소들이 나를 무척 힘들게 했던 것 같다. 1) 어떤 디자인 패턴을 사용하며 2) 어떤 식으로 코드를 분리하고 3) 어떤 기능에 적절한 네이밍을 할 것이며 4) 어떻게 기능을 구현 할지 이번에 우테캠을 준비 하기 위해서,여러가지 글을 봤는데 객체 지향적으로 알고리즘을 짜보라는 권유가 있었기에 이번 작업도 역시 객체지향적으로 코드를 짰는데, 코드가 길어짐에 따라 관리가 어렵다는 것을 정말 많이 배울 수 있었다. 특히, 1초마다 loading이 갱신되면서 화살표를 어떻게 .. 공감수 0 댓글수 0 2021. 4. 21.
[JavaScript] Map() vs Every() 1) Map Map은 반환 값으로 Array를 제공한다. 2) Every Every는 반환 값으로 True || False 를 제공한다. 공감수 1 댓글수 0 2021. 4. 18.
[Javascript] " Function() " vs " Const = () => " 머릿말 최근 next-step 과제를 통해 다양한 사람들의 코드를 보면서, 제목에 보이는 2가지 모두 "함수다운" 기능을 수행하는데 그 차이점이 궁금하여 검색을 하게 되었다. 그래서 차이점이 뭔가요? 간략하게 그 둘의 차이를 말하자면, 범위 ( Scope)의 차이라고 정의 할 수 있겠다. 1) function () 같은 경우는 다른 문장의 가장 상단에서 읽히는 hoisting 이 허용이 되고, 2) const = () => 같은 경우에는 block 내부에서만 구현이 가능한 범위를 가지고 있으며, 다시 선언이 될 수 없다는 특징을 가지고 있다. 위와 같은 이유를 통해, 일반적으로는 hoisting을 지원하는 function을 더 선호한다. 코드를 통해 알아보자. 1) Using Arrow 위에서 언급 했던.. 공감수 5 댓글수 0 2021. 4. 18.
[NEXTSTEP] TDD와 BDD 들어가기 전에 1주차 계산기 과정에서는 TDD와 BDD에 대한 게시물을 읽지 못하고 시작하여 "테스트코드"를 선행하여 만든 것이 아닌, 개발을 위한 코드를 모두 작성하고 난 후에 만들었다. 그러다보니, 내가 수정이 필요한 부분은 개발 과정 속에서 대부분 발견 되어 "과연 테스트코드가 필요한가?" 에 대한 의문을 안고 있었는데 이는 순서가 달라서 겪었던 생각이 아니였을까라는 느낌이 든다. 만들어야 하는 어플리케이션이 요구하는 기능을 올바르게 테스트케이스에 반영시켜서, 내가 짠 코드가 올바르게 적용 되고 있는지 확인하는 작업을 "2주차 - 레이싱 경주" 에 반영 시키기 위해 TDD와 BDD 내용을 정리 해보고자 한다. TDD 정의 테스트 케이스를 미리 정의하고, 코드를 작성하는 방법을 의미합니다. 흔히들 개.. 공감수 0 댓글수 0 2021. 4. 15.
[CSS] CSS Diner (3) - 마무리 LEVEL 21 : 짝수 자리의 그릇만을 선택 HTML CSS plate:nth-of-type(even) { } LEVEL 22 : 2n + 3 자리의 그릇을 선택 HTML CSS :nth-of-type(2n+3){ } LEVEL 23 : 중간에 있는 사과만을 선택 HTML CSS plate .small:only-of-type { ] LEVEL 24 : 작은 오렌지와 사과 중 마지막에 있는 것만을 고르시오. HTML 공감수 0 댓글수 0 2021. 4. 9.
[CSS] CSS Diner 해설 (2) LEVEL 11 : 플레이트 위에 있는 모든 것을 선택 HTML CSS plate *{ } LEVEL 12 : 플레이트 옆에 있는 사과를 선택 HTML CSS plate + apple{ } LEVEL 13 : 벤토와 플레이트(접시) 사이에 있는 피클을 선택 HTML CSS bento ~ pickle { } LEVEL 14 : 플레이트 위에 있는 사과만을 선택 HTML CSS plate > apple { } LEVEL 15 : 맨 위에 있는 오렌지만 선택 HTM CSS orange:first-child { } LEVEL 16 : 접시 위에 있는 토마토와 피클만 선택 HTML CSS plate :only-child { } LEVEL 17 : 작은 사과와 피클만 선택 HTML CSS .small:last-ch.. 공감수 0 댓글수 0 2021. 4. 9.
[CSS] CSS Diner 해설 ( 1 ) series 2편 : kimbangg.tistory.com/99 [CSS] CSS Diner 해설 (2) LEVEL 11 : 플레이트 위에 있는 모든 것을 선택 HTML CSS plate *{ } LEVEL 12 : 플레이트 옆에 있는 사과를 선택 HTML CSS plate + apple{ } LEVEL 13 : 벤토와 플레이트(접시) 사이에 있는 피클을 선택 HTML.. kimbangg.tistory.com 3편 : kimbangg.tistory.com/100 [CSS] CSS Diner (3) - 마무리 LEVEL 21 : 짝수 자리의 그릇만을 선택 HTML CSS plate:nth-of-type(even) { } LEVEL 22 : 2n + 3 자리의 그릇을 선택 HTML CSS :nth-of-ty.. 공감수 0 댓글수 0 2021. 4. 9.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.