전체 글
-
React - useMemo와 useCallbackReact/기본 2020. 11. 15. 23:03
useMemo란? 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시킬 수 있는 Hooks를 말한다. 예제를 통해 알아보자. 먼저 리스트에 숫자를 추가하면 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트를 작성해보자. Average.js import React, { useState } from "react"; const getAverage = (numbers) => { console.log("평균값 계산 중..."); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numbers.length; }; const Average = () => { const [list, setList] = us..
-
자바스크립트 - Clean Code(변수)JavaScript/클린 코드 2020. 10. 10. 15:33
들어가기에 앞서, 클린 코드에 대해서 포스팅하는 이유는 최근에 회사 인턴을 다시 하면서 다른 사람의 코드를 보고 이해해야 하는 경우가 많아졌다. 저도 동료 개발자와 협업하기 때문에 좋은 개발자가 되기 위해서는 코드가 정상적으로 작동하는 것과 더불어, Clean Code를 작성하는 능력 또한 필요하다는 생각이 들었다. 그래서 소프트웨어 방법론에 관한 책들 중 Robert C. Martin's의 책인 Clean Code에 있는 내용을 자바스크립트에 적용시킨 글을 가지고 정리된 내용을 토대로 기록하려고 한다. 🎈 참고! 구름EDU - 모두를 위한 맞춤형 IT교육 구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍..
-
자바스크립트 - async / await?JavaScript/동작원리 2020. 9. 19. 15:42
aysnc await이란? 콜백 함수나 프로미스처럼 비동기를 다루는 자바스크립트 패턴 중 하나이며 가장 최근에 나온 Es7문법이다. 프로미스랑은 조금 다른 사용법을 가지고 있으며 프로미스를 이용하는 아이라고 생각하면 된다. aysnc 키워드 예제를 통해 async 키워드부터 알아보자. // async 키워드가 없는 일반 함수 function myFunc(){ return 'func'; } // async 키워드가 있는 함수 async function myAsync(){ return 'async'; } console.log(myFunc()); console.log(myAsync()); 출력 화면 출력 결과를 보면 서로 다른 것을 확인할 수 있다. 첫 번째 myFunc() 함수는 생각했던 대로 func가 반..
-
[level1] - 시저 암호programmers/level1 2020. 9. 16. 12:20
코딩테스트 연습 - 시저 암호 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 AB는 1만큼 밀면 BC가 되고, 3만큼 밀면 DE가 됩니다. z는 1만큼 밀면 a가 programmers.co.kr 문제 설명 : 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 AB는 1만큼 밀면 BC가 되고, 3만큼 밀면 DE가 됩니다. z는 1만큼 밀면 a가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한 조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의..
-
[level1] - Summer/Winter Coding(~2018) 예산programmers/level1 2020. 9. 15. 11:44
코딩테스트 연습 - 예산 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 �� programmers.co.kr 문제 설명 : S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금..
-
자바스크립트 - PromiseJavaScript/동작원리 2020. 9. 6. 18:54
Promise란? 자바스크립트에서 비동기 동작을 다루는 하나의 패턴이며, 어떤 일의 진행 상태를 나타내는 객체로, 진행 "상태"와 "값"이라는 속성을 가지고 있는 것을 말한다. Promise가 생긴 이유 Promise 생기기 이전에는 비동기 처리를 콜백 함수나 ajax 메소드를 통해서 처리해왔다. jQuery ajax 메소드 비동기 처리 $.ajax("http://a.com/api/book", (result) =>{ console.log(result); }); 위의 예제는 ajax 메소드를 통해 서버에 응답을 보내고 응답이 왔을 때, 콜백 함수를 통해 result로 응답을 받아 처리하는 예제이다. setTimeout() 비동기 함수 setTimeout()은 비동기 동작을 하는 함수를 말한다. functi..
-
GOPIZZA 한달 인턴 마치고..!나의 경험치/인턴 2020. 9. 4. 17:19
GOPIZZZA는?! 나의 첫 인턴 회사이며, 인턴 기간이 끝나 지난 한 달 동안 회사를 다니면서 경험했던 일들을 끄집어내어 기록하려고 한다. 왜 이제서야 기록하는지? 사실 인턴 끝난 건 7월 중순쯤 이였다. 한 달간 진행 되었던 인턴이 끝나고, 스터디를 하면서 오랜만에 휴식을 보내고 있었다. 그러던 중 7월 말에 제주도를 가게 되었고, 내려가서 오랜만에 가족들도 만나고 친구들도 만나고 하다 보니, 벌써 한 달이라는 시간이 금방 지나갔다. 아! 참고로 필자는 제주도에서 태어났고 학업 때문에 서울로 올라오게 되었다. 그 한 달 동안은? 인턴이 끝난 후 같이 인턴 했던 동료들은 바로 구직 활동을 시작했지만, 저는 프로젝트에 대해 약간의 아쉬움? 이 남아서 잠깐의 휴식 시간을 가지며 스스로 그동안 적용 못했던..
-
자바스크립트 - this?!JavaScript/기본 2020. 9. 3. 15:42
들어가기 전에, 먼저 대표적으로 JAVA 같은 객체지향 언어에서의 this는 클래스 인스턴스의 레퍼런스 변수를 말한다. 즉, 클래스(자세히는 인스턴스화 된 객체) 자기 자신을 뜻 한다는 의미이다. 하지만 자바스크립트에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작한다. 다르게 동작하기 때문에 많이 헷갈리는 것 같다. 자바스크립트에서는 선언할 때 값이 결정되는 것이 있는데 그것을 클로져라고 하고, 반면에 호출하는 방법에 의해서 값이 결정되는 것이 있는데 그것을 바로 this라고 한다. 그 this를 낱낱이 파헤쳐보도록 하자. this는 대체 무엇인가? 할머니 : 나는 허리가 아프다. (나 === 👵) 아버지 : 나는 다리가 아프다. (나 === 👨) 어머니 : 나는 머리가 아프다. (..