전체 글

HTML/CSS 코칭 스터디 1기에서 리드 부스터로 활동한 후기를 작성해보려고 한다. 스터디는 2022년 5월 5일에 시작해 6월 16일까지, 5주간 진행되었다. 교육내용 1주차 : HTML 이해하기 2주차 : HTML 태그/콘텐츠 모델, 시멘틱마크업, 블록 3주차 : CSS 이해하기 4주차 : 단위, 배경, 박스 모델/폰트, 텍스트 5주차 : 레이아웃, 미디어 쿼리 HTML/CSS 코칭 스터디는 위와 같은 교육 커리큘럼으로 진행되었다. 스터디를 통해, 시멘틱 태그, css 선택자 등 제대로 알지 못하고 어물쩡(?) 넘어갔었던 지식들에 대해 공부하고 온라인으로 만난 팀원들과 함께 팀워크를 다지며 성장할 수 있었던 좋은 경험이었다. 스터디 진행 과정 스터디 할 당시, 나는 ICT인턴십으로 합격한 회사의 인..

SSR(Server Side Rendering) SSR은 서버사이드 렌더링으로, 말 그대로 서버에서 렌더링을 하여 완성된 html 파일을 로드해 주는 구동 방식을 말한다. 클라이언트에서 요청을 할때마다 각 상황에 맞는 html파일을 생성하여 넘겨주기 때문에 페이지가 여러개다. (MPA기법-Multiple Page Application) 장점 ssr은 클라이언트에서 요청한 페이지의 html(만) 다운로드하기 때문에 CSR보다 초기 진입시의 로딩이 빠르다. 서버에서 렌더링 후 각각 페이지(html)를 넘겨받는 것이므로 각 페이지에 대한 정보를 받아오는 것에 유리하다(SEO). 단점 링크 이동시 새로운 html 파일 자체를 서버에서 받아오는 것으로 화면 깜빡임 현상이 있다. 초기진입은 CSR보다 빠르더라도, ..

React개발자들은 기본적으로 Node.js 위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게된다. 개발을 진행하다보면, 개발 환경과 배포 환경을 다르게 해야하는 경우가 생긴다. 예를들어 DEV서버의 URL과 실제 PROD서버의 URL이 다른 경우가 있겠다. 개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다. creact-react-app을 사용하여 프로젝트를 시작했다고 가정하자. 환경변수 기본개념 기본적으로 node.js는 production(배포), development(개발), test(테스트)로 구분하여 사용한다. 그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다. # production 배포 env실행 npm..

Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(환경)이다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 Javascript 언어를 사용하며, 서버사이트 스크립트 언어가 아닌 프로그램(환경)을 말한다. 내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치(정적인 데이터를 처리하는 웹 서버) 등의 별도 소프트웨어 없이 동작하는 것이 가능하며, 이를 통한 웹 서버의 동작에 있어 더 많은 통제에서 벗어나 여러 가지 기능을 가능하게 해준다. 단순히 웹에서 실행 가능한 게임을 만들려면 JavaScript 만으로도 가능하지만 좀 더 진화 된 프로그램으로 ..

declarations file 만들기 // styled.d.ts import "styled-components"; declare module "styled-components" { export interface DefaultTheme { colors: { gray_100: string; gray_200: string; }; } } 먼저, 선언 파일을 생성해준다. 그리고 DefaultTheme에 타입을 추가 해준다. (+ d.ts파일은 구현부가 아닌 선언부만을 작성하는 용도의 파일로, JS코드로 컴파일되지않음. 선언 코드(declare)만 작성이 가능) 이제,DefaultTheme는 prop.theme에 적용시켜줄 것이다. theme 만들기 이제 위에서 선언한 DefaultTheme을 사용하여 테마를 만..

Chrome 환경에서만 작업을 했었는데, Safari로 들어갔을 때, 적용이 안되는 폰트가 있다는 것을 알게 되었다. 첫번째 해결방법으로는 * { font-family: Hevetica(혹은 다른 서체), AppleSDGothic !important; } Hevetica를 최우선으로 표시하고 Hevetica가 표시될 수 없다면, AppleSDGothic를 강제로 적용하는 방법이 있다. 하지만 위 방식으로 적용될경우, 모든 텍스트가 서체 하나(AppleSDGothic)로 표시되어 웹사이트의 개성이 무시되고 가독성이 더 떨어질 수도 있다. 따라서 두번째 방법으로, 가독성이 떨어지는 일부 폰트만 Apple SD Gothic Neo로 바꿔 주기로 했다. * { @font-face { font-family: Ap..

커스텀 훅을 사용해 defultModal을 제작해보자. 코드 확인하기 커스텀 훅 생성하기 먼저 커스텀 훅'useModal.js'의 코드는 다음과 같다. import { useState } from "react"; const useModal = () => { const [isShowing, setIsShowing] = useState(false); function toggle() { setIsShowing(!isShowing); } return { isShowing, toggle }; }; export default useModal;useModal이 하는 작업은 다음과 같다. useState(isShowing, setIsShowing)를 사용하여 모달의 보이는 상태를 저장 isShowing상..

react-slick라이브러리에서 dots를 바꾸기 위해서는 setting(props)값에 dotsClass를 추가해줘야 한다. default로 되어 있는 class 선택자 대신 dotsClass명으로 class 선택자명을 바꿔 커스텀이 가능하다. DOCS 버튼의 색깔과 크기, 버튼 양 옆 마진 값을 바꿔주고 싶었다. import React from 'react' import Slider from 'react-slick' import './slick.css' export default function ImgSlide({images}: any) { var settings = { dots: true, infinite: false, speed: 500, slidesToShow: 1, slidesToScroll..

마진 병합은 인접한 두 개 이상의 수직 방향 박스의 마진이 하나로 합쳐지는 것을 의미한다. 마진 병합은 다음 세가지의 경우에 일어난다. 두 요소가 상하로 인접한 경우: 위 요소의 하단 마진과 아래 요소의 상단 마진의 병합 부모 요소와 첫 번째 자식 요소 또는 마지막 자식 요소 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진 병합 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진 병합 내용이 없는 빈 요소의 경우: 해당 요소의 상단 마진과 하단 마진의 병합 마진 병합은 수직 방향으로만 이루어지며, 좌우에 대해서는 일어나지 않는다. 마진 병합은 마진이 반드시 맞닿아야 발생하기 때문에 2,3번째의 경우 패딩 및 보더가 없어야 한다. 마진 병합이 발생할 경우 절대값이 더 큰 요소의 마진 값이 적용..

div를 겹쳐놓은 상태에서 border를 주면 border가 겹쳐져서 겹쳐진 부분만 더 두꺼워 보인다. border부분만 합치고 싶다면 border-collapse속성을 이용하면 된다. ‘border-collapse’는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 정한다. MDN ‘border-collapse’는 table 요소를 꾸미므로 div에서 사용하고 싶을 때는 요소를 테이블로 만들어줘야 한다. 부모 div(section)에 Display :table;자식 div에 display : table-cell;을 주어 table 속성으로 만들어준 뒤 부모 div에 border-collapse: collapse;를 추가해주면 테두리가 겹쳐진 div를 만들 수 있다. See..