분류 전체보기 (118) 썸네일형 리스트형 TIL - 3 - Keyword Git / RTK Query / Component / Tailwind / 배포 Git 명령어 익히기 RTK Query 어느 정도 감 잡았다. Component 활용과 아키텍처를 잘 짜야겠다. Tailwind는 어렵다.. 별로 쓰고 싶지 않다 Git 배포 정말 빠르다! - 오늘 하루 느낀 점 기업 과제를 막 제출한 뒤 오늘 공부한 것들을 생각해보았다. 시간은 정말 빠르게 흘러갔지만, 뭔가 진득하게 한 게 없는 느낌이었다. RTK Query는 공부했다고 할 만 하지만 나머지는 그냥 글만 읽고 쓱 지나간 느낌이랄까 자꾸 시간에 쫓기는 느낌이 든다. 시간은 흘러가는데 돌이켜 생각해보면 나는 뭐했지?라는 생각이 든다. 프론트엔드 개발자인데 CSS가 엉성하면 뭔가 자존심이 상한다. 최소 보이는 U.. TIL - 2 - Keyword DOM / Git (PR) / RTK Query DOM은 이미 포스팅했기 때문에 굳이 여기엔 남기진 않고 궁금하다면? 보러 가기 Git은 익숙해져야 한다. Redux Toolkit Package에 포함된 RTK Query라는 것을 알게 되었고, 예제를 따라 만들어서 실행해봤지만 더 공부가 필요하다. 이건 추후 포스팅해야겠다. 보러가기 - 오늘 하루 느낀 점 역시 팀별 기업 과제가 주어지니 블로그 글쓰기는커녕 공부할 시간도 부족하다. 상태 관리를 제대로 해본 적이 없어서 꼭 해보고 싶었지만, 역시나 실제로 구현해본 적이 없어서 그런지 생각대로 되질 않는다. 더 집중하고 시간 관리를 좀 더 해야겠다. DOM(Document Object Model) - DOM (Document Object Model) 스크립트 언어로 HTML 요소를 제어할 수 있도록 하는 문서 객체 모델이다. 일종의 인터페이스며, DOM은 웹사이트를 구축하는 데 사용하는 Web API이다. HTML 문서를 기반으로 Node Tree로 표현하며, HTML과 항상 동일하지 않다. 예를 들어 자바스크립트로 DOM을 조작하여 수정하여도 HTML이 바뀌는 것이 아니다. - DOM 간단 조작 1. Create : createElement으로 원하는 tag를 생성할 수 있고 할당도 가능 ex) document.createElement('div'); 2. Append : 요소에 append or appendChild ex) document.body.append(넣을 요소); 3. Read : q.. TIL - 1 - Keyword HTML / DOM / JavaScript 기본 - Quiz 정리 Q1. 일반적으로 CSS 태그를 태그 사이에 위치시키고, JS 태그를 태그 끝나기 직전에 위치시키는 이유? A1. 브라우저에 나타나는 웹사이트를 보기 위해서는 Render Tree(DOM과 CSSOM을 합친 Tree)가 필요한데, 이 Render Tree를 빠르게 구성하여 사용자에게 UI화면을 보여줌으로써, 향상된 UX를 제공하기 위해 해당 위치에 위치시킵니다. CSS부터 설명을 드리자면, 앞부분인 에 CSS 를 삽입함으로써 불필요한 렌더링을 줄이고, HTML과 거의 동시에 렌더링 할 수 있습니다. 만약 뒷부분에 삽입한다면 HTML을 렌더링 한 후에 CSS를 렌더링 하기 때문에 불필요한 렌더링을 하게 됩니다. JS 같은 .. 하루 전 그동안 여행도 다녀오고, 쉬면서 취업 및 면접 준비를 하니 시간이 이렇게 빠르게 가는 줄도 몰랐다. 벌써 2월도 다 끝나가다니 꿈의 회사 최종 면접에서 떨어지고 멘탈이 흔들려서 쉬었다는 핑계는 이제 그만 대야 할 것 같고, 벌써 하루 전이다. 원티드 프리온보딩 코스를 지원하게 될 줄은 생각도 못 했는데 말이다. 약 30여 번이나 떨어져 보니 자아 성찰을 했다. 당연한 이야기지만, 나는 아직 부족하다. 프론트엔드 파트로는 일을 해본 적이 없다. 실무를 하면서 쌓는 경험이 성장하기에 정말 좋은 경험이라는 걸 너무나 잘 알고 있다. 이러한 것을 해소해 줄 수 있는 것이 프리온보딩 코스이지 않을까 싶다. 사실 '합격할 수 있을까?'라는 걱정도 있었지만, 다행히 70명 안에 들어갈 수 있었다. 벌써 내일이 시작이.. JavaScript : Set() Set은 중복되지 않는 유일한 값들의 집합이다. - 특징 1. 동일한 값을 중복하여 포함할 수 없다. 2. 수학적 집합을 구현하기위한 자료구조이며, set을 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있다. 3. 요소 순서에 의미가 없다. 4. 인덱스로 요소에 접근할 수 없다. -> 그래서 Array로 변환해서 확인 (스프레드 문법 이용 ex. const arr = [...Set]) - 문법 1. 생성 : let setName = new Set(); 2. 개수 확인 : setName.size; 3. 요소 추가 : setName.add(추가할 요소); 4. 요소 삭제 : setName.delete(삭제할 요소); 5. 모든 요소 삭제 : setName.clear(); 6. 존재 여부 확인 : .. Flex - Flex FlexBox라고도 부르며, 레이아웃 배치 전용 기능으로 고안됨. container와 item으로 구분함. direction에 따라 main axis과 cross axis가 바뀐다. - 속성 1. container 적용 속성 1) display : flex 설정 - flex : 기본 flex 설정 - inline-flex : container가 들어있는 item 크기만큼 크기 설정 2) flex-direction : 정렬 방향 - row : 가로축 기준 정렬, 기본 값 - row-reverse : row 순서를 반대로 - column : 세로축 기준 정렬 - column-reverse : column 순서를 반대로 3) flex-wrap : Wrapping(줄 넘김) 여부 - nowrap :.. 가상 요소(Pseudo Element) - 가상 요소 (Pseudo Element) 의사 요소라고도 불리며, 일반적인 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용한다. 요소에 따라 적용되는 효과가 다르며, 사용하는 방법은 CSS3을 기준으로 선택자 앞에 ::사용할 요소 이름을 붙여서 사용한다. (: 하나도 가능) ex) .div::before - 가상 요소의 종류 1. ::before : 선택자의 내용(content) 바로 앞쪽에 내용(content)을 삽입한다. 2. ::after : 선택자의 내용(content) 바로 뒤쪽에 내용(content)을 삽입한다. 3. ::first-letter : 선택자의 내용 첫 글자를 선택한다. 4. ::first-line : 선택자의 첫 번째 줄을 선택한다. (반응형에 따라 바뀜).. 이전 1 ··· 6 7 8 9 10 11 12 ··· 15 다음
