3월 31일 ~ 8월 1일까지의 멋쟁이사자처럼 프론트엔드 스쿨이 드디어 끝난지 벌써 3주가 넘었다. 4개월 가량의 수료과정을 회고하는 글을 작성해야지~ 하고 생각하고 있었는데, 수료 후 며칠간은 오랜만에 인싸(?)같이 사람들 만나서 사교활동도 하고, 좀 느긋하게 뒹굴거려보기도 하고 이것 저것 코딩도 하다보니까 시간이 너무 빨리 흘렀다. 그러다가 지난 월요일 8월 22일 코로나에 걸렸다. 지금은 금요일이고 이제 좀 정신이 들어 이제야 글을 쓰게 된다. 아직까지는 코로나 감기 기운이 있지만 지난 3일처럼 앓아누울 정도는 아니다. 어쨌든, 맨 처음 멋사를 시작할 때는 언제 끝나나 생각했는데 막상 끝나고 나니까 시간이 너무 쏜살같이 지나간게 느껴졌다. 이제 매일 아침 큐알찍고 수업도 들을 일도 없겠다, 급한 프..

https://www.daleseo.com/react-forward-ref/ - 참고 //상위 컴포넌트 function Upload() { return ( ); } export default Upload; 에서 불러온 이미지 파일들이 background로 보여야 했기 때문에 컴포넌트에서 ref를 사용하여 background 속성을 부모 컴포넌트에서 내려주려했다. import { useRef } from "react"; import "./PhotoList.scss"; function PhotoList(ref) { const previewImg = useRef(); return ( ); } export default PhotoList; 단순하게 생각해서 원래 하던대로.. 위처럼 했더니 에러가 났다. 일반 p..

CSS Sprite 기법을 배우면서 또 하나 같이 배운 것은 '레티나 디스플레이' 대응법이다. 레티나 디스플레이는 애플에서 제조하는 아이패드나 아이폰, 맥에서 쓰는 LCD 디스플레이인데 이 디스플레이들은 좀 특별(?)해서, 화면에 이미지를 보여줄 때 약간의 노력이 필요하다. 왜냐하면 같은 이미지 파일이 레티나 디스플레이에선 아래와 같이 흐릿하게 나올 수도 있기 때문이다. 이렇게 레티나 디스플레이에서는 이미지가 다르게 보이는 이유는 바로 "논리픽셀"(우리가 알고 있는 CSS에서 자주쓰는 그 px)과 "물리픽셀"(디바이스에서의 px)이 다르기 때문이다. 즉, 브라우저는 CSS나 html 태그에 표기한 우리가 알고있는 그 px대로 렌더링을 하지만, 브라우저를 보고 있는 디바이스에서의 px값은 우리가 표기한 p..

리액트에서 Link와 Route를 쓰면 자꾸 브라우저 주소창에 url만 바뀌고 컴포넌트가 재렌더링 되지 않아 화면이 바뀌지 않았다. 그래서 해결한 방법은 원래 쓰던 react-route-dom 5.3.0 버전을 삭제하고 6.3.0 버전을 까는 것. 그리고 아래 코드와 같이 제일 바깥 쪽에 로 한번 감싸고 그 안에서 로 한번 더 감싸고 를 작성해 주는 것이다. import { BrowserRouter, Routes, Route } from 'react-router-dom'; import "./App.css"; function App() { return( ); }

HTML과 CSS를 이용해서 코딩 시 이미지를 넣어야 할 때가 많다. 그때 보통 쓰는 방법이 태그에 src로 이미지 URL을 넣거나 css에서 backgroud url을 넣거나 한다. 그런데 웹페이지에 들어가는 이미지 파일들을 경로로 이용하여 하나하나 넣어주다 보면, 사용자가 웹페이지에 접속했을 때 브라우저에서는 사용된 이미지 파일들을 하나하나 다 다운로드 받아야 한다. 그런데 CSS Sprite 기법을 쓰면, 이미지 파일을 하나 하나 다운받을 필요가 없어 렌더링 속도가 향상된다. 사용되는 이미지 파일들을 한 이미지 파일에 다 모아놓았기 때문이다. 위에 보이는 것처럼 네이버도 사용되는 이미지들을 저렇게 한 파일에 모아서 필요한 이미지 부분만 보이는 CSS Sprite 기법을 사용하고 있다. 스프라이트 기..

IR이란? Image Replace 기법. 말그대로 이미지를 대처한다. 웹페이지에 이미지가 보이지 않게 되더라도 스크린리더나 브라우저가 관련 정보를 읽을 수 있도록 텍스트 내용을 적어두고 숨겨놓는 것이다. 중요한 것은, 단순히 "눈에 보이지 않도록 숨기는 것" 에 초점을 두고 단순히 겉모습을 구현하는 것이 아니라 "접근성"과 "검색 엔진"을 고려해야 한다는 것이다. 카카오/네이버/쿠팡과 같은 회사들은 저마다 각각 다른 IR 기법을 사용하고 있다. 여러가지 IR 기법들 중에 지양해야할 것들도 분명 있다. Display : none; 이 속성은 확실히 가시적으로 보이지는 않지만 정보도 표기되지 않는다. 즉 스크린리더나 브라우저에는 "없는 것"과 마찬가지이므로 사용자에게 전달되지 않는다. visibility ..

CSS의 설계기법은 막 써내려갔던 CSS를 좀 더 "구조화"해서 설계하는 기법이다. 대표적으로 세가지의 CSS 설계기법이 있다. 말 그대로 "대표"기법이지 항상 통용되는 것은 아니다. 중요한건 회사의 컨벤션에 따르는것! 1. OOCSS(Object Oriented CSS) 레고처럼 여러가지 모듈을 만들어서 조합하는 방법론. 구조(structure)와 스킨 분리 구조에는 레이아웃과 관련된 속성들이 포함된다. (padding, margin, width, height 등) 스킨에는 레이아웃에 영향을 미치지 않는 시각적인 요소들이 포함된다. (color, background-color, border 등) .btn { width: 200px; height: 80px; font-size: 30px; } .btn-c..

멋쟁이사자처럼 프론트엔드 수업 중 과제 하나가 바로 '벤딩머신' 만들기였다. 이때는 아직 자바스크립트 진도를 나가기 전이라 우선 HTML/CSS만으로 구현했는데 크롬 브라우저, 삼성 갤럭시폰(내폰), 사파리에서는 아래와 같이 출력이 제대로 되었는데, 남자친구 폰(아이폰)으로 카카오톡 링크를 보내고 확인해보니 각각의 태그로 구성되어 있는 콜라 버튼들이 아래로 내려가는 현상을 발견했다. 아이폰 사파리앱에서는 정상적으로 구현되는 걸 보면, 아이폰 기기 자체 문제가 아니라 카카오톡 링크 문제인 것 같았다. 확인해보니 flex 속성을 주었을 때, width가 1px 줄어드는 문제가 있었다. 안에 있는 태그 넓이를 width: 94px로 값을 주었기 때문에 생기는 문제로 보인다. 이를 해결하기 위해 넓이가 아닌 넓..

멋쟁이사자처럼의 프론트엔드 스쿨에 참여한지 오늘로 딱 30일이 되었다. 30일이란 시간동안 나는 얼만큼 성장을 했냐? 고 물으면 어떻게 대답해야 할지 모르겠다. 확실히 혼자서 깔짝 깔짝 공부 했을 때 보다는 많은 지식을 습득 하긴 했다. 물론 그 지식의 깊이가 깊지는 않지만 공통 관심사를 가진 사람들과 얘기를 하고 이것저것 주워 들으면서 '개발자'와 관련된 잡다한 지식과 취업 관련 정보도 많이 얻었다. 지식은 습득했지만 한 인간으로서의 '성장'은 아직 나에겐 먼 얘기인듯 하다. 지난 주말에는 오랜만에 부산 집에 내려갔다. 돈도 들고 시간도 들고 부산까지 가는게 귀찮은 마음도 있었지만 으레 인사치레하듯이 부모님에게 얼굴이라도 비추어야겠다는 억지로 스스로를 이끌고 내려갔다. 아빠는 기껏 부산까지 왔는데 일요..