뭐라도 기억하기 위한 블로그

포트폴리오를 만들면서 아래 갤러리 같은 콘텐츠를 만들었다.처음에 아무생각없이 flex 스타일을 만들었는데, 다시 보니 이 화면은 flex보다는 grid를 쓰는게 맞는 화면! 심지어 두개의 콘텐츠씩 div로 묶어둬서 유지보수성도 되게 안좋게 만들었다.빨리 성과를 내고 싶은 마음에 깊게 생각하지 못하고 만들어버렸다. 😥 그럼 나의 포트폴리오 화면을 flex에서 grid로 수정해보겠다!수정하는 겸 아래와 같이 테스트 파일을 만들어 정리해보았다 ✅ HTML 1 2 3 4 5 6 ✅ CSS.grid-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }.grid-box { ..

나는 유일하게 해본 리액트 실무의 형태가각 컴포넌트가 독립된 폴더를 가지며, 관련된 파일(스타일, 타입, 테스트 등)을 모두 같은 폴더에 두는 구조로 작업하는 방식이었다!노마드 코딩을 들으면서 다른 방법도 배우긴했지만, 위의 방법이 뭔가 나에게 매력적이랄까...? 아무튼 뭐 아래의 구조처럼 컴포넌트를 만들계획이다.component의 폴더 안에 컴포넌트명을 모두 폴더로 먄들고 각 컴포넌트 폴더의 구조는 아래와 같다./Nav component.tsx styles.module.css index.ts types.ts 오늘 내가 만들어볼 컴포넌트는 스타벅스 사이렌오더 앱에 들어가면 나오는 하단 고정 nav바!일단 얘를 만드려면 아이콘이 필요해서 flaticon가서 비슷한 아이콘으로 최대한 주워왔다. F..

작년 이맘때쯤 호기롭게 클론코딩을 해보자며 CRA로 리액트 프로젝트를 생성했었는데 그것이 어느덧 1년...ㅠㅠ올해가 끝나기전에 완성은 못하더라도 큰 틀은 만들어두고 싶으니 다시 시작!! 일단 나는 눈에 보이게끔 세팅하고 작업하는걸 좋아한다!그것이 프론트엔드의 매력 아닐까요? ㅎ-ㅎ그러므로 App.tsx파일이 Home.tsx를 라우터로 불러올수 있게 끔 세팅하겠다! 📁 폴더 구조오늘 작업한 폴더의 구조는 이렇다.├── ./src│ ├── ./src/App.tsx│ ├── ./src/Routes│ │ └── ./src/Routes/Home.tsx│ ├── ./src/index.tsx│ └── ./src/styles│ ├── ./src/styles/_fonts.scss│ ..

리액트로 포트폴리오를 작업하는데 서브페이지에 접속했다가다시 홈으로 돌아오면 이미지 경로를 찾지못해서 404에러 뜨는걸 발견했다..진짜 리액트로 혼자 작업하려니까 별별 에러가 다떠서 스트레스~정말이지 다양한 경험을 많이 한 고연차가 우대받는것은 당연한가보군요...React Router를 사용하여 SPA 내에서 컴포넌트 간의 화면을 라우팅 ➡️ Route로 서브 페이지 화면을 렌더링 하는 방법을 사용했는데, 다시 홈으로 돌아가면 홈에 있는 슬라이드 내 이미지들이 위와 같이 액박... 콘솔도 404 Not Found 에러가 표시됐다.📌 원인이미지 경로를 상대경로로 사용했기 때문. 📌 해결방안public 폴더 기준 절대경로로 지정해주어야한다.process.env.PUBLIC_URL 적용 ❓process.en..

회사에서 jsp 파일 만지는것도 손떨리는데...이제 과제까지 jsp라니...!이 김에 완벽하게 한번 해보자싶어서 정리해본다. 📂 일단 일반적으로 vscode만으로는 html 작업하던것 처럼 jsp가 화면에 출력되지 않는다. ☑️ JSP를 화면에 그리기 위해서는 서버(ex. 톰캣) 필요HTML : 브라우저가 직접 렌더링 가능JSP : 브라우저가 바로 읽을 수 없음 → 서버가 JSP를 HTML로 변환해야 함. ➡️ 따라서 tomcat을 설치해야 한다. ☑️ tomcat 설치하기Core → zip(윈도우) / tar.gz(맥) 파일 다운로드 Apache Tomcat® - Welcome!The Apache Tomcat® software is an open source implementation of the ..

📌 openwax란? 크롬, 파이어폭스의 확장 프로그램 중 하나로 접근성 관련된 문제를 자동으로 검사해준다.웹 접근성 표준(WCAG, 한국형 웹접근성 지침 2.0 등)을 기준으로 검사한다.크롬 기준으로 확장프로그램 설치하면 openWax를 바로 사용 할 수 있다. [접근성] 명도대비 확인하기 (feat. 크롬 확장 프로그램) WCAG Color contrast checker☑️ 접근성 필수 요소인 명도대비.명도대비란?누구든지 텍스트와 시각 정보를 쉽게 구분할 수 있게 텍스트(혹은 아이콘 등)의 요소가 배경색과의 대비를 충분하게 확보하는 것을 의미한다.일s-notee.tistory.com ⬆️ 설치 방법은 저번에 쓴 WCAG Color contrast checker 설치하는 거랑 똑같다! open..

☑️ 접근성 필수 요소인 명도대비.명도대비란?누구든지 텍스트와 시각 정보를 쉽게 구분할 수 있게 텍스트(혹은 아이콘 등)의 요소가 배경색과의 대비를 충분하게 확보하는 것을 의미한다.일반인이야 구분하는데 문제가 없겠지만 색맹, 색약, 저시력자는 구분이 되지 않을 수 있기 때문.☑️ 크롬 확장 프로그램 설치 방법 ➡️ WCAG Color contrast checker크롬창 상단에서 더보기 버튼 클릭 더보기 버튼을 클릭하고 더보기 박스 쭉 보면 중간쯤에 확장 프로그램이 있다.그리고 확장 프로그램 관리 클릭 다음으로 인풋 박스에 WCAG Color contrast checker를 검색해준다. 크롬창을 보면 윗 부분에 퍼즐 모양 아이콘이 생기는데 그것을 클릭해주면!! 좀 전에 설치한 WCAG Color con..

요즘 작업을 하다 보면 수급받는 이미지가 png가 아니라 webp의 확장자가 많다.📌 webp란?💡 webp는 구글이 출시한 파일 포맷웹사이트에서는 고품질의 이미지로 구현png, jpg, gif 보다는 파일크기 작음용량이 작아서 SEO에 유리 (페이지 로딩 속도 개선)투명도 지원(png 대체 가능)애니메이션 지원(gif 대체 가능)최신브라우저에서는 대부분 지원하나 오래된 브라우저나 일부 앱에서는 아직 지원이 안될 수 있음아직까지는 webp로 파일 추출 과정 복잡 (플러그인 등으로 대체 가능하나 100%는 아님) 📌 기존 이미지를 webp로 바꾸기나도 개인 포트폴리오를 작업하면서 png를 webp로 변환하는 작업을 하고 있다. 💡 확장자 변환 사이트FreeConvertConvertio비볼디(Viv..

📌 clamp() ☑️ css에서 반응형 디자인을 작업할때 유용한 함수.☑️ 값이 너무 커지거나 작아지지 않도록 최소값, 이상적인값, 최대값을 지정할 수 있다.☑️ 폰트 사이즈 뿐만이 아니라 margin, padding, width 등등등 사이즈 단위에 모두 사용 가능.📌 사용예시font-size: clamp(16px, 4.27vw, 32px);//clamp(최소값, 이상적인값, 최대값)위의 예시 코드로 설명하면,폰트 사이즈는 16px 보다는 작아질 수 없고, 32px 보다는 커질 수 없으며, 브라우저는 우선적으로 4.27vw의 값을 쓰려고 한다.* 4.27vw : 화면 width값 기준으로 화면 너비의 4.27% 📌 정리미디어쿼리 없이도 반응형 디자인을 작업 할 수 있다.대부분의 브라우저는 지원..

방통대 과제 UNIX 시스템과 함께 진행하는 리눅스 설치.(작업은 윈도우 환경에서 진행) ✅ Ubuntu 홈페이지 접속 및 파일 다운로드초보자에게 추천하는 배포판은 우분투라고 해서 나는 우분투를 설치했다.UI가 사용자에게 친숙하고 설치과정이 쉽다. https://ubuntu.com/download/desktop Download Ubuntu Desktop | UbuntuUbuntu is an open source software operating system that runs from the desktop, to the cloud, to all your internet connected things.ubuntu.com 홈페이지에 접속하면 이런 다운로드 페이지가 바로 보인다. 초록색 다운로드 버튼을 ..