본문 바로가기

전체 글57

[log] 엘리스 SW 엔지니어 트랙 회고 & 새로운 계획 2021년 9월에 내가 썼던 글이다. '앞으로 공부하면서 이런 걸 알아 가야지...' 하는 마음으로 작성했던 체크리스트인데, 놀랍게도 이 글을 쓴 다음 날 엘리스 SW 엔지니어 트랙 1차 서류전형에 합격했다는 연락을 받았고 실제로 저 항목 중 대다수를 엘리스에서 공부하게 되었다. 9월에 이 글을 쓴 이후로 내용을 계속 떠올리거나 의식하고 있지 않았는데, 코스가 끝난 지금 대부분의 항목을 이해하고 있다. 옳은 방향으로 잘 가고 있다는 안도감이 든다. 16주의 기간 동안 많은 것을 배웠다. 배운 것들을 간단히 정리해보았다. 1주차: HTML과 CSS, 웹의 기초, git의 활용 2주차: JavaScript 기초(자료형, 변수, for문) 3주차: JavaScript(DOM, scope, 함수) 4주차: Ja.. 2022. 3. 14.
[JS] 이벤트 위임 - 1억개의 자녀요소를 한 번에 통제하기 event delegation CSS에서 부모의 속성이 자녀에게 상속되는 것처럼, 부모의 요소에 특정 이벤트 핸들러를 할당했다면 그것이 자녀에도 그대로 적용되는 것을 이벤트 위임(event delegation)이라고 합니다. event delegation의 활용 API를 통해 사용자의 친구 정보를 불러 온다고 가정해봅시다. 등록된 친구가 5명이라면 데이터 배열안에 다섯 사람 분량의 정보가 담겨 있을 것이고, 100명이라면 100명의 정보가 담겨있을 것입니다. 받아온 정보를 가지고 이름 정보의 태그들을 태그안에 넣어주는 함수를 만들었습니다. 코드를 확인해볼까요? See the Pen Untitled by JO SEOYOUNG (@seoyoung-dev) on CodePen. 사용자에 따라 1명의 친구 등록.. 2022. 3. 6.
[JS] 이벤트 루프 ▷ 동기, 비동기 처리 자바스크립트는 단 하나의 실행 컨텍스트 스택을 가지고 싱글 스레드 방식으로 동작하는데, 이는 한 번에 한가지 일(task)를 처리할 수 있다는 의미이다. 따라서 블로킹(blocking), 즉 특정 태스크를 실행하는 동안 작업이 중단되는 현상이 나타난다. // synchronous function rest(delay) { const delayUntil = Date.now() + delay; while(Date.now() < delayUntil); console.log('finished'); } rest(3*1000) 위 코드를 실행하게 되면 3초 후에 'finished' 라는 메시지를 확인할 수 있다. 이처럼 태스크를 순서대로 하나씩 처리하는 것을 동기(syncronous)처리라고 .. 2022. 1. 27.
[React] useEffect (parameter, clean-up) ▷ useEffect parameter 유무에 따른 차이 #1 두번째 인자(dependency)가 없는 경우 function App() { const [isOn, setIsOn] = useState(false); useEffect(() => { fetch('http://example.com') .then(res => console.log(res)) }); } : useEffect에 인자를 넣지 않고 생략하면 state가 바뀔때마다(DOM이 변화할때마다) 무조건적으로 해당 effect를 실행 #2 두번째 인자가 빈 배열([])인 경우 function App() { const [isOn, setIsOn] = useState(false); useEffect(() => { fetch('http://example.. 2022. 1. 19.
[React] useReducer ▷ useReducer( ) - useState()의 대체 함수로 많이 사용 - useState()보다 상대적으로 복잡하고 많은 데이터를 관리하기 위하여 사용 const [, ] = useReducer(, , ) reducer 함수: 현재 상태의 객체(state)와 수행할 행동 객체(action)을 인자로 받아서 새로운 상태 객체를 반환하는 함수 dispatch 함수: 인자로 reducer 함수에 넘길 행동 객체(type)를 받음, 컴포넌트 내에서 상태 변경을 일으키기 위하여 사용 import ReactDOM from 'react-dom'; import React, { useReducer } from 'react' // count의 초기 state를 0으로 설정 const initialState = {c.. 2022. 1. 19.
[TIL] 2022-01-18 (input tag properties, arrow function) ▷ input tag properties import React, { useState } from "react"; function Problem(props) { return {props.text} ; } const GradingForm = (event) => { const [score, setScore] = useState(0) const answer1 = "아닌 밤중에 홍두깨"; const answer2 = "세살 버릇이 여든까지 간다"; const handleSubmit = (event) => { event.preventDefault(); let totalscore = 0 if (event.target.answer_one.value === answer1) totalscore += 50 if (even.. 2022. 1. 18.
[log] 2021년 회고록 2021년은 그냥 무던하게 지나간 해라고 생각했는데, 막상 글을 쓰려고 보니 여러 가지 일들이 떠오른다. 임용고시와 졸업 작년 11월 쯤에 인생 처음이자 마지막으로 임용고시를 보았다. 시험 당일 아침으로 먹을 만한 게 딱히 없어서 (먹으면 시험에서 미끌어진다는) 미역국을 먹고 시험장을 가고, 시험장에 들어가서도 좌석을 잘못 앉아서 친구가 눈치를 주는 등 시트콤 같은 하루였던 것 같았다. 그냥 시험장이나 구경해보자 라는 생각으로 갔지만 고사장에서 긴장한 임고생들, 어쩌면 예민하기까지 한 그들을 보면서 나도 어서 목표를 정하고 그 목표를 이루기위해 치열하게 살고 싶다는 생각을 했던 것 같다. 그런 생각을 하면서 2월에 졸업을 했다. 개발입문 요즘 대학생들을 1학년 기초교양으로 코딩을 배운다는 말을 듣고 코딩.. 2022. 1. 1.
[JS] find, findIndex, indexOf, includes 비교 ▷ find( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 값을 반환, 없다면 undefined를 반환 const array1 = [5, 12, 8, 130, 44]; const found = array1.find(element => element > 10); // 12 ▷ findIndex( ) : 주어진 판별 함수를 만족하는 첫번째 요소의 인덱스을 반환, 없다면 -1을 반환 const array1 = [5, 12, 8, 130, 44]; const isLargeNumber = (element) => element > 13; console.log(array1.findIndex(isLargeNumber)); // 3 ▷ indexOf( ) : 문자열 혹은 배열에서 지정된 요소를 찾을 수 있는 첫번째.. 2021. 12. 27.
[JS] JSON(Javascript Object Notation) ▷ JSON - 데이터 전송을 목적으로 사용 - 문자열 상태로 존재 - parsing: 문자열을 네이티브 객체로 변환 stringfication: 객체를 문자열로 전환(네트워크를 통해 전달 목적) - JSON은 순수한 데이터 포멧으로 구성됨 - 값을 표현할 때 문자열, 숫자, 불 자료형만 사용할 수 있음(함수 등은 사용불가) - JSON에서 문자열을 표현할 때는 오직 큰따옴표("")만 사용가능 - key에도 반드시 따옴표를 붙어야 함 2021. 12. 26.
[Git] git 협업 (branch, merge request, pull, origin, main, HEAD) ▷ 협업시 pull의 중요성 - master가 아닌 branch에서 본인이 개인 작업을 하고 있을 때, 팀원이 merge request를 하는 등 master의 내용이 변경된다면 그것을 최신버전으로 업데이트해주어야 한다 - conflict가 발생하는 상황을 방지하기 위해서 자주해주는 것이 좋다 ▷ branch 활용 명령어 - $ git remote update: branch를 업데이트 - $ git branch : 현재 branch를 확인할 수 있음 - $ git branch -a : 로컬, 원격 모든 저장소의 branch 리스트를 확인할 수 있음 - $ git branch -r : 원격 저장소의 branch 리스트를 볼 수 있음 - $ git checkout : 해당 branch로 이동 ▷ 작업물을 원.. 2021. 12. 20.

티스토리툴바