티스토리

나보단 잘하자

검색하기

블로그 홈

나보단 잘하자

jae04099.tistory.com/m

아이고 어서오십쇼

구독자: 46

방명록 방문하기

주요 글 목록

[CSS] 화면보호기처럼 돌아다니는 글래스모피즘 구현 일단 구현에 의의를 두고…. 이걸 적어도 되는지 의문이긴 한데 빠르게 구현하고자 하는 사람들을 위해 기록해봅니다. 아래와 같은 것을 구현 해 볼 것인데… 우선 여기서 쓰는 marquee 태그는 아주 생소하다고 생각이 들 수 있습니다. 그만큼 이젠 안쓴다는 뜻임ㅎ 제대로 쓰고 싶으면 자바스크립트를 써보아요~ 간단하니, 코드에 주석으로 설명을 대신하겠습니다. import styled from "styled-components"; const GlassIndex = () => { return ( GLASSMORPHISM ); }; export default GlassIndex; const GlassWrap = styled.div` position: relative; width: 600px; height: 100.. 공감수 0 댓글수 0 2022. 7. 25.
[Next.js] url에 파라미터 넘기지 않을 때 디폴트 값 설정해주기 이런 상황이 있을 수 있다. 예를 들어 sample.com이라는 사이트의 상품 리스트 페이지는 sample.com/lists 라고 치자. 근데 리스트 페이지는 어디나 그렇듯 소팅을 해야하고 전체 목록을 보여준다고 해도 ‘전체’ 카테고리가 선택 돼 있을 것이다. 때문에 sample.com/lists?sort=all 등의 파라미터를 설정해야하는데, sample.com/lists로 파라미터 없이 접속했을 때 에러로 인한 리다이렉트가 아닌 디폴트로 sort=all 등의 파라미터를 설정해줄 수는 없을까? Nextjs의 장점인 ssr을 사용하면 설정하기 쉽다. 원리는, 서버사이드에서 파라미터를 파싱해서 없으면 해당 파라미터를 가진 url로 리다이렉트 시켜주고 그렇지 않으면 원래대로 넘기는 방식이다. 아래와 같이 설.. 공감수 0 댓글수 0 2022. 7. 21.
[Next.js] 클릭 한 후기 자동 스크롤, 포커싱 주기 분명 어디선가 본 것 같은데... 예시를 못 찾겠다ㅜㅜ 상세페이지에 해당 상품의 후기가 10개 정도 올라와 있고, 이 후기 중에 원하는 후기 하나를 누르면 후기 전체 페이지에서 클릭한 후기로 자동 스크롤되고 반짝이며 포커싱 되는 기능이다. 물론 구현을 위해서는 백엔드 쪽에서 데이터에 해당 후기의 고유번호를 넣어주어야 한다. 간단히 필수적인 기능들만 들어간 페이지 두 개로 실습해보자. 데이터는 목데이터로 단순하게 넣을 것이다. 참고로 기능만 집중적으로 살펴 볼 예정이기 때문에 전체 파일의 코드를 언급하지는 않으려고 한다. 혹시나 필요하신 분이 계시면 댓글 달아주세요... 깃허브에 올리겠습니다... 기본 세팅은 아래와 같다. pages > review > index.js 리뷰를 10개만 보여주는 미리보기 페.. 공감수 1 댓글수 0 2022. 7. 18.
[CSS] 그라데이션(그라디언트) 줄 있는 것 처럼 보이는 문제 해결 이런 문제 있는 분들 많을 것 같은데 생각보다 검색 결과가 없어서 찾기 힘들었다. 결국 직접 스택오버플로우에 물어봤고, 답변을 공유하고자 한다. 그라디언트를 당연히 마지막은 투명도를 0으로 줘서 자연스럽게 배경에 흡수되는 그라디언트를 만들려고 했는데 이상하게 줄이 생긴 것 같은 착시 효과를 주더라. 보통 짜는 코드처럼 단순하게 그라디언트를 설정하면 아래와 같이 보여진다. div.gradient_wrap { margin: 100px; width: 300px; height: 300px; background: linear-gradient(0deg, rgba(38,38,38,1) 0%, rgba(255,255,255,0) 100%); } 이 느낌을 없애주기 위해서는 아주 섬세한 그라디언트 컨트롤이 필요하다. 아.. 공감수 0 댓글수 2 2022. 7. 14.
[React] svg로 비율 정확한 별점 구현 오늘 실습해 볼 것은 아래와 같습니다. 주어진 데이터는 100점 만점 기준 해당 브랜드의 평균 평점입니다. 아마 93점 이렇게 나오겠죠? 별점은 정말 세세하게 퍼센트로 채워짐을 표현해야합니다. 물론! 이를 구현함에 있어 정말 많은 좋은 방법들이 있습니다. 처음 떠올렸던 방법은 별모양 다섯개를 한 묶음으로 status bar를 제작했던 원리와 비슷하게 overflow hidden으로 채워진 것 과 같은 표현을 주는 것 이었습니다. 그러나 주어진 별모양 파일은 svg였고 새로 만들고 싶지 않았습니다. 전체 웹사이트에 통일된 코드기도 했고요. 때문에 각 별 svg마다의 clip-path를 지정해서 5개로 총 길이를 나누는 방법을 사용하려고 합니다. 별 하나만 있는 샘플 코드는 아래와 같습니다. 보라색을 좋아해.. 공감수 10 댓글수 0 2022. 7. 13.
[JavaScript] 새로고침 할 때 마다 이미지 캐시 삭제하기(feat.카페24) 저희 회사는 크게 2개의 파트가 있는데 한 파트는 Next.js로 만들어진 자체 사이트(주로 작업은 여기서 합니다), 또 다른 하나는 카페24에서 운영하는 쇼핑몰 사이트를 운영합니다. 가끔 카페24 사이트를 운영하는 파트가 기술팀에 기능 개발을 요청하곤 하는데 그 담당자가 제가 돼 버렸네요. 때문에, 바닐라 자바스크립트도 만지고 있는데 최근에 꽤 팁이 될 수 있을 만한 이벤트가 있어 적어보려 합니다. 개요 카페24에서 이미지를 수정해서 업로드하면, 자체 캐시 기능이 이미지를 캐싱해서 새로고침을 해도 이미지 수정 적용이 바로 안됩니다. url에 파라미터를 넣어 수정해봐도 수정이 안되는 경우가 있습니다. 이 문제에 대해 카페24는 '이미지 이름을 다르게 업로드'하는 방법을 해결책으로 설명하고 있습니다. 그러.. 공감수 0 댓글수 0 2022. 7. 9.
[ERROR] Error: Invalid src prop "" on `next/image` 외부에서 이미지 파일을 불러왔을 때 발생하는 에러. next.config.js에서 설정하면 된다. module.exports = { reactStrictMode: true, images: { domains: ['cdn.pixabay.com'] // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 된다. } } 그리고 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜야 된다. 이 에러는 width, height값이나 layout='fill' 값을 설정 해 주어야 한다는 것이다. width, height 값은 만약 이미지의 비율 값과 같게 넣게 된다면, layout='responsive'를 줬을 때 비율에 맞게 줄어들고 늘어나게 된다. 공감수 3 댓글수 2 2022. 1. 24.
[Next.js] Dynamic title 만들기 Dynamic title은 아래와 같다. head의 title 부분을 주목해서 보면 검색어를 입력했을 때 검색어에 따라 title이 바뀌는 모습을 볼 수 있다. 만약에 검색어가 없으면 아래와 같이 뜬다. 또 이런거 전문이 next.js이기 때문에 아주 간단하게 설명을 해보겠다. 해당 head를 원하는 페이지의 return에 아래와 같은 코드를 넣자. import Head from "next/head" ""(큰따옴표)를 표시하기 위해서는 엔티티 코드를 사용해야 하는데, 이는 "이다. res는 따로 변수 처리 해 둔 검색어이다. 그런데 이렇게 하면 검색어가 없을 때도 "" 검색결과 라고 뜨기 때문에 예외처리를 해 주어야 한다. sdv는 우리 팀 이름이다. 아무튼, 이렇게 간단히 삼항연산자로 해결을 봤다. 너.. 공감수 0 댓글수 0 2022. 1. 21.
[Node.js] Heroku에 Strapi(Postgresql) 배포하기 프로젝트 중 백엔드 구축을 위해 strapi를 heroku에 배포하기로 했다. Strapi를 사용 한 이유는 백엔드에 시간을 많이 소모하고 싶지 않았기 때문이다. 시작 전에 주의할사항은, heroku의 무료 플랜은 하루에 16시간 열려있으며, 30분동안 접속을 하지 않으면 슬립모드에 들어가고 슬립모드에서 깨어나면 초기 로딩 시간이 길어진다는 것이다. 내가 얼마나 사용했는지 알고싶으면 아래의 명령어를 입력하면 된다. heroku ps -a 우선 heroku와 strapi는 회원가입이 됐다는 가정 하에 진행하도록 하겠다. 따라만 오면 적용할 수 있게끔 글을 적어보도록 하겠다. homebrew를 우선 설치해야 하는데, 아래의 명령어로 설치하면 된다. homebrew는 맥 용 패키지 관리자이다. /bin/bas.. 공감수 0 댓글수 0 2022. 1. 21.
[TIL] Next.js + TS + Styled-components 설치 명령어 자꾸 까먹어서 블로그 계속 찾는다. 여기다 적어놓으려고 기록함. yarn create next-app 앱이름 --typescript yarn add styled-components @types/styled-components styled-normalize 에휴 공감수 0 댓글수 0 2022. 1. 19.
[GIT] 깃허브 쓸모없는 pr 요청박스 지우기(?) 제목을 어떻게 지어야 할 지 모르겠어서 조금 거창하게 지었는데 요약하자면 아래와 같은 일이 있었다. 작업하던걸 푸시하고 pr 날리려고 하는데 깃허브는 pr 전에 머지될 수 있는지 없는지를 알려준다. 딱 보니까 충돌이 나서 충돌을 해결해야 하는 상황이 옴. 그래서 그냥 pr 미뤄두고, 메인브랜치에서 최신을 풀 받은 후 다른 브랜치를 만들어서 스테이시 시킨 작업들을 붙였다. 그랬더니 pr날리라는 메세지가 두개가 뜸. 필요없는 하나의 메시지 어떻게 지우지? 상황으로 자세히 알아보자. 자. 작업을 한다. A를 메인 브랜치, B를 이제 곧 pr을 날릴 브랜치라고 가정해보자. pr을 날리려고 했는데 최신거를 풀 못받아와서 충돌이 난다고 깃허브가 미리 알려준다. 이때 어떻게 해야할까? 우선, pr을 올리지 말고 다시.. 공감수 2 댓글수 0 2022. 1. 12.
[REACT] beta.react.org 공식 문서 번역 : [퀵스타트] 리액트 배우기 Quick Start A JavaScript library for building user interfaces beta.reactjs.org 시작하기에 앞서, 몇가지 방법들이 있습니다. - 그냥 바로 예시로 배우고 싶다면 바로 리액트로 생각하기 로 가세요. 이 튜토리얼은 디테일을 설명해주지는 않지만 리액트로 UI를 만드는것이 어떤 느낌인지 알려줄거에요. - 만약에 리액트의 컨셉에 익숙하고 가능한 API들을 대강 훑어보고 싶다면, API 레퍼런스를 확인하세요. - 이 외의 문서들은 각각의 개념들을 순서대로 많은 인터랙티브한 예시들과, 디테일한 설명들과 이해도를 확인하기 위한 챌린지들로 구성 돼 있습니다. 이것들을 순서대로 읽을 필요는 없지만 각각의 다음 페이지들은 이전 페이지의 개념에 익숙하다는 전제 하에.. 공감수 1 댓글수 0 2021. 12. 10.
[REACT] beta.react.org 공식 문서 번역 : [퀵스타트] 리액트란? Quick Start A JavaScript library for building user interfaces beta.reactjs.org 리액트는 무엇인가요? 리액트는 UI를 만들기 위한 자바스크립트 라이브러리 입니다. 리액트는 디자인과 프로그래밍의 교차로에 서 있습니다. 복잡한 UI를 '감쌀 수 있고', '재사용가능한' 조각들인 '컴포넌트'들로 서로를 조화롭게 해줍니다. 만약에 당신이 프로그래밍 기반이 있다면, 리액트가 함수로 만들어진 프로그램을 만드는 것 이라고 생각이 들게 만들 수 있겠습니다. 만약 당신이 디자이너라면, 이것은 레이어 밖의 디자인을 구성하는 느낌이 들게 만들 것 입니다. 만약 당신이 두 분야의 어떤것도 해보지 않았다면... 괜찮습니다! 많은 사람들은 리액트로 프로그래밍과 디자인에.. 공감수 0 댓글수 0 2021. 12. 7.
[REACT] 그래서 virtual DOM이 왜 필요한데? "왜 리액트를 쓰시나요?" 면접관이 묻는다. 나는 자연스럽게 "많이들 쓰니까요" 라고 답한다. 근데 왜? 바닐라 자바스크립트를 놔두고 리액트 라이브러리를 사용할까? 그리고 virtual DOM은 정확히 무엇일까? 브라우저 렌더링 과정과 virtual DOM 이를 알기 위해서는 브라우저 렌더링 과정을 알아야 하는데... 이는 아래를 참고해도 좋고, 지금부터 간단히 설명하겠다. [WEB] 쉽게 알아보는 웹 브라우저 렌더링 이 게시글은 https://d2.naver.com/helloworld/59361를 읽다가 지친 글쓴이가 쉽게 설명해줍니다. 2편 css transform, positioning 효율성 차이 에서 이어질 예정입니다 프론트엔드 개발자라면 면접에서 필수 질문. jae04099.tistory.co.. 공감수 3 댓글수 0 2021. 12. 1.
[REACT] 공식문서 요약(본인공부용) 2. JSX 소개 const element = Hello, world!; JSX는 리액트 엘리먼트를 생성함. 리액트의 컴포넌트는 마치 레고조각처럼 유닛으로 관심사들을 분리한다. 예를 들어, header 컴포넌트는 header만 다루는 레고조각이다. jsx 컴파일이 끝나면 정규 자바스크립트 함수 호출이 되고 객체로 인식된다. jsx는 html보다는 자바스크립트에 가깝기 때문에, 리액트 돔은 html 어트리뷰트 이름 대신에 카멜케이스 명명 규칙을 사용한다. 예를 들어 class는 class-name이 아닌 className이 된다! 태그가 비어있다면 아래와 같이 바로 닫아주어야 한다. const element = ; 기본적으로 모든 값을 렌더링 전에 ///이스케이프 시키기 때문에 악성 인풋은 주입되지 않는다.. 공감수 0 댓글수 0 2021. 12. 1.
[TIL] 211126 배운것 - 웹의 역사: 세계대전 냉전이 한창일 때, '어떻게 하면 적의 핵공격에서도 군통신망을 유지할 수 있을까' 가 핵심 논쟁이었다. 왜냐면 당시에는 중앙집중회선교환방식 이었기 때문에 중앙이 터지면 통신망은 모두 끊기고 마는 것이다. 그래서 허브를 만들고자 했다. 이것이 인터넷의 시초이다. - internet의 뜻은 net을 연결한다는 의미이다. 도로와 항만 같은 통신 방식이다. - 1991년 팀버너스리가 월드와이드웹을 설계, 이는 대륙간 연구 자료 교환을 위함이었다. 우리나라는 이 인터넷이 두번째로 뚫린 나라였다! 그는 Http, html, url을 만들었다. 그리고 1994년에 w3c를 만들었다. - 1차 브라우저 전쟁에서 ie가 점유율 80퍼센트를 차지 한 이유는 당시 다른 웹 브라우저들과 다르게.. 공감수 2 댓글수 0 2021. 11. 27.
[TIL] 211124 느낀점 - 오늘은 정말정말 유명한 프론트엔드 개발자 조은님의 강연을 듣게 됐다. 뭐랄까, 조은님은 어떻게 하다보니 그냥 개발자가 됐다고 하셨다. 1년 전의 나는 불안의 끝판왕이었는데 지금은 사실 아무렇지도 않다. 나는 개발이 재밌고 어쩌다보니 하고있고 이 길이 내 길이라고 생각한다. 더 깊이 생각 할 필요가 없었던 것 같다. 더 깊이 자바스크립트를 생각했으면 생각했지... - 성공한 개발자들을 보면 정말 자기관리를 철저히 한다. 그건 정말 신기할정도로 모두가 그렇게 하신다. 배운것 - 작은 스타트업의 경우에는 ncp 서비스의 정부 지원 크레딧을 받을 수 있다. - aws: 아마존, azure: 마이크로소프트, gcp: 구글이 운영하는 클라우드 서비스이다. - 리눅스는 데비안, 레드햇, 슬랙웨어 계열이 있.. 공감수 2 댓글수 0 2021. 11. 24.
[TIL] 211122 느낀점 - 부트스트랩 진도를 오랫동안 나가고, 테일윈드 진도를 나가 배운점이 많이 없었던 것 같다. 그래도 아래와 같은 사항을 배웠다. 적더라도 배운 점이 있으니 차곡차곡 쌓이고 있다. 배운점 - clip 속성은 요소의 부분을 잘라주는 속성이다. position absolute일 때만 적용된다. 네이버는 clip 속성을 이용해서 ir을 적용한다. 그러나 clip은 현재 deprecated 됐고, clip-path가 새로 나왔다. 하지만 clip-path는 ie 10부터 지원이 되기 때문에 clip속성을 사용하는 듯 싶다. - kraken optimizer를 사용하면 이미지 최적화를 시켜준다. - css sprite기법은 여러 이미지를 하나의 파일에 배치해서 서버 부담을 줄이게 한다. 스프라이트로 만든 이.. 공감수 0 댓글수 0 2021. 11. 24.
[TIL] 211123 느낀점 - 처음으로 페어 프로그래밍으로 클론 코딩을 했다. 10분마다 번갈아가며 코딩을 하는 것 인데, 서로 토론하며 최적의 코드를 만들어 나가는 상황이 정말 즐거웠던 것 같다. 브레인스토밍을 꽤 좋아하는 편인데 역시 한 명 보다는 둘이 낫고 셋이 낫다. 팀원분이 커뮤니케이션을 잘하셔서 그랬을지도 모르겠다. - 단점이라면 흐름이 좀 끊긴다. 딱 맞춰서 시간을 진행하다보니 잘 나가다 집중이 흐트러지는 경우가 많다. - 리눅스를 배웠다. 이미 아는 것 들이 많았지만 우분투 서버로 내 서버를 실행시키는것은 처음 해봤던 것 같다. 404가 떠서 다시 진행했고, 그래도 해결하지 못했다. 내일 다시 시도해볼것이다. - 자꾸 타인의 길을 따라 가려 무리하게 등반하고 채찍질을 하는 것은 아닐까 생각됐다. 그냥 이대로 .. 공감수 0 댓글수 0 2021. 11. 23.
[TIL] 211119 느낀점 - 조급해하지 말기로 했다. 길다면 긴 시간 동안 준비를 한게 맞지만, 그만큼 쌓은 내공이 있을 것이고, 이는 장점이 될 것이다. 계속 학습하고 있고, 주어진 과제도 충실히 잘 해내고 있기 때문에 나도 모르는 사이에 많이 성장 했을거라 믿는다. 이제 웹접근성과 시멘틱한 웹 만들기는 정말 자신있다! 주니어를 뛰어 넘은 기분이다. 배운점 - 요소의 높이를 지정하면 안됨. 내부 콘텐츠들은 종속적으로 만들어야 한다. 부모의 높이는 자식 높이의 합이라고 생각하자. - 인라인 요소에 position을 주면 인라인 요소가 블록 요소가 된다! - 태그는 꼭 그 의미와 역할에 맞게 사용하자. 마침표로 끝난다면 p태그를 써도 된다. - article안에 section이 있어도 된다. - #none 이라고 앵커 태그.. 공감수 3 댓글수 0 2021. 11. 20.
[TIL] 211118 배운점 배웠다기 보다는, 오늘은 실전 페이지 작업을 하였기 때문에 아래와 같은 클론코딩을 하였다. 구현하지 못한 것: - sold out 오버레이 화면 구현 - 반응형 마크업은 여기까지 클론 하였고 위의 것만 구현하면 된다. 자바스크립트로 기능을 넣는 중이다. 이러다 마크업 천재가 되는건 아닐까 라고 매번 생각하지만 매번 꼬이긴 마찬가지다. 그래도 어떻게 해결은 되고, 왜 이게 꼬이는지 알기 때문에 html css도 프로그래밍 언어로 인정해줘라!!!!!!!!!!!!!!(재밌다는 뜻) 어려웠던 것은 항상 그렇듯, 처음 그리드를 어떻게 짜야할지이다. 이를 다 짜고 머릿속으로 좀 굴리다보면 답은 빨리 나온다. 그리고 오히려 피그마를 보면서 디자인하는게 쉬운 일 이라는걸 깨달았다. 다 정해져 있기 때문에 사이즈.. 공감수 1 댓글수 0 2021. 11. 18.
[프로그래머스] 숫자 문자열과 영단어 (js) 문제 https://programmers.co.kr/learn/courses/30/lessons/81301 코딩테스트 연습 - 숫자 문자열과 영단어 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자 programmers.co.kr 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이.. 공감수 0 댓글수 0 2021. 11. 18.
[TIL] 211117 느낀점 - 어제까지 많이 힘들었는데 오늘 또 나아졌다. 오늘은 유튜버 조코딩님께서 강의를 하셨다. 소통도 굳이시고 실력도 좋으시고 제작부터 배포까지 하루만에 뚝딱 만들었다. 그러나 해당 내용들이 아쉽게도 내가 다 경험하고 있던 것 이라... 클론코딩을 열심히 하였다.(죄송합니다) 배운점 - lang 속성을 읽고 브라우저가 읽고 번역 푸시알림을 주는 것이다. - reset css 등 css link들은 제일 하단이 주 스타일 링크여야 한다. 위에서 아래 순서대로 중요도가 있기 때문이다. - 시멘틱 마크업은 모든 태그에는 의미가 있는 웹을 만드는 것. - 속성 값 뒤에 !important를 붙인 속성, html에서 style을 직접 지정한 속성, #id로 지정한 속성, .클래스, :추상클래스로 지정한 속성 .. 공감수 4 댓글수 0 2021. 11. 17.
[TIL] 211116 느낀점 - css는 배우면 배울 수록 너무너무 어렵다. 더 심각한건 내가 1년동안이나 공부했는데 아직도 이걸 몰라? 라는 생각이 자꾸 든다는 것 이다. 주변에는 취업했다는 말들이 오고가고 난 그대로인 것 같고 모든 취준생들의 고민이겠지만 오늘은 유난히 더 불안하다. 혼자 이겨내야지 뭐 어쩌겠어. 멘탈싸움이다. 이런 생각 해서 뭐할건데? - 그리드의 구분선은 1부터 시작한다. - perspective는 원근감을 조절하기 대문에 z축과는 개념이 다르다. - transform 되는 순간 z-index가 무시된다. after과 before는 element의 위에 있다. 이를 해결하기 위해서는 위로 올라가는 그 시점에 아래로 내리는 트릭을 이용하자! - width min()은 둘 중에 작은 것을 사용한다. - 직.. 공감수 3 댓글수 0 2021. 11. 16.
[TIL] 211115 느낀점 - flex에 헷갈리는 부분, 모르는 부분을 정리했다. 이왕 있는 기능이면 많이 쓰는게 좋다고 생각해 익숙하지 않은 것 들을 익숙해지려 노력중이다. 원래 개발이란... 처음 봤을 땐 쓰고싶은걸 그냥 쓰고싶지만 막상 그 고통의 러닝커브를 넘기면 새로운 기술이 편해지는 것 이다. 그래서 지금 float 사용이 고민이다. 큰 기업에서는 float을 아직 많이 쓰고 있다던데 프로젝트 하나를 그냥 float으로만 구현 해 보아야 겠다. - 코딩테스트를 손 놓은지 꽤 됐는데 다시 불안이 시작돼서 바로 스터디를 모집해버렸다. 참 나의 실행력 하나는 멋진 것 같다. 이제 꾸준히 풀고 다시 감을 살려야 곘다. 정말 하기 너무 싫지만 해야한다... 즐기는 사람들이 참 부럽다. 배운것 - rem을 쓸 때 html에 .. 공감수 3 댓글수 3 2021. 11. 15.
[TIL] 211112 느낀점 - 날이 다르게 성장함을 느낀다. 이제 가상요소는 자유자재로 사용할 수 있다. 언제 사용해야 하는지도 안다. 정말 개발은 매력적이다. 어제 무언가를 배우면 오늘 어제의 나보다 잘했다는 것이 눈에 바로 보이기 때문이다. - 회사 지원에 대한 이야기를 해 주셨다. 내 이력서는 총알이며, 장전됐으면 어디든 지원하라고 하셨다. 나는 정말 신중하게 선택하는 편이라 '내 포트폴리오에 이 회사를 지원해도 될까', '아직 덜 된게 아닐까' 라는 생각으로 매일을 살았고 여기까지 왔다. 그래서인지 더뎌지는 기분이었고 남들이 '제발 다 넣어봐' 라고 말 할 때도 너무 무서웠다. 이젠 달라져야겠다. 이러다가는 계속 공부만 하게 될 것 같다. 빨리 현업에서 제대로 된 실무 경험을 쌓고 싶다. 배운것 - 보통 현업에서는 .. 공감수 2 댓글수 0 2021. 11. 12.
[TIL] 211111 느낀점 - 회사의 템플릿이 있고 테스트하는 폰이 30개정도가 되고 코드 리뷰도 제대로 해주고 이런 이야기를 들을 때 마다 정말 제대로 된 회사에 가야겠다는 생각뿐이 들지 않는다. 코드리뷰 하나만이라도 제대로 해주시는 사수 아래에서 공부하고싶다. - 두 강사님께서 진행하시는데 두 분만 봐도 코드 스타일이 다른 것이 확실히 본인만의 연구를 많이 해서 각자의 정답을 찾아가신 것 같다. 나도 경험을 많이 쌓아 나만의 노하우를 쌓고 싶다. 내 코딩 스타일이 남에게 영감을 줄 수 있었으면 좋겠다. 그리고 기본적인 정답이 없다는 것을 느낀다. 그래서 html css가 남들이 코딩언어가 아니라고 무시하지만 파면 팔 수록 너무 어려운 것 같다. 얕게 공부했음도 많이 깨달았다. 계속 강의 듣고, 클론코딩 하고 피드백 받으.. 공감수 1 댓글수 0 2021. 11. 11.
[TIL] 211110 느낀점 현업 해외 개발자 분의 강의를 들었다. it업계 커리어는 로드맵이 다 다르다. 내가 정말 성향에 맞고 관심사가 무엇인지 잘 알아야 한다고 한다. 나는 인터랙티브 웹, ui/ux가 좋아서 이 업계를 공부하고 싶었다. 이번주에 css 애니메이션이랑 perspective를 배우면서 더 한걸음 성장했다고 생각하며, 이를 더 발전시켜서 내 포트폴리오의 컨셉을 잡아나가야 겠다. 영어도 좋아하기 때문에 해외 취업을 더 알아보아야겠다고 느꼈다. 하지만 우선 기본적으로 한국에서 역량을 쌓고 싶다. 오늘날 해외취업은 특히 개발자면 경계가 없을 것 이라 생각하기 때문이다. 하지만 아직은 두렵다. 나아갈 길이 멀다고 느껴진다. 지금처럼만 해도 될까? 프로그래밍 기초는 정말 중요하다고 하셨다. 기본기에서 탁월함이 나온다.. 공감수 2 댓글수 0 2021. 11. 10.
[TIL] 211109 느낀점 - 드디어 배우지 않은 부분을 배웠다. perspective를 사용한 css 기법이었는데 내가 바라고 원하던 인터랙티브한 웹을 만들기 위해 한걸음 간 것 같으면서도 처음이라 어려웠다. 완벽히 이해할 수 있게 할 것이다. - 이렇게 보니까 정말 처음부터 아무것도 몰랐던 분 들은 너무 힘들었겠구나 싶었다. 더더 열심히 해야겠다. 배운점 - 어느정도의 암기는 중요하다. 많은 구현으로 코드 짜는데 익숙해지는 것이 중요하며 어떻게든 해내겠다 하면 양이 많아지며, 양이 많으면 점점 질이 높아진다고 한다. - css 작성 시, 적어도 두 개, 내 부모까지는 css를 명시하는 것이 좋다. - default display는 block이기 때문에 밀어주고 포지셔닝 하고 싶다면 일일이 inline-block으로 바꿔.. 공감수 4 댓글수 0 2021. 11. 9.
[TIL] 211108 느낀점 - 이제 슬슬 체력의 한계가 오는 느낌이다. 1주일동안 가득했던 기운은 카페인을 증가시키면서 메우고 있다. 아프지 말아야 할 텐데 걱정이 크다. - 계속 마크업을 하니 마크업이 매우 익숙해지고 자신감이 생기는 것 같으면서 또 자바스크립트가 그립다. 아마 내일부터 새로운 프로젝트를 병행하지 않을까 싶다. 드디어 내가 미친게 아닌가 - 확실히 스크린리더기를 생각하는 접근성 좋은 코드를 짜야하고, html요소가 최대한 적은 마크업을 하는 것이 중요한 것 같다. 아직 css를 깔끔하게 만드는 것은 완벽하지 않은 것 같다. 완벽이란 있을 수 있는지는 모르겠지만 말이다. - 아무튼 교육받는게 요즘 너무 행복하다. 배운점 - align-items의 default는 stretch다. 이는 cross-axis를.. 공감수 4 댓글수 0 2021. 11. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.