제로베이스

안녕하세요 :)정말 오래오래 기다리고 있던 스쿨 후기입니다.. 제가 적는 내용에 있어서비방의 목적이 아닌 개인적인 후기를 남겨볼까 합니다. 제가 프론트엔드 스쿨에 대한 게시글을 멈추었던 이유를먼저 말씀드리겠습니다. 저는 수료 직전 중도 포기를 결정했기에프론트엔드 스쿨의 과정을 모두 참여했습니다.그럼 어떤 이유로 포기를 했는지 후기는 어떤지 적어볼게여 1. 부족한 관리 우선 저는 컴퓨터와 관련된 학과를 재학 중인 상황이었습니다.물론 전공자는 아니었기에 다른 비전공자 분들과 비슷한 상황이지만프로그래밍에 대한 수업이 있기에 조금의 지식은 가지고 있는 상태였어요. 저는 프론트엔드를 해 본 경험은 없었고,제로베이스 프론트엔드 스쿨의 선택에 있어 체계적인 커리큘럼이기에선택했었습니다. 하지만 제가 기수 선택을 잘못해..

벌써 부트캠프 시작한 지 2개월이 지났어요 그동안 나는 뭘 했는지 어떤 걸 머리에 기억하는지 솔직하게 얼마나 공부했고 얼마나 알차게 사용했는지 이게 맞는 방법인지도 모르겠어요.. 그래도 저번 1개월차 회고에서 수정한 계획대로는 잘 따라왔다고는 생각해요 코딩 테스트 문제도 2일에 한번씩 10문제씩 풀이를 하고 있고 강의도 꼬박꼬박 잘 듣고 있다. 현재 문제라고 하면 데일리로 하는 회고가 꽤나 밀려 있다는 사실... 시간이 없다고 생각이 들어서인지 자소서 포폴 강의 프로젝트 등등 이렇게 시작하니 회고에 소홀해졌다고 생각을 한다. 이번주 안에는 회고를 원래 속도에 맞게 최대한 다 해볼 예정이에요 이제 4개월 정도 남아있는 시점인데 지금부터의 내 참여도가 나의 월급을 바꿀 것이라 생각해요 HTML/CSS가 덜 ..

제목 그대로입니다. 저 속성들을 사용하는 이유와 보안 이슈에 처리하는 방법 마지막으로 SEO에 연관되는 방법 이렇게 3가지를 알아볼게요 제가 모르니까 주제로 들고 와서 하는 거예요 저도 취업이란 걸 해서 알려주고 싶거든요 ㅎㅎ 사용 이유 및 보안 이슈에 처리하는 방법 noreferrer - 링크를 클릭할 때 참조 정보를 전송하지 않도록 하는 경우 사용해요 개인정보 보호나 보안을 위한 조치로, 웹 사이트의 추적을 방지하기도 합니다 noopener - 새 창이나 탭에서 열린 링크가 원래 페이지를 조작할 수 없도록 하는 경우 보안 이슈를 예방하는데 중요하며, 주로 target="_blank"를 사용할 때 사용해요 nofollow - 검색 엔진이 이 링크를 따라가지 말라는 지시예요 SEO에 연관되어, 보통은 스..

오늘은 자주 사용하는 CSS 속성에서 Flex와 Grid를 좀 알려드릴까 해요 아마 영상이나 책을 보고 코딩을 따라 해오시는 분들은 왜 사용하나요?라는 질문에 답변이 가능하신가요??? 네.. 저는 저 질문에 어느 상황에 쓴다는 이해를 했지만 늘 그냥.. or 당연히.. 꼭 저렇게 시작을 하더라고요.. 저는 저렇게 말을 시작한다면 제가 정확히 모르지만 아는 척 넘기기 위해 사용한다는 걸 알기에 오늘 주제를 가져왔어요 Flex와 Grid의 차이점 flex는 1차원적인 부분만 고려한 레이아웃 grid는 2차원적인 부분도 고려한 레이아웃 간단히는 이렇게 말할 수 있을 것 같아요 언제 사용하면 좋냐라고 묻는다면 저는 flex는 카테고리나 목록 같은 한 방향으로 가는 것에 적합 grid는 상세 내용처럼 공간에 나누..

오늘은 제가 또 궁금해서 가져온 내용이에요 반응형 디자인에서 미디어 쿼리를 최소화하는 방법은 무엇인가 그래서 좀 찾아보니 방법이 몇 가지 있더라구요 그걸 좀 적어볼게요 너무 당연한 소리겠지만 코드의 복잡성이 줄어든다면 유지 관리를 간소화하는 데 충분한 도움을 줄 수 있죠 4가지 정도의 방법이 대표적인거 같은데 그거 먼저 알려드릴게요 1. 상대적 단위 사용 상대적 단위(em, rem % 등)를 사용하면 요소의 크기를 부모 요소나 뷰포인트 크기에 맞게 조정할 수 있어요 이 방법은 미디어 쿼리를 사용하지 않고도 레이아웃을 유동적으로 만들 수 있는거죠 2. CSS Grid 또는 Flexbox 사용 Grid와 Flexbox는 반응형 레이아웃을 만드는데 유용한 아이들이죠 요소의 크기와 위치를 자동으로 조정해서 다양..

animation 최적화 기법이 뭘까요.. 스터디를 같이 하는 사람들과 얘기를 하다 나온 말이었어요 그래서 블로그에 한 번 적어나 봐야겠다 했던 내용인데 부족하지만 적어볼게여 정말 간단하게 말을 해보자면 웹사이트에서 애니메이션을 더 효율적으로 동작하게 하는 여러 방법을 말해요 여러 방법이라고 하니 당연히 방법이 하나가 아닌 상황에 맞는 여러 방법이 있는 거죠 이렇게 최적화 기법을 사용하면 웹사이트의 성능을 향상하고 사용자 경험을 개선하는데 도움이 됩니다 대표적인 방법으로는 1. GPU 가속 활용 2. will-change 속성 사용 3. 요청 애니메이션 프레임 4. 애니메이션 복잡성 줄이기 이렇게 있는데 오늘 제가 말씀드릴건 3D Transform 사용하는 이유와 CSS로 Animation 최적화 방법을..

이 전 회고에도 한 번 적었던 게 있었는데 이번 회고는 네.. 피드백 받은걸로 해볼게여 제가 생각하기에 정말 빠르게 과제를 제출한 사람 중 한 명이라 생각이 듭니다. 그래서인지 분명 확인을 하고 보냈던 부분에서 조금씩 달랐어요.. 1. ID는 문서에 하나만 존재해야한다. 이건 정말 생각도 못했던 문제였어요.. 지금껏 교수님들 눈에 쉽게 찾을 수 있게 늘 해오던 버릇 같은 느낌이었는데 오류가 생겨 반성을 조금 했습니다. 너무 보여주기 식으로 만들어서 저런 문제가 생긴듯 합니다.. 2. float를 통해 구현해 보아라. 너무 대학생 과제를 생각하고 눈에 보이는 것만 해결하려 만들었나봐요.. flex나 float를 알고 있지만 또.. 쓸데없이 div 영역을 나누어 만들었습니다.. 분명 요기서 생기는 문제를 대..

오늘은 제목 그대로 어떤 방식으로 하는지 적어볼게요 우선 Preload가 뭔지부터 시작합니당 Preload 웹 페이지에서 리소스(폰트, 이미지, 스크립트 등)를 미리 로드하여 로딩 시간을 최적화하는 방법 이렇게 웹 페이지를 로드할 때 필요한 리소스를 미리 가져와 사용자 경험을 향상시킬 수 있음. 따라서, 폰트 preload의 경우, 폰트 파일을 미리 가져와 브라우저에 캐싱하여 로딩 시간을 단축시키는 거예요 이러면 렌더링 될 때 딜레이 없이 폰트가 즉시 사용될 수 있는 거죠 preload를 사용하기 위한 단계 1. HTML의 head 태그 내에 preload 태그를 추가 - href : 폰트 파일의 경로를 지정 - as : 리소스의 종류를 지정. ex) 폰트의 경우 "font"로 지정 - type : 폰트..