본문 바로가기

분류 전체보기

(44)
[테니스 레슨 일지] 항상 같은 폼을 유지해야 할까? 너는 모든 공을 항상 같은 자세에서 치려고 한다. 상대가 강하게 친 공 상대가 약하게 친 공 상대가 길게 친 공 상대가 짧게 친 공 짧은 공을 앵글로 치고자 할 때 위와 같은 경우를 모두 한 스윙으로 처리 할 수 있을까? 선수라면 가능 할 수 있을 것이다. 나는 선수도 아니고, 연습량도 많은 편이 아니다. 따라서, 어느 정도 선에서 타협을 봐야한다. 상대가 강하고, 길게 쳤을 땐, 반응을 빨리 해야하므로, 백스윙을 짧게 하고, 임팩트도 최대한 간결하게 보내야한다. 상대가 잘 친 볼에 대해서는 인정하고, 넘겨주는 것이 최우선이다. (물론, 상대가 받기 힘들게 넘겨주는 것이 최선이고, 그러기 위해 노력해야 한다.) 또한, 상대방의 파워를 역으로 이용 할 수 있어야 한다. 상대가 강하게 쳤다고 해서, 나도 강..
[React] Styled Component로 Global Theme 다루기 theme.js 생성 const theme = { color: { primary: '#03a9f4', // 주 색상 secondary: '#795548', // 부 색상 white: '#FFFFFF', gray: '#CCCCCC', default: '#999999', // 기본 문자 색상 error: '#FF0000', // 오류 색상 } } App.js styled-component 의 ThemeProvider 와 위에서 만든 theme 을 가져온 후, 컴포넌트 최상단에 감싸 준다. import { ThemeProvider } from 'styled-components' import theme from './theme' 이제 styled component에서 props 로 접근 할 수 있다. const..
[React] CRA 로 만든 프로젝트에 Storybook 추가하기 설치 CRA 로 프로젝트를 생성한 경우에는 --type react_scripts 와 함께 init 을 해야한다. $ npx @storybook/cli sb init --type react_scripts 설치를 하고나면, .storybook 폴더와 stories 폴더가 생겼다. stories 폴더는 지워도 상관없다. 보통은 컴포넌트와 함께 story를 작성한다. 실행 $ npm run storybook Github page 배포 $ npm i @storybook/storybook-deployer --save-dev package.json 에 아래 스크립트 추가 { "scripts": { "deploy-storybook": "storybook-to-ghpages" } } 추가 후 아래 명령어 실행 $ npm..
[JS] CDN 이란? 특정 파일을 전세계에 분산하여 복사해두어 현재 접속한 사용자의 위치와 가장 근접한 곳에서 빠르게 내려받을 수 있도록 파일을 제공하는 방법이다.
[React] Currying 과 HOC 에 대해서 커링이란? 커링은 반환값이 함수인 디자인 패턴을 말한다. 왜 커링을 사용해야 하는가? 중복된 코드를 줄여준다. 원하는 기능을 적재적소에 조합해서 사용할 수 있다. 실행 시점을 뒤로 미룰 수 있다 const server = ip => { return (connectionInfo) => { } } // 사용 const connection1 = server('http://localhost:3001') const connection2 = server('http://localhost:3002') // do someting... connection1({id: 'id1', password: 'password1'}) connection2({id: 'id2', password: 'password2'}) HOC란? Hig..
[테니스 레슨 일지] 연타에 대하여 연타를 칠 수 있는가? 2020년 4월 1일 테니스 일지 7년동안 강타를 고집해 왔다. 손 맛이 일품이거든 문제는 컨티션에 따라 컨트롤과 파워가 좌지우지 한다는게 큰 문제였다. 그래서 나온 해결책! 팔에 힘을 빼고 연타를 쳐야 한다. 팔에 힘은 어떻게 뺄 수 있을까? 라켓은 중지 약지 소지 를 이용해서 잡는다. 검지 와 엄지 는 그저 라켓을 받치고 있는 것이다. 더, 잔인하게 말해서 엄지의 첫 째 마디, 검지 의 둘 째 마디가 잘렸다고 생각하면 될 것 같다. 그렇다면, 연타는 어떻게 칠 수 있을까? 여기서 잘못된 생각이, 연타는 살살 넘겨주고 터치감을 익히는 것이다. 위와 같이 생각하면 절!대! 안된다. 연타는 살살 넘기는 것이 아니라, 스핀을 조절해 넘기는 것을 연타라고 하는 것이다. 서비스 라인에 서..
Prettier config 정리 { "useTabs": false, // 1 "printWidth": 100, // 2 "tabWidth": 2, // 3 "trailingComma": "all", // 4 "semi": false, // 5 "singleQuote": true // 6 } 1. 탭을 사용할 때 빈칸으로 채우기 2. 한 줄에 최대 100칸까지 허용, 나머지는 줄 바꿈 처리 3. 탭의 빈칸을 두칸으로 지정 4. 나열 항목의 마지막은 항상 콤마로 5. 세미콜론 여부 6. 문자의 따옴표를 작은 따옴표(')로 지정
2019 프론트엔드 기술면접에서 주로 나왔던 주제들 2주간 프론트엔드 분야에 면접을 진행하면서 나왔던 주제들 중 기억에 남는 것들을 정리! 1. var let const의 차이 2. closure 가 무엇이며 어떻게 사용되는 것인지 3. 일반 함수와 화살표 함수의 차이점들 그리고 그 차이점이 왜 발생하는지 4. 비동기를 처리할 수 있는 방법이 무엇이 있는지 5. callback을 사용할 수 있는 사례를 직접 보여달라 6. callback hell이 어떤 상황에서 발생할 수 있는지 7. 자바스크립트 스코프에 대해서 아는대로 설명 8. 실행 컨텍스트에 대해 설명하시오 9. 이벤트 루프에 대해 아는대로 설명하시오 10. Element의 data- 속성을 왜 사용하며 언제 사용할 수 있는지 11. 브라우저 동작원리 12. React, Vue 라이프 사이클에 대해..