서스포PAR_개발블로그

드디어 노마드코더 챌린지를 마무리 짓고, 정적 페이지를 만들기 위하여 글을 작성하게 되었습니다!! 과거 멋모르던 시전Api cors에러를 피하기 위해 node.js로 열심히 만들었던 기억있는데... 💖 깃허브 페이지(github page)란? 개발자라면 누구나 알고 있는 사이트인 Github는, 무료 티어 사용자가 공개 레포지토리에서 무료로 호스팅을 이용할 수 있도록 Github Pages라는 서비스를 제공한다. Pro 티어 사용자는 private 레포지토리에서도 사용할 수 있다. Github Pages는 기본적으로 HTML, CSS, 그리고 JavaScript로 구성된 파일을 구동하고 배포해 Static 웹 사이트를 호스팅할 수 있게 해주는 서비스다. 이 기능을 사용하게 되면 주로 github.io 라..

리액트 인강을 보다보면 많이 나오는 styled Components! 🎁 styled components 에 대해서 자세히 알아보도록 하자! 🎁 💖 Styled Component란? styled-components란 Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리이다. . 🔊 본질적으로, styled-coponents 는 styled-components 라이브러리를 사용하여리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다. 🚨 왜 styled-components를 사용하는가? Component가 많을 경우, class명이 중복..

구글 API를 진행하면서 텍스트 줄 바꿈과 텍스트 (...) 자르기를 진행해 보았다. 내가 알던 CSS3지식을 더해 줄 수 있는 정리를 진행하고자 글을 작성하기로 하였다. 🎁 CSS3를 이용한 텍스트 처리에 대해 알아보도록하자! 🎁 ⭐ white-space p {white-space: nowrap;} white-space 속성은 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정합니다. 이 속성은 상속됩니다. 🪄 white-space 속성값 📌 normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다. 📌 nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다. 📌 pre : 줄 바꿈과 기타 공백이 유지됩니다. 이 가..

🎊 아기 FE개발자 주말 개인 스터디 모집 🎊 🐔 주의! 주최자가 닭띠라 공부일정(+공부&운동인증)를 여쭤볼 수 있습니다. (쪼쪼쪼...) 🐔 📆 일정 📆 날짜 학습내용 제출과제 6월 19일 (1회차) HOOK(짧게) / style( css / Module / sass / styled-components ) -인강제공- 깃허브 주소 6월 25일 (2회차) style( flex box / css grid ) / todoList작업 (생성, 삭제) -인강제공- 깃허브 주소 6월 26일 (3회차) todoList작업 ( check box / 밑줄작업 ) [프로미스(promise)] 1. 콜백지옥 예시 2. 기존 promise 3. new promise ( async / await ) API연동 / 자바스크립트..

애플 웹사이트 인터랙션 클론 코딩을 배우면서 스크롤 이벤트로 화면이 전환되는 구현을 진행중이다. 아직 20%밖에 보지않았지만 진행하기 이전에 스크롤 이벤트가 어떻게 되는지 알면 좋을 것 같아 강의를 중단하고 정리하기로 하였다. 🎁 Scroll Event에 대해서 알아보도록 하자 🎁 🙌 현재 뷰의 크기 // 기본 문법 window.innerHeight; //뷰의 세로 사이즈 알아내기 (픽셀단위) window.innerWidth; //뷰의 가로 사이즈 알아내기 (픽셀단위) // 익스플로러 5부터 7버전만을 위한 문법 1 document.documentElement.clientHeight document.documentElement.clientWidth // 익스플로러 5부터 7버전만을 위한 문법2 docum..

내가 만들 사이트의 썸네일과 제목을 설정하는 것을 인강에서 배웠다. 하지만 정확한 이론을 알지 못하고 따라한 것이기에 이번 기회에 더 깊게 배울 수 있도록 공부하기로 하였다. 🎁 하나하나 천천히 뜯어보고 알아보자! 🎁 💖 OG (Open Graph) 란? 해당 콘텐츠의 요약 내용이 "SNS에 게시되는데 최적화된 데이터"를 가지고 갈 수 있도록 설정하는 것 미리보기가 가능한 정보를 노출해준다 = 미리보기 화면 생성 오픈그래프 (OG, 오픈 그래프 프로토콜) 는 어떤 HTML문서의 메타정보를 쉽게 표시하기 위해서 메타정보에 해당하는 제목, 설명, 문서의 타입, 대표 URL 등 다양한 요소들에 대해서 사람들이 통일해서 쓸 수 있도록 정의해놓은 프로토콜 🔊 (오픈 그래프) 프로토콜 프로토콜(Protocol)은 ..

회사 업무를 진행하다 디자인된 화면과 어울리지 않는 스크롤바를 커스텀을 하였다. 차후 이 지식이 나에게 도움이 될 것 같아 글을 작성하였다 🎁 스크롤 바 커스텀을 진행하여 나만의 홈페이지를 완성시키자! 🎁 💖 스크롤바 스타일 커스텀(Scrollbar Style Custom) 스크롤바 스타일에 대한 웹표준은 존재하지 않습니다. webkit 브라우저(크롬, 오페라, 사파리)에 한해서 가상요소를 사용하여 커스텀을 해줍니다. 스크롤바와 관련된 가상요소는 여러가지가 있지만 주로 사용하는 아래 3가지가 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤..

이제 곧 취업한지 한달이 다 되어간다. 일을 시작하면서 공부량이 확연하게 줄은 나를 위해 스터디를 준비하였고, 5월 7일 늦게 공부를 시작한 내가 파일을 정리하다 찾은 면접질문 내용들이다. 🔥 CS 더보기 🌠 프로세스가 뭔가요? 프로세스는 운영체제로부터 자원을 할당받은 작업의 단위이다 🌠 스레드가 뭔가요? 스레드는 프로세스가 할당받은 자원을 이용하는 실행 흐름의 단위이다. ※ 스레드는 프로세스 안에 포함되어 있기 때문이다. 🌠 싱글 스레드와 멀티 스레드 1. 싱글 스레드 : 하나의 프로세스에서 하나의 스레드 실행 2. 멀티 스레드 : 프로그램을 다수의 실행 단위로 나누어 실행. 🌠 HTTP 개요 - 인터넷에서 클라이언트와 서버가 데이터를 주고받을 수 있는 프로토콜(규칙)이다. - HTTP는 웹에서 이루어..