본문 바로가기

전체 글

 (121)
Week 14-18. 최종 프로젝트(나만무) 회고 2/24(토)에 나만무 최종 발표를 했다. 그동안 잠시 휴식도 취하고, 이력서 초안도 작성하느라 뒤늦게 후기를 작성한다.  결론부터 얘기하자면, 나만무는 정글 생활 중 가장 기억에 남을 하이라이트 기간이었다. 정말 힘들었고 가끔은 외면하고 때려치고도 싶었지만, 꽤 그럴싸한 프로그램이 탄생했을 때의 보람과 최종 발표 후의 뿌듯함은 정말.. 이루 말할 수 없다. 그리고, '당분간 몇 년은 개발자로 살아도 되겠네!' 라는 확신을 갖게 해준 고마운 과정이었다. 감사해요 정글~ 아직 제대로된 프로젝트 경험도 없고, 백엔드/프론트엔드 조차 결정하지 않았던 나는 나만무 직전에 '사람에 대한 이해가 중요한 직군'이라는 동기의 말에 이끌려 프론트엔드를 선택하게 되었다. 그리고 이번 프로젝트를 경험하면서 프론트엔드에 큰..
Week 12~13. 기술스택 학습 기간 회고 이번 기수부터 추가된 '실력 다지기' 기간이 끝났다. 해당 기간은 프론트엔드/백엔드에 주로 쓰이는 웹 프레임워크를 2주동안 자율적으로 학습하는 시간이다. 나는 프론트엔드에 흥미를 느꼈기 때문에 HTML, CSS에 대한 복습부터 자바스크립트, 리액트에 대한 학습을 진행했다. 하루에 대략 15~16시간을 학습했지만, 그럼에도 2주라는 기간이 이 지식들을 충분히 익히기에는 많이 부족하다고 생각한다. 그래서 어떻게 하면 이 기간을 의미있게 쓸 수 있을까에 대해서 많이 고민했다. 결국 2주간 최대한 이해도를 높여서 프로젝트에 들어가는 것이 목적이었기에, 노레퍼런스/노기획/노디자인의 CRUD 게시판을 만들면서 리액트 프레임워크 활용법에 대해 고민하고 익숙해지는 것에만 대부분의 에너지를 썼다. 결과물로 나온 게시판..
JavaScript | 스프레드 연산자, forEach, map 기본 개념 만일 다음과 같은 코드가 있다면, const str = 'abcde'; [...str].map((e)=>console.log(e)); [...str].forEach((e)=>console.log(e)); map을 이용한 출력문과 forEach를 이용한 출력문은 각각 같은 결과를 낼 것이다. a b c d e 여기에 쓰인 스프레드 연산자, map 함수, forEach 함수는 자바스크립트 개발에서 아주 유용하게 쓰이는 것들이다. 스프레드 연산자 [... OO]에 대하여 [... OO] 구문에서 '...'에 해당하는 부분은 자바스크립트에서 '스프레드(spread) 연산자'라고 불린다. 이 연산자는 이터러블(iterable) 객체의 개별 요소를 분리하여, 각 개별 요소들을 새로운 배열에 담아 반환한다. 위 예제..
네트워크 | TCP/IP Updated 모델 (5계층 모델) 이전에 TCP/IP 모델 이론에 대해서 공부한 적이 있다.네트워크 모델 | (1) OSI 모델, TCP/IP 모델 개요네트워크 모델 | (5) 데이터 단위와 흐름 이해하기<a style="color: #0070d1;" href="https://hyuga.tistory..
React | 컴포넌트의 생명주기, useEffect Life cycle: 마운팅 - 업데이트 - 언마운팅 Mount: 컴포넌트가 화면에 나타나는 것 Update: 컴포넌트가 업데이트되어 리렌더되는 것 Unmount: 컴포넌트가 화면에서 사라지는 것 useEffect로 생명주기 핸들링하기 리액트는 라이프 사이클마다 실행할 수 있는 메서드를 가지고 있는데, 이들은 함수형이 아니라 클래스형 컴포넌트에서만 사용할 수 있다. componentDidMount componentDidUpdate componentWillUnmount 그러나 앞서 배웠듯 이러한 메서드들은 리액트 훅을 통해 함수형 컴포넌트에서도 사용 가능해졌다. 컴포넌트 생명주기를 핸들링하는 기능은 useEffect 라는 훅을 통해 구현된다. 첫번째 파라미터에는 콜백함수(Clean-up 함수)가 들어간다...
JavaScript | JS 엔진과 런타임 환경의 구조 (스택, 힙, 이벤트루프 ..) 자바스크립트는 싱글 스레드 언어로 설계되었다. 그러나 Blocking I/O를 효율적으로 처리하기 위해 비동기 처리를 가능케 하는 여러 메커니즘과 함께 동작한다. 이러한 메커니즘은 자바스크립트 엔진(V8 엔진 등)과 런타임 환경(대부분의 경우 웹 브라우저, 또는 Node.js 같은 서버 사이드 환경)에 의해 제공된다. 이들을 포함한 자바스크립트의 핵심 구성 요소에는 콜 스택, 힙, 이벤트 루프, 태스크 큐(또는 이벤트 큐)가 있으며, 추가적으로 마이크로태스크 큐와 웹 API도 중요한 역할을 한다. 시간관계상 더 자세한 내용은 다음에 학습하기로 하고, 오늘은 오버뷰만 해보도록 하자! 1. 자바스크립트 엔진 내부 구성요소 자바스크립트 엔진(대표적으로 크롬의 V8) 내부의 구성요소로는 콜 스택, 힙이 있다. ..
AWS 클라우드 서비스 교육 필기 AWS General Immersion Day 포지션 소개 Solution Architects: 엔터프라이즈에서 서비스 런칭할 때 AWS 상 아키텍쳐 조언 Technical Account Manager: 기업에서 발생하는 각종 이슈들 조언 AWS 글로벌 인프라 대체로 가까운 리전, 가용영역(AZ)에 서비스 연결 하나의 가용영역(AZ)이 뻑나도 문제 없게 설계. 데이터센터 뿐 아니라 글로벌 네트워크도 갖고 있음. 가용 영역(AZ)은 AWS 리전에서 중복 전력, 네트워킹 및 연결을 지원하는 하나 이상의 개별 데이터 센터입니다. AZ를 사용하면 단일 데이터 센터보다 더 높은 가용성, 내결함성 및 확장성을 갖춘 프로덕션 애플리케이션과 데이터베이스를 운영할 수 있습니다. 서브넷에서 실행되는 애플리케이션을 여러 A..
React | State(상태) 관리, Props 전달의 기본 개념 State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제를 ..

티스토리툴바