profile
Developer's High
post-thumbnail

Day.33 Sass(SCSS)(2021.09.15)

sass문법은 정말 이상해보인다. 자바스크립트도 문법이 이상하다는 소리는 들었지만 직접적으로 이상하다는 느낌은 잘 들지 않았지만 sass문법은 정말 이상하게 느껴진다. 그래도 css문법을 그대로 쓸수 있고 특히 hover기능을 구현할때는 정말 편할것 같다.

7일 전
·
0개의 댓글
post-thumbnail

call,apply,bind은 뭘까

call,apply,bind를 알아보기전에 우선 This에 대해 알아야합니다. this는 어떻게 호출되는가에 따라서 달라지는 자바스크립트의 중요한 개념중 하나입니다. someone이라는 객체가 있고 그 안에는 name과 this를 출력하는 메서드가 두개 들어있습니다.

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.32 Sass(SCSS)(2021.09.14)

중괄호가 있고 없고 세미클론 등 세세한 문법적 차이 SCSS 쓰는 것을 추천 Sass의 결과를 CSS로 변환해주는 웹사이트중첩을 벗어나기 위해서는 @at-root상위 선택자 === &중첩된 속성$h : 200px !global; 전역변수로 사용$h : 300px !de

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.32 CSS 심화(2021.09.14)

transform 변환 지속 속도를 설정 perspective : 원근감 거리를 정의 rotate : 요소를 회전시킴 transform-origin : x% y% 회전의 중심점을 지정 자식 요소의 원근감 거리를 정의부모요소의 원근감이 적용된 경우 원근감이 적용안되는데

2021년 9월 16일
·
0개의 댓글
post-thumbnail

Day.31 CSS grid(2021.09.13)

블록 그리드와 인라인 그리드로 디스플레이 변환명시적으로 그리드의 행과 열의 갯수와 너비를 정의ex) grid-template-rows : 100px 100px / repeat(2,100px)암시적으로 그리드의 행과 열의 갯수와 너비를 정의(명시적으로 정의한 부분을 벗어

2021년 9월 15일
·
0개의 댓글
post-thumbnail

Day.29브레드크럼 UI(2021.09.09)

브레드크럼의 유래는 헨젤과 그레텔에서 길을 잃지 않기 위해서 가는 길에 빵 부수러기로 표시를 해둔 것에 유래를 한다.노션에 들어있는 브레드 크럼 기능이다. 사용자가 어떤 경로를 통해서 접근했는지를 나타내 준다.브래드크럼 기능이 없어도 사용하는데는 아무 문제가 없다. 하

2021년 9월 11일
·
0개의 댓글
post-thumbnail

Day.28 무한스크롤UI(2021.09.08)

화면에 표시되는지에 대한 감시자 역할을 하는 객체이다.isIntersecting을 이용해서 화면에 보일경우 컨텐츠를 더 불러오는 식으로 할 경우 스크롤 이벤트보다 퍼포먼스가 향상된다.Throttle의 경우 이벤트가 반복적으로 발생할경우 처음 이벤트를 실행시키는 것이고

2021년 9월 8일
·
0개의 댓글
post-thumbnail

Day.27 배포서비스(2021.09.07)

아마존에서 운영하고 있는 가장 많이 쓰이고 있는 클라우드 서비스로 서버에대한 지식이 어느정도 필요하다. 가끔씩 요금폭탄을 맞는경우가 있으니 주의하자정적인 웹페이지를 올릴때 쓰면 유용한 배포서비스기본적인 database,storage,hosting을 제공해주어 백엔드 코

2021년 9월 8일
·
0개의 댓글
post-thumbnail

Day.26 CSS 심화(2021.09.06)

flex-startflex-endspace-evenlyspace-betweenspace-aroundflex-startflex-endstretch ( 높이가 auto일 경우에만 동작)baseline ( 글자 기준으로 정렬)center ( 가운데 정렬)wrapnowrapw

2021년 9월 7일
·
0개의 댓글
post-thumbnail

Day.25 노션 클론 코딩(2021.09.03)

프로젝트가 드디어 마무리 되었다. div content editable에서 focus함수가 안되서 찾다가 tabIndex 속성을 붙여서 겨우 추가했는데 이거 또한 키보드 커서가 focus가 안됬다. 추후에 고칠 예정이다.블록 단위별로 드래그 앤 드랍 기능이 마지막에

2021년 9월 3일
·
0개의 댓글
post-thumbnail

Day.24 노션 클론 코딩(2021.09.02)

코드 리팩토링(컴포넌트 구조로 변환) 드디어 모든 UI 컴포넌트를 분리해서 코드를 다시 만드는데 성공했다. 이전에는 큼직한 컴포넌트만 분리를 했는데 이번에는 나눌수 있을 만큼 조밀하게 컴포넌트를 나누어 봤다. 컴포넌트 전과 후![](https://images.velo

2021년 9월 2일
·
0개의 댓글
post-thumbnail

Day.22 노션 클론 코딩(2021.08.31)

왼쪽 문서를 클릭하게 될 경우 하위 문서가 토글형식으로 보였다가 안보였다가 하는 기능을 추가했다. 새로고침이나 제목을 변경할때 발생하는 재랜더링 상황을 대비해서 웹스토리지에 전에 상태를 저장해두어 재랜더링시에도 전이랑 같은 상태를 유지하게 했다. 아이콘 추가 기능을 넣

2021년 8월 31일
·
0개의 댓글
post-thumbnail

Day.20 노션 클론 코딩(2021.08.27)

초기화면은 왼쪽에 현재 서버에 있는 문서들을 불러온다.새 문서를 추가할 클릭할 경우 url주소가 변경된다.(historyAPI 사용)url이 변경되면 자동으로 오른쪽 편집기에 해당 문서가 로딩된다.문서 오른쪽에 붙어있는 +버튼을 누르면 해당 문서의 하위 문서로 추가되면

2021년 8월 27일
·
0개의 댓글
post-thumbnail

Day.19 노션 클론 코딩(2021.08.26)

어디서 부터 시작해야 할지 감이 잘 안와서 일단 아무생각없이 코딩을 했다. 요구사항에 나와 있는 것을 바탕으로 컴포넌트를 분리해서 하나씩 만들어서 붙이고 하니까 점점 기능은 조금씩 구현이 됬다.인자를 전달하기 전에 console.log로 체크를 해보는 것이 오류를 예방

2021년 8월 26일
·
0개의 댓글
post-thumbnail

Day.18 바닐라 자바스크립트(2021.08.25)

HTML > BODY > BUTTON 위에 코드를 실행해보면 화면에 버튼 한개가 보인다. 이때 버튼을 클릭하게 되면 어떤일이 벌어질까?결과값 : button,body,html 출력 html태그들은 중첩되있기 때문에 이벤트가 발생할시 특정 event flow가 발생한

2021년 8월 25일
·
0개의 댓글
post-thumbnail

Day.17 바닐라 자바스크립트(2021.08.24)

API를 이용해서 화면 렌더링을 할경우 인터넷환경과 서버에 따라서 사용자가 느낄만한 지연성이 나올수 있다. 결과적으로 사용자 경험이 떨어지게 된다.이를 방지하기 위해 낙관적 업데이트를 하면 사용자 경험이 향상된다.이런 식으로 서버에서 데이터를 받아서 렌더링 하기 전에

2021년 8월 25일
·
0개의 댓글
post-thumbnail

Day.16 바닐라 자바스크립트(2021.08.23)

url의 변화를 신경쓰자hashbang은 거의 안쓰니까 이런게 있는 것만 알아두자 예전에 IE에서 지원을 했기 때문에 썼는데 지금은 안쓴다고 한다.서버에서 HTML파일을 계속해서 받아오는 것이 아니라 클라이언트에서 자바스크립트를 이용해서 HTML파일을 생성해서 렌더링하

2021년 8월 23일
·
0개의 댓글
post-thumbnail

git 기초 with CLI

여기서 —global 설정이 붙기때문에 이전에 설정을 한 적이 있다면 새로운 폴더에도 적용되기 때문에 하지않아도 된다.commit은 의미있는 기능단위로 나눠서 명시적으로 commt을 하자!빠져나오고 싶을때는 "q"키를 눌러주면 된다.원격저장소에서 collaborator

2021년 8월 22일
·
0개의 댓글
post-thumbnail

브라우저의 렌더링 과정

브라우저의 화면을 띄우기 위해서는 우선적으로 데이터가 필요합니다.이 데이터는 서버 혹은 저장장치에서 byte 즉 8개의 비트단위로 전송됩니다.기본적으로 CPU는 바이트단위로 데이터를 처리하기 때문입니다.그 예로 true와 false 두 값을 가지는 Boolean 데이터

2021년 8월 20일
·
0개의 댓글
post-thumbnail

Day.15 바닐라 자바스크립트(2021.08.20)

위와 같은 프로미스 객체는 then을 통해서 resolve된 값을 전달받는다. 이런식으로 async 함수를 만들어서 그 안에 awiat 키워드를 붙이게 되면 동기적으로 작동하는것 처럼 보이게 만들어주지만 실제 동작은 비동기적으로 해서 가독성을 높일수 있다.그리고 ret

2021년 8월 20일
·
0개의 댓글