🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 7. 신뢰할 수 없는 코드를 쓰면서 불변성 지키기 레거시 코드 혹은 신뢰할 수 없는 코드로부터 코드를 보호하기 위한 방어적 복사 얕은 복사와 깊은 복사의 차이 와 구분 우리가 신뢰할 수 없는 코드와 소통할 때, 방어적 복사를 사용한다. 앞에서 배운 는 안전한 코드 내에서 불변성을 지키면서 코드를 작성하는 방법이다. 직접 내부 코드를 로 변경하여 불변성을 지키는 방법도 있겠지만, 그렇지 못한 상황들이 있다. 예를 들면우리가 직접 코드를 수정할 수 없는 라이브러리 혹은 레거시 코드를 사용하여 데이터를 변경해야할 때이다. 그렇다면 우리가 불변성을 지…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 6. 변경 가능한 데이터 구조를 가진 언어에서 불변성 유지하기(feat. JS) 데이터가 바뀌지 않도록 적용하기 깊이 중첩된 데이터에도 적용하기 이해하기 1) 동작을 읽기, 쓰기 혹은 둘 다로 분류하기 : 데이터를 바꾸지 않고 정보를 꺼내는 것 인자에만 의존해서 정보를 가져오는 읽기는 즉, 이 된다. : 데이터를 바꾸는 것 변경되는 데이터가 어디에서 사용될지 알 수 없기 때문에 이 필요하다. : 데이터를 바꾸면서 정보를 꺼내는 것 2) 카피-온-라이트 원칙 세 단계 복사본 만들기 복사본 변경하기 복사본 반환하기 2-1) 배열의 카피-온-라…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 5. 더 좋은 액션 만들기 암묵적 입력과 출력을 제거해서 재사용하기 좋은 코드 만들기 복잡하게 엉킨 코드를 풀고 더 좋은 코드 만들기 모든 액션을 없앨 수는 없다. 액션은 필요하다. 하지만 암묵적 입력과 출력을 줄임으로써 액션을 최소화할 수 있다. 1) 비즈니스 요구사항과 설계 고려하기 기계적인 리팩토링만이 항상 최선의 구조를 만들어주진 않는다. 비즈니스 요구사항을 고려해야 한다. 비즈니스 요구 사항: 장바구니에 담긴 제품을 주문할 때 무료 배송인지 확인하는 기능 아래 함수는 비즈니스 요구사항인 에 대한 내용 없이 과 에 대한 내용만을 가지고 있…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 4. 액션에서 계산 빼내기 함수로 정보가 어떻게 들어가고 나오는지 이해하기 테스트하기 쉽고 재사용성이 좋은 코드를 만들기 위한 함수형 프로그래밍 이해하기 액션에서 계산을 분리하는 방법 알기 1) 변경 전 코드 2) 명시적 입력/출력, 암묵적 입력/출력 명시적 입력: 함수의 인자로 전달되는 값 명시적 출력: 함수의 반환값 암묵적 입력: 전역변수를 읽는 등 인자 외의 다른 모든 입력값 암묵적 출력: console.log(), DOM 변경, 전역변수 변경 등 반환값 외의 다른 모든 출력값 암묵적 입력과 출력: 3) 변경 절차 계산에 해당하는 코드를 …

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 3. 액션과 계산, 데이터의 차이를 알기 액션과 계산, 데이터의 차이를 알 수 있다. 액션이 코드 전체로 퍼질 수 있다. 코드에서 어떤 부분이 액션인지 찾을 수 있다. 액션과 계산, 데이터 모든 개발 과정에서 액션과 계산, 데이터를 구분하는 기술을 적용할 수 있다. 액션(부수 효과) 실행 시점과 횟수에 의존 계산(순수 함수, 수학 함수) 입력을 받아서 출력을 반환한다. 데이터 이벤트에 대한 사실 함수형 프로그래머는..! 최대한 액션에서 계산을 빼내려고 한다. 또 계산에서 데이터를 분리할 수 있는 생각한다. 나아가서 액션을 계산으로, 계산을 데이터…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 2. 현실에서의 함수형 사고 현실적인 문제에 함수형 사고를 적용해보자. 소프트웨어 구조를 계층으로 나눠서 설계해보자. 시간에 의존하는 액션을 타임라인으로 시각화해보자. 액션과 계산, 데이터 코드를 과 , 로 나누는 작업이 우선이다.(계층형 설계) 액션 와 에 의존한다. 사용할 때 항상 조심해야한다. 계산 어떤 것을 결정하거나 계획하는 것 함수형 프로그래머는 액션보단 계산을 선호한다.(다루기 쉬우므로) 데이터 가능한 데이터를 사용한다. 유연하기 때문에 저장하거나 네트워크로 전송하는 등 다양하게 활용 가능하다. 변경 가능성에 따라 코드 나누기 자…

🖍 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기 이 글은 쏙쏙 들어오는 함수형 코딩 - 심플한 코드로 복잡한 소프트웨어 길들이기를 읽고 작성한 글입니다. 함수형도 함수형이지만, 이 책을 통해 좀더 깔끔하고 직관적인 코드를 작성할 수 있을 것이란 팀원들의 의견을 토대로 이번 스터디 서적으로 선정하였습니다. Chap 1. 쏙쏙 들어오는 함수형 코딩에 오신 것을 환영합니다. 함수형 사고가 무엇인지 그리고 왜 함수형 사고가 더 좋은 소프트웨어를 만드려는 개발자에게 도움이 되는지 설명한다. 함수형 프로그래밍이란? 수학 함수를 사용하고 부수 효과를 피하는 것이 특징인 프로그래밍 패러다임 부수 효과 없이 순수 함수만 사용하는 프로그래밍 스타일 부수 효과 함수가 리턴값 이외에 하는 모든 일 리턴값이 필요해서 호출했지만 의도하지 않게 부수효과가 발생할 수 있다. ex) 이메일 보내기, 파일 읽기, 웹 요청하기 등 순수 함수 인자에만 의존하고 부수 효과가 없는 함수 같은 …

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 7장. 인터페이스 인터페이스는 types alias로 정의된 객체 타입과 유사하지만 차별점 존재 더 읽기 쉬운 오류 메시지 더 빠른 컴파일러 성능 클래스와의 더 나은 상호 운용성 Type alias VS Interface 두 가지 모두 세미콜론과 쉼표 둘 다 가능하다. 인터페이스의 특징 속성 증가를 위해 병합이 가능하다. 클래스가 선언된 구조의 타입을 확인하는데 사용 가능하다. 일반적으로 인터페이스에서 타입 검사기가 더 빨리 작동한다. 내부적으로 더 쉽게 캐시할 수 있는 명명된 타입을 선언하기 때문이다. 이름 없는 객체 리터럴의 별칭이 아닌 이름이 있는 하나의 객체로 간주되므로 오류 메시지를 좀더 쉽게 읽을 수 있다. 읽기 전용 속성(readonly) 인터페이스에 정의된 객체의 속성을 재할당하지 못하도록 차단…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 5장. 함수 선택적 매개변수 선택적 객체 타입 속성과 유사하게 타입 애너테이션의 : 앞에 ?를 추가해 매개변수가 선택적임을 나타낼 수 있다. 선택적 매개변수는 반드시 마지막에 전달해줘야한다. 선택적 매개변수에는 기본적으로 undefined가 할당되기 때문에, 함수 내부에 유니언 타입이 추가된다. 나머지 매개변수 명시적 반환 타입 변수와 마찬가지로 타입 애너테이션을 사용해 함수의 반환 타입을 명시적으로 선언하지 않는 것이 좋다. 매개변수 목록이 끝나는 ) 다음 혹은 함수 선언의 경우 { 앞에 배치한다. 그외 반환 타입 void 함수가 어떤 값도 반환하지 않는 경우, void를 통해 반환 타입을 확인할 수 있다. 함수 타입을 선언할 때, void를 사용하면 함수에서 반환되는 모든 값이 무시된다. JS에서의 함수는…

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 3장. 유니언과 리터럴 유니언(union): 값에 허용된 타입을 2개 이상의 가능한 타입으로 확장 내로잉(narrowing): 값에 허용된 타입을 하나 이상의 가능한 타입이 되지 않도록 좁히기 ⇒ 다른 프로그래밍 언어에서는 불가능하지만 TS에서는 가능한 코드 정보에 입각한 추론 유니언 주의할 점 위의 예시를 보면 유니언은 마치 ‘또는’(||) 같지만 객체의 개념에서는 한쪽이 아닌 모두 갖고 있는 프로퍼티, 메서드만 사용할 수 있기에 약간 && 느낌이 난다. ⇒ string | number을 객체의 개념으로 생각하면 이해가 되는 것 같다!!! 내로잉 말 그대로 타입을 좁힌다. 이 때, 타입 내로잉과 조건문을 함께 씀으로써 의 역할을 하게 할 수 있다. 위 말이 책에서 말하는 타입가드: “타입을 좁히는 데 사용할 …

🏓 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 1장. 자바스크립트에서 타입스크립트로 자바스크립트 다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다. 하지만 자바스크립트는 로 충돌 가능성을 먼저 확인하지 않고 코드를 실행한다. 이런 자바스크립트의 자유는 재미를 주기도 하지만 안정성면에서는 위험 부담이 있다. JSDoc: 자바스크립트 소스 코드에 주석을 달기 위해 사용하는 마크업 언어 타입스크립트의 타입을 주듯이, JSDoc을 작성해두면 타입에 대한 힌트를 제공받을 수 있다. 그러나 잘못된 코드를 막을 수는 없다는 점 리팩터링 중 생긴 변경사항과 관련된 현재는 유효하지 않은 JSDoc 주석을 모두 찾는 건 어렵다. 다소 복잡한 객체를 설명하기 어렵다. https://poiemaweb.com/jsdoc-type-hint 타입스크립트…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 4. 콜백함수 일시: 2월 19일 22시 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제 🏀 기술책 스터디 Quiz1)p101. 예제 4-5. / 참고하여 filter 메서드 구현해보기 예상 답안 Quiz2)p111. 예제4-15. / 12~15번째 줄 콜백 함수 표현 바꾸기 예상 답안 p113. async/await 쉬운 예제

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 3. this 일시: 2월 12일 20시 Quiz 1 p79. class의 this 생각해보기 예상 답안 test 객체 undefined - 함수로서 호출했으므로 전역 객체일 것 같지만, class는 es6에 도입되어 기본적으로 가 적용되기 때문입니다. call, apply, bind 메소드 Quiz 2 p83. 예제 3-18-(1) 예상 답안 2가지 Quiz 3 p87. 예제 3-25 1. 예상 답안 2. 예상답안 Quiz 4 p93. 개념 + p77. 예제 3-12-(2) 1, 2. 예상 답안 3. 예상 답안 🏀 기술책 스터디 Quiz 1 p79. class의 this 생각해보기…

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 5. 클로저 일시: 2월 3일 20시 클로저 MDN: 함수(inner)와 그 함수가 선언될 당시(outer)의 lexical environment의 상홍관계에 따른 현상 에서 선언한 를 참조하는 를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 가 사라지지 않는(가비지 콜렝팅되지 않는) 현상 Quiz1) p119. 예제 5-3. 말로 설명해보기 bind() call, apply와의 차이 Quiz2) p127. 예제 5-8. 말로 설명해보기 Quiz3) p128. 예제 5-9. 화살표 함수로 변경해보기 public, private, protected 찾아보기 정보 은닉 = …

🏀 기술책 스터디 23년 1월부터 활동 중인 교육에서, 뜻이 맞는 동료들과 함께 진행하게 된 스터디 처음 서적을 읽자고 제안하면서 시작! 앞으로도 꾸준히 기술 서적을 읽고 함께 발전하는 시간이 되었으면 좋겠다! 책에 있는 내용보단, 읽으면서 혼자 정리한 내용들 위주로 작성하자! 🏅 코어 자바스크립트 2. 실행 컨텍스트 일시: 1월 29일 19시 실행 컨텍스트 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행 실행 컨텍스트 구성 방법: 전역공간, eval() 함수, 함수 구성하는 방법은 오로지 최상단의 공간(전역공간)은 코드 내부에서 별도의 실행이 없어도 브라우저가 자동으로 실행하여 전역 컨텍스트를 만든다.(anonymous) 콜 스택의 가장 위(마지막) 실행 컨텍스트가 쌓이는 순간이 현재 코드에 관여하게 되는 시점 실행 컨텍스트 객체 3형제…

📚 나카지마 사토시 - 오늘, 또 일을 미루고 말았다. 마이크로소프트에서 윈도우95, 98, 인터넷 익스플로러3.0 등을 기초 설계한 프로그래머, 나카지마 사토시의 ‘오늘, 또 일을 미루고 말았다.‘에 대한 요약 및 후기 시간의 힘 미완이지만 제 시간에 완성하는 것이 느리지만 완벽한 것보다 낫다. 프로그래머에게 있어 100점은 있을 수 없다. 70~80점을 만들고 계속 수정해나가는 것이다. 완벽하지 않게 전체적인 프로토타입을 그려라. 절대 완벽을 추구하지 말아라. 주어진 마감일보다 더 앞서 자신만의 마감일을 정하라. 마감일을 골인 지점이라고 생각하면 안된다. 복잡한 문제를 해결하기 위해 작은 단위를 분할/분해하여 생각한다. 결정을 내려야할 사항에 대해서는 빠르게 결정한다. 시간관리법 시간관리법은 하기 싫은 일을 줄이기 위한 것이다. 결국 좋아하는 일에 더 많은 시간을 쏟기 위한 방법이다. 언제나 마감을 지킬 수 있는 방식으로 일한다. 반드시 고쳐야할 생각 ‘마감 = 노력하면 어떻게…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 그리드 시스템 그리드 시스템은 의미 그대로 마치 바둑판같은 격자를 만들어 그 격자를 조율하여 자리를 만들고 컨텐츠를 배치하는 방법입니다. 정적 그리드, 동적 그리드, 반응형 그리드 모두 float 속성으로 그리드 레이아웃을 구성해왔습니다. 그러나 float 속성은 문서 내부에 이미지 등을 띄워 출력하기 위해 만들어진 속성입니다. 어쩌다보니 이를 레이아웃에 활용하게 되다보니 20년이 넘는 세월동안 사용하게 되었습니다. 🙃 그리드 레이아웃 위와 같은 이유로 CSS3에서 아예 레이아웃을 구성할 때 사용할 수 있는 display 키워드로 와 를 추가하였습니다. 그리드 레이아웃에 관해 간단한 동작들을 아래 코드와 함께 보도록 하겠습니다. 문자열로 배치하기 grid-template-areas 속성과 grid-area 속성을 조합하면 문자열을 통해 …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. Appendix A - 부트스트랩 부트스트랩은 트위치에서 제공하는 웹 페이지 디자인 프레임워크입니다. 부트스트랩을 사용하여 반응형 웹 페이지를 쉽고 빠르게 만들 수 있습니다. 부트스트랩은 2가지 방법으로 제공됩니다. 자바스크립트와 스타일시트 파일을 다운로드해서 사용 개요 아래의 코드를 에 넣어줍니다. 레이아웃 1. Fixed 레이아웃 고정된 너비를 사용하는 레이아웃입니다. 화면의 크기를 바꿔도 컨텐츠의 크기가 변하지 않습니다. 네이버 다음과 같이 class를 “container”로 지정해주면 fixed 레이아웃이 만들어집니다. 또한, 부트스트랩의 기본 화면 너비는 960px이고 너비가 그 아래로 줄어들면 로 동작합니다. 여기서 정적(Fixed) vs 동적(Fluid)와 반응형은 다른 개념입니다. 반응형은 특정 화면 크기에 대해서 다른 …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS 추가 규칙과 반응형 웹 CSS3로 넘어오면서 반응형 웹을 위해 많이 사용되는 것이 규칙(@-rule)입니다. 반응형 웹을 사용하여 데스크탑 전용 웹 페이지와 모바일 전용 웹 페이지를 따로 구분해서 만들지 않아도 됩니다. 사용자가 사용하고 있는 기기의 종류에 따라서 다른 형태의 화면을 보여주는 방법입니다. (반응형 웹과는 반대로 따로 만드는 웹을 적응형 웹이라고 부릅니다.) @import 규칙 CSS 파일에서 다른 CSS 파일을 추가하는 방법입니다. link보다 좀더 깔끔합니다. @font-face 규칙 로컬에 있는 폰트 파일을 통해 폰트를 만드는 규칙입니다. @media 규칙 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙입니다. 최근 HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙입니다. …

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 변환(transform) 변환이란? HTML5가 등장하면서 플래시같은 플러그인 없이 웹 브라우저에 3차원을 구현할 수 있게 되었습니다. 그 방법은 2가지가 있습니다. 자바스크립트를 사용한 WebGL ✅ 2차원 변환 웹 브라우저를 바라보는 유저의 시선을 기준으로 방향이 X축, 방향이 Y축입니다. 또한, 방향으로 Z축을 추가하면 3차원 변환을 구현할 수 있습니다.(Z-index를 떠올리시면 됩니다.) 🎖️ transform에 입력하는 키워드 순서에 따라서 같은 키워드들을 적어도 다른 결과물이 나올 수 있습니다. 즉, 순서에 따라 다른 변환이 구현되기도 합니다. 3차원 변환 translate3d(, , ): 특정 크기만큼 이동합니다. scale3d(, , ): 특정 크기만큼 확대 및 축소합니다. rotate3d(, , ): 특정…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 변형과 애니메이션 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. CSS 변형(transition)을 사용하면 화면에 애니메이션(animation)을 구현할 수 있습니다. 또한, CSS3 변형과 React, Vue.js와의 결합을 통해 더 다양한 애니메이션을 구성할 수 있습니다. 변형(transition) 속성 CSS3에서 움직임을 구현하는 방법에는 크게 transition(변형)과 animation(애니메이션) 속성으로 나누어집니다. 변형 속성을 한번에 나타내면 다음과 같이 적을 수 있습니다. 키 프레임과 애니메이션(animation) 속성 변형(transition)과 속성 및 키워드의 차이가 있을 뿐, 양식이 거의 비슷합니다. 애니메이션 속성을…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 소셜커머스 메인 페이지 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 📕 정리 와 를 이용하여 body 태그 중앙 정렬하기 자손 태그에 적용 시, 부모 태그에 적용하기 자손 태그에 속성 적용 시, 부모 태그에 적용하기 스프라이트 이미지와 에 대한 이해 🍎 들어가기에 앞서 📖 1. 소셜커머스 메인 페이지 📕 정리

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 태블릿PC 레이아웃(동적 너비 레이아웃) 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 기존에 width와 margin을 이용하여 중앙 정렬하던 것과 다르게 화면의 너비에 따라 레이아웃이 동적으로 바뀌는 형태입니다. 📕 정리 중요한 내용 동적으로 너비가 변하는 레이아웃 형태 🍎 들어가기에 앞서 📖 1. 태블릿PC 레이아웃(동적 너비 레이아웃) 📕 정리 중요한 내용

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 스마트폰 레이아웃 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 최근에는 HTML, CSS, Javascript를 활용해 네이티브 애플리케이션을 만드는 , 등의 기술이 활성화되었습니다. 이와 같은 방법으로 애플리케이션을 만들면, 아이폰 및 안드로이드 등의 애플리케이션을 따로 개발할 필요가 없이 모든 OS에서 실행할 수 있다는 장점이 있습니다. 👍 📕 정리 중요한 내용 뷰포트 meta 태그 스프라이트 이미지 nav 만드는 방법 overflow와 float 속성 활용 display 속성과 table 키워드 활용 ::before 선택자를 사용하여 수직선 생성하기 ➕ 글자 감추기 : Ellipsis(생략)하는 기술 화면이 작은 기계에서는 글자가 잘릴 수 있습니다…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. 웹 페이지 레이아웃 레이아웃 관련 챕터의 경우 코드를 쭉 나열하고 주석으로 도움되는 팁들(🌟로 표시해두겠습니다.)을 기록하려 합니다. 코드 원본은 링크에서 받으실 수 있습니다. 📕 정리 중요한 내용 레이아웃을 단위로 생각하기 레이아웃 초기화 코드 width와 margin을 사용하여 중앙 정렬하기 absolute와 relative 사용 그리고 height를 통한 영역 확보 overflow와 float을 사용해서 레이아웃 나누는 방법 🍎 들어가기에 앞서 📖 1. 웹 페이지 레이아웃 📕 정리 중요한 내용

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 스타일 속성 기본 CSS3 단위 크기 단위 em 단위는 배수를 나타내는 단위입니다. 입니다. 가시 속성 display 속성 은 마치 inline처럼 한줄로 배치되면서 동시에 block처럼 width, height, margin(상하좌우에 대해서 모두)을 갖습니다. 🌵 은 따로 width, height을 갖지 않고 margin에 대해서도 좌우로만 적용이 가능합니다. visibility 속성 은 태그를 보이지 않게 만듭니다. 🚗 보이지 않게만 만들 뿐 그 자리에 존재합니다!(과는 다릅니다.) 박스 속성 box-sizing 속성 width와 height 속성이 차지하는 범위를 지정합니다. : content를 기준으로 width, height을 지정합니다. 즉, 태그가 차지하는 크기를 구하려면 padding, border, margi…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. CSS3 선택자 기본 CSS 선택자란 CSS3 선택자는 특정한 HTML 태그를 선택할 때 사용하는 기능으로 해당 태그에 우리가 원하는 스타일 또는 효과를 적용할 수 있습니다. 전체 선택자 HTML 문서 안에 있는 모든 태그를 선택할 때, 전체 선택자를 사용합니다. 전체 선택자를 사용하면 html 태그부터 head, title, style, body 태그까지 모두 선택합니다. 속성 선택자 특정 속성을 가진 HTML 태그를 선택할 수 있습니다. 기본 속성 선택자 문자열 속성 선택자 의 경우 속성값이 뒤에 오는 값으로 되는 태그를 선택합니다. 의 경우 속성값이 뒤에 오는 값으로 나는 태그를 선택합니다. 후손 선택자 & 자손 선택자 아래의 코드에서 div 태그를 기준으로 바로 한 단계 아래에 위치한 태그(, , )를 이라고 부르고 자손 태그를…

🍎 들어가기에 앞서 이 글은 을 공부하며 기억해둘 내용들을 간단하게 기록한 글입니다. 책에 대한 자세한 사항은 링크를 참고해주세요. 👏 📖 1. HTML5 개요 웹의 역사 월드 와이드 웹(World Wide Web)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 정보 공간을 의미합니다. 인터넷은 전 세계를 연결하는 국제 정보 이고 웹은 그 위에서 작동하는 로 서로 구분되는 개념입니다. 플러그인 웹 브라우저의 경쟁으로 웹은 엄청난 속도로 발전했습니다. 웹 표준을 지정하는 W3C가 그 속도를 따라가지 못했을 정도였습니다. 이에 불만을 느낀 기업들이 을 만듭니다. 플러그인은 웹 브라우저와 연동되는 특정 프로그램을 사용자 PC에 추가로 설치해 웹 브라우저의 기능을 확장하는 방법입니다. 웹 2.0의 시대 인터넷은 점점 사용자끼리 뭉쳐 새로운 콘텐츠를 개발할 수 있는 공간으로 발전합니다. 이렇듯 다른 사용자와 함께 새로운 콘텐츠를 창조할 수 있게 된 시대를 웹 2.0 …