전체 글 검색 결과
267 개의 검색 결과가 있습니다.
# 공부 자료들/HTML CSS

[CSS] CSS에서 자주 쓰이는 선택자

처음에는 CSS에서 도대체 어떻게 자식을 선택해야 할지 잘 모르겠어서 고민을 많이 했습니다. 분명 많이 했던 것들인데, 막상 헷갈리니까 검색하게 되더라구요.. 내가 생각보다 CSS 선택자에 대해 많이 모르고 있구나 생각이 되어서 자주 사용하는 것들에 대해 정리를 하게 되었습니다. 목차 0. 하위 선택자 CSS에서 자식 선택자는 계층구조에서 바로 아래 오는 자식요소만을 선택하기 위해 사용합니다. 그리고 자손 선택자는 계층구조에서 자신 아래 위치한 모든 자식요소들을 선택하기 위해 사용하죠. 여러 방법이 있지만, 흔히 자신의 계층구조 바로 아래 오는 자식요소만을 선택하기 위해서는 ">" 를 사용하고, 하위에 오는 모든 자손을 선택하기 위해서는 " "(공백)을 사용합니다. /* 자식 선택자 */ ul.my-th..

2022. 2. 1. 07:05
# 공부 자료들/JavaScript

[JavaScript] 그래서 고차함수가 뭐냐고 물어보면 대답할 수 있어?

여느 때처럼 velog를 돌아다니면서 시간을 태우던 중, 면접 질문중에서 꽤나 인상깊었던 질문이 하나 있었습니다. 바로 고차함수가 뭐냐는 물음이었는데요! 저도 분명 어디선가 주워서 들어봤긴 한데, 제대로 알고 있지는 않았습니다. 면접에서 가장 위험한 것이 모르는 것보다 잘못 알고 있는 것이잖아요? 그래서 이번 기회에 다시 정리해보기 위해 이렇게 글을 써 보려고 합니다. 목차 0. 일급 시민 고차 함수를 이해하기 위해서는 먼저 일급 시민 개념에 대해 이해하고 있어야 합니다. 프로그래밍에 있어서 일급 시민의 조건은 아래 세 가지입니다. 변수에 담을 수 있습니다. 함수의 매개변수로 전달할 수 있습니다. 함수의 반환값으로 전달할 수 있습니다. 대부분의 언어에서 기본형 타입의 요소들은 일급 시민의 조건을 만족합니..

2022. 1. 30. 12:36
# 공부 자료들/기타

[Svelte/Vite] 간단하게 프로젝트 설정하기

주변 분들이 대기업에 하나둘씩 붙고 있습니다..! 한편으로는 약간 부러운 마음도 있지만, 노력 없는 결과는 없다고 생각합니다. 저도 열심히 노력한다면 언젠가 그분들처럼 훌륭한 개발자로 1차 전직하는 날이 오겠죠? 그래도 주변 분들이 다 잘 되는 것을 보면 제 인복이 나쁘지는 않은 것 같습니다 ㅎㅎ (나만 잘하면 된다...!!!) 오늘은 그동안 미뤄뒀던 svelte라는 새로운 친구를 만나볼 시간입니다! 이 친구와 함께 웹팩의 시대를 탈출하기 위한 vite라는 신문물도 새롭게 가져왔어요! 얼마나 편하고 빠르게 todoList를 만들 수 있는지 빨리 체험해보고 싶습니다 ㅎㅎ 목차 0. Vite??? Svelte를 알아보기 전에, 먼저 vite부터 알아보겠습니다. 아! 읽을 때는 바이트가 아니라 비잍(프랑스어이..

2022. 1. 28. 20:20
# 공부 자료들/HTML CSS

[Emotion] CSS in JS, Emotion에서 조건부 스타일 적용하기

스톱워치를 무한 개량하던 중.. 문득 수강신청할 때 애용했던 네이비즘의 배경색 변경이 갑자기 생각났습니다. 스톱워치가 현재 가리키는 시간(nowTime)에 따라 배경색이 변하도록 구현하면 좋겠다고 생각이 들었죠. 그런데 조건부 CSS를 어떻게 적용해야 할 지 잘 모르겠는겁니다.. (안그래도 Emotion도 처음인데 ;;) 아무튼 앞으로 작성할 내용은 정말 간단한 방법으로 조건부 CSS를 적용하는 방법이 되겠습니다! 목차 0. Emotion의 기본 사용법 Styled-Component을 알고 있다면 그것과 유사하게 사용할 수 있습니다. (CSS in JS의 대부분이 비슷한 사용법을 갖고있더라구요!!) 변수를 하나 선언하고 그 안에 템플릿리터럴을 이용해서 CSS 내용을 변수에 넣어둡니다. 이제 해당 스타일을..

2022. 1. 28. 04:24
# 공부 자료들/React

[React] onClick 이벤트에 매개변수 담기

CRA로 간단한 투두리스트를 만들다가 onClick이벤트에 함수를 전달해야 할 일이 생겼는데, 어떻게 해야할 지 잘 모르겠어서 여러 가지로 찾아보면서 알게 된 자료를 정리해봅니다. 요약하면 익명함수, data-set, bind를 사용할 수 있습니다! 목차 0. 익명 함수 사용하기 처음에 생각했던 것은 todo.num이라는 key값을 이벤트함수에 전송해서 그곳에서 전체 todos안에서 해당하는 key값과 일치하는 key값을 가진 todo의 done값을 바꾸거나(상태 수정) todo를 삭제하는(삭제) 기능을 구현하려고 했습니다. 그런데 생각해보니 매번 onClick = {함수명} 형식으로 이벤트에 해당하는 함수를 작동시키다보니, 이벤트(e) 이외에 다른 매개변수를 전달할 수 없을까 생각했습니다. 고차함수를 ..

2022. 1. 28. 02:45
# 공부 자료들/React

[React] useState는 비동기로 작동한다!

스탑워치를 만들면서 리액트에 대해 새롭게 알게된 내용이 너무 많아서.. 계속해서 블로그 글을 올리게 됐습니다 ㅠ 리액트를 공부하면 공부할수록 제가 아무것도 모르고 프로젝트를 진행했구나 하는 생각이 드네요! 목차 0. useState의 기초 useState를 통해 리렌더링을 유발하는 변수를 생성하고 사용할 때의 가장 기초적인 내용은 바로 getter와 setter개념입니다. 우리는 아래와 같은 방식으로 useState를 사용합니다. const [count, setCount] = useState(0); 여기서 앞에 오는 count이 getter, setCount이 setter가 됩니다. count에 요소를 새롭게 넣어주고 싶을 때는 setCount을 쓰고, count를 읽어오고 싶을 때는 count을 사용하..

2022. 1. 24. 02:33
# 공부 자료들/React

[React] 절망에 빠진 나를 구해준 useRef..

도대체 왜 내가 원하는대로 스탑워치가 작동을 안하지.. 싶었는데, 제가 리액트의 Hooks와 리렌더링에 대한 이해가 매우매우 부족해서 일어난 상황이라는 것을 깨닫고 빠르게 글을 작성해보려고 합니다. (본 글에서는 hooks인 useRef를 다루므로 createRef의 내용은 생략합니다!) 목차 0. useState와 useRef 둘의 공통점은 함수형 컴포넌트에서 상태관리를 도와주는 hooks라는 점입니다. 다만 useState와 useRef의 가장 큰 차이점은 렌더링 여부에 있습니다. useState는 값이 바뀔 때마다 리렌더링이 발생하는데, useRef는 값이 바뀌더라도 리렌더링이 발생하지 않죠. 더 확실하게 알아보기 위해서 공식 문서를 확인해보겠습니다. useRef() is useful for mor..

2022. 1. 24. 01:52
# 공부 자료들/React

[React] CRA환경에서 이미지 import해서 사용하기

public 폴더와 src폴더의 이용에 있어서 간단한 시행착오를 겪어서 블로그에 메모해두기 위해서 이렇게 글을 작성하게 되었습니다 ㅎㅎ 목차 0. public 폴더가 왜..안돼지? 처음에는 모든 사진들을 public 폴더에서 관리하면 좋겠다라는 생각을 했었습니다. 그래서 여기다 사진 파일을 넣어둔 후에 src 내부에서 import해서 가져오려고 했습죠.. 근데.. 막상 불러서 사용하려고 하니 실패.. 왜냐.. 상대경로로 import해서 사용하기 위해서는 src 폴더 내에서 가져와야 합니다. CRA 4.x버전부터 바뀌어버렸다는거.. https://github.com/facebook/create-react-app/issues/10022 CRA 4 fails to compile when css backgrou..

2022. 1. 24. 00:47
# 공부 자료들/React

[React] CRA로 프로젝트 생성하기

계속 면접준비한다고 놓아주었던 코딩..이었지만 면접에서 씨게 얻어맞고 다시 시작해야겠다는 생각이 강하게 들었습니다. 한달 넘게 놓고 있었더니 시작도 참 어렵더라구요.. 그래서 CRA환경에서부터 차근차근 무언가 만들어보면서 감을 찾아보려고 합니다!! 목차 0. 프로젝트 생성하기 CRA로 간단한 스톱워치를 만들어보려고 합니다. 먼저 node와 npm(npx)가 정상적으로 설치되어있는지, 버전은 어떤건지 확인합니다. (npm -v로 해도 동일하게 나올겁니다!) 여기서 npm이 아닌 npx를 쓰려고 하는 이유는 무엇일까요? 먼저 npm은 node.js의 의존성과 패키지 관리, 그리고 버전관리를 지원합니다. 그리고 npx는 따로 설치, 실행, 제거를 할 필요 없이 일회성으로 원하는 패키지를 npm 레지스트리에 접..

2022. 1. 23. 06:18
# 주저리주저리/블로그 업데이트

[블로그 디자인 1.0.11] [미완] 타이틀 폰트에 preload 적용하기

예전부터 눈에 너무 거슬렸던 폰트변화..를 고쳐보려고 합니다. 브라우저를 열고 처음으로 접속하면 타이틀의 폰트가 따닥하고 변합니다.. 한번 접속한 다음부터는 캐싱이 되는지 정상적으로 뜨는 것 같던데, 그래도 불-편~ 목차 0. 바로 수정해보기 괜히 거창하게 적었긴 한데, 정말 쉽게 수정할 수 있습니다. 늘 그렇듯이 HTML 편집에 들어갑니다. 폰트를 가져온 부분을 찾습니다. 저는 내에서 폰트를 href로 받아옵니다. link 태그에 rel속성으로 preload를 추가해줍니다. as속성은 style, href는 폰트 주소를 넣어주면 됩니다. 그리고 헤드의 맨 윗부분에 넣어줍니다. (저는 css파일도 preload 처리를 해줬습니다!) 여기까지 한 후에 적용을 눌러주면, 끝입니다. 쉽죠?! 1. 자세히 알아..

2022. 1. 23. 00:13