What I Learned Today오늘은 객체, 조건문, 객체 비교에 대해 배웠다.JS에는 객체가 존재한다.객체 : 키(key) - 값(value) 쌍을 표현하는 데이터중괄호 안에 key-value 쌍을 작성하여 객체를 생성할 수 있다.// -------------------------------// 객체 타입(Object Types, 복잡)// -------------------------------Object - {}Function - () => {}Array - []// -------------------------------// JavaScript 객체(Object)// -------------------------------// 객체 정의// 객체 리터럴을 사용해 객체 정의 (쉬운 방법)con..
What I Learned Today오늘은 반환문, 호이스팅, 다양한 함수 선언 방법을 배웠다.그리고 실습도 해보았다. JS에서 함수를 실행하면 결과 값을 반환하는데 이때 return 키워드를 사용한다.// -------------------------------// console.log() vs 함수의 return// -------------------------------// return을 하지 않는다면 사용자가 보는 화면에 보여줄 수 없다.// console.log는 단지 개발자가 보기 위함이다.function 곱하기(숫자1, 숫자2) { let 결과값 = 숫자1 * 숫자2; // 계산된 값 // console.log(결과값); // return 결과값;} 스코프와 호이스트스..
What I Learned Today오전에는 JS에서의 주석과 세미콜론, 타입에 대해 배웠다. JS에서의 주석은 한 줄 주석과 여러 줄 주석을 사용한다.// 한 줄 주석/*어려줄주석*/ JS는 세미콜론을 자동으로 삽입(ASI)한다. 따라서 세미콜론을 추가하는 것은 선택이다.하지만 세미콜론을 사용한다면 고려할 사항이 많다.세미콜론을 사용하지 않는다면 단순한 규칙 하나만 기억하면 된다.절대 [, (, ' 으로 줄을 시작하지 말자.[, (, ' 으로 줄을 시작해야 한다면 줄 앞에 세미콜론을 하나 붙여준다.린터(Linter)를 사용하면 더 이상 걱정할 것이 없다. JS의 타입/*JS의 다양한 타입기본(원시, Primitives) 타입(유형)문자열(String) 유형숫자(Number) 유형불리언(Boolean) ..
What I Learned Today오늘은 프로젝트가 끝나고 다시 수업을 시작하는 날이다. 오전은 간단하게 프로그래밍에 대해 배웠다. 머신코드 : 컴퓨터가 직접 알아들을 수 있는 기계의 언어다.컴퓨터는 오직 0과 1만 이해할 수 있다.전기가 흐를 때는 1 흐르지 않을 때는 0의 상태프로세서 : 머신언어를 처리하는 컴퓨터의 두뇌이다.작은 칩으로 컴퓨터와 다른 장치에 상주한다.저수준 언어 : 컴퓨터가 이해할 수 있고 사람도 조금은 읽기 쉽다.어셈블리 언어가 대표적이다.고수준 언어 : 사람이 쓰기 아주 쉬운 언어, 컴퓨터는 번역해서 이해한다.JS가 대표적이다.자바스크립트 : 웹 사이트, 웹 애플리케이션, 모바일 앱 등을 개발하는 데 사용되는 공용 프로그래밍 언어변환 : 컴파일링, 인터프리팅 과정을 거쳐 머신 ..
What I Learned Today나는 26일부터 UI 프로젝트를 시작했고 목요일에 끝이 났다.우리 팀은 4조였고 총 4명으로 이루어져 있었다. 강사님이 피그마로 디자인 시안을 주셨다. 우리는 주어진 시안 말고 뭔가 특별한 것을 하고 싶어서 우리 팀은 웹 디스코드를 클론 하기로 했다.하지만 디스코드 UI가 최근에 바뀌기도 했고 디자인 시안이 별로 없었다.그래서 우리는 개발자 도구를 사용하여 하나하나 뜯어보며 디자인을 하기로 정했다.피그마에 옮겨둔 디자인은 그냥 참고만 하고 우리는 실제 디스코드 웹에 들어가서 스타일 가이드를 분석했다.생각보다 다른게 너무 많아서 디테일을 잡을 때 시간이 많이 걸렸다.나는 유저 프로필, 다이렉트 메시지 탭, 사이드 프로필 탭을 만들었다. 처음에는 유저 프로필, 다이렉트 ..
What I Learned Today오늘은 내일부터 진행될 프로젝트에 대해서 설명을 들었고 프로젝트를 진행할 때 필요한 Git과 Github를 배웠다.그리고 깃 브랜치 전략을 배웠고 Netlify에 배포하는 방법도 배웠다. CI/CD : 애플리케이션 개발 단계를 자동화하여 애플리케이션을 더욱 짧은 주기로 고객에게 제공하는 방법이다.CI/CD의 기본 개념 지속적인 통합지속적인 서비스지속적인 배포 다음주까지는 프로젝트로 인해 블로그는 잠시 중단하겠다,..프로젝트를 하다가 어려웠던 내용이 생기면 추가를 할것이다. The Problem I Faced What I Tried to Do How I Solved It So Aha Momentsgit pull은 fetch와 merge가 합쳐진 명령어이고 git fetc..
What I Learned Today전에는 CSS에서 반응형 디자인을 다뤘었다.하지만 오늘은 tailwind에서의 반응형 디자인을 배웠다.생각보다 문법이 간단하다. 하지만 접두사를 알아야한다.sm | 640px | @media (width >= 40rem) { … }md | 768px | @media (width >= 48rem) { … }lg | 1024px | @media (width >= 64rem) { … }xl | 1280px | @media (width >= 80rem) { … }2xl | 1536px | @media (width >= 96rem) { … }접두사는 이렇게 있고 사용 방법은 이렇다. 사용자 정의 스타일에 대해서도 배웠는데 이는 tailwind에서 사용자 원하는 css 스타일을 ..
What I Learned Todaytailwind를 들어가기 전에 간단하게 @layer에 대해 배웠다.@layer는 캐스케이드 레이어를 선언하는 데 사용되며 여러 캐스케이드 레이어가 있을 경우 우선순위를 정의할때 사용한다./* 사용 방법 */@layer 레이어 이름1, 레이어 이름2, ...;@layer 레이어 이름1 { CSS 속성}레이어의 우선순위는 마지막에 나열된 레이어가 우선권을 가진다. (레이어 이름2)하지만 레이어 밖에 같은 속성을 사용한다면 그 속성이 가장 큰 우선권을 가진다. public폴더와 src폴더의 차이public : 는 변환 없이 그대로 제공되는 파일 (정적 assets)경로 유지 : 빌드 시 파일 이름과 경로가 그대로 유지변환 없음 : 어떠한 처리나 최적화 없이 그대로 제공절대..
What I Learned Today오전에는 Stacking Context와 Subgrid에 대해 배웠다.Stacking Context는 가상의 Z축을 사용한 HTML 요소의 3차원 개념화이다.그래서 요소들이 겹치거나 다른 요소가 보이는 현상이 일어난다.그리고 필터 속성들도 이 특징을 가지고있다. isolation : isolate는 선언한 컨테이너 요소들이 자신의 밑으로 내려가지 않도록 설정하는 속성이다. Subgrid는 조부모 grid 속성값을 그대로 손자가 사용할 수 있도록 설정할 수 있다.그리드 항목을 그리드 컨테이너로 만들어 그리드를 중첩할 수 있는데 이러한 그리드는 부모 그리드와 서로 독립적이다.따라서 부모 그리드의 크기를 가져오지 않는다. 따라서 중첩된 그리드 항목을 기본 그리드에 맞춰 정렬..
What I Learned Today오늘 오전에는 라이트. 다크 모드에 대해서 실습했다. 그리고 과제 리뷰를 했다. 라이트/다크 모드는 미디어쿼리를 사용해서 설정할 수 있다.@media (prefers-color-scheme: { CSS 스타일링}하지만 이 방법으로 만들면 코드가 상당히 복잡해진다. 그래서 새롭게 등장한 함수가 있다./* 미리 선언해두기이때 텍스트는 자동으로 검은색/흰색으로 바뀐다.*/:root { color-scheme: light dark}/* 사용 방법 */CSS 속성: light-dark(라이트 모드에서 보여질 색,다크모드에서 보여질 색) 주말 과제가 apple 사이트 ui 만들기였다. 화면을 늘리면 아래처럼 배치가 바뀐다. 오후에는 장바구니 ui 만들기 실습을 했다. The P..
