분류 전체보기34 [Java Script] 05. 표현식과 문 ** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다. ** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부 정확한 정보전달이 있을 수 있습니다. 문 (statement) 이란? 프로그램의 기본 단위이자 최소 실행단위 컴퓨터에게 명령하는 한 문장 이라고 할 수 있다. 변수 선언문, 변수 할당문, 함수 선언문, 조건문, 반복문... 등등 이렇게 모든 실행 단위들을 문 (statement) 라고 할 수 있다. 그리고 이 문 (statement) 은 값 을 가지냐에 따라 표현식 과 표현식이 아닌 문 으로 나눌 수 있다. 값(value) ? 표현식이 평가되어 생성된 결과 var sum = 10 + 20; ⇒ 30 이라는 값을 지닌다. 평가(evaluation) 라는 말이 들어가서 어.. 2022. 7. 25. [Java Script] 모던 자바스크립트 DEEP DIVE: 시작 & 04. 변수 ** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다. ** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부 정확한 정보전달이 있을 수 있습니다. 시작하면서... 작년에 코딩을 처음 접한 이후로 대부분의 이론은 최대한 적게 배우고 많이 활용하는 식으로 사용을 해 왔다. 한 가지 방법을 이해하기 위해서 알아야 될 것들이 끝이 없었기 때문이다. 그렇게 미뤄오던 Java Script의 이론을 이제는 배워야 할 것 같아서 "모던 자바스크립트 DEEP DIVE"를 읽게 되었다. ** 1 ~ 3 장은 직접적으로 정리할 만한 내용이 없어서 넘깁니다. 04. 변수 변수란? 코딩, 그리고 Java Scirpt 를 접하고 나서부터 계속 사용해 오던 변수. 이전 까지는 수학에서 x = 10 과 .. 2022. 7. 24. [React + TypeScript] 비동기 반복문으로 멋지게 처리하기 코드를 짜면서 비동기 처리 함수를 외부로 분리하고 비동기 처리를 반복문으로 처리하고 싶다면 어떻게 해야될까? 간단하게 알아보자. 1. 비동기 함수 작성 API와 통신하는 여러 비동기 함수가 있겠지만, 이번엔 통신 없이 비동기 처리를 하는 로직을 예시로 들 것이다. const createThunmbnail = async (file: File) => { return new Promise((resolve, reject) => { const reader = new FileReader(); // fileReader 인스턴스 생성 reader.readAsDataURL(file); // 데이터 주입 reader.onload = () => { //onlaod => 비동기로 처리된다. const img = new Ima.. 2022. 7. 22. [React] 부모 요소의 Event 제어하기 0. 개요 프로젝트를 구현하는 과정에서 이러한 List를 만들었다. 각 List는 클릭시 해당 페이지로 이동되고, 여기에 각 List를 제어하기 위한 체크박스도 추가했는데 체크박스 클릭시 체크박스 이벤트와 부모요소인 List의 이동 이벤트가 동시에 작동되었다. 부모 요소의 이벤트는 사용하지 않은 채 자식요소의 이벤트만 사용하고 싶다면 어떻게 해야될까? 1. 삽질기: e.preventDefault() 리액트를 배웠을 때, 다른 이벤트의 동작을 막기 위해 사용했던 e.preventDefault()를 사용했다. 결과는 역시 실패였다. 이유는 preventDefault 메서드는 현재 요소의 기본 이벤트를 막는 기능이기 때문이다. 즉, 위와 같은 상황에서 사용시, 체크박스의 체크 기능을 막아버리는 것이다. 2. .. 2022. 5. 31. [React] 리액트에서 멋지게 클래스 사용하기 들어가기 전에 글 전에 자극적인 제목 죄송합니다. 이 글은 정답이 아닙니다. 최근 공부하면서 여러 프론트엔드 개발자분들께 여쭤본 내용과 생각을 바탕으로 적은 글입니다. 한 사람의 의견이며, 피드백은 언제나 환영합니다. 0. 개요 최근 리액트로 프로젝트를 구성하면서 아키텍쳐, 테스트코드 등 여러 부분에 대해 공부하고 고민하는 중이었다. 특히 최근에 비즈니스 로직을 분리하여 코드 가독성과 재사용성을 높이는 방향에 고민중인데, 그러다보니 자연스럽게 함수형 프로그래밍과 메서드를 활용하게 되었다. 거기에 초안 작성을 끝낸 코드를 최적화 하기 위해 useCallback / memo를 활용하여 재랜더링을 막으려는데, useCallback과 memo를 정확히 사용했음에도 계속 컴포넌트가 재랜더링되는 문제가 발생하였다... 2022. 5. 28. [React] Input: Text 훌륭하게 구현하기 0. 글을 쓰게 된 계기 최근 Test Code 관련 강의를 수강하던 중, 소스코드의 input 이 아래와 같이 구현 된 것을 발견했다. const InputWithRef = () => { const inputRef = useRef(); const addPost = (post) => { // 글 추가하는 함수 } const onSubmit = () => { const { value } = inputRef.current; addPost(value) } return( ) } 코드 자체는 문제가 없는데, 무엇이 문제여서 글을 쓰게 됬을까? 1. 배운거랑 달라요! 정말 이 문제 때문이었다. 조금 더 자세히 말하자면 나는 input창을 useState를 이용하여 구현했는데, 해당 코드에서는 useRef를 이용하여.. 2022. 5. 20. 이전 1 2 3 4 5 6 다음
