본문 바로가기

코딩

 (157)
리액트, 원하는 게시글의 댓글 목록만 열기(feat. map함수) 요즘 리액트를 이용해 SNS를 구현하고 있다. 게시글의 댓글 아이콘을 클릭하면 댓글 목록이 렌더링 되도록 하고싶었는데 문제가 발생했다. 바로 한 개의 게시글에서만 댓글 아이콘을 눌러도 다른 게시글의 댓글 목록이 모두 열리는 것. 사실 멋쟁이사자처럼에서 프로젝트를 진행했을 때 해당 기능을 구현해보았었다. 2023.08.31 - [코딩/ReactJS] - react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) react에서 댓글 기능 구현하기(선택된 컴포넌트만 댓글UI 보여주기) 오늘 하루종일 씨름한 댓글 기능 구현하기 후기... 기존에 댓글 기능을 간단하게 구현해두었지만 서버와의 연동을 위해서 조금 손보고자 시작한게 하루를 뚝딱 집어삼켜버렸다. 처음에는 그냥 a bebutae.tistory..
42경산 라피신 예습, 윈도우에 우분투 설치하고, 터미널에서 vi 에디터로 C언어 코드 작성하고 실행해보기 42경산은 윈도우도, 맥OS도 아닌 우분투 환경에서 과제를 해결해야 한다고 합니다. 게다가 C언어를 활용하여 라피신 과정을 진행해야 합니다. 산넘어 산인게 테스트는 터미널을 활용해서 진행해야 한다고 합니다. 그럼 결국 C언어를 터미널 환경에서 활용할 수 있어야 한다는 뜻입니다. 그래서 라피신 예습을 위한 우분투 환경 구축 및 vi 에디터를 활용한 C언어 코딩 방법에 대해 알아보고자 합니다. 우분투 환경은 윈도우가 설치된 PC가 있다면 생각보다 쉽게 구축할 수 있습니다. 여러분 혹시 WSL을 아시나요? WSL은 Windows Subsystem Linux의 약자인데, 말그대로 윈도우에서 리눅스 환경을 사용할 수 있도록 해주는 도구입니다. 우리는 WSL2를 이용해서 윈도우 PC에 우분투를 설치해보겠습니다. 우..
42경산 체크인 미팅 후기 오늘 대구대학교에서 이루어진 42경산 체크인 미팅에 다녀왔습니다. 앞으로 창파도서관 자유열람관에서 42경산의 모든 과정이 진행될텐데, 오늘 방문해본 42경산의 교육장은 공사중이긴 했지만 상당히 깔끔하게 꾸며지고 있었습니다. 사진에 보이는 유리창 너머의 의자에서 체크인 미팅이 이루어졌습니다. 체크인 미팅은 정말 단순히 신분 확인이 주 목적이라 딱히 크게 후기로 쓸만한 내용이 없지만, 대구대학교의 42경산 학습장소를 방문한 후기와 QnA 시간에 얻은 정보를 바탕으로 포스팅을 작성해 보겠습니다. 1. 42경산에서는 아이맥을 사용하지 않는다. 최근 맥 운영체제 업데이트 후 이슈가 많이 발생해서 맥OS가 아닌 우분투 시스템을 셋팅한다고 합니다. 요청에 따라, 상황에 따라 변동이 가능할 수도 있다고 하긴 하는데, ..
리액트 토이 프로젝트 - 기억력 게임 개선하기 지난번에 리액트를 이용한 토이 프로젝트인 '기억력 게임'을 만들어보았습니다. 2023.10.04 - [코딩/ReactJS] - 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트 bebutae.tistory.com 위 포스팅을 작성한 당시에는 시작 버튼도 없고, 카드를 선택해도 색상 변경이 되지 않는 문제가 있었습니다. 그래서 개선을 해보았습니다. 개선 후의 버전은 1.20버전이며, 시작하기 버튼이 생겼고, 선택..
42경산 1기 1차 체크인 미팅 신청 후기 및 소소한 꿀팁 오늘 오후 4시 42분에 42경산의 1기 1차 체크인 미팅 신청이 있었습니다. 42경산이라고 42분에 신청 받는 것 같은데 이런 광기, 나쁘지 않네요. 사무실에서 여유롭게 신청하려고 했는데, 메인 컴퓨터 윈도우11 업그레이드 과정에서 TPM모듈 이슈 때문에 시간이 지연되고, 설치 후 윈도우 업데이트가 불가능한 이슈 때문에 또 시간이 지연되고, 윈도우 업데이트가 불가능하니 드라이버를 수동으로 설치해야 해서 또 시간이 지연되었습니다. 결국 포터블 모니터가 부착된 서브 컴퓨터에서 겨우 체크인 미팅을 신청할 수 있었습니다. 신청은 상당히 스무스하게 성공할 수 있었는데, 이게 아직 42경산이 잘 알려지지 않아서 신청자가 적었던 것인지, 아니면 1기 1차라서 다들 간보느라 신청자가 적었던 것인지, 그것도 아니라면 ..
파이썬 쓰레드, 예제로 간단하게 알아보기 먼저 쓰레드를 한마디로 소개하자면, 쓰레드는 프로그램의 작업 단위입니다. 쓰레드를 이해하기 위해서는 우선 프로세스에 대해 인지하고 있어야 합니다. 프로세스는 우리가 실행하는 프로그램 자체를 의미합니다. 그리고 쓰레드는 프로세스 안에서 수행되는 작업의 단위를 의미합니다. 비유하자면 프로세스는 물건을 만들어내는 공장이고, 쓰레드는 물건을 만드는 일꾼입니다. 일꾼이 많으면 물건을 더 빨리, 많이 만들어낼 수 있고 공장의 작업효율은 올라갑니다. 마찬가지로 쓰레드가 여러개 존재하면 다중 작업을 더 빠르게 수행할 수 있고 프로세스의 동작 효율이 증가합니다. 그런데 기본적으로 파이썬은 하나의 프로세스에서 하나의 쓰레드만 사용합니다. def for문(): for i in range(5): print(i) def pri..
리액트 토이 프로젝트 - 기억력 게임 만들기(feat: 42경산 기억력 테스트) 42서울과 42경산의 기억력 테스트를 간단하게 맛볼 수 있도록 하기 위해서 순서에 맞춰 카드를 클릭하면 승리하는 게임을 리액트로 만들어보았습니다. 물론 에꼴42에서 주관하는 기억력 테스트와 다른점이 많습니다. 에꼴42에서는 여러개의 카드 중 몇개의 카드만 순서대로 반짝이고, 반짝였던 카드를 순서대로 클릭하면 승리합니다. 하지만 제가 만든 기억력 테스트는 화면에 표시된 카드 모두에 순서가 부여되고, 부여된 순서에 맞춰 카드를 클릭하면 승리합니다. 저는 이 토이 프로젝트에서 리액트를 사용하였고, 스타일 컴포넌트로 스타일을 주었습니다. 마지막으로 useEffect와 useState 훅을 이용해 코드를 작성하였습니다. 시작하기에 앞서 리액트 프로젝트를 생성하고, 스타일 컴포넌트를 설치하겠습니다. npx crea..
아주 쉽게 NestJS 백엔드 서버 만들어보기 자바의 스프링, 파이썬의 장고, 자바스크립트의 익스프레스 이 세가지 프레임워크들은 모두 각 언어의 백엔드 프레임워크입니다. 그리고 NestJS도 익스프레스와 같이 자바스크립트의 백엔드 프레임워크입니다. NestJS에 대해서는 더 소개할 내용들이 많지만, 간단하게 백엔드 서버를 하나 만들어보고 난 뒤에 다시 이야기해보도록 하겠습니다. NestJS를 사용하기 위해서는 우선 NodeJS가 설치되어있어야 합니다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크에서 NodeJS LTS 버전을 다운받아주세요. 여기서 왼쪽 것을 다운받으면 됩니다. 최신버..

티스토리툴바