본문 바로가기

분류 전체보기168

210101_TIL (복습하는 날) 🍎 오늘 배운 것 ✔️ for문, forEach문의 동작 차이 전 페어분이 재귀 문제를 다시 풀어보다가 for문을 사용하면 통과되는데 forEach문을 사용하면 통과가 되지 않는 문제가 있다고 말해주셔서, 찾아보니 for문에서 return은 break처럼 작동하지만 forEach문은 continue처럼 작동한다는 것을 알게 되었다. 결국 forEach를 사용하면 리턴문을 만나도 바로 반복이 종료되지 않고 계속 다음 반복이 실행되는게 문제의 원인이었다. 그래서 조건이나 변수의 변동사항을 반영해야 하는 경우에는 for문을 쓰는 것을 권유한다고 한다. for문을 그냥 간단히 표현한게 forEach문이라고 생각하고 있었는데 페어분 덕에 새로운 사실을 알게되었다. 참고링크 🍎 더 공부할 것 ✔️ 지금까지 배운 것.. 2021. 1. 2.
201231_TIL (재귀문제풀기) 🍎 오늘 배운 것 ✔️ 재귀 문제를 구조는 비슷하지만 더 작은 문제로 쪼갤 수 있을 때 유용한 접근 방법인 '재귀'에 대해 배우고 관련된 문제를 풀어봤다. 재귀는 자기 자신을 호출하는 함수인데, 처음 공부할 때는 너무 추상적이라 내가 제대로 이해한건지 잘 모르겠었다. 그래도 문제를 풀다보니까 '더 작은 문제로 쪼갠다' 것이 무슨 의미인지 알 수 있었다. 아직 하나하나 그림그리고 적어가면서 풀어야하는 단계라 주말동안 더 복습하고 연습해야겠다. 특히 처음부터 base case와 recursive case로 나눠서 생각하는 방법을 좀 더 익혀야겠다. 무엇보다 재귀를 좋아해보도록 노력해야지..😢 🍎 더 공부할 것 ✔️ 재귀 함수 활용 대표적으로 JSON 구조나 DOM 구조가 포함된 트리 구조에 재귀 함수를 활용.. 2020. 12. 31.
201230_TIL (비동기, 메모이제이션) 🍎 오늘 배운 것 ✔️ 동기, 비동기 방식 비동기 처리 방법을 배우기에 앞서, 동기와 비동기 방식의 차이점에 대해 먼저 배웠다. 동기(sync)는 현재 실행중인 코드부터 완료하고 다음 코드를 처리하는 방식, 비동기(async)는 현재 실행 중인 코드가 완료된 지와는 상관없이, 바로 다음 코드로 넘어가는 방식이다. 더 나아가서는 Timer API를 통해 비동기를 구현하는 방법에 대해서도 배웠다. ✔️ callback 함수 얼마전에도 callback함수에 대해 배우긴 했었는데, 사용하는데 무리가 없어서 그 때는 그냥 인자로 쓰이는 함수 정도로 이해하고 넘어갔었다. 근데 비동기 방식과 관련된 문제를 풀다보니 callback함수를 활용하는 부분에서 뭔가 막히는 느낌이 들어서 다시 찾아봤다. 전과는 다르게 클로저.. 2020. 12. 30.
비동기 호출 (3) Timer API 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API 비동기 방식에 대해 배웠으니, 이제 비동기 호출 함수를 이용하는 Timer API에 대해 알아보도록 하자. 여기서 Timer란 일정한 주기마다 특정 함수를 실행시키는 함수를 의미한다. Timer API의 세 가지 대표적인 메서드(setTimeout, setInterval, clearInterval )는 어떤 식으로 사용할 수 있는지 간단히 소개하려고 한다. setTimeout(callback, millisecond) setTimeout은 일정 시간 후에 함수를 한번 실행하는 메서드이다. 타이머가 만료된 뒤, 함수나 지정된 코드를 실행하게 만들어준다. clearTime.. 2020. 12. 30.
비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API Blocking vs Non-Blocking ✔️ Blocking 다른 작업을 하려면, 하던 작업을 멈춰야 함 요청에 대한 결과들이 동시에 일어남 ✔️ Non-Blocking 다른 작업을 확인만 하고, 미룰 수 있음 요청에 대한 결과들이 동시에 일어나지 않음 Blocking을 전화, Non-Blocking을 문자에 비유해서 생각하면 좀 더 이해하기 쉽다. 전화는 하던 작업을 멈추고 받아야하지만, 문자는 확인만 한 후 답장을 미룰 수 있다. 이제 이 두 가지 개념을 바탕으로 동기적 처리, 비동기적 처리에 대해 알아보려고 한다. (블럭&논블럭는 함수호출과 관련된 개념이고.. 2020. 12. 30.
비동기 호출 (1) callback 함수 비동기 호출 (1) callback 함수 비동기 호출 (2) 동기(sync) vs 비동기(async) 비동기 호출 (3) Timer API Callback 함수 callback함수는 '다른함수의 전달인자(argument)로 넘겨주는 함수'이다. parameter를 넘겨받는 함수는 callback함수를 필요에 따라 즉시 실행할 수도 있고, 나중에 실행할 수도 있다. 아래 예시에서는 B가 parameter로 쓰이는 'callback함수'이고, A는 B를 parameter로 쓰는 함수이다. ✔️ 즉시 실행 = synchronously (동기) ✔️ 나중에 실행 = asynchronously (비동기) function B(){ console.log('나중'); } function A(callback){ call.. 2020. 12. 30.
201229_TIL 🍎 오늘 배운 것 ✔️ Underbar ~Part2 Javascript 라이브러리 중 배열, 객체를 다루는 Underscore.js의 함수들을 하나하나 직접 구현해봤다. 하루종일 하드 트레이닝한 덕분에 쓸 때마다 헷갈리던 forEach나 map, reduce 같은 배열 내장 메서드의 원리를 이해하고, 사용하는 데 자신감이 좀 생긴 것 같다..! ✔️ sort() 내장 메서드 sort()는 배열 요소들을 적절하게 정렬한 후, 그 배열을 반환한다. arr.sort([compareFunction]) 와 같은 방식으로 사용하는데, 정렬 순서를 정의하는 함수인 compareFunction은 생략 가능하다. 이 함수가 생략되면 배열의 요소들은 문자열로 취급되어 유니코드를 기준으로 정렬된다. compareFuncti.. 2020. 12. 30.
201228_TIL 🍎 오늘 한 것 ✔️ twittler - 랜덤 데이터 불러오기 Math.random()을 이용하면 난수를 생성할 수 있고, Math.random() * (max - min)) + min 으로 난수 생성 범위를 지정할 수 있으며, Math.floor로 그 범위를 정수로 지정할 수 있었다. 이렇게 만든 난수를 배열의 인덱스로 사용해서, 기존의 데이터 배열에서 랜덤 데이터를 추출해 불러오도록 만들었다. ✔️ twittler - 좋아요, 싫어요 버튼 추가 새로 업로드되는 게시물에 있는 버튼은 클래스명이 겹쳐 작동하지 않는 문제가 있었다. 어제부터 여러 시도를 해보다가 결국 selectorAll과 반복문을 사용해 해결했다. selectorAll은 선택된 요소들을 배열 형태로 반환해주기 때문에, 반복문을 사용하면 .. 2020. 12. 29.
로컬 스토리지 (localStorage), JSON 브라우저 상에 데이터를 저장하지 않는 경우, 새로고침 버튼을 누르면 버튼을 누르기 전까지 입력했던 데이터가 초기화되어버린다. 데이터가 중요하거나, 브라우저를 껐다가 켜도 유지되도록 만들고 싶다면 '로컬 스토리지' 기술을 사용해야한다. 웹 스토리지 좀 더 큰 범주인 '웹 스토리지(web storage)'에 대해 먼저 알아보자. 웹 스토리지에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있다. 둘은 데이터가 '어떤 범위에서, 얼마나 보존되는지'에 차이가 있다. 간단히 말하면, 로컬 스토리지는 웹페이지 세션이 끝나도 데이터가 지워지지 않지만, 세션 스토리지는 웹페이지의 세션이 끝나면 데이터가 지워진다고 생각하면 된다. 세션 : 방문자가 웹 브라우저를 통해 웹 서버에 .. 2020. 12. 28.
201227_TIL 🍎 오늘 한 것 ✔️ twittler 좋아요, 싫어요 버튼 추가하기 각 게시물들에 좋아요, 싫어요 버튼을 추가했다. HTML, CSS 까지는 마치고 Javascript를 통해 새 게시물이 등록될 때마다 버튼이 함께 생성되고, 게시물의 데이터 객체에도 좋아요개수, 싫어요개수를 세는 속성을 추가하는 것 까지 마쳤다. 그런데 event.target을 썼을 때 클래스명을 모든 버튼들이 공유해버려서 타겟 설정이 안되는 문제가 있었다. 이 부분을 마저 개선하는 중이다. 아래와 같은 시도들을 우선 해봤고, 세 번째 시도는 내일 마저 해보려고 한다 시도 1. 각각의 버튼에 id값이 추가된 클래스를 추가로 부여하기 (btn1, btn2 ...) 시도 2. selectorAll로 반환된 배열, 반복문을 이용하기 시도 3... 2020. 12. 28.
회원가입 페이지 만들기 (유효성 검사) 회원가입을 하다보면 대부분 id는 8글자 이상, 비밀번호는 숫자/특수문자/영문자를 조합해서 만들라고 한다. 귀찮아서 대충 입력하면, 다시 입력하라는 경고 문구(?)같은게 나온다. 즉, 정해진 형식에 맞게 입력해야만 하도록 조건을 지정해두고, 조건에 맞지 않는 경우에는 다시 입력하라는 피드백을 주는 것이다. 이렇게 입력값이 '유효한지'를 검사하는게 바로 유효성 검사(form validation)이다. 이런 '유효성 검사'를 통해 회원가입을 하는 웹페이지를 만들어봤는데, 자세한 코드는 생략하고 새로 배운 기능이나 기억할만한 것들만 간략히 정리해보려고 한다. 전체적인 과정은 아래와 같은 순서로 진행했다. 1. 목업 만들기 (HTML, CSS) 2. 유효성 검증 함수 구현하기 3. 요소들에 이벤트 연결하기 1... 2020. 12. 25.
201224_TIL 🍎 오늘 한 것 ✔️ 회원가입 유효성 검사 회원 가입 창을 만들어, 아이디와 비밀번호를 원하는 형식(8자리 이상, 특수문자/숫자/영문 포함 등)에 맞춰 입력하는 경우에만 회원가입이 완료되고, 아닌 경우에는 피드백을 해주는 유효성 검사 페이지를 만들었다. 조건은 특정한 형식을 만족시켜야 했기 때문에 정규표현식을 이용해 작성했다. 다시 입력하라고 피드백을 주는 부분은 classList.add와 classList.remove 를 이용해 피드백용 스타일이 적용된 클래스를 추가했다가 제거하는 식으로 작성했다. ✔️ twittler 실시간 업로드 원래는 하드코딩으로 html에서 하나하나 입력하는 식으로 게시글들을 작성해뒀어서 실제로는 아무것도 실행되지 않는 목업파일에 불과했다. 오늘은 객체 형식의 데이터를 이용해 .. 2020. 12. 25.
반응형

티스토리툴바