Web Storage key:value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분하여 응용 환경에 맞는 선택이 가능하다. 특징

스스로 공부할수있던 점이나 시간에 맞춰 공부를 하는게 아닌 다른시간에 공부를 할수있다는게 너무좋았다.계획표대로 따라가고있다. 다만 이해가 안되는 부분이 나올때는 많이 찾아봐야 해서 느린부분도 있는거같다.자바스크립트를 완전히 다 끝내고 리액트와 타입스크립트를 배울 예정이

a태그의 rel속성중 noopener, noreferrer, nofollow가 자주보인다.이러한 태그들에 대해 알아보자noopener 속성을 사용하면 열리는 브라우징 맥락은 보조 브라우징 맥락이 아닌 새로운 top-level 브라우징 맥락으로 생성됩니다. 이는 하이퍼링

javascript를 공부하면서 많이 생각했다. 지금은 영상을 보면서 어떻게든 풀지만 나중에 내가 회사에 들어가서 코딩을 한다면 코드를 깔끔하거나 구현을 할수있는지 과제를 해도 아직 많이 부족한거같아 프레임워크 공부를 하면서도 같이 공부를 해야할거같다.제일 어려웠던 개

클래스가 변화할 때 reflow가 일어나는 것은 피할 수 없지만 성능 문제를 최소화 할 수 있습니다.아래의 코드는 자바스크립트를 이용하여 콘텐츠 id = change의 넓이를 50%로 줄이려고 하는 코드입니다.코드에는 .addclass 를 추가하여 넓이를 줄이려 하고

이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행한다로컬에 설치된 폰트를 사용할 경

크로스 브라우징(Cross Browsing)은 웹 접근성과 같이 중요한 기술 중 하나다.같은 코딩을 해도 다른 기종 혹은 플랫폼에 따라 달리 구현된다. 그 구현되는 기술을 최대한 비슷하게 만듦과 동시에 한쪽에 최적화되어 치우치지 않도록 구현하는 기법이다.CSS RESE

문자형은 3가지로 표현할수있다.보통 문자열에 '이 들어가면 ""을 사용하는게 편하다.만약 자신이 '를 계속 사용하고 싶으면 앞에 \\를 사용하면 된다.\`\`은 문자열 내부에 변수를 표현할때 사용한다.숫자형은 사칙연산이 가능하다.%는 나눈 나머지값을 출력한다.만약 숫자

어떠한 정보에 이름을 붙여서 사용할때 쓰는것자바 스크립트에서는 문자는 항상 ""를 붙여야한다.또한 변수명으로 사용할수없는 단어가 있는데 하나를 꼽자면 class이다.class는 이미 자바스크립트에서 사용하는 단어이기 때문에 사용이 불가능하다.하지만 이렇게 사용하는것은

내가 몰랐던 sass와 grid정렬에 대해 알수있었고 웹 접근성과 웹 표준성 그리고 시멘틱 태그를 왜써야 하고 어떻게 써야 하는지 알려줘서 좋았습니다. 무조건 웹페이지의 외견만 생각 하는게 아니라스크린 리더기처럼 보조기술을 사용하시는 분들도 이해하기 쉽게 만들어야 한다

해당 코드처럼 div태그가 많이 사용되면 코드 식별이 어려워진다.하지만이렇게 시멘틱 태그를 사용하면 코드 식별이 편해진다.해당 코드로 만든 웹사이트와 비슷한 양식을 가지고 있는 다른 웹사이트를 만들때 재활용하기 좋다.보조 기술을 사용하는 사용자들이 해당 요소가 head

요즘 개발자라면 네카라쿠배당토를 목표로 잡고 공부할 것이다. 높은 급여, 좋은 복지, 사내 문화가 좋아서 모두 원할 것이고 그만큼 좋은점이 많아서 IT업계에서 대명사라고 할것이다.아무리 일이 재밌어도 급여가 높지 않으면 재밌다고 할수없을거 같다. 일도 재밌고 급여도 높

웹 접근성을 위해 태그에 의미 정보를 전달하고 element의 확 장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성이다.태그가 가지는 이름표 같은 역할을 한다.role이랑 다르게 정해져 있는 의미가 아닌 개발자가 사용자한테 전달하는 내용이나 상황을 직

생각보다. 접근성을 고려해야 할점이 많았다.아무리 단순하게 마크업을 하면서 겉부분만 멀쩡하게 만들어도사용자가 스크린 리더로 읽었을때 문제가 발생한다는것을 알게 되었다.과제를 했을때는 어떤 부분에 어떤 웹 표준과 접근성을 코딩해야 하는지 알려줬지만이것을 혼자 어느 부분에

비교적 최신에 나온 CSS속성이다.flex와는 다르게 한번에 여러 정렬을 할수있다.grid의 장점은 위의 사진처럼 정렬할때 장점을 크게 느낄수있다.flex로 정렬하기 위해서는 두번째 줄을 flex정렬을 위해 부모tag로 감싸야 하지만grid는 바로 정렬이 가능하다.gr

컨텐츠를 좌우 혹은 위아래로 정렬할때 사용하는 css속성이다.컨텐츠를 좌우 배치할때 사용하는 css속성이다.!codepenwjdeogud/embed/gOdoYjj?default-tab=html%2Cresultrow : 왼쪽정렬row-reverse : 오른쪽 정렬이지만

사용자가 보는 공간인 웹페이지를 사용자가 쓰기 편하거나 보기 편하게 개발하는 직업이라 생각한다.만약 프론트엔드 개발자가 아무 생각없이 ui의 메뉴부분을 이곳 저곳에 배치를 한다면 사용자는 크게 불편해 한다.그래서 내가 생각하는 프론트엔드 개발자는 사용자가 쓰기 편하게

mixin이란? SASS기능중 하나로 CSS속성 여러개를 함수로 저장해서 태그마다 쉽게 적용할수있는 기능 > 이렇게 함수를 적용하고 태그에 함수를 적용하고 CSS로 변환하면 위에 처럼 된다. mixin의 변수 지정 mixin은 변수도 지정할수있는데. 각 태그 마다 border와 color의 색깔을 바꾸고 싶다면 > 위에 코드처럼 변수를 지정하고 이렇...

darken : 어둡게lighten : 밝게saturate : 더 선명하게(높은 채도)desaturate : 더 흐리게(낮은 채도)adjust-hue : 명도 변경rgba : alpha값 변경사용방법SASS는 연산기능을 지원하고 있다.사칙연산을 지원한다. +(더하기),

SASS의 다른기능 USE? USE란 다른 SASS파일에 있는 CSS속성들을 가져올때 사용한다. 만약 서로 다른 CSS파일에서 태그와 CSS속성이 겹칠때 개발자가 반복해서 속성을 적는걸 막아준다. 즉, > 이 코드가 적혀있는 test.scss파일이 있다. 그리고 다른 SCSS파일에 똑같이 적용하고 싶을때 > 이 코드를 적용하고 CSS파일로 변환하면 똑같이...