profile
다른 사람이 수정하기 쉬운 코드를 작성하자
post-thumbnail

[CSS] styled-components에 관하여

React에서 스타일링 작업을 할 때 주로 styled-components를 사용했다그러나 제대로 활용하지 못했던 것 같아서 이번 글이 styled-components를 효율적으로 사용할 수 있는 계기가 되면 좋겠다Tagged template literal을 사용하여

2022년 1월 5일
·
0개의 댓글

[Deploy] Heroku를 통한 배포

Heroku를 통해, express와 react로 만든 웹 페이지를 배포하였다 그 과정을 간단하게 기록하고자 한다 📎 https://velog.io/@recordboy/Express-React-연동-및-Heroku에-배포하기 이 블로그 글을 참고하고 또 참고하였

2022년 1월 1일
·
0개의 댓글
post-thumbnail

[project] covid19 info page 제작기 - 1

공공데이터포털을 이용하여 배포까지 해본 건 처음인데 정말 많이 우당탕탕거렸다🥺 (특히, CORS 에러가 나를 괴롭혔다) 제작 과정을 천천히 회상하며 제작기를 작성해보고자 한다 프로젝트를 진행하며 수많은 블로그 글을 보며 도움을 받았는데 나도 그 고마움을 보답하기

2022년 1월 1일
·
0개의 댓글
post-thumbnail

[Chrome] 디바이스에 맞게 스크린 캡쳐하기

포트폴리오를 준비하다가 목업 파일을 사용하여 각 프로젝트의 썸네일을 제작할 일이 있었다크롬의 개발자 도구를 활용하면desktop, tablet, mobile 등 각 디바이스에 맞게 스크린 샷이 가능하다📎 https://kr.freepik.com나는 이곳에서

2022년 1월 1일
·
0개의 댓글
post-thumbnail

[project] landing-page 제작기 3

lighthouse의 평가 항목을 최대한 고려하면서 markup 하고자 노력하였다

2021년 12월 9일
·
0개의 댓글

[React] .env에 관하여

이전까지는 api key를 .env에서 관리하고,.gitignore를 통해 민감한 정보를 숨기는 것 자체에 초점을 맞췄었다문득 \*\*왜 REACT&에 대한 의문이 들었다이것과 관련된 내용을 정리하고자 한다환경 변수(環境 變數, 영어: environment variab

2021년 11월 30일
·
0개의 댓글
post-thumbnail

[webpack] favicon 설정

webpack config로 html-webpack-plugin을 사용하면서 favicon을 로드할 수 있는 방법에 관하여 알아보았다favicon 만드는 방법html-webpack-plugin을 활용하여 설정하는 방법html-loader 활용하여 설정하는 방법포토샵,

2021년 11월 27일
·
1개의 댓글
post-thumbnail

[project]landing-page 제작기 2

접근성 및 검색 엔진 최적화를 위해서는html head태그를 꼼꼼하게 작성해야했다프로젝트를 끝내고,lighthouse 평가 항목의 세부내용을 자세히 읽어보았다html 및 head 태그에서 고려되어야 할 내용들을 짧게 정리하고자 한다😆(굵직한 것만 정리..)스크린 리더

2021년 11월 25일
·
0개의 댓글
post-thumbnail

[project]landing-page 제작기-1

📎 https://mountain-web-ec9dd.web.app✍🏻 project를 하기 전 목표접근성을 고려한 마크업, 마크업부터 제대로 SCSS에 익숙해지기웹팩 설정에 대해서 이해해보기SEO 고려한 웹 페이지 만들기 git commit 구체적으로

2021년 11월 24일
·
0개의 댓글

[CSS] Media Queries

미디어 쿼리는 media type ( screen, print, speech )media features(color, resolution etc)에 따라서 웹 스타일을 제약할 수 있다. 미디어 쿼리는 논리 연산자를 사용하여 구문이 true일 경우 스타일이 지정되고, f

2021년 11월 19일
·
0개의 댓글
post-thumbnail

[React] 공공데이터 API 활용하여 웹페이지 만들기

🍒 공공데이터 포털https://www.data.go.kr공공데이터 포털을 통해 두번째 프로젝트를 하다가 몇 가지 이슈들을 공유하면 좋을 것 같아서 작성해본다✔️프로젝트 세팅create-react-app, axios 라이브러리를 사용하여 프로젝트를 진행하고

2021년 8월 27일
·
1개의 댓글

[React]react에서 fontawesome 사용하기

🍒 fontawesome>Docs>Reacthttps://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react위 링크로 들어가면 문서화가 잘되어있다😆그래도 과정을 정리해보자면 yarn을 통한 설치 예시

2021년 8월 27일
·
0개의 댓글
post-thumbnail

[github]gh-pages배포와 이미지 리소스 오류

✏️프론트엔드 토이 프로젝트를 깃허브를 통해 배포하는 방법github main branch 외에 gh-pages라는 branch를 새로 만들어준다브랜치명은 반드시 gh-pages로 지정하기❤️main branch가 commit 된 상태에서 gh-pages branch로

2021년 7월 13일
·
0개의 댓글

[JS]counter만들기

minus btn의 경우에는 0이 되면 더이상 count가 내려가지 않도록 만들었음JSJS ClassReact ClassReact Hook

2021년 7월 8일
·
0개의 댓글

[JS] defer 과 async

모던 웹브라우저에서 돌아가는 스크립트는 HTML보다 대부분 무거움브라우저는 HTML을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야하기 때문에 DOM생성을 멈추게 됨위에서 언급했듯이 HTML로 DOM을 생성하다가 script태그를 만나면 js부터 fetch

2021년 5월 17일
·
0개의 댓글

[백준 알고리즘] while문(1 ~ 3)

무한루프로 while문을 반복하고 조건에 따라 break를 통해 while문을 빠져나올 수 있다 수가 입력되지 않아서 error가 발생하면 while문을 빠져나갈 수 있도록 try-except구문을 활용try-except구문try구문에는 에러가 발생할 가능성이 있는 코

2021년 5월 17일
·
0개의 댓글

[백준 알고리즘] for문(1 ~ 11)

for문은 보통 명시적으로 몇번 실행해야 하는지 정해진 상태에서 많이 사용list, array 같이 길이가 정해져 있는 값에 반복문을 적용할 때 while문은 몇번 실행해야 하는지 모르는 상태에서 많이 사용무한루프를 만들기 위해서 활용변수 i를 출력시 사용할 것이냐에

2021년 5월 17일
·
0개의 댓글

[JS] Events 이해하기

DOM 요소들은 모두 eventTarget임 EventTarget.addEventListener()EventTarget.removeEventListener()EventTarget.dispatchEventListener()이벤트가 하위 요소로 전파되는 단계실제 코드에서

2021년 5월 16일
·
0개의 댓글

[백준 알고리즘] if문(1~5)

윤년,,,문제를 잘 읽자!문제 그대로 작성하면 문제없이 풀 수 있으나 보기좋게 틀려주는게 국룰알겠는데 모르겠던 문제,,,결론은 못풀었다🥺일상에 존재하는 수학을 코드로 바꾸는 것이 너무 미흡하다 ㅜ이렇게 단순한 코드를,,,뭐 그러면서 배우는거지

2021년 5월 16일
·
0개의 댓글

[백준 알고리즘] 입출력과 사칙연산(1~11)

처음으로 알고리즘 풀이를 시작하긴 했으나 예상보다 더 못한다,,,나 정말 hello world만 출력 가능 ㅜ 아무 생각말고 무조건 달려야겠다 1단계(문제번호: 2557): Hello World 2단계(문제번호: 1071): We love kriii 3단계(문제번

2021년 5월 16일
·
0개의 댓글