자바스크립트는 동적 언어로서 다른 언어와 달리 독특하게 동작하는 경우가 종종 있습니다. 실행 컨텍스트는 자바스크립트가 이런저런 특이하게 동작하는 개념인 "실행 컨텍스트" 에 대해 깁게 학습한 내용에 대해 공유하고자 합니다. Execution Context ( 실행 컨텍스트 )실행 컨텍스트는, 코드를 실행하는데 제공할 환경 정보들을 모아놓은 객체입니다. 이 객체에는 식별자들에 대한 정보, 외부 환경 정보, this와 같은 정보들이 저장됩니다. VariableEnvironment : 해당 컨텍스트가 최초 실행 될 때의 식별자들의 정보(environmentRecord), 외부 환경 정보 (outerEnvironmentReference)LexicalEnvironment : 최초에 VariableEnvrionme..

📚 TLDR서비스를 개발하다 보면, 새로운 기능을 만드는 만큼이나, 기존의 코드를 다시 보고 다른 사람이 짠 코드를 살펴보는 시간이 많아졌습니다. 가벼운 해커톤이나, 동아리 프로젝트처럼 기간을 정해두고 하는 프로젝트성 개발과 달리 완성을 시키고 계속 유지보수 해나가야 하는 개발을 하다 보니 '아.. 리팩토링 해야 하는데..'라는 생각이 절로 들게 됩니다. 이제 와서 생각해 보면, '컨벤션을 좀 더 꼼꼼히 할걸', '코드리뷰 할 때, 이런이런 부분에 대해서는 의견을 나눠볼걸'과 같은 생각이 들긴 하지만, 그것도 1년 정도 한 프로젝트만 개발하고 코드를 보고 또 보면서 서비스를 발전시키다 보니 느껴지는 부분이지 그때의 제가 생각조차 못할 부분이지 않나 싶기도 합니다. 여러 후회와 그 후회를 바탕으로 발전시..

개요안녕하세요. 웹 프론트엔드 개발자 설탕시럽입니다. 이번 글에서는 Intersection Observer를 활용하여, 사용자의 화면을 기준으로 컴포넌트에 변화를 주는 방법에 대해 소개해드리려고 합니다. scrollEvent를 활용한 방식이 아닌 Intersection Observer를 활용하여, 스크롤이 기준이 아닌 유저가 보는 화면을 기준으로 UI를 수정할 수 있는 방식입니다. 요구사항여러개의 아티클 Item이 세로 스크롤로 나열되어 있습니다.유저에게 잡히는 메인 Item은 투명도 조절 없이, 그 외 Item은 불투명하게 화면에 표현하여 메인 아티클을 강요합니다.위와 같은 요구사항을 만족시키기 위한 방법으로 Lazy Loading에 많이 활용되는 Intersection Observer를 활용하면 좋을..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다. 이전 학습내용 React의 특징과 장점, 적용 예제까지! https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0 개요 이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 ..

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다. 10주 동안 100여 명 정도 되는 사람들과 React와 TypeScript에 대해 함께 학습하게 되었는데 (NomadCoder) 진행하는 김에 학습하는 내용을 꾸준히 정리해 보려고 합니다! 이번 주제는 React를 학습하는 이유와 JSX를 활용하지 않는 React 문법 작성법에 대해 알아보겠습니다. 왜 React를 학습해야 하는가? 제가 처음 React를 학습하게 된 이유는 많은 회사에서 사용된 검증된 라이브러리라는 점이 가장 큰 메리트로 느껴졌습니다. 강의에서도 비슷한 내용과 그 외 추가적인 이유와 함께 리액트를 왜 학습하고 그 장점에 대한 소개가 있었습니다. 개발자에게 중요한 자원중 하나는 시간! 학습한 내용이 몇년뒤에 잊히는 게 아닌 꾸준히 사용할 ..