[BOJ] 2490: 윷놀이
2022. 9. 21. 22:48
알고리즘
문제: https://www.acmicpc.net/problem/2490 : 처음 작성한 코드 #include using namespace std; int main() { int stick[4]; int front; for (int i = 0; i > stick[j]; (stick[j] == 0) && front++; } switch (front) { case 0: cout
[BOJ] 10871: X보다 작은 수
2022. 9. 21. 21:58
알고리즘
문제: https://www.acmicpc.net/problem/10871 처음엔 vector를 사용해서 풀었는데, 이 문제에 vector까진 사용할 필요 없어보여서 코드를 수정하고 다시 제출했다. 문제에서는 수열이 입력으로 주어져서 배열을 사용할까 했지만, 각 요소마다 X보다 작은지만 확인해주면 되어서 배열은 사용하지 않았다. : 처음 제출한 코드 #include using namespace std; int main() { int n, x, item; cin >> n >> x; for (int i = 0; i > item; (item > x; for (int i = 0; i > item; (item < x) && ..
[리액트] react router를 쓰는 이유
2022. 9. 2. 11:54
리액트
React Router는 URL을 어느 페이지로 연결시킬지 결정하는 일을 한다. 그렇다면 단순히 링크 태그를 사용하면 될텐데 왜 React Router를 쓰는 걸까? 기본적으로 리액트는 SPA(Single Page Application)이다. 모든 컴포넌트의 변화가 하나의 페이지 안에서 일어난다. 다른 URL로 이동하면 페이지 전체가 교체되는 것이 아니라 한 페이지 내부에서 컴포넌트의 변화만 일어날 뿐이다. 이런 환경에서 사용자는 원하는 페이지에 북마크를 할 수도 없고, 히스토리가 생기지도 않아서 뒤로가기 기능을 수행할 수 없다. 이러한 리액트의 단점을 React Router로 보완할 수 있다. React Router 사용방법 이제는 React Router를 어떻게 사용해야 하는지 정리해보자. 내가 공부..
[Git] 깃 기본 개념 정리
2022. 8. 1. 02:58
Git
clone 깃헙에 있는 원격 저장소를 내 컴퓨터로 복사한다. git clone [주소] commit 아까 위에서 깃은 게임의 세이브 포인트처럼 저장된 시점으로 되돌아갈 수 있다고 했는데, 여기서 저장하는 행위가 바로 커밋이다. 커밋을 하려면 원하는 파일들을 묶어서 커밋해야 한다. git commit -m "message" add 커밋을 하기 위해서는 파일들을 묶어야 한다고 했는데, 스테이지(stage)에 파일들을 올리는 것을 뜻한다. 해당 작업은 add 명령어로 수행할 수 있다. git add * status 현재 수정된 파일들이 스테이지에 올라갔는지 그 상태를 확인할 수 있는 명령어다. git status push 내가 작업한 커밋들을 깃헙(원격 저장소)에 업로드한다. git push checkout ..
[CSS] Flex
2022. 7. 14. 17:10
Style Sheet/CSS
📚 Flex Flex는 레이아웃 배치를 위해 고안된 기능이다. 때문에 float나 inline-block보다 더 편리하고 강력한 속성들을 사용할 수 있다. 기본적으로 레이아웃 배치에 사용되는 속성들은 대부분 컨테이너에 적용하고, 아이템들은 적용된 속성에 따라 배치된다. 따라서 flex를 사용하기 위해서는 아래와 같은 container와 item 구조가 필요하다. flex box !!! 여기서 container는 Flex container, item은 Flex item이라고 부른다. Flex 속성은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성, 두 가지로 나눌 수 있다. 📌 컨테이너에 적용하는 속성 💜 display: flex; flex를 사용하기 위해선 display를 flex로 지정해줘야 한다. ..
[CSS] 라인 수 제한하기 (말줄임표 만드는 방법)
2022. 7. 6. 04:03
Style Sheet/CSS
📚 -webkit-line-clamp .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } -webkit-line-clamp에 지정한 수까지만 라인이 표시된다. 넘치는 text를 자동으로 숨겨주진 않기 때문에 overflow를 hidden으로 설정해야 한다.
[CSS] em과 rem
2022. 7. 6. 02:39
Style Sheet/CSS
📚 절대적인 유닛 & 상대적인 유닛 Absolute Relative px em rem vw vh % 🧡 em /* 브라우저의 font-size 기본값: 16px */ .parent { font-size: 5em; /* 80px */ } .child { font-size: 0.5em; /* 40px */ } 부모 요소의 값을 기준으로 계산한다. 💛 rem /* 브라우저의 font-size 기본값: 16px */ .parent { font-size: 5em; /* 80px */ } .child { font-size: 0.5em; /* 8px */ } 루트의 값을 기준으로 계산한다. 💚 vw /* viewport width: 500px */ .box { width: 0.5vw; /* 250px */ heigh..
[CSS] 가운데 정렬 (Center align)
2022. 7. 6. 01:49
Style Sheet/CSS
📌 margin: auto block level의 요소는 한 줄을 차지하기 때문에 브라우저에서 자동적으로 요소의 오른쪽에 margin을 넣어준다. margin: auto를 사용하면 브라우저에서 해당 margin을 좌우에 자동적으로 분배해준다. 따라서 수평 정렬만 가능하고, 수직 정렬은 불가하다. 📌 text-align: center text를 정렬하는 속성이지만, inline요소도 center에 정렬할 수 있다. 가운데 정렬하고 싶은 요소의 부모에 적용해야 한다. 📌 position & translate transform: translate(50%, 50%)는 자기 자신의 width, height에서 50%만큼 이동한다. 따라서 가운데 정렬하고 싶은 요소를 부모의 50%만큼 이동한 후 translate로..
[JS] ES6+ 문법 정리
2022. 7. 1. 01:11
JS
📚 ES6 📌 Shorthand property names const name = 'haesa'; const age = '22'; // 💩 const haesa1 = { name: name, age: age, }; // ✨ const haesa2 = { name, age, }; 오브젝트를 만들 때 key와 value의 이름이 같다면 하나로 축약해서 작성할 수 있다. 더보기 🔗 MDN 링크 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer 📌 Destructuring Assignment Object // object const student = { name: 'Anna', level: 1..