본문 바로가기

분류 전체보기

 (90)
인생은 불확실한 항해다 (항해99 회고록) 디자인을 전공하고 있던 필자는 여름방학이 끝나갈 때즈음, 학교가 가기싫었던 것인지 아니면 정해진 길로 가는 것이 싫어서인 것인지 정확히 알 수 없는 이유로 코딩부트캠프에 눈길을 돌리게 되었다. 왜 하필, 코딩이냐? 에는 두 가지 이유가 있었다. 디자인은 보이는 것을 디자인한다. 코딩또한 보이지 않는 곳을 디자인 하는 것이다. 기술의 최전선을 차지하는 분야에서 일해보고 싶었다. 그렇게 학기시작을 일주일 앞두고, 코딩을 시작하기로 하였다. 휴학을 오래하였던 나에게 복학을 미루고, 코딩을 시작한다는 것은 당시 꽤나 큰 결심이였다. 하지만, 고민이 컸던 만큼 새로운 것을 도전한다는 것에 설레임도 매우 컸다. 나의 성향은 나 자신을 몰아붙이고, 경쟁하는 것을 좋아하기 때문에 무조건 부트캠프로 시작을 해야겠다는 생..
[ 애플 웹사이트 클론 ] 스크롤 섹션 높이 세팅하기 각 div태그에 스크롤높이값을 일정하게 지정해주어, 스크롤애니메이션을 구현해야한다. 그러기 위해서는 가장 먼저, 스크롤 섹션을 태그에 아이디값으로 지정해주고 창 크기가 변할 때마다, 달라지는 스크롤높이들을 스크롤섹션에 적용해주어야한다. 첫 번째로, 아래와 같이 스크롤섹션이라는 아이디값을 통해 섹션을 나누어 준다. AirMug Pro 온전히 빠져들게 하는 세라믹 주변 맛을 느끼게 해주는 주변 맛 허용 모드 온종일 편안한 맞춤형 손잡이 새롭게 입가를 찾아온 매혹 두 번째로, 다음과 같은 배열로 스크롤섹션들을 관리해주자. 여기서 querySelector를 통해, DOM요소에 접근하여 각 스크롤섹션태그들을 불러왔다. const sceneInfo = [ { //0 type: "sticky", hieghtNum: ..
Q3. this키워드 화살표함수와 일반함수의 차이 무엇이 출력될까요? const shape = { radius: 10, diameter() { return this.radius * 2 }, perimeter: () => 2 * Math.PI * this.radius, } console.log(shape.diameter()) console.log(shape.perimeter()) 아래를 열면, 정답이 보인다. 더보기 첫번째 콘솔로그는 일반함수이기 때문에, this가 shape 객체를 가리켜 20이 찍힐것이다. 두번째 콘솔로그는 화살표함수임에 유의해야한다. 화살표함수에서는 this키워드가 상위스코프의 this를 상속받는다는 개념과 bind메소드가 실행되지 않는다. 따라서, perimeter에서의 this객체는 상위 스코프인 글로벌, 즉 window객체를 가..
Q2. var와 let의 차이 (아직 완벽히 이해 못한듯?) 위의 for문과 아래의 for문 각각 무엇이 출력 될까요? for (var i = 0; i console.log(i), 1) } for (let i = 0; i console.log(i), 1) } 아래를 열면, 정답이 보인다. 더보기 어려운데? 그니까 var는 함수스코프이기때문에, for문의 스코프에 영향을 받지 않아서 같은 i를 참조한다? 근데 왜 i 는 3보다 작은데, var일때는 콘솔에 3이 찍힐까? => for문을 돌면, i가 3까지 찍힌뒤에 컴퓨터가 i < 3 이라는 조건문을 실행하여 for문을 빠져나오기 때문? 근데 let은 블록스코프라서 중괄호단위로 변수를 참조함. 따라서 for문을 돌릴..
useMemo와 useCallback을 이용한 렌더링 최적화 이때까지 외면해오던 것이 있었다. useState 와 useEffect만 사용해도 충분히 기능을 구현하는 것에 문제가 없었기에, useMemo와 useCallback을 알아볼 생각이 없었다. 이 두개는 렌더링 최적화를 위한 hook이기 때문에, 무언가 아직 최적화까지 내가 생각을 해야해? 라는 생각이 머릿속을 지배했었던 것 같다. 하지만, 어떻게 개발자가 최적화를 외면할 수 있겠는 가. 지금이라도 렌더링 최적화를 위한 hook에 익숙해져보자. class형 컴포넌트는 리액트 16.8버전이였나, 훅이 나오면서 이제는 deprecated 될 것이다. (조만간 사라지게 될 상태) 대부분이 현재 함수형 컴포넌트를 사용하고 있는데, 함수형 컴포넌트는 말 그대로 함수이다. 즉, 컴포넌트가 실행된다는 것은 함수가 실행..
진짜 열심히 한다는 증거 자기소개 및 이력서 : https://www.notion.so/ffbfc05e864a47d587011873f14e0760https://www.notion.so/71a40125b22e470195f6e340f1adad00 깃허브 주소 : https://github.com/kkkimjiyong kkkimjiyong - Overview kkkimjiyong has 19 repositories available. Follow their code on GitHub. github.com 공부기록 유튜브 : https://www.youtube.com/channel/UCUfA0IISnw5NNGScpp_pmtw (아직 개설중) 개팔자 www.youtube.com
풀스택이 아니더라도, 풀스택의 마음가짐으로 개발의 세계에서 모두에게 주어진 시간은 엇비슷할텐데, 어떻게 백엔드와 프론트 모두를 깊이있게 다룰 수 있을까? 풀스택개발자의 기준은 너무도 다양해서 함부로 언급할 수 없을 것 같다. 하지만, 개발을 하면서 풀스택개발자의 시각을 가져야 하는 건 자신있게 말할 수 있을 것 같다. 적어도 한 분야의 전문가가 되기 전까지는 말이다. 웹 분야는 특히나 더욱 그렇다. 지난 10년간 너무 급속하게 발전해왔으며, 프론트와 백엔드의 경계가 희미해지고 있는 것 같다. 클라우드 서비스가 보편화 되면서, 프론트와 백엔드를 간단히 다루는 것은 더욱 더 쉬운 일이 되었다. 그렇다면, 왜 풀스택의 시각을 가져야 할까? 내 생각은 결국 웹이라는 세계 내에서 지속된 협업을 하기 때문이다. 결국 프론트건 백엔드건 같은 웹개발자라는 게 ..
자바스크립트 this 키워드 먼저 mdn문서에서 정의를 확인해보자. JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다. 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다 (이는 렉시컬 컨텍스트안의 this값을 유지합니다). 대부분 this키워드는 함수를 호출하는 방법에 의해 결정된다. 이 부분이 핵심이다. 결국 누가 호출했냐를 알려주는 키워드가 this 이다..

티스토리툴바